Lovable AI Prompt Library
A comprehensive collection of reusable prompting strategies and approaches
Welcome to the Lovable AI Prompt Library!
Here we've collected a set of reusable prompt patterns and examples for common scenarios when building with Lovable AI. Think of these as templates or inspiration that you can tailor to your own project. Each section covers a particular use case – from kicking off a new project to integrating payments – with guidance on when to use it and an example prompt. The tone is official yet casual – just like talking to a colleague – and each prompt provides enough context so Lovable AI knows exactly what to do.
Prompt Categories & Use Cases
A collection of reusable prompt patterns for common scenarios with Lovable AI
Starting Projects
Use at the very beginning of a project to help Lovable AI understand high-level requirements.
Task Management Application
I need a **task management** application with: - **Tech Stack:** Next.js frontend, Tailwind CSS for styling, Supabase for auth and database. - **Core Features:** Project and task creation, assigning tasks to users, due date reminders, and a dashboard overview. Start by building the **main dashboard page**, containing: - A header with navigation, - A list of projects with their status, - and a button to create a new project. Provide dummy data for now, and ensure the design is clean and responsive.
Additional Examples:
"Create a new component called [ComponentName] with these features: [list features]. Make it responsive and accessible with proper keyboard navigation."
"Explain how this function works in simple terms, highlighting its inputs, outputs, and any side effects: [paste function]."
UI/UX Design
Use anytime you want to refine the look and feel of your app with Lovable AI without changing functionality.
Visual Enhancement Without Breaking Functionality
The app UI should be improved, **without changing any functionality**. - Keep all existing logic and state management as is. - **Visual Enhancements:** Update the styling of the dashboard page: use a modern card design for each project listing, improve the color scheme for better contrast, and increase padding for a cleaner layout. - Ensure these changes do **not break any functionality or data flow**. *Goal:* purely cosmetic improvements for a more polished look, with the app behaving exactly as before.
Additional Examples:
"Enhance the visual appeal of this component: [paste component]. Add animations, improve spacing, create a polished look."
"Create a comprehensive design system for my application with a color palette, typography scale, spacing system."
"Design a responsive dashboard layout with [describe key metrics/widgets]. It should work well on mobile, tablet, and desktop."
"Transform this desktop-only component into a mobile-first design with responsive breakpoints: [paste component]."
"Add subtle, performant animations to this component to enhance user experience: [paste component]."
"Analyze and optimize the user flow for [describe task/goal]. Map out each step of the journey."
"Review these components for accessibility issues and suggest improvements: [paste components]."
Responsiveness
Use when your app's layout needs to work across different screen sizes with Lovable AI.
Mobile-First Responsive Design
Our app needs to be **fully responsive** across mobile, tablet, and desktop. - Follow a **mobile-first** strategy: prioritize the layout for small screens, then adjust for larger screens. - Use modern UI/UX best practices for responsive design. (For Tailwind CSS, use the standard breakpoints `sm, md, lg, xl` – no custom breakpoints unless necessary.) - Ensure every page (especially the dashboard and project detail pages) reflows properly on a small screen: elements should stack or resize as needed, text should remain readable, and no content should overflow off-screen. - **Do not change the core design or functionality**, just make sure it flexibly adapts to different screen sizes. After making changes, please double-check the layout at iPhone 12 dimensions and a typical desktop width.
Refactoring
Use periodically to clean up code with Lovable AI without changing what it does.
Component Code Cleanup
Refactor the **ProjectList component file**, but **keep its behavior and UI exactly the same**. Goals: - Improve the code structure and readability (simplify complex functions, break into smaller ones if needed). - Remove any unused variables or imports. - Ensure the file follows best practices and is well-documented. Do **not** introduce any new features or change how the component works for the user – this is purely a code cleanup for maintainability. If any part of the code is unclear, add a brief comment for clarification.
Additional Examples:
"Review this code and suggest improvements for readability, performance, and maintainability: [paste code]."
"Suggest a folder structure for a [type] application with these features: [list features]."
"I'm getting this error: [paste error]. Here's the relevant code: [paste code]. Can you help me understand what's causing it?"
App Types
A collection of starter prompts for various common application types with Lovable AI.
Common Application Starters
Choose from these popular app types to get started quickly with Lovable AI
Additional Examples:
"Create a starter e-commerce store with product catalog, shopping cart, and checkout flow."
"Build a basic CMS for managing blog posts with rich text editor and media uploads."
"Create a project management app with task boards, team collaboration, and progress tracking."
"Build a social media feed component with infinite scroll and real-time updates."
"Create an analytics dashboard with charts, metrics, and data visualization."
"Build a SaaS application starter with user authentication, billing, and team management."
"Create a chat interface with an AI assistant for customer support."
"Build a tool that uses AI to generate content, images, or recommendations."
"Implement a recommendation component that learns from user behavior."
"Enhance the search experience with AI-powered features and intelligent filtering."
"Create a dashboard that uses AI to analyze data patterns and provide insights."
"Implement a system for personalizing the user experience based on preferences."
React Development
A list of prompts for common React-specific tasks when building with Lovable AI.
React-Specific Development Tasks
Leverage these React patterns and best practices with Lovable AI
Additional Examples:
"Create a custom React hook called use[Name] that handles [functionality] with proper cleanup."
"Refactor this component to use React Context for state management: [paste component]."
"Optimize this React component to prevent unnecessary re-renders using memo and useMemo."
"Create a form with validation for [fields] using React Hook Form and Zod schema validation."
"Implement a data fetching pattern using React Query with proper loading and error states."
"Create a smooth transition animation between route changes using Framer Motion."
Locking Files / Limiting Scope
Use when you want Lovable AI to focus on specific parts and leave others untouched.
Focused Development with Protected Files
Please **focus only on the Dashboard page** for this change. - Do **not modify** the `LoginPage.tsx` or `AuthProvider.tsx` files at all (authentication is working well, and we want to keep it intact). - Concentrate your code edits on `Dashboard.tsx` and related dashboard components **only**. Task: Add a new section to the Dashboard that shows "Tasks due this week". Make sure to fetch the relevant tasks from the database. *(Again, no changes to login or auth files – those are off-limits.)*
Planning
Use before a complex implementation with Lovable AI. Ask for a step-by-step plan first.
Implementation Planning
Before writing any code, **plan out the implementation** of the new Notifications feature. - List each step required to add email notifications when a task is overdue. - Consider both frontend (UI changes, if any) and backend (creating scheduled checks or triggers) aspects. - Ensure the plan keeps the current functionality stable – we can't break anything existing. - Provide the plan as an ordered list (1, 2, 3, ...), with a brief explanation of each step. Once you outline the plan, pause for review. **Do not make any code changes yet.**
Stripe Setup
Use when you want to integrate payments with Stripe using Lovable AI.
Payment Integration
I want to **add Stripe payments** to the app. - Use **Stripe in test mode** for now. - We have a product in Stripe with ID `prod_12345` and a price ID `price_67890` (one-time purchase). - Implement a checkout button on the **Pricing page** that starts a Stripe checkout for that product. - After successful payment, redirect the user to `/payment-success`. If the payment is canceled, redirect to `/payment-cancelled`. Important: - Assume API keys and webhook secrets are configured securely (do **not** hard-code them). - Do **not** modify any other pages or features unrelated to payments. Once done, provide any webhook endpoint setup instructions I need (e.g., URL to add in Stripe dashboard for post-payment events).
Supabase & Backend
A list of prompts for backend tasks with Lovable AI, often involving Supabase.
Backend Development Tasks
Use these patterns for robust backend development with Lovable AI and Supabase
Additional Examples:
"Design a database schema for [application] with proper relationships and constraints."
"Create a service to fetch data from [API name] with error handling and caching."
"Create Row Level Security policies for a multi-tenant application in Supabase."
"Create a Supabase Edge Function to handle [functionality] with proper authentication."
"Implement real-time data synchronization using Supabase subscriptions and optimistic updates."
"Implement a robust search feature with full-text search and filtering capabilities."
"Create a data table/grid with sorting, filtering, pagination, and export functionality."
"Build a system for importing and exporting [data] with validation and error handling."
"Create a set of interactive charts using Recharts with responsive design and animations."
"Implement a strategy for synchronizing offline data when the connection is restored."
"Create a multi-step form wizard with validation, progress tracking, and data persistence."
Workflow
A list of prompts related to development workflow and best practices with Lovable AI.
Development Workflow Optimization
Streamline your development process with these workflow patterns for Lovable AI
Additional Examples:
"Connect this Lovable AI project to GitHub and set up a good workflow for collaborative development."
"Refactor this large component into smaller, more manageable components with clear responsibilities."
"Suggest a testing strategy for [component/feature] including unit tests, integration tests, and E2E tests."
"Implement comprehensive error handling for this async function with proper logging and user feedback."
"Set up a deployment pipeline for this application with staging and production environments."
"Analyze and optimize this user flow to reduce friction and improve conversion rates."
Best Practices for Interacting with Lovable AI
The foundation for a smooth and successful development workflow
Beyond the content of individual prompts, how you interact with Lovable AI is crucial for success. Adopting the right workflow strategies ensures Lovable AI remains aligned with your goals, understands the broader context, and helps you build efficiently and safely.
Use Chat Mode vs. Default Mode Strategically
Use Default Mode for well-defined, straightforward coding tasks where you want Lovable AI to immediately apply changes. Use Chat-Only Mode for brainstorming, planning, asking questions, or debugging issues without altering your codebase until you are ready. A great workflow is to brainstorm and get a plan in Chat Mode, then execute the plan in Default Mode.
Leverage the Knowledge Base & PRDs
Use the Knowledge Base in your project settings to store persistent background information, requirements, and guidelines. This acts as Lovable AI's long-term memory. Fill it with your project's overview, user flows, core features, tech stack, and design guidelines.
Quick Reference Guide
Essential tips for effective prompting with Lovable AI
Be Specific
Provide clear context, requirements, and constraints
Instead of 'make it better', specify exactly what to improve
Use Examples
Show Lovable AI the desired format or style
Include 1-2 examples to improve consistency
Limit Scope
Focus on specific files or components
Tell Lovable AI what NOT to change
Plan First
Use Chat Mode for complex implementations
Get a plan before writing code
Ready to Put These Prompts to Work?
Start building with Lovable AI using these proven prompt patterns. Remember: the more specific and contextual your prompts, the better your results will be.