- Learn
- AI App Builders
- Lovable
- Prompting for Apps
Master the art of writing prompts that produce high-quality applications in Lovable. Learn patterns, structures, and techniques for better results.
Prompting for Apps
The quality of your Lovable application depends heavily on how you describe it. This lesson teaches you the patterns and techniques that consistently produce better results.
The Anatomy of a Great App Prompt
Effective app prompts have several key components:
1. Application Overview
Start with a clear, one-sentence description of what you're building:
Build a personal finance tracker that helps users monitor their income
and expenses with visual charts and category-based organization.
2. Core Features
List the essential functionality:
Core Features:
- Dashboard showing total balance, income, and expenses
- Add transactions with amount, category, date, and notes
- View transactions in a sortable, filterable list
- Pie chart showing spending by category
- Monthly comparison bar chart
3. User Flows
Describe how users interact with the app:
User Flow - Adding a Transaction:
1. User clicks the "+" button in the bottom right
2. Modal opens with a form
3. User selects Income or Expense
4. User enters amount, selects category, and optionally adds notes
5. User clicks "Save"
6. Transaction appears in the list and charts update
4. Design Specifications
Be explicit about the visual design:
Design:
- Clean, minimal interface with lots of white space
- Primary color: emerald green (#10B981)
- Cards with subtle shadows and rounded corners
- Use Inter font throughout
- Dark mode support
The Complete Prompt Template
Here's a template you can adapt for any application:
Build a [type of application] that [primary purpose].
## Core Features
- [Feature 1]: [Brief description]
- [Feature 2]: [Brief description]
- [Feature 3]: [Brief description]
## Pages/Screens
1. [Page name]: [What it shows and does]
2. [Page name]: [What it shows and does]
3. [Page name]: [What it shows and does]
## User Flows
[Flow name]:
1. [Step 1]
2. [Step 2]
3. [Step 3]
## Design Requirements
- Style: [Minimal/Playful/Professional/etc.]
- Colors: [Primary and accent colors]
- Typography: [Font preferences]
- [Other specific requirements]
## Data Structure
[If applicable, describe what data the app manages]
## Additional Notes
[Any other important details]
Prompting Patterns That Work
Pattern 1: Reference Familiar Apps
Leverage existing apps as reference points:
Build a habit tracking app similar to Habitica but simpler.
Users can create habits and check them off daily.
Show a weekly completion grid like GitHub's contribution graph.
Pattern 2: Describe the Problem First
Context helps the AI make better decisions:
Problem: Freelancers struggle to track which invoices have been paid.
Build an invoice tracker where:
- Freelancers can create invoices with client name, amount, and due date
- Invoices have statuses: Draft, Sent, Paid, Overdue
- Dashboard shows total outstanding amount and overdue invoices
- Email reminders can be set for overdue invoices
Pattern 3: Specify Interactions
Detail how things should work:
The sidebar should:
- Be collapsible to icons-only mode on desktop
- Become a bottom navigation bar on mobile
- Highlight the current page
- Show notification badges next to relevant items
Pattern 4: Include Edge Cases
Mention what happens in special situations:
If the user has no transactions yet, show an empty state with:
- A friendly illustration
- Text saying "No transactions yet"
- A prominent "Add your first transaction" button
Category-Specific Tips
For SaaS Dashboards
Build a project management dashboard for small teams.
Include these sections:
- Quick stats: Active projects, tasks due today, team activity
- Project cards showing progress bars and team avatars
- Recent activity feed
- Quick-add buttons for tasks and projects
Navigation:
- Sidebar with: Dashboard, Projects, Tasks, Team, Settings
- Top bar with search and user profile dropdown
For Landing Pages
Build a landing page for a meditation app called "Calm Mind".
Sections (in order):
1. Hero: Large headline, subheadline, CTA button, app screenshot
2. Features: 3-4 key benefits with icons
3. How it works: 3-step process
4. Testimonials: 3 user quotes with photos
5. Pricing: 2 tiers (Free and Premium)
6. FAQ: 4-5 common questions
7. Footer: Links, social icons, newsletter signup
Style: Calming, peaceful. Use soft blues and greens.
Lots of white space. Smooth scroll behavior.
For Internal Tools
Build an employee directory for a company of 100 people.
Features:
- Search employees by name, department, or skills
- Employee cards showing photo, name, title, department, contact info
- Detailed profile pages with bio and skills
- Department filter sidebar
- Org chart view option
Admin features (separate page):
- Add/edit/remove employees
- Manage departments
- Upload photos
Common Prompting Mistakes
Mistake 1: Too Vague
❌ "Build me an app for my business"
✅ "Build an appointment booking system for a hair salon where:
- Clients can view available time slots
- Clients book appointments by selecting a service and stylist
- Clients receive confirmation emails
- Staff can view and manage the daily schedule"
Mistake 2: Too Technical
❌ "Build a React app with Redux for state management,
React Query for data fetching, and Framer Motion for animations"
✅ "Build a responsive task board where:
- Tasks can be dragged between columns
- Changes save automatically
- Animations make the experience feel smooth"
Lovable makes its own technical decisions. Focus on what, not how.
Mistake 3: Feature Overload
❌ "Build a complete project management system with tasks, projects,
teams, Gantt charts, resource allocation, time tracking, invoicing,
client portals, reporting, integrations with Slack and Jira,
mobile app, offline support, and AI task suggestions"
✅ "Build a simple task board with three columns: To Do, In Progress, Done.
Users can add tasks, drag them between columns, and delete them.
Start simple - we'll add features iteratively."
Mistake 4: Assuming Knowledge
❌ "Add the standard e-commerce checkout"
✅ "Add a checkout flow with:
- Cart summary showing items and totals
- Shipping address form
- Payment method selection (credit card only for now)
- Order confirmation page"
Iterating on Your Prompts
Your first prompt is just the beginning. Use follow-up prompts to refine:
Adding Features
"Add a 'Favorites' feature where users can star important tasks.
Starred tasks should appear in a separate 'Favorites' section at the top."
Fixing Issues
"The date picker isn't working on mobile.
When tapped, it should open the native date selector."
Refining Design
"The cards feel too cramped. Increase padding inside each card
and add more space between them. Also make the text slightly larger."
Restructuring
"Move the search bar from the sidebar to the top navigation.
Make it wider and add a keyboard shortcut hint (⌘K)."
Writing Prompts for Modifications
When changing existing features, be clear about what stays and what changes:
The Before/After Pattern
"Currently, the task list shows all tasks in a flat list.
Change this to group tasks by their due date:
- Today
- Tomorrow
- This Week
- Later
- No Date
Keep all existing functionality, just reorganize the display."
The Specific Element Pattern
"Change ONLY the header component:
- Make the background color match the primary brand color
- Add the company logo on the left
- Move the navigation links to the center
- Keep the user profile dropdown on the right"
Summary
- Structure your prompts with overview, features, flows, and design
- Be specific about interactions and edge cases
- Reference familiar apps to communicate complex ideas
- Avoid technical jargon—focus on what users experience
- Start simple and iterate with follow-up prompts
- Learn from failures—if a prompt doesn't work, refine and try again
Next Steps
Now that you can write effective prompts, let's learn how to add a backend to your Lovable apps using Supabase integration.