The Prompting Playbook
Plan before you prompt
Before using Lovable, define what you're building.
#Lay the Foundation
3 min
31 lessons
Lay the Foundation
4Decide what you're building and how it should feel before you write a single prompt.
The Prompting Playbook
Map the user journey visually
Design isn't about individual screens, it's about what happens between them.
#Lay the Foundation
3 min
The Prompting Playbook
Don't skip the design direction
Your visual language is a foundation, not a polish layer.
#Lay the Foundation
3 min
The Prompting Playbook
The Scoping Template
Fill this in before your first prompt so the agent knows what you are building and what you are not.
#Lay the Foundation
3 min
Think in Systems
4Build in parts, not pages. Speak the vocabulary the model already understands.
The Prompting Playbook
Build one piece at a time
Lovable works best when you build your UI in modular parts, not full pages at once.
#Think in Systems
3 min
The Prompting Playbook
Design with real content
Lovable does not work well with placeholder content like lorem ipsum or "feature 1 / feature 2".
#Think in Systems
3 min
The Prompting Playbook
Speak atomic: buttons, cards, modals
Lovable thinks in atoms.
#Think in Systems
3 min
The Prompting Playbook
Use buzzwords to dial in aesthetic
It's not enough to describe layout, you need to guide the tool on vibe.
#Think in Systems
3 min
Build with Precision
5Scope every prompt. Say what to change and what to leave alone.
The Prompting Playbook
Say exactly what you want, and what you don't
Every prompt modifies a living codebase.
#Build with Precision
3 min
The Prompting Playbook
Build a prompt pattern library
Prompts are easier to write and far more effective when you use structured, repeatable patterns.
#Build with Precision
3 min
The Prompting Playbook
Attach images and reference files
Attach images to any prompt: screenshots of bugs, reference designs, napkin sketches.
#Build with Precision
3 min
The Prompting Playbook
Add visuals via URL
Drop in product demos, generated clips or tutorial videos using URLs.
#Build with Precision
3 min
The Prompting Playbook
Use Visual Edit instead of prompts
Visual Edit mode lets you make design changes by clicking directly on elements in the preview.
#Build with Precision
3 min
Iterate and Ship
4Small changes, checked one at a time. Refactor before the codebase gets confusing.
The Prompting Playbook
One change, then check
The rhythm of good building is prompt, review, prompt, review.
#Iterate and Ship
3 min
The Prompting Playbook
Design for your backend from day one
If you want your projects to do more than look good, think about how they'll actually work.
#Iterate and Ship
3 min
The Prompting Playbook
Refactor and improve
As your project grows, periodically ask Lovable to clean things up.
#Iterate and Ship
3 min
The Prompting Playbook
Version control is your friend
Autosave doesn't mean auto-organised.
#Iterate and Ship
3 min
When It Breaks
8The preview went white, the build failed, or a feature quietly stopped working. Work through it in this order instead of firing more prompts.
The Prompting Playbook
Stop prompting the moment it breaks
The instinct when something breaks is to immediately send another prompt.
#When It Breaks
3 min
The Prompting Playbook
Describe the symptom, not the cause
If you're not a developer, your guess about what broke is probably wrong — and a wrong guess sends the agent digging in the wrong file.
#When It Breaks
3 min
The Prompting Playbook
Give it the error text and a screenshot
Never paraphrase an error.
#When It Breaks
3 min
The Prompting Playbook
Two failed fixes, then switch to Plan mode
Use the automatic fix attempt once.
#When It Breaks
3 min
The Prompting Playbook
Isolate before you fix
Narrow down where the problem actually lives before asking for a fix.
#When It Breaks
3 min
The Prompting Playbook
Reverting is not failure
Restoring to the last working version is almost always cheaper than six fix prompts.
#When It Breaks
3 min
The Prompting Playbook
Keep a log of what broke it
The same mistakes repeat.
#When It Breaks
3 min
The Prompting Playbook
The Debugging Triage Table
Match the symptom you are seeing to the right first move before you prompt again.
#When It Breaks
3 min
Guides
6Guides
AI App Builders Do More Than Build Apps
Modern AI app builders analyse your files, run real calculations and generate reports, decks and invoices you can download. Here's what that unlocks.
Beginner#Guide#No-code development#Beginner
11 min
Guides
Starting Guide: No-Code Development
Learn no-code development from scratch: what it is, why it's worth learning, and a simple 3-phase method to build your first working app without writing code.
Beginner#Guide#No-code development#Beginner
9 min
Guides
How to Write Prompts for AI App Builders
Learn how to describe your app so an AI builder gets it right: what to put in your first prompt, how to refine the result, and the mistakes that waste time.
Beginner#Guide#No-code development#Beginner
10 min
Guides
SEO and GEO for No-Code Websites
What SEO and GEO actually mean, which parts your no-code platform handles for you, and the handful of things you still have to do yourself to get found.
Beginner#Guide#No-code development#Beginner
12 min
Guides
What Is DESIGN.md?
DESIGN.md is a design system file AI agents read to build consistent UI. The two-layer format, the token schema, all 8 sections, and the official CLI explained.
Intermediate#Guide#No-code development#Intermediate
20 min
Guides
Website Sections and UI Elements Explained
A plain-language dictionary of every part a website or app is built from: sections, forms, tables, overlays and states, so you can name what you want.
Beginner#Guide#No-code development#Beginner#Reference
25 min