This is a working reference for Lovable (lovable.dev), the vibe-coding builder that turns plain English into a full React + Tailwind app. Keep it open in a tab while you build and copy the phrasing straight into the prompt box.
Every table below is meant to be scanned, not read. For deeper walkthroughs, see our best Lovable prompts, the guide on how to prompt Lovable for full apps, and ready-made Lovable prompt templates.
The app-prompt structure
Good app prompts cover eight blocks. Miss one and Lovable fills the gap with a guess, so name each block explicitly in your first message.
| Block | What to write |
|---|---|
| Goal | One sentence on what the app does and for whom. |
| Users & roles | Who signs in and what each role can do (e.g. admin, member, guest). |
| Data model | The core entities and their key fields (e.g. Project → title, owner, status). |
| Screens | The pages or views and what each one shows. |
| Workflows | The main actions a user takes, step by step. |
| Rules | Validation, permissions, and edge cases that matter. |
| Design | Style direction: colors, tone, layout, any reference app. |
| Acceptance | How you'll know it's done — the checklist to test against. |
A minimal example that hits every block:
Build a [habit tracker] web app.
Goal: help [solo users] log daily habits and see streaks.
Users & roles: one signed-in user; no admin.
Data model: Habit (name, color, frequency); Log (habit, date, done).
Screens: dashboard with today's habits, a habits list to add/edit, a stats page.
Workflows: create a habit, tick it off each day, view a streak calendar.
Rules: a habit can be ticked once per day; deleting a habit removes its logs.
Design: clean, calm, rounded cards, [teal] accent, light and dark mode.
Acceptance: I can add a habit, tick it today, and see the streak increase.
Build the frontend first with mock data; we'll add the backend after.Modes & when to use them
Lovable has three ways to work, and picking the right one saves credits and prevents accidental edits.
| Mode | Use it for | Credits |
|---|---|---|
| Build Mode | Autonomously writing and editing code, debugging, and web search — the default for real changes. | Standard (build + cloud + AI pool). |
| Chat (Plan) Mode | Planning, scoping, and answering questions without editing any code. | Lighter — cheaper than Build. |
| Visual Edits | Clicking a UI element to change text, color, or spacing directly. | Free — no prompt, no credits. |
Power modifiers
These are phrases you append to a prompt to steer behavior. Stack the ones you need at the end of the request.
| Append this | What it does |
|---|---|
| "Keep everything else the same; only change [X]." | Scopes the edit so unrelated code is left alone. |
| "Make it fully responsive." | Forces mobile, tablet, and desktop layouts. |
| "Add loading, empty, and error states." | Handles the states people forget to ask for. |
| "Match the existing design system." | Reuses your current colors, spacing, and components. |
| "Explain your plan before editing." | Gets a plan you can approve first (pair with Chat Mode). |
| "Don't touch the backend." | Freezes Supabase schema, auth, and functions. |
Fix-it phrases
When something goes wrong, be specific about what broke. These phrases map common problems to the exact text to paste.
| Problem | Phrase to paste |
|---|---|
| It broke a feature that was working | "[Feature] worked before your last change and is now broken. Revert only that change and keep the rest." |
| It went out of scope | "You changed more than I asked. Undo edits to [files/areas] and only apply the one change: [X]." |
| Styling is off | "The [component] doesn't match the design system. Use our existing tokens for color, spacing, and radius; show the diff." |
| Error on load | "The app throws [error message] on load. Find the root cause, explain it, then fix only that." |
| It's slow | "[Page] is slow. Profile the cause (renders, queries, images) and fix the biggest one without changing behavior." |
Backend & Supabase triggers
Lovable Cloud wires native Supabase from plain English. Say one of these and it does the wiring for you.
| Say this | What Lovable does |
|---|---|
| "Add a backend" / "Enable Lovable Cloud." | Provisions Supabase (Postgres, auth, storage, real-time). |
| "Create a table for [entity] with [fields]." | Generates the Postgres schema and migration. |
| "Add email/password (or Google) sign-in." | Sets up Supabase auth and protected routes. |
| "Make sure users only see their own rows." | Writes row-level security (RLS) policies. |
| "Let users upload [images/files]." | Configures a Supabase storage bucket and upload UI. |
| "Call [API] using a secret key." | Adds an edge function plus a stored secret. |
| "Add Stripe checkout for [plan]." | Wires Stripe payments end to end. |
Credit-saving tips
Credits are a unified pool across build, cloud, and AI. Free is 5/day (30/mo); Pro is $25/mo for 100. Stretch them with these habits.
- Plan in Chat (Plan) Mode before you build — it's cheaper and catches scope problems early.
- Make cosmetic tweaks with Visual Edits, which cost nothing.
- Keep a Knowledge file (your PRD-lite) so you don't re-explain context each prompt.
- Batch related work into one scoped prompt instead of many small ones.
- Build the frontend first, backend after — fewer rebuilds when the UI shifts.
- Avoid open-ended "redo the whole app" requests; scope every edit to one target.
A clean full-app starter prompt:
Build a [team task board] web app.
Users & roles: members create/assign tasks; owners manage the workspace.
Data model: Task (title, description, status, assignee, due date); Board; Member.
Screens: board view (columns by status), task detail drawer, members page.
Workflows: create a task, drag between columns, assign a member, set a due date.
Design: modern, minimal, [indigo] accent, responsive, light/dark mode.
Acceptance: I can add a task and drag it from To Do to Done.
Build the frontend with mock data first. Explain your plan before editing.A scoped edit:
On the [task detail drawer], add a "priority" field with High/Medium/Low
and a colored badge. Keep everything else exactly the same; only change
that drawer. Match the existing design system. Don't touch the backend.A debug prompt:
The board page throws "[paste exact error]" when I open a task.
Find the root cause and explain it in one line before you fix anything.
Then fix only that issue and leave all other behavior unchanged.Frequently Asked Questions
What's the ideal Lovable prompt structure?
State the goal, users and roles, data model, screens, workflows, rules, design, and acceptance criteria. Cover those eight blocks and Lovable has enough context to build the whole app in one pass instead of guessing.
When should I use Chat vs Build vs Visual Edits?
Use Chat (Plan) Mode to plan or ask questions without editing code, Build Mode to actually generate and change code, and Visual Edits to click UI elements and tweak text, color, or spacing with no prompt and no credits.
What's the best phrase to stop it breaking things?
Append "Keep everything else exactly the same; only change [X]." Scoping the request to one target stops Lovable from touching unrelated components or the backend.
How do I add a backend with a prompt?
Ask in plain English, for example "Enable Lovable Cloud and add email/password auth" or "Create a Supabase table for [entity] with these columns and add RLS so users only see their own rows." Lovable wires native Supabase for Postgres, auth, storage, RLS, real-time, edge functions, and secrets.
How do I use fewer credits?
Plan in Chat Mode, make cosmetic changes with Visual Edits, batch related work into one scoped prompt, keep a Knowledge file so you repeat less, and avoid open-ended "redo everything" requests.
Where can I get ready-made templates?
See our Lovable prompt templates for copy-paste starting points you can drop your own details into.