Lovable App Builder: How to Write Prompts
Specific techniques for the Lovable app builder interface. Learn how to make the most of the chat, preview, and editing features.
Understanding the Lovable Interface
The Lovable app builder has three main areas you'll work with: the chat panel, the live preview, and the code editor. Understanding how to use each one effectively will significantly improve your building experience.
The Chat Panel
The chat is your primary interface for communicating with Lovable. Here's how to use it effectively:
Starting a New Project
When you start fresh, your first prompt sets the foundation. Be comprehensive but focused:
"Create a personal portfolio website with a hero section, about me, projects grid, and contact form. Use a minimal design with a dark theme option. Primary accent color: coral (#FF6B6B)."
Making Changes
When requesting changes to existing code, be specific about what you want modified:
"In the hero section, change the headline to 'Design Engineer' and add an animated gradient background. Keep everything else the same."
Referencing the Preview
You can reference what you see in the preview to make precise requests:
"The card on the right side of the projects section is too close to the edge. Add more padding on the right side of the grid."
The Live Preview
The preview updates in real-time as Lovable generates code. Use it to:
- Verify changes match your expectations
- Test interactive elements (buttons, forms, navigation)
- Check responsive behavior at different sizes
- Identify issues to address in follow-up prompts
Using the Console
If something isn't working, check the browser console. You can mention errors in your prompts:
"I'm getting a 'Cannot read property of undefined' error when clicking the submit button. The error points to the handleSubmit function."
Working with the Code Editor
For paid plans, you can directly edit the code. This is useful for:
- Making small text changes without using a prompt
- Adjusting specific CSS values
- Adding or modifying content
- Debugging issues you've identified
After making manual edits, you can continue prompting. Lovable will work with your modified code:
"I've added a new section called 'testimonials' to the page. Please style it to match the rest of the site, using the same card design as the projects section."
Efficient Workflows
The Build-Review-Refine Loop
The most efficient workflow follows this pattern:
- Write a focused prompt for one feature or section
- Wait for generation and review in the preview
- Note what needs improvement
- Write a follow-up prompt addressing specific issues
- Repeat until satisfied
When to Start Fresh
Sometimes it's more efficient to start a section over than to iterate endlessly:
"The current pricing section isn't working. Please replace it completely with a new version: horizontal layout with 3 cards side by side, each card has a header with plan name, price, feature list, and CTA button."
Ready to Build?
That is the whole loop: prompt in the chat panel, check the preview, scope the next request to what you saw. Grab a prompt from the library and run it end to end once; the workflow makes more sense after one full build than after any guide.
Written by
Marco Kohns
Founder of ProtoBites - Venture Growth Studio
Growth PM at a Silicon Valley scale-up (a16z and General Catalyst backed), ex-Techstars where he consulted 13 early-stage startups, Reforge-trained. Every prompt on this site comes out of shipping ProtoBites' own portfolio products.