How to fix the design of a website an AI agent already built

The site works, but it looks like every other AI-built site: a purple-to-blue gradient, an Inter-first font stack, three identical feature cards, a centred hero. You do not have to start again. This page is a seven-step order of work for restyling an existing site in place with Claude Code, Cursor or Copilot, so the content and the code stay and only the look changes.

Before you start

Commit or copy the project first, so you can undo a step that goes wrong. Work in the order below: tokens first, layout last. Restyling one page at a time with a new prompt each time is what produces a site whose pages disagree with each other.

The seven steps

1. Measure what you have. Paste the page into the free AI design tells checker, or, for a whole folder, run the MIT slop-lint command-line tool with node slop-lint.mjs .. Keep the list: it is your before picture, and each finding names the line and the change that removes it.
2. Move every colour and font into one place. Ask the agent to collect all colours, font families and spacing values into CSS custom properties at the top of one stylesheet (or the @theme block in Tailwind v4), and to replace the scattered values with those names. Nothing should look different yet. This is the step that makes every later change small.
3. Choose the look in words before you change anything. Write half a page: one colour for this subject and why, one text face and one display face (system stacks are fine), the corner policy (square, or a small radius), how depth is shown (a rule, a border, a surface step) and what the first screen leads with. The free DESIGN.md template has the headings. Put the file in the project root and tell the agent to read it first.
4. Swap the tokens. Change only the custom-property values to the new palette and fonts. Check text contrast at 4.5:1 for body text and 3:1 for large text and interface borders (WCAG 2.2, criterion 1.4.3 and 1.4.11). Reload every page: anything still purple is a value that was written directly instead of through a token, so fix it at the source.
5. Remove the effects. Delete gradients, backdrop-filter, large coloured shadows, emoji used as icons, the uppercase letter-spaced label above each heading, and the scroll-triggered fade-up. Replace depth with a 1px border or a flat surface colour. The list of Tailwind classes to search for covers the utility-class versions.
6. Change one layout, not all of them. Take the section that is a row of three identical cards and show the same three facts in the form that suits them: a ruled list, a table, numbered steps or two sentences. Left-align the hero and lead with the most specific fact you have (a number, a place, a price). Do this to the home page first and let the other pages follow.
7. Re-measure and read it with your own eyes. Run the checker again and compare it with the step 1 list. Then Tab through the page to confirm every link and button shows a focus outline, and resize to 320 px wide to confirm nothing scrolls sideways. A checker can only read patterns, so a page can pass and still be dull: if it is, the fault is usually step 3, a look that was never decided.

A prompt for the restyle

Paste this after the DESIGN.md exists, and edit the bracketed parts:

Read DESIGN.md. Restyle this site to match it without changing the
content, routes or functionality.
1. Put every colour, font family and spacing value in custom properties
   in [styles.css]; use only those tokens afterwards.
2. Do not use gradients, backdrop blur, glow shadows, emoji icons,
   uppercase letter-spaced labels or scroll reveal animations.
3. Replace any row of equal feature cards with the form DESIGN.md names.
4. Keep a visible :focus-visible outline of 2px or more on every link,
   button and field.
5. When done, list every file you changed and any value you could not
   move into a token.

What this will not do

An agent can drift back to its defaults partway through a long session, which is why step 7 is a re-run and not a one-off. The checker reads text patterns in what you give it, so it will miss styles imported from files it was not shown and class names assembled at run time. And none of this replaces choosing a direction that fits your business: the steps remove the defaults, they do not supply taste.

If you would rather start from a finished direction than write step 3 yourself, Looksheet is five original looks, each with a DESIGN.md, working pages and rules files for Claude Code, Cursor and Copilot. The guide to the tells explains why agents produce the default look in the first place.