Lovable turns natural language into production-ready React applications with Supabase backends, Stripe payments, and responsive UI. Describe your app, watch it get built, and deploy it. These prompts are designed to get the best results from Lovable's AI engine.
Lovable reads your prompt and generates an entire application. The quality of your prompt directly determines the quality of the output. Follow these principles to get production-ready code on the first try.
Tell Lovable what the user sees and does. 'A dashboard where admins can manage users, view analytics, and export reports' works better than listing React components.
Specify React, Tailwind, shadcn/ui, Supabase, and Stripe upfront. Lovable makes better architecture decisions when it knows your full tech landscape.
Mention the aesthetic: 'clean SaaS style like Linear', 'dark mode with violet accents', or 'warm, friendly design with rounded corners and soft shadows.'
Walk through what happens step by step: 'User signs up, lands on onboarding wizard, creates first project, sees dashboard with live data.' This gives Lovable routing and state context.
Build in phases. Start with the core experience, then add features: 'Now add a settings page with profile editing and subscription management.'
Production-ready prompts for building SaaS products with Lovable. Each generates a complete, functional application.
Build a project management SaaS app using React, Tailwind CSS, and shadcn/ui. Use Supabase for authentication and database. Core features: - Email/password signup and login with protected routes - Dashboard showing all projects as cards with status badges (Active, On Hold, Completed) - Project detail page with a Kanban board (columns: To Do, In Progress, Review, Done) - Drag-and-drop task cards between columns - Task detail modal with title, description, assignee, due date, and priority - Team members sidebar showing online status - Settings page with profile editing Design: Clean, modern SaaS aesthetic similar to Linear. Dark mode default with subtle gray borders. Use violet (#7C3AED) as the primary accent color. Smooth transitions and hover states throughout.
Create an analytics dashboard using React, Tailwind, shadcn/ui, and Recharts for charts. Connect to Supabase for data. Pages: - Overview dashboard with KPI cards (MRR, active users, churn rate, NPS score) and line/bar charts showing 30-day trends - Customers page with a searchable, sortable data table showing name, plan, MRR, last active date, and health score - Customer detail page with activity timeline, subscription history, and usage charts - Segments page where users can create dynamic customer segments with filters (plan type, activity level, region) - Export functionality for CSV download of any data view Design: Professional analytics style. White background with subtle gray-50 cards. Blue (#2563EB) as primary color. Charts should use a consistent 4-color palette. Responsive layout with collapsible sidebar navigation.
Build a two-sided freelancer marketplace using React, Tailwind, shadcn/ui, and Supabase. User flows: - Client signup: create account, post a project (title, description, budget range, skills needed, deadline) - Freelancer signup: create profile with portfolio, skills tags, hourly rate, and availability - Browse projects page with filters (category, budget, skills, deadline) - Browse freelancers page with filters (skills, rate, rating, availability) - Project detail page where freelancers can submit proposals (cover letter, proposed rate, timeline) - Client can review proposals, view freelancer profiles, and accept/reject - Simple messaging between client and freelancer after proposal acceptance - Review system: both sides can leave ratings and written reviews after project completion Auth: Supabase email auth with role selection (Client or Freelancer) during signup. Design: Clean, trustworthy marketplace design. White background, green (#059669) accents for CTAs. Card-based layouts throughout.
Internal tools and admin panels are where Lovable shines. These prompts generate functional back-office applications.
Build an admin panel for managing users with React, Tailwind, shadcn/ui, and Supabase. Features: - Sidebar navigation with icons: Dashboard, Users, Roles, Activity Log, Settings - Users page: data table with search, pagination, and bulk actions (suspend, delete, change role) - User detail page: profile info, subscription status, activity history timeline, and action buttons - Roles page: create and manage roles with granular permissions (checkboxes for each feature area) - Activity log: filterable list of all admin actions with timestamps, actor, and description - Dashboard: cards showing total users, new signups this week, active sessions, and support tickets Auth: Supabase auth with admin role check. Non-admin users see "Access Denied" page. Design: Clean admin panel. Gray-50 background, slate sidebar, blue accents. Dense but readable data tables.
Create a lightweight sales CRM using React, Tailwind, shadcn/ui, and Supabase. Core features: - Pipeline view: Kanban board with stages (Lead, Qualified, Proposal, Negotiation, Closed Won, Closed Lost) - Drag-and-drop deals between stages with automatic timestamp logging - Deal card showing company name, value, probability, owner, and next action date - Deal detail page: full info, contact details, notes timeline, and file attachments - Contacts page: searchable directory with company, role, email, phone, and linked deals - Reports page: monthly revenue chart, win rate by stage, average deal size, and sales velocity metrics - Quick-add button that opens a modal to create deals or contacts from anywhere in the app Design: Professional CRM aesthetic. Light theme with indigo (#4F46E5) accent. Cards with subtle shadows. Compact data density for power users.
From storefronts to conversion-optimized landing pages, these prompts produce polished commercial interfaces.
Build a digital product store using React, Tailwind, shadcn/ui, Supabase, and Stripe. Features: - Homepage with featured products hero, category grid, and trending items carousel - Product catalog page with grid/list toggle, category filters, price range slider, and search - Product detail page: images, description, pricing, reviews, and "Buy Now" button - Stripe Checkout integration for one-time purchases - After purchase: redirect to download page with secure, time-limited download links - User account page showing purchase history and re-download options - Admin area: add/edit products with title, description, price, images, and downloadable file upload Auth: Supabase email auth. Guest checkout option for purchases. Design: Modern e-commerce. White background, warm accents (#F59E0B for CTAs), generous whitespace. Product images as the visual focus.
Create a high-converting SaaS landing page using React and Tailwind CSS. Sections: - Hero: bold headline, subheadline explaining the value prop, email waitlist form, and a product screenshot mockup - Social proof bar: "Trusted by 500+ teams" with grayscale logo placeholders - Features grid: 6 features with icons, titles, and 2-sentence descriptions - How It Works: 3-step visual flow with numbered steps and illustrations - Pricing: 3-tier pricing table (Free, Pro, Enterprise) with feature comparison and highlighted "Most Popular" tier - Testimonials: 3 testimonial cards with photo, name, role, company, and quote - Final CTA: repeating the waitlist signup form with urgency copy - Footer: links, social icons, legal pages Design: Premium SaaS style. Dark hero section transitioning to white content sections. Primary color: rose (#E11D48). Smooth scroll behavior. Fully responsive. Subtle entrance animations on scroll.
Each AI builder has a sweet spot. Choosing the right tool for your project matters more than the prompt itself.
Best for full-stack apps with databases, auth, and payments. Choose Lovable when you need a deployable product, not just a prototype.
Best for rapid prototypes and browser-based experiments. Choose Bolt when speed matters more than production readiness.
Best for individual UI components and design iterations. Choose v0 when you need a specific component, not a full app.
Level up your results with these expert patterns used by power users building production apps.
Phase 1 - Core Shell: Build the app layout with React, Tailwind, shadcn/ui. Create the sidebar navigation, header with user menu, and routing for: Dashboard, [Feature A], [Feature B], Settings. Use placeholder content on each page. Supabase auth with email/password. Phase 2 - Data Layer: Now add Supabase tables for [your data model]. Create CRUD operations for [main entity]. Show data in a table on the [Feature A] page with search and pagination. Phase 3 - Rich Features: Add [specific feature] to [Feature B] page. Include [charts/exports/notifications]. Connect the dashboard KPIs to real Supabase data. Phase 4 - Polish: Add loading states, error boundaries, empty states with illustrations, and toast notifications for all actions. Ensure full mobile responsiveness.
Before building any features, set up a consistent design system: Colors: Primary (#E11D48), Secondary (#1E293B), Success (#059669), Warning (#D97706), Error (#DC2626). Background (#FAFAFA), Cards (#FFFFFF with 1px #E2E8F0 border). Typography: Inter font. Headings bold, body regular. H1: 2.25rem, H2: 1.5rem, H3: 1.25rem, Body: 0.875rem. Components: All buttons have rounded-lg, 2px border, and 150ms transitions. Cards have rounded-xl, subtle shadow-sm, and 8px padding. Form inputs have rounded-lg borders with focus ring in primary color. Spacing: Section padding 3rem. Card gap 1rem. Content max-width 1200px centered. Apply this design system consistently across every page and component you build.