How to Make Your AI-Built Website Look Less Like AI

This assumes you already have a working page built with an AI coding agent, and it looks fine. Not bad. Just unmistakably generated.

Below is what I do to fix that, roughly in order of how much difference it makes per minute spent. Most of it is subtraction.

1. Cut the number of type sizes to five

Open the page and list every distinct font size. If you have nine, that is the biggest single problem, and it is invisible until you count.

Pick five and delete the rest:

display  40px / 600 / line-height 1.1 / tracking -0.02em
heading  24px / 600 / line-height 1.3
body     16px / 400 / line-height 1.6
small    14px / 400 / line-height 1.5
label    12px / 500 / line-height 1.4 / uppercase / tracking 0.04em

Then force everything onto them. That 18px paragraph becomes 16px. That 22px card heading becomes 24px. It feels like losing precision. What you gain is a page that reads as one system.

Note the tracking on display. Large type set at default tracking looks slightly loose, and slightly loose at 40px reads as unfinished. Negative tracking above roughly 32px is one of the highest-leverage changes on this list, and agents almost never add it unless told.

2. Give every colour a job

Most generated pages have a palette that looks like this: a brand colour, plus five greys that arrived independently, plus whatever the accent became when it needed a hover state.

Replace it with roles:

canvas        the page background
surface       cards and panels that sit on the canvas
ink           headings and body text
muted         secondary text, captions
hairline      1px borders and dividers
primary       the one accent
on-primary    text that sits on primary

Seven names. Every colour in your CSS should map to one of them. The useful side effect is that "primary" now has a stated scope, which stops it turning up as a border, a badge, an icon and a hover state on the same screen.

3. Stop using pure white and pure black

#FFFFFF on #000000 is the default of having made no decision. Shift both slightly and pick a direction:

warm   canvas #FFFEFB   ink #201515
cool   canvas #FAFAFC   ink #0F1115

The change is a few units per channel and it is the difference between a page that feels chosen and one that feels untouched. Whichever you pick, be consistent. A warm background with cool grey text is the most common accidental mismatch I see.

4. Delete most of the cards

Agents reach for cards because a card is a safe way to group things. The result is a page where everything is in a box, and when everything is in a box, nothing stands out.

Go through the page and for each card ask whether removing the border and background loses information. Usually it does not — a heading and some space does the same job. Keep cards for things that are genuinely separable and clickable, like a pricing tier or a listing item.

5. Pick one elevation strategy

There are two ways to say "this sits above that": a shadow, or a surface colour change. Agents use both, often on the same page, often on the same element.

Choose one. If you are on a dark background, choose surfaces. Black shadows are invisible on dark grounds, which is why dark AI-generated pages so often look flat and bordered at the same time. If you are on light, either works, but shadows should then be a single defined value rather than four ad-hoc ones.

6. Use one radius, plus a pill

Count your border radii. If you find 4px, 6px, 8px, 12px and 16px on one page, that is five decisions where one would do.

Most systems need two: a working radius for cards, inputs and buttons, and 9999px for anything genuinely pill-shaped. Zero is also a legitimate answer, and a page with entirely sharp corners looks far more deliberate than one with five radii.

7. Build the spacing scale from one number

Pick a base — 4px is standard — and only use multiples of it: 4, 8, 12, 16, 24, 32, 48, 64. Then use the large end more than feels comfortable. Sections at 64px rather than 32px is most of what makes a page feel considered rather than cramped.

The tell for a generated page is spacing values like 13px and 22px, which happen when the agent is eyeballing rather than stepping through a scale.

8. Write the button rules down

Buttons are where inconsistency shows up fastest, because there are so many of them. Decide once:

primary     filled with primary, on-primary text
secondary   filled with ink, canvas text
outline     transparent fill, 1px hairline border, ink text
text        no fill, no border, ink text

And then the part that matters: one primary per view. If a screen has three filled accent buttons, none of them is the primary action.

9. Ask for a critique before you ask for a fix

This one is a workflow change rather than a design change, and it is the one I would keep if I could only keep one.

When output looks off, the instinct is to say "make the hero better". That invites another guess. Instead:

Look at the hero section and list what is inconsistent with the rest of
the page. Reference specific values. Do not change anything yet.

You get back something like: the h1 is 36px but section headings are 32px; the CTA uses an 8px radius where cards use 12px; the subheading is #6B7280 but body copy elsewhere is #4B5563.

Now you have a list of concrete defects instead of a vague dissatisfaction, and you can fix them in one pass. This works well because the agent is much better at auditing a rendered result than at guessing your taste up front.

Where to keep all of this

Every item above is a decision, and a decision you make in a chat window is lost when the chat ends. Put them in a file in the repo, called DESIGN.md or whatever your agent is configured to read, and reference it in the prompt instead of restating it.

That is the whole trick, and it is why the second page you generate is usually worse than the first: the first one had all your corrections in the conversation, and the second one had none of them.

If you would rather not write that file from scratch, DesignMD reads a site whose visual language already works and produces the design context for you: the real values, with colours named by role. Either way, the file is the thing. Write it by hand if you prefer; just make sure it exists.

For the longer version of the "why", see why AI-generated websites all start looking the same.