If you’re using lovable to build apps, read this first This is...
Prajwal Tomar@PrajwalTomar_
72 views
Jun 25, 2025
~3 min read
Advertisement
1
If you’re using lovable to build apps, read this first
This is everything I wish I knew before starting ↓
This is everything I wish I knew before starting ↓
2
1. Nail your first prompt
I always start inside my custom GPT, SnapPrompt, and get the full prompt for my landing page first.
This includes layout, structure, typography, and design style. I just copy-paste that into Lovable with a design reference attached and it gives me a clean starting point.
I always start inside my custom GPT, SnapPrompt, and get the full prompt for my landing page first.
This includes layout, structure, typography, and design style. I just copy-paste that into Lovable with a design reference attached and it gives me a clean starting point.
3
2. Always prep your technical docs before starting in Lovable
Don’t dive in blind.
Have your DB design, UI Dev plan, MVP plan, and implementation plan ready.
Keep it simple, generate them during the planning phase using GPT or Gemini.
Then just paste them as .md files into Lovable.
That way, Lovable has full context about your product from the start.
Don’t dive in blind.
Have your DB design, UI Dev plan, MVP plan, and implementation plan ready.
Keep it simple, generate them during the planning phase using GPT or Gemini.
Then just paste them as .md files into Lovable.
That way, Lovable has full context about your product from the start.
4
3. Use REVERT like a save point
Use this button A LOT.
If things break, you’re 1 click away from rolling back.
Makes testing faster and less stressful.
Use this button A LOT.
If things break, you’re 1 click away from rolling back.
Makes testing faster and less stressful.
5
4. Use screenshots. Always.
Lovable understands images way better than text.
Instead of explaining your issue in 10 lines, just drop a screenshot.
Add one line of context, what’s wrong and what you want changed.
Use the selector tool to highlight the exact part of the page too.
That extra context helps a lot.
The results are way more accurate.
Lovable understands images way better than text.
Instead of explaining your issue in 10 lines, just drop a screenshot.
Add one line of context, what’s wrong and what you want changed.
Use the selector tool to highlight the exact part of the page too.
That extra context helps a lot.
The results are way more accurate.
6
5. Design system
Make sure Lovable isn’t hardcoding color values.
Ask it to store your full color palette in tailwind.config.ts. Sometimes it does this on its own, but sometimes you’ll need to prompt it.
Never hardcode hex values inside components, it’ll mess with consistency later.
Make sure Lovable isn’t hardcoding color values.
Ask it to store your full color palette in tailwind.config.ts. Sometimes it does this on its own, but sometimes you’ll need to prompt it.
Never hardcode hex values inside components, it’ll mess with consistency later.
7
6. If the first build sucks, restart.
Tried tweaking 10 times and it’s still not right?
Trash it.
Rework the prompt.
Start fresh.
You can’t fix a broken foundation. Most of my best builds came on the second attempt.
Tried tweaking 10 times and it’s still not right?
Trash it.
Rework the prompt.
Start fresh.
You can’t fix a broken foundation. Most of my best builds came on the second attempt.
8
7. UI looking generic?
Use prebuilt components from libraries like Magic UI, 21st.dev, or Aceternity UI.
For slick animations, grab effects from Unicorn Studio.
I personally recommend 21st.dev, you can just copy the component code as a prompt and paste it into Lovable. It’ll update your selected element instantly with the new one.
Super clean, super fast.
Use prebuilt components from libraries like Magic UI, 21st.dev, or Aceternity UI.
For slick animations, grab effects from Unicorn Studio.
I personally recommend 21st.dev, you can just copy the component code as a prompt and paste it into Lovable. It’ll update your selected element instantly with the new one.
Super clean, super fast.
9
8. Add auth + payments right after frontend
Once your UI is done (based on your UI dev plan), integrate Supabase and build out your database structure.
Then add login and payments.
Lovable adapts the rest of the build around these systems.
Add them too late and everything breaks.
Use Supabase for auth, Stripe for payments. Works every time.
Once your UI is done (based on your UI dev plan), integrate Supabase and build out your database structure.
Then add login and payments.
Lovable adapts the rest of the build around these systems.
Add them too late and everything breaks.
Use Supabase for auth, Stripe for payments. Works every time.
10
9. Use GitHub 2-way sync wisely
Once you’re 70–80% done, Lovable can get stuck on complex features.
Don’t waste time or tokens.
Sync the repo to GitHub and open it in Cursor. Debug and finish the feature there.
Then pull the changes back into Lovable for final polish.
Once you’re 70–80% done, Lovable can get stuck on complex features.
Don’t waste time or tokens.
Sync the repo to GitHub and open it in Cursor. Debug and finish the feature there.
Then pull the changes back into Lovable for final polish.
11
10. Upload images this way
Just drag and drop your image, select the target section, and prompt Lovable to upload it.
It’ll store it inside Supabase Storage, get the public URL, and link it automatically.
Way faster than manually uploading assets.
Just drag and drop your image, select the target section, and prompt Lovable to upload it.
It’ll store it inside Supabase Storage, get the public URL, and link it automatically.
Way faster than manually uploading assets.
12
11. Mobile optimization
Once the desktop version is ready, just prompt:
“Make the whole page responsive and optimize for mobile.”
Lovable usually does a decent job.
Then go through each page manually.
Sometimes it messes up the desktop layout, so double-check before shipping.
Once the desktop version is ready, just prompt:
“Make the whole page responsive and optimize for mobile.”
Lovable usually does a decent job.
Then go through each page manually.
Sometimes it messes up the desktop layout, so double-check before shipping.
13
12. Get ready for launch
Ensure you have added:
- meta title + description
- favicon
- OG image
Then just:
- hook your custom domain
- remove the lovable branding from settings
and SHIP
Ensure you have added:
- meta title + description
- favicon
- OG image
Then just:
- hook your custom domain
- remove the lovable branding from settings
and SHIP
14
That's my exact system.
I've learned all these tips and tricks after working on numerous client projects and using Lovable almost daily.
If you're building with Lovable, bookmark this.
It'll save you hours of struggle.
I've learned all these tips and tricks after working on numerous client projects and using Lovable almost daily.
If you're building with Lovable, bookmark this.
It'll save you hours of struggle.
15
I hope you've found this thread helpful.
Follow me @PrajwalTomar_ for more.
Like/Repost the quote below if you can:
Follow me @PrajwalTomar_ for more.
Like/Repost the quote below if you can:
Prajwal Tomar@PrajwalTomar_
If you’re using lovable to build apps, read this first
This is everything I wish I knew before starting ↓
This is everything I wish I knew before starting ↓