Prompt playbook

One project → one flow in Banani. Make sure you do not mix different projects in one flow, as it will mess up the context within the project.

One goal per screen.

Use real copy/data.

Start with one layout, then iterate via version control.

Name components cleanly for faster handoff.

You can edit specific elements. You can choose them with a selector and tell Banani how you want to change it, directly in the prompt box.

Design a responsive landing page screen for a B2B analytics platform: hero with "Start free trial", three benefit cards with icons, logo wall, product screenshots, testimonial, pricing teaser, and a security/compliance strip. Minimal, enterprise.

Design a landing page screen for a D2C skincare vitamin C serum: hero with product image + "Shop now", ingredients grid, before/after carousel, UGC quotes, FAQ, sticky add-to-bag.

Design a developer API landing page screen: hero with code sample + "Get API key", features with icons, 3-step quickstart, docs preview, SLA & compliance, footer.

Create a subscription dashboard screen: KPI cards (MRR, Churn), 90-day MRR line chart, filterable customers table, sidebar nav, sticky header.

Create an operations dashboard screen for delivery: KPIs (On-time %, Orders Today), live courier map, active-orders table with status filters.

Create a sales dashboard screen: KPIs (Pipeline Value, Win Rate), stage bar chart, leads table with row actions.

Generate a Sign-in screen: email/password, Google & Microsoft SSO, compact layout, clear errors.

Generate a Sign-up screen: email, password with strength meter, legal links, and inline validation.

Generate a Password reset screen: email input, inline confirmation message; include back-to-login link.

Generate a 2FA code screen: 6-digit input, resend timer, recovery link.

Generate an SSO-first sign-in screen: prominent Okta/SAML button with fallback email login on the same screen.

Generate a Phone sign-in screen: phone input, code entry field; include "Send magic link" as secondary action.

Design an Onboarding — Create project screen: progress 1/4, template chooser, Back/Next, "Skip for now".

Design an Onboarding — Data source screen: selectable source cards, help text, and inline validation.

Design an Onboarding — Brand setup screen: color picker, typeface select, live preview, Next CTA.

Design an Onboarding — Completion screen: summary checklist and primary "Generate screens" CTA.

Create a Profile settings screen: avatar, name, email, save/cancel.

Create a Billing & subscription screen: plan card, invoices table, payment method card.

Create a Security settings screen: change password, 2FA toggle, and active sessions table.

Create a Notifications settings screen: email & web-push toggles with granular rows.

Create a Workspace members screen: member list, roles/permissions, and invite modal trigger.

Create a Developer settings screen: API keys (create/revoke/regenerate), webhooks (URL + secret), usage limits.

Design an Employee directory screen: search, dept/location filters, paginated list, right-side detail drawer (view/edit).

Design a Product inventory screen: SKU search, category filter, stock-status chips, right panel with images, pricing, variants.

Design a Support tickets screen: filters (status/assignee/priority), table + right detail view with timeline and internal notes.

Build a Reports dashboard screen + states: Empty (call to "Create first report"), Loading (skeleton), Error (retry banner).

Build a Messages inbox screen + empty state: illustration, guidance, "Start a new conversation" CTA.

Build a File library screen + error state: drag-and-drop upload, "Browse files" CTA; show error banner with retry.

For the iOS Finance app, create a Home tab screen: account balance, recent activity list, and a floating "Send" action.

For the iOS Finance app, create a Cards tab screen: card details, freeze toggle, PIN reveal with confirmation.

For the Android Fitness app, create a Today tab screen: daily summary, quick actions.

For the Android Fitness app, create a Workouts tab screen: a list with filters and a session preview.

For a PWA Social app, create a Feed screen: feed list, composer affordance, notifications badge.

Build a Checkout — Shipping form screen: name, address autocomplete, phone, inline validation, and an inline success row after submit.

Build an Expense reimbursement form screen: amount, category, date, receipt upload, currency validation; show success toast on submit.

Build a Job application form screen: sections (Personal, Experience, Links), real-time validation, autosave indicator.

Design a B2B SaaS pricing screen: Free/Pro/Business, monthly/annual toggle, feature compare table, FAQ, trust badges, "Start free trial".

Design a Developer platform pricing screen: usage-based slider, overage info, "Contact sales".

Design a Design tool pricing screen: three tiers, student-discount callout, tax/VAT note, sticky "Upgrade" bar.

Design a Consumer banking — Account overview screen: total balance (USD), checking & savings cards, last five transactions (merchant, category chip, amount, time), monthly spending chart, "Send money" primary CTA; quick actions: Add funds, Freeze card, Statements.

Build a KYC — Document selection screen: choose Passport or Driver's License with guidelines.

Build a KYC — Document capture screen: front/back placeholders, tips, inline quality checks.

Build a KYC — Selfie screen: camera frame, liveness countdown, capture button.

Build a KYC — Review & submit screen: thumbnails, name match warning area, submit CTA.

Build a Product detail page screen (unisex running shoe): gallery (5, zoom), price with discount badge (Was $130, Now $109), size selector (US 6–12), color swatches, review summary (4.6★, 312), shipping ETA by ZIP, sticky "Add to cart"; include slide-in cart overlay on the same screen with thumbnail, size/color, qty stepper, subtotal, free-shipping progress, "Checkout" CTA.

Design a One-page checkout screen with accordion sections: Shipping (name, address autocomplete, phone, delivery options), Payment (Apple Pay, Google Pay, or card fields with brand detection + save-card toggle), Review (items, totals, tax/VAT, promo code, address, payment); include trust badges, lock icon, money-back note, inline validation.

Create an Order success screen: order number, "Receipt sent to {email}", items summary, primary "Track order" CTA.

Create a Provider list screen: headshots, specialty, next available slot, rating; filters for insurance, distance, telehealth.

Create a Booking — Date & time screen: weekly calendar grid with slot selector and timezone hint.

Create a Booking — Details screen: visit reason (short text), insurance member ID, HIPAA notice.

Create a Booking — Confirmation screen: appointment summary, cancellation policy link, SMS reminder opt-in.

Design a Course player screen: video top, transcript panel with search (right), lesson list drawer with checkmarks, progress bar (e.g., 35%), controls (speed, captions, ±10s); below video: Resources (PDF, dataset) and "Mark lesson complete" CTA; include quiz modal (3 MCQs) on the same screen.

Make a Kanban board screen: columns Backlog/In Progress/Review/Done; task cards (title, assignee avatar, due-date chip, label color); drag-and-drop, quick add, bulk select, keyboard shortcut "N".

Design an AI workspace screen: chat thread (left), results pane (right), toolbar (New chat, Model selector, Attach file); bubbles with timestamps + copy; tool picker (Summarize, Translate, Extract entities); on run, show streaming dots, cancel, results card with inputs/outputs and "Download .txt" button; include history list and "Regenerate".

Create a Help-center home screen: search ("Search articles…"), top-categories grid (Getting Started, Billing, Integrations, Troubleshooting), Popular articles list.

Create a Help-center article screen: title, last-updated date, reading time, right-side table of contents, rich body (code blocks, callouts), feedback widget ("Was this helpful?"), "Still need help?" contact form with SLA note.

Design an Audit-logs screen: table (Timestamp, User, Role, Action, Target, Result, IP), filters (date range, user, action type, result, text search), Export CSV button, retention note ("Kept for 180 days"), right-side detail drawer with raw payload/metadata.

Create an Audit-logs — Empty filter state screen: "No events for this filter" illustration, guidance, and a toggle banner for "Highlight sensitive actions".

Minimal, enterprise visual style.

Medium buttons; slightly increased corner radius.

Headings Helvetica, body Open Sans.

Could you pull colors from the brand palette/UI screenshot into the Theme?

Could you add a Dark theme variant + toggle?