How to make a Lovable app look professional (without hiring a designer)

A practical, prompt-by-prompt way to take a Lovable app from "obviously generated" to "someone designed this": tokens, type, layout, copy and the badge.

Updated 2026-10-15 · 5 min read · by the Unslop Me team

Lovable is very good at getting a working app in front of you. It is also very consistent about how that app looks: a centered hero, an indigo-to-purple gradient, Inter everywhere, a row of three rounded cards with Lucide icons, and a glassy navbar. None of those choices is bad on its own. Together, they read as "default", and people have learned to spot it.

The good news is that this look comes from defaults, not from limits. Lovable will build something with character if you tell it exactly what character you want. This guide is the order we'd do it in, with prompts you can paste.

1. Decide on three things before you prompt anything

Vague prompts like "make it modern and clean" are what produce the default look, because "modern and clean" is the default look. Before touching Lovable, write down:

• One display font and one text font. For example Fraunces + Inter Tight, Instrument Serif + IBM Plex Sans, or Space Grotesk + IBM Plex Mono. See best fonts for vibe-coded apps for pairings that work.
• Five colors as hex values. Background, ink (text), muted text, one accent, one line/border color. Avoid stock Tailwind indigo (#6366f1) and slate. This palette guide has starting sets.
• A radius. Pick 0, 2, 4 or 6px. Not "rounded-2xl on everything".

That's your design system. It fits on a sticky note, and it's the part AI tools can't invent for you because they don't know your product.

2. Install the tokens first, in one prompt

Paste this into Lovable, with your own values:

Change only styling. Do not change routes, data fetching, state or component logic.

Set up a design system and apply it everywhere:
- Fonts: load "Fraunces" (weights 400, 700, 800) and "Inter Tight" (400, 500, 600) from Google Fonts. Headings use Fraunces, body and UI use Inter Tight. Remove Inter.
- Colors (add as CSS variables and Tailwind theme colors, and replace every indigo/violet/purple/slate class):
  --paper #f4f0e8 (page background), --ink #16130f (text, primary buttons), --muted #6b6459, --accent #ff4d1c (one highlight per screen, links on hover), --line #d9d2c4 (borders)
- Border radius: 4px on buttons, inputs and cards. No pill buttons.
- Remove all gradients and backdrop-blur. Surfaces are solid with a 1.5px --ink or --line border.
- Shadows: none, except an optional hard offset shadow (6px 6px 0 var(--ink)) on one featured element.

Check the result in the preview, then publish. Don't combine this with layout changes; if something breaks, you want to know which prompt did it.

3. Fix the hero, which is where people decide

The centered stack of badge, giant headline, subheading and two buttons is the most recognisable AI layout there is. Try an asymmetric one:

Change only the hero section layout and styling.
- Left-align everything. Two columns on desktop: 7/12 text, 5/12 a real product screenshot (use the existing dashboard component rendered at small scale, or a placeholder image I will replace).
- Remove the pill badge above the headline. Replace it with a small uppercase monospace label, e.g. "FOR INDEPENDENT BOOKKEEPERS".
- Headline: Fraunces 800, 72px desktop / 44px mobile, line-height 0.95, letter-spacing -0.03em. Max 8 words.
- One primary button (--ink background, --paper text). The secondary action is a plain underlined text link, not a second button.
- Stack to one column under 900px; screenshot goes below the text.

4. Break the three-card grid

Feature grids of identical cards with an icon in a circle are the second-biggest tell. Replace them with something that has hierarchy:

Replace the features grid with a numbered list layout:
- A left column with the section heading (Fraunces 700, 48px).
- A right column with features as rows: large italic numeral in --accent (01, 02, 03), feature title in Fraunces 600 24px, one sentence of description. 1px --line border between rows.
- Remove all icons from this section.
- If there's a 4th or 5th feature, keep them in the same list; don't make a second grid.

If one feature matters more than the others, give it its own section with a screenshot instead.

5. Rewrite the copy in plain words

Lovable fills gaps with phrases like "Unlock your potential" and "Seamlessly streamline your workflow". Your visitors have read those exact sentences on hundreds of sites. You can ask Lovable to rewrite, but you'll get a better result writing three lines yourself:

• Headline: what it is, for whom. "Invoices for freelance translators."
• Subhead: the outcome plus one concrete detail. "Send a branded invoice in under a minute, get paid by card or bank transfer, and see who's late at a glance."
• Button: the action. "Create an invoice", not "Get started".

There's a longer list of phrases to cut in landing page copy that doesn't sound AI.

6. Replace emoji and generic icons

Rocket, lightning bolt and sparkles emoji in headings are an instant giveaway. Either remove icons entirely (often the best option) or ask for one consistent set:

Remove all emoji from headings, buttons and cards. Where an icon is genuinely useful, use Phosphor icons (regular weight, 20px) consistently. Do not use icons inside circles or colored squares.

7. Check mobile at 390px

AI builders often leave something that overflows horizontally on phones, like a wide table, a long URL or a fixed-width image. Open the published site on an actual phone, or in your browser at 390px wide, and scroll sideways. If the page moves, ask Lovable: "Find and fix any element wider than the viewport at 390px. Add overflow-wrap:anywhere to long text and make tables scroll inside their own container."

8. Remove the badge and polish the details

• Hide the "Edit with Lovable" badge (Project settings, on paid plans).
• Add a real favicon and a proper <title> and description.
• Add an Open Graph image so your link previews don't show a blank card.
• Use a custom domain if you can. A .lovable.app URL is fine for testing but tells people what you built it with.

Measure it

Run your published URL through the free Slop Score scanner before and after. It checks for the exact tells above (gradients, stock palette, font stack, card grids, emoji, glass, badges, mobile overflow) and gives you fix prompts written for Lovable. The leaderboard shows how other Lovable, Bolt and v0 apps score, which is a useful sense check. For a final pass before launch, use the pre-launch design checklist.

FAQ