How to make a vibe-coded site look professional

If your site was built by an agent and it looks like every other one, you don't need to start again and you don't need to be a designer. You need to make the decisions the model made by default, on purpose, and give it something better than an adjective to work from.

"Make it modern and clean" is the prompt that got you here. Those words describe the average, so the average is what comes back.

Why banning things doesn't work

The first thing most people try is a list: no purple, no gradients, no Inter. It helps for one round. Anthropic describes the same effect in its own testing, where telling the model to avoid common fonts sent it to a different common font instead. One detailed guide calls what follows the second wave: cream backgrounds with a serif and a terracotta accent, near-black with one neon colour, or newspaper rules on a product that isn't a newspaper.

A ban removes a default. It doesn't supply a direction, so the model reaches for the next most likely thing.

How to fix it

1. Pick one real site as the direction. Not a mood, a page. Choose a site whose feel suits your product and your customers, ideally outside the handful everyone copies. A named reference beats any list of adjectives.
2. Get its real values. Read the font, sizes, colours, radii and spacing from the page itself rather than from a picture of it. Our guide on extracting design tokens covers the free ways to do this.
3. Write them into a DESIGN.md. Put the palette, type scale, spacing and rules in one file and tell your agent to read it before touching any UI, from AGENTS.md in Cursor, Codex or Copilot, or from CLAUDE.md in Claude Code. This is the most repeated advice in the Reddit threads on this problem, and it stops the look drifting from page to page.
4. Replace your values, keep the system. Keep the structure and rhythm, then choose your own colours and type within it. The aim is a site that's built as well as the reference, not a copy of it.
5. Fix spacing and hierarchy before colour. Ask the agent to audit one section at a time for spacing, font hierarchy and contrast. Most of the template feeling lives here, and colour can't rescue it.
6. Remove the filler. Delete the pill badge, the invented metrics, the emoji headers, the fade on every section. Replace generic buttons with what the button does, and show the actual product where a stock illustration was.
7. Compare it with the reference side by side. Open both and look for what's still off. Fix those parts with numbers, not with "make it pop".

What makes the biggest difference

Scope. Agents do worse when asked to redesign a whole page in one go, and one person on Reddit found that a style requested for one section got applied to all of them. Work a component at a time, say what must not change, and finish the frontend before you build more on top of it.

Then there's the part no tool does: real screenshots of your product, real customers, real numbers. The surest sign nobody was home is a page that could be about anything.

Where plagio fits

We make plagio, which does steps one and two from inside your agent: you name a public page and it gets the markup, tokens, hover states and motion, measured in a real browser. You don't need it for this. A free extractor and some patience will get you most of the way. It saves time when you do this often, or when hover states and animation are what you're after.