Why AI-Generated UI All Looks the Same (and How to Fix It)

Because a language model predicts the most likely output, and the most likely interface is the one it has seen most often. Anthropic calls this distributional convergence: in its words, "Safe design choices–those that work universally and offend no one–dominate web training data."

The same post says that without guidance a model "will almost always conform to Inter fonts, purple gradients on white backgrounds, and minimal animations", which users have named the "AI slop" aesthetic. Nothing is broken. The agent is doing exactly what it was trained to do: pick the average.

Popular open-source stacks make the average very concrete. Tailwind CSS and shadcn/ui turn up throughout public React code, tutorials and examples, so their default values are what an agent reaches for when nobody says otherwise. Those defaults are well made. The problem is that they are everyone's starting point, so apps built from them all look alike.

The tells are values nobody chose: a radius, a shadow and an accent that came with the framework. These are the stock values an agent writes when it has nothing else to go on:

• Tailwind's rounded-lg is 0.5rem (8px) and rounded-xl is 0.75rem (12px), applied to every card, button and input alike.
• Tailwind's shadow-md is "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)": a soft grey shadow under every card.
• An accent picked straight from Tailwind's default palette (26 colour scales of 11 shades each, including indigo, violet and purple), often at the 500 or 600 step.
• shadcn/ui's default theme: the neutral base colour, a near-black primary (oklch(0.205 0 0)) and --radius: 0.625rem. Untouched, every shadcn app shares them.
• Inter, or the system font stack, at one weight for everything, with no tightening at large sizes.

Anthropic's own frontend-design skill lists the same pattern. "For calibration, AI-generated design right now clusters around some traits", among them "content chopped into identical rounded cards, one border-radius on everything regardless of hierarchy, the same soft grey shadow (rgba(0,0,0,.1)) under each, and gradient washes as decoration". It adds that "fade-and-slide-up entrances on each section and hover transitions on every card are the generic default and read as AI-generated."

Usually, yes: the prompt has no design in it. "Make it modern and clean" doesn't name a colour, a typeface, a radius or a spacing scale, so every one of those decisions falls back to the default.

The frontend-design skill puts the rule simply: "Where the brief pins down a visual direction, follow it exactly", and "Where it leaves an axis free, don't spend that freedom on one of these defaults." An agent fills every gap you leave with the average. The more axes you pin down, the fewer gaps there are.

A longer prompt helps for one screen, then fades. It's forgotten a few turns later, it can't hold a full palette and type scale, and the next session starts from nothing. Design context needs to live in a file the agent reads every time it touches the interface.

Give it a design system to follow, limit its choices to that system, and anchor the system to a real reference. In practice:

1. 1Write down tokens by role: background, surface, text, muted text, border and accent colours for each theme, a type scale (size, weight, line height, letter spacing), a spacing scale, radii, borders, shadows and motion timing.
2. 2Add rules with reasons. "The accent marks the one action you want taken, so use it once per screen" survives new screens; a bare hex code doesn't.
3. 3Add a Never list for the defaults you don't want: never a gradient, never a coloured shadow, never the same radius on a page and a tag.
4. 4Constrain the choices: tell the agent to take every colour, size and radius from the tokens file and never invent a new value.
5. 5Pick a reference site whose style you admire, and build the system from what it actually uses rather than from adjectives.
6. 6Install it where the agent always reads it (a Claude Code skill, a Cursor rule, AGENTS.md) and ask for changes one area at a time.

Replace each default with a decision. The table pairs what an agent gives you unprompted with what to write in your design system instead.

Measure one from a site you like. Writing tokens, rules and component recipes by hand takes days, and values copied from a screenshot drift.

Livery does the measuring: paste a public website (or put livery.site/ in front of its address) and it renders the page at desktop, tablet and phone widths, measures its colours, type, spacing, radii, shadows, components and motion, and writes an installable kit: SKILL.md, tokens.json, rules.md and notes on components, layout and motion. No AI model writes the values; they come from the live page. Your agent then audits your project, reports the gap and applies one area at a time, after asking you.

To see what "average" looks like in numbers, Livery's State of Web Design report counts the fonts, accent colours and themes across every site in its library. If your planned stack matches the top of every list, that's a sign to make a more deliberate choice.

A kit describes style. Logos, photos, copy and paid fonts belong to the site's owner; use your own or the free alternatives each kit lists.