Beginner20 min

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:

Terminal
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:

Terminal
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:

Terminal
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:

Terminal
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:

Terminal
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:

Terminal
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:

Terminal
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:

Terminal
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:

Terminal
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

Terminal
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

Terminal
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

Terminal
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

Terminal
 "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

Terminal
 "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

Terminal
 "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

Terminal
 "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

Terminal
"Add a 'Favorites' feature where users can star important tasks.
Starred tasks should appear in a separate 'Favorites' section at the top."

Fixing Issues

Terminal
"The date picker isn't working on mobile.
When tapped, it should open the native date selector."

Refining Design

Terminal
"The cards feel too cramped. Increase padding inside each card
and add more space between them. Also make the text slightly larger."

Restructuring

Terminal
"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

Terminal
"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

Terminal
"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.

Mark this lesson as complete to track your progress