Lovable AI Prompts to Build Real Apps
21 copy-paste prompts that turn Lovable into a reliable app builder. Spec features precisely, wire up Supabase and Stripe, refine the UI, and fix bugs one step at a time.
In short: This page contains 21 copy-paste ready prompts, organized into 5 categories with a description and pro tip for each. The first 5 prompts are free instantly, no signup needed. Hand-curated and tested by the AI Academy team.
Starting a New App
4 promptsScaffold the Core App
1/21✨ What it does
Lovable scaffolds a [type of app] for [target users] around [main user action]: landing page, one main screen, placeholder nav, React and Tailwind, mock data only, no auth or database. Review that static layout, then ask for logic only after the structure looks right to you.
Build a [type of app, e.g. habit tracker] for [target users]. Start with only the core flow: [main user action]. Create a clean landing page, a single main screen, and placeholder navigation. Use React and Tailwind. Do NOT add auth, payments, or a database yet, just static UI with mock data so I can review the layout first.
Pro tip: Explicitly telling Lovable what NOT to build yet prevents it from wiring up Supabase and auth before you have approved the basic structure.
Define the App in a Spec
2/21✨ What it does
Lovable writes a numbered product spec for [app idea] covering pages, actions, and data, and generates no code until you approve. Correct the spec first, then build one page at a time from the list.
Before building, write a short product spec for a [app idea] as a numbered list: the main pages, the key user actions on each page, and the data each page needs. Show me the spec only, do not generate any code yet. Once I approve it, we will build one page at a time.
Pro tip: Treat the approved spec as your source of truth and paste a line from it into each follow-up build prompt for consistency.
Set the Visual Direction Early
3/21✨ What it does
Lovable sets a [modern / minimal / playful] design system with primary [hex], rounded cards, generous spacing, and a clean sans font, applied to the landing page first. Lock the look on that first page, then reuse those tokens on every later screen you build.
For this app, establish a design system before building screens: a [modern / minimal / playful] style, a primary color of [hex], rounded cards, generous spacing, and a clean sans-serif font. Apply it to the landing page first so we lock the look, then reuse the same tokens everywhere.
Pro tip: Give one concrete reference (a hex color and a vibe word) rather than long adjectives, Lovable applies specific tokens far more reliably than vague style requests.
Plan the Data Model
4/21✨ What it does
Lovable outlines tables, columns, types, and relationships for [app idea] as plain text and does not create tables yet. Confirm the schema, then let it connect Supabase only after you sign off.
List the database tables this [app idea] will need, with each table's columns, types, and relationships, as a plain-text outline. Do not create the tables yet. I want to confirm the schema before you connect Supabase.
Pro tip: Approving the schema first avoids painful migrations later when Lovable would otherwise guess your columns mid-build.
Prompts get you started. Tutorials level you up.
A growing library of 300+ hands-on AI tutorials. New tutorials added every week.
Adding Features Step by Step
5 promptsAdd One Feature at a Time
5/21✨ What it does
Lovable adds [feature] on the [page name] page only so users can [specific actions], reusing existing cards and buttons, and summarizes what changed. Check that summary, and send it back if any other page you already had moved.
Add a [feature, e.g. comment section] to the [page name] page only. It should let users [specific actions]. Reuse the existing card and button components instead of creating new styles. Do not touch any other page. After building, summarize exactly what changed.
Pro tip: Asking for a summary of what changed makes it easy to spot and undo unintended edits in your next message.
Reference an Existing Component
6/21✨ What it does
Lovable builds [new screen] using the same layout, spacing, header, and buttons as [page name], changing only content and data. Compare the two screens side by side, then request tweaks if the match is off for you.
Build a [new screen] that reuses the same layout, spacing, and card style as the existing [page name] page. Match its header, padding, and button components exactly so the app feels consistent. Only the content and data should differ.
Pro tip: Naming a specific existing page gives Lovable a concrete pattern to copy, which beats describing the style from scratch each time.
Add a Form with Validation
7/21✨ What it does
Lovable creates a [form name] with [list fields and types], inline errors, a disabled submit until valid, and a success toast, logging to the console instead of saving. Try every invalid path, then wire storage once the UX feels right to you.
Create a [form name] form with these fields: [list fields and types]. Add inline validation with clear error messages, disable the submit button until the form is valid, and show a success toast on submit. For now, log the submitted data to the console instead of saving it.
Pro tip: Logging instead of saving lets you test the form flow safely before any Supabase write is connected.
Add Navigation and Routing
8/21✨ What it does
Lovable adds a persistent nav for [list pages] with active-state highlighting and correct routes, without changing page content. Click every link, then fix any route that does not land where you expect.
Set up navigation between these pages: [list pages]. Add a persistent top nav (or sidebar) with active-state highlighting on the current page, and make every link route correctly. Do not change the content of the pages themselves, only the navigation.
Pro tip: Build navigation only after the individual pages exist, so Lovable wires real routes instead of placeholder links.
Add Search and Filtering
9/21✨ What it does
Lovable adds a search bar and filters for [fields to filter by] on [page name] that update the list as you type, leaving the list style alone. Type a few queries, then say if a filter should work differently.
On the [page name] page, add a search bar and filter controls for [fields to filter by]. Filtering should update the visible list instantly as the user types or selects. Keep the existing list layout and styling, only add the controls above it.
Pro tip: Specify which fields are filterable, otherwise Lovable may add filters that do not map to your actual data.
Design & UI Prompts
4 promptsRefine a Specific Section
10/21✨ What it does
Lovable polishes only [section name]: spacing, grid alignment, and a clearer primary action, keeping colors and fonts. Look at that section alone, then reject the change if the rest of your page shifted.
Improve the visual design of the [section name] only. Increase spacing between items, align the elements to a clean grid, and make the primary action stand out. Keep the existing colors and fonts. Do not change any other part of the page.
Pro tip: Constraining edits to one named section is the most reliable way to get focused design changes in Lovable.
Make It Mobile-Responsive
11/21✨ What it does
Lovable makes [page name] responsive below 768px with stacked columns and larger tap targets, and shows mobile, tablet, and desktop behavior without changing desktop. Resize your browser, then keep the desktop layout you already approved.
Make the [page name] page fully responsive on mobile. Stack columns vertically below 768px, increase tap target sizes, and ensure no horizontal scrolling. Show me how it should behave at mobile, tablet, and desktop widths, and keep the desktop layout unchanged.
Pro tip: Call out the breakpoint behavior you want explicitly, Lovable handles responsiveness much better with concrete rules than with 'make it responsive'.
Build an Empty and Loading State
12/21✨ What it does
Lovable adds empty, skeleton-loading, and error-with-retry states on [page name], with a friendly empty message and a primary action to [do something], matching existing cards. Trigger each state, then adjust the empty copy if it does not sound like your app.
Add proper empty, loading, and error states to the [page name] page. The empty state should show a friendly message and a primary action to [do something]. Loading should show skeleton placeholders, and errors should show a retry button. Match the existing card styling.
Pro tip: Naming all three states (empty, loading, error) in one prompt gets them styled consistently in a single pass.
Add a Polished Landing Page
13/21✨ What it does
Lovable builds a conversion landing page for [product] aimed at [audience] (hero, benefits, how-it-works, footer) as a new route, not a replacement for the dashboard. Read the copy on your own, then keep the dashboard URL untouched.
Design a conversion-focused landing page for [product] aimed at [audience]. Include a hero with a clear headline and CTA, three benefit cards, a short how-it-works section, and a footer. Use our existing color palette and keep copy concise. Build it as a new route, do not replace the app dashboard.
Pro tip: Ask for it as a new route explicitly, otherwise Lovable may overwrite your existing home page.
Like these prompts? There are full tutorials behind them.
Learn the workflows, not just the prompts. 300+ easy-to-follow tutorials inside AI Academy — and growing every week.
Backend, Auth & Integrations
4 promptsConnect Supabase Storage
14/21✨ What it does
Lovable creates [table name] with [list columns and types], wires [page name] to read and write it, replaces mock data, and adds row-level security so users see only their rows. Confirm the columns first, then save a test row under your account.
Connect Supabase and create the [table name] table with these columns: [list columns and types]. Wire the [page name] page to read from and write to this table, replacing the current mock data. Add row-level security so users can only see their own rows. Confirm the table structure before saving any data.
Pro tip: Always request row-level security in the same prompt, adding it later often means re-touching every query.
Add User Authentication
15/21✨ What it does
Lovable adds Supabase email-and-password auth with sign-up, login, and logout, and protects [list of pages] so signed-out users hit login. Create a test account, then confirm each protected page redirects when you log out.
Add email and password authentication using Supabase Auth. Create a sign-up page, a login page, and a logout button in the nav. Protect the [list of pages] routes so only logged-in users can access them, and redirect signed-out users to the login page. Keep the existing styling.
Pro tip: List exactly which routes must be protected, Lovable will not reliably guess which pages should be private.
Wire Up Stripe Payments
16/21✨ What it does
Lovable adds Stripe Checkout for a [one-time / subscription] [product or plan] at [price], a pricing page, and marks the user [paid/pro] in Supabase after payment, plus which keys you must add. Add those keys, then run a test purchase before you go live.
Add Stripe checkout for a [one-time / subscription] purchase of [product or plan] at [price]. Create a pricing page with a buy button that starts Stripe Checkout, and on successful payment mark the user as [paid/pro] in Supabase. Explain which Stripe keys I need to add and where.
Pro tip: Ask Lovable to tell you which Stripe keys go where, the integration silently fails if the keys are not configured.
Send Transactional Emails
17/21✨ What it does
Lovable writes a Supabase Edge Function that emails the user after they [does an action], including [what the email should say], and leaves the UI alone. Set the email provider config it names, then trigger the action once so you can see the message.
After a user [does an action, e.g. signs up], send them a confirmation email. Use a Supabase Edge Function to trigger the email and include [what the email should say]. Show me the function code and tell me what email provider config I need to set. Do not change any UI.
Pro tip: Keep email logic in an edge function rather than the client so your provider keys are never exposed in the browser.
Debugging & Refining
4 promptsDescribe the Bug Precisely
18/21✨ What it does
Lovable investigates why [exact steps to reproduce] yields [actual result] instead of [expected result], explains the cause, then fixes only that issue. Confirm the diagnosis matches what you saw, then retest those same steps.
There is a bug: when I [exact steps to reproduce], I expect [expected result] but instead [actual result]. Investigate the cause first and explain what is going wrong before changing any code. Then fix only that issue without altering unrelated features.
Pro tip: Requesting an explanation before the fix prevents Lovable from rewriting large sections to 'guess' at a problem it has not located.
Use Chat Mode to Diagnose
19/21✨ What it does
Lovable stays in chat mode and explains, without editing, how data flows from [page A] to [page B] and where [problem area] is handled. Read that map, then decide the fix before you switch back to build mode.
Switch to chat mode and explain, without editing any code, how data flows from [page A] to [page B] in this app and where the [problem area] is handled. I want to understand the current implementation before we decide on a fix.
Pro tip: Chat mode is your safe space, use it to plan and understand before switching back to edit mode for the actual change.
Revert and Re-Approach
20/21✨ What it does
Lovable undoes the last approach to [feature] that caused [problem] and implements [describe the alternative approach], leaving everything else as it was. Check that only that feature changed, then retest the path that broke for you.
The last change to [feature] caused [problem]. Undo that approach and instead implement it differently: [describe the alternative approach]. Keep everything else exactly as it was before the broken change.
Pro tip: If a feature keeps breaking, use Lovable's version history to roll back to a known-good state before prompting a fresh approach.
Improve Performance
21/21✨ What it does
Lovable finds why [page name] is slow in [scenario], then speeds it up (pagination, lazy load, fewer re-renders) without changing UI or behavior, and reports what changed. Use the slow scenario again, then keep the change only if it still feels the same to you, just faster.
The [page name] page feels slow when [scenario, e.g. the list has many items]. Investigate what's causing the slowness first, then optimize it, for example by paginating the query, loading data lazily, or avoiding unnecessary re-renders. Keep the UI and behavior identical, only make it faster, and tell me what you changed.
Pro tip: Describe the exact slow scenario rather than asking to 'make it fast', so Lovable optimizes the path that actually hurts.
Free tool
Prompt Optimizer
Turn a rough idea into a structured, professional AI prompt.
Frequently Asked Questions
Is Lovable worth paying for?
Read our honest, no-hype breakdown with the real pricing.
Prompts are the starting line. Tutorials are the finish.
A growing library of 300+ hands-on tutorials on ChatGPT, Claude, Midjourney, and 50+ AI tools. New tutorials added every week.
7-day free trial. Cancel anytime.
Related guides