UI Improvementsbeginner
Improve the Design of an Existing Page
Turns a generic AI-generated page into something with real typographic hierarchy and spacing rhythm.
When to use it
Design polish
Lovable Prompt
Improve the visual design of [PAGE] without changing its functionality or content structure. Focus on: - Typographic hierarchy: one clear H1, consistent heading scale, comfortable line length of about 65 characters for body text. - Spacing rhythm: consistent vertical spacing between sections, generous whitespace. - A restrained palette using existing design tokens. Do not hardcode colours. - Clear interactive states: hover, focus and disabled. - Better empty and loading states. Avoid: large gradients, glass cards, floating blobs, glowing accents and decorative animation. This should look like a well-made product interface, not an AI template. Do not change any copy, routes or data behaviour.
Build your version of this prompt
Fill in your details and the prompt below updates as you type. Anything you skip stays as a square-bracket placeholder so you can see what's still missing.
Your prompt
Improve the visual design of [Page] without changing its functionality or content structure. Focus on: - Typographic hierarchy: one clear H1, consistent heading scale, comfortable line length of about 65 characters for body text. - Spacing rhythm: consistent vertical spacing between sections, generous whitespace. - A restrained palette using existing design tokens. Do not hardcode colours. - Clear interactive states: hover, focus and disabled. - Better empty and loading states. Avoid: large gradients, glass cards, floating blobs, glowing accents and decorative animation. This should look like a well-made product interface, not an AI template. Do not change any copy, routes or data behaviour.
1 field still empty — the prompt works better when they're filled in.
How to use this prompt
- Fill in the fields above — plain language beats jargon.
- Copy the prompt and paste it into Lovable as a single message.
- Let it finish before you send anything else, then read what changed.
- If the result is close but not right, describe the difference rather than restating the whole prompt.
Suggested follow-up prompt
Review what you just built for Improve the Design of an Existing Page. 1. List anything you changed that I did not ask for, and undo it. 2. Check it works on a 375px-wide phone screen: no horizontal scrolling, tap targets at least 44px. 3. Confirm every form shows a clear error and a clear success state. 4. Tell me in plain language what is still missing before this is safe to publish. Do not add new features in this step.
Why it works
It gives concrete, checkable design rules instead of the word "modern", and it bans the specific clichés.
Was this prompt helpful?
You might also need
- GuideHow to Improve Mobile LayoutsFix the responsive problems AI-generated interfaces most commonly ship with.
- AnswerHow do I make my Lovable website look less AI-generated?Set a real colour palette, a font pairing and spacing scale up front, then ask Lovable to remove generic gradients, stock-photo hero clichés and default shadcn styling so the site reads as bespoke.
- AnswerHow do I add animations?Ask for specific, subtle animations (fade-in on scroll, hover states, a smooth page transition) rather than "add animations" generally — Lovable can use Tailwind transitions or a library like Framer Motion depending on what you need.
- AnswerHow do I improve accessibility?Ask Lovable to check colour contrast, add alt text to images, ensure keyboard navigation works, and use semantic HTML/ARIA labels — these cover most common accessibility gaps in generated sites without needing a full audit tool.
