Handy Lovable tips

If you work with Lovable daily, the difference between "frustratingly expensive" and "surprisingly efficient" is almost never the platform itself, but your way of working. Below are the tips we as a Lovable partner pass on most often to clients — from saving credits to checks on security, speed and SEO.

Don't have an account yet? You can start for free with Lovable and try the tips below directly in your own project.

1. Pack as many instructions as possible into one prompt

Every instruction you send costs at least 1 credit — even "make that button a bit bigger". Ten separate mini-tasks therefore cost ten times as much as one well-written prompt with ten points in it.

So bundle everything that belongs together:

Adjust three things on the contact page:
1. Make the "Submit" button full width on mobile.
2. Make the phone field optional and update the label.
3. Add our opening hours below the form in the same
   style as the address details.

The only limit is clarity: as long as each point can be understood and tested individually, you can safely put five to ten of them in one prompt. If it becomes a cloud of vague wishes that overlap ("and make the whole thing more modern"), splitting it up actually leads to fewer correction rounds. More on this in our Lovable prompting guide.

2. Change text with the text editor, not with a prompt

For purely textual changes (typos, a different heading, adjusting a price), Lovable has a visual edit mode. You click on the text and type the new version — without credits, and without the risk that the AI "thinks along" and also changes your formatting or layout.

Rule of thumb:

Type of change	Do it with
Words, headings, prices, labels	Text editor (visual edits)
New section, logic, styling, data	Prompt
Changing text and adjusting the layout	Prompt (once, bundled)

3. Animations and videos: upload a recording and ask for 1-to-1

Want to recreate an existing animation, hover effect or scroll interaction? Don't describe it in words — that almost always takes multiple rounds. Make a screen recording (or export the video), upload it as an attachment and explicitly say it should be copied exactly:

See the attached recording. Recreate this animation 1 to 1: the
same timing, colours, easing and order of elements. Do not deviate
and do not invent your own variant.

Words like "1 to 1", "exact", "same timing and colours" really do work. Without that instruction you get an interpretation instead of a copy.

4. Indicate when content is your own

If you upload a screenshot of an existing site, a text or a design, Lovable is cautious about copying because of copyright — you'll get a free variant or a refusal. If it's your own material, just say so:

This is our own website / our own design; we are the rights
holder. Take over the layout and styling exactly.

If it's not your own material, use it as inspiration rather than as a copy — that's not just a platform rule but also the legally safe route.

5. Queue up a row of tasks and go do something else

You don't have to sit and wait next to every build. Line up several instructions and let Lovable finish them while you work on something else — or just go to lunch. That way you're effectively working double.

Two ways to scale that up:

• Queue within one project: send in your next instructions and let them run one after another. Works best for tasks that don't get in each other's way (different pages or components).
• Multiple projects in parallel: have project A build a blog section while project B gets a dashboard.

Do watch out: tasks that touch the same files, or that depend on the result of the previous step, are better planned one after another with a check in between.

6. Use the suggestions above the prompt window

Lovable itself suggests quick tasks — checks, improvements, logical next steps. Those suggestions have been pretty good lately and often point you to improvements you hadn't thought of yourself: a missing empty state, a mobile check, a missing validation. Read through them before you start typing yourself; sometimes the suggestion is exactly your next prompt.

7. Test on all devices via the preview switcher

A fix that works on desktop can break on mobile (and vice versa). Use the device switcher above the preview and go through at least desktop, tablet and mobile after every larger change. Look specifically at:

• Buttons and CTAs that fall outside the view or slide under a sticky header
• Text that gets cut off or causes horizontal scrolling
• Sticky elements and overlays that fill half the screen on mobile
• Forms: does the field still fit, can the button be reached without zooming

Just say it in your prompt too: "check the result on mobile, tablet and desktop".

8. Work with examples and attachments: this yes, this no

A screenshot with an explanation works better than three paragraphs of description. Upload two examples and label them:

Attachment 1 (yes, like this): this is how we want the cards —
fixed height, title on top, one button at the bottom.
Attachment 2 (not like this): here the buttons are side by side
and the height varies; we don't want that.

That "not like this" example prevents the classic situation where your result is technically correct but visually goes the wrong way.

9. Have it check regularly for security, speed and SEO

These three slip away as soon as you build quickly. Make it a recurring task, for example after every completed feature:

Do a check on:
1. Security — do all tables have RLS rules, and can nobody see
   data that isn't theirs?
2. Speed — which images, scripts or sections are slowing down
   the first render?
3. SEO — does every page have a unique title and meta
   description, one H1, alt texts and a correct canonical?

With security this is not a luxury: incorrectly configured access rules are the most common mistake in quickly built apps. Always have authorisation logic around sensitive data reviewed by a human too — see from prototype to production.

10. Share the URL of your PageSpeed report

This is one of the most effective speed tricks. Run your page through Google PageSpeed Insights, use Copy link in the top right, and paste that URL into your prompt:

Here is the PageSpeed report of our homepage: [URL]
Analyse the recommendations and implement the improvements that
improve LCP and CLS on mobile, without changing the layout.

Lovable can then read the report itself and work concretely on the biggest issues, instead of guessing at general optimisations. Then take a new measurement and share the new report — that way you see per round whether it's actually getting better.

11. Put the right pages in your sitemap (and submit it)

By default, pages sometimes end up in your sitemap that don't belong there: thank-you pages, test pages, admin or login screens, duplicate variants of the same page. That dilutes what Google understands about your site.

Do this explicitly:

Only include public, indexable pages in the sitemap.
Exclude: /admin*, /thank-you, test pages and duplicate variants.
Also set those to noindex and make sure robots.txt excludes the
admin routes.

Then submit the sitemap to Google Search Console (Sitemaps → URL of your sitemap.xml) and check the Pages report after a few days: which URLs are indexed and which aren't, and why not.

12. Common stumbling blocks (and how to avoid them)

• "It got stuck in an error loop." Don't keep sending "try again". Paste in the exact error message from the console and describe what you did. Still stuck: roll back to the last working version and tackle it again in a smaller step.
• "Something changed that I didn't ask for." Set boundaries in your prompt: "only change X, leave the rest of the page alone."
• "I lost my good version." Use the version history and roll back; connect GitHub for serious projects, so you have a real history.
• "I'm wasting credits on small tweaks." Collect small wishes in a list and send them as one prompt (tip 1) or solve them with the text editor (tip 2).
• "Plan mode, when?" As soon as a change touches multiple pages or your data model: have it make the plan first and review it yourself, then have it build.
• "It works in the preview but not live." Publishing is a separate step; always check the live URL afterwards, including forms and emails.
• "The AI invents data." Explicitly say that no sample data should be invented and that empty lists should stay empty with a proper empty state.
• "My app is slow with lots of data." Ask for pagination or lazy loading instead of loading everything at once — and measure again afterwards.

What we would do

Work in blocks: bundle wishes into one prompt, let a row of tasks run while you work on something else, and close each block with a mobile check plus a round of security, speed and SEO. Adjust text with the editor, deliver animations as a recording, and when in doubt about authorisation, have a human look at it.

Want help setting up this way of working for your team, or making an existing Lovable app production-ready? Check out Lovable for businesses or get in touch.

Frequently asked questions

Does a small change really cost a whole credit?

Yes — every sent instruction costs at least one credit, no matter how small. That is why bundling (or using the text editor) is so effective.

Can I have multiple tasks run at the same time?

You can queue tasks one after another and also work in multiple projects in parallel. Tasks that touch the same files are best planned one after the other.

Why does Lovable sometimes refuse to copy a design?

Because of copyright. If it is your own material, say so explicitly in your prompt; otherwise use it as inspiration rather than as a copy.

How do I get Lovable to improve my PageSpeed score?

Copy the report URL from PageSpeed Insights (button in the top right) and paste it into your prompt, asking it to implement the recommendations. Then measure again.