Making the most of Lovable's 5 Free Daily Prompts
Get 60% of the way to your app in as few prompts as possible
Lovable is wonderful!
But, I pay for 200 credits per month on Lovable and might need to upgrade further. Don't be like me. Let me show you how to squeeze out every drop of each prompt.
Lovable only gives me 5 prompts a day. How do I build an app with that?
Here is the formula I use to get most of the way there with 3-5 prompts.
Design Brief + User Flow + Supabase
Core UI component
Integrate API + Database
Consolidate UI/UX
Refactor, document, hand off
Here is the step by step.
Before Love: Before even starting on Lovable. I fire up ChatGPT multimodal (or if you prefer another AI assitant. Chat it through your idea “Here’s the product, the vibe, the user journey.” Ask it to spit back a one-page design brief, including project goals, UX/UI description, and user navigation flow.
Output: a tight design brief (no timelines, no stack suggestions – Lovable hates those).
Step #1: Generate wireframe and core pages using Lovable.
Prompt #1: [Design brief] + [Supabase connect] + [other high level design instructions]At this stage your app should already be starting to take shape. At this stage, you can already connect to a new Supabase project and implement user account creation. For example, if you had a landing page, authentication, then a private portal for the user, then setting up Supabase would help distinguish the different pages.
Step #2: Generate the core component using 21st.dev
Their chatbot allows you to rapidly spin up variations on the component design you want. And chat with it further to refine the UI. When you're satisfied, click "Copy Prompt"
Prompt #2: [21st.dev Component Prompt] + [Where it goes in the app]At this stage your core UI component should be looking and functioning as you intended. But most of the buttons probably don't do anything yet. Nothing saves. It's just cosmetic.
Step #3: Hook Up Logic (API and Database function) with Supabase and OpenAI
You can fire up ChatGPT again and pull up your original design brief. Describe the changes you made in 21st.dev, ask it to come up with the appropriate hooks (where everything goes), tables for saving data (how it's stored), authentication (who gets to access what), and CRUD (how does the app Create, Read, Update, and Delete functions). Lovable will generate code to do all of that on Supabase based on this Backend Brief.
If you are using an API, such as OpenAI and Gemini on my case. This is where you ask Lovable to create edge functions on Supabase to handle the communication with APIs. It will ask you for the API key to store into your secret keys in Supabase.
Prompt #3: [Backend Brief] + [describe APIs & functions]At this point, the app should look and work roughly like how you intend to. But I often find things to be broken. This is when you should do a thorough quality control and make a detailed list of issues and bugs and things that are just cosmetic or not working as you intended.
Step #4: Quality Control, Refine UI/UX & Clean Code
With that list of issues, and cosmetic design changes, feed it back into lovable. This can be a bullet point list. Lovable can handle a good number of them, but I find sometimes the quantity can overwhelm the attention and some issues get dropped or misunderstood. Try to keep it at about 10 things or less.
Prompt #4:
#1. I have a problem wiht this
#2 and that
#3 and that too...
#4 ugh just remove that altogether.
#5 OMG WHAT WERE YYOU THINKING WITH THIS???
#6 Oh! An idea! Add notification toasts. Hopefully that works and your app is 60% of the way to the final product. For me, this is when I prepare the app for more precision editing on Cursor.
Step #5: Refactor, Export, Document, Hand-Off
It is likely that your core component is getting quite bloated in the codebase. This makes future AI editing of it quite tricky, because there is so much code, making new edits might mean losing existing components in it. It is time to refactor!
To get the app ready for other AI systems to view, I found it great to have Lovable document all of the choices we made together into a (.md) file that Cursor or Codex or Replit Or Bolt or whatever else you might end up using.
Prompt #5: Refactor [large file names] + Generate .md file of all the design and architecture decisions.Alright, you're all set. Push to Git. Grab it on Cursor and start tinkering manually.
Here is the final app: https://debate-genesis-arena.lovable.app/
Like what you read? I have a Substack where I post things like this: AI, design, prototyping, entrepreneurship, and whatever fascinates me at the current moment.
Subscribe for more: https://ericgu.substack.com/
Oh woah, still reading?
Heres a couple more things then.
Want to hear from an AI version of your future self?
https://www.futurediary.space/
Are you teaching a course and want to use the no-code AI sandbox?
https://www.ailixr.xyz/
Want to know more about me?
https://arteliers.work/