Why AI Websites Look the Same (and How to Make Claude Design Better)

What does the generic AI website look like?

You have seen it even if you have never named it. Practitioners call it AI slop, and the descriptions are consistent. Anthropic's own write-up lists Inter and Roboto fonts, purple gradients on white backgrounds and minimal animation as the tells of an unguided generation. Kosta Canatselis of Mania Design puts it more sharply: slop is design with no author, the statistical average of ten thousand interfaces, rendered cleanly. No single element is wrong. Inter is a fine typeface and a gradient can be beautiful. The problem is that every choice is the default, so the page could belong to any product and tells a visitor nothing about yours.

• •Colour: an indigo-to-purple gradient on the hero, the main button and often the headline.
• •Type: Inter, Roboto or the system sans stack at every size.
• •Layout: centred hero with badge, headline and two buttons, then three identical feature cards.
• •Components: one radius on everything, the same grey shadow, glassmorphism over blurred blobs.
• •Icons and copy: emoji where product imagery should be, and lines like 'Scale without limits'.

Why do AI websites look the same? Distributional convergence

Anthropic's Applied AI team explained the mechanism in its November 2025 post on improving frontend design through Skills: during sampling, models predict tokens based on statistical patterns in training data, and safe design choices that work everywhere and offend no one dominate that data. Without direction, the model samples from the high-probability centre. Anthropic's frontend aesthetics cookbook writes the admission into the prompt it recommends: 'You tend to converge toward generic, on distribution outputs.' It adds that even when told to be creative, Claude still converges on common choices, naming Space Grotesk as an example. The model is not short of taste; it has seen brutalist portfolios and Swiss editorial layouts. It simply has no reason to pick them unless you give it one.

• •Training data averages: the most common pattern becomes the most probable output.
• •Safe defaults: a centred, neutral layout is least likely to be wrong for an unknown brief.
• •Framework defaults: library starting values that millions of tutorials never changed.
• •No brand context: a one-line prompt says nothing about audience, industry or voice.
• •No visual feedback: the model writes CSS it never sees rendered.

Why does Claude keep using purple gradients and Inter?

The purple has a traceable origin. In August 2025 Tailwind CSS creator Adam Wathan posted a half-joking apology for making every button in Tailwind UI bg-indigo-500 five years earlier, which he said led to every AI generated UI on earth also being indigo. Developer Alan West traces the loop: a neutral placeholder saturated tutorials and repositories, models trained on that code, and AI-built purple sites then became more training data. Component libraries add fingerprints too. The shadcn/ui theming docs set a default --radius of 0.625rem and ship neutral base palettes, which is why so many generated cards share the same corner and grey. These defaults were designed to be neutral, and neutral is what you get back when you do not override them.

Does a generic-looking website actually hurt you?

Looks are not cosmetic. Nielsen Norman Group's research on the aesthetic-usability effect describes users' tendency to perceive attractive products as more usable, and notes that users are strongly influenced by aesthetics even when they try to judge functionality. A distinctive, coherent design earns forgiveness for small friction; a templated one signals that nobody made decisions. For a founder or agency the cost is quieter but real: if your site is interchangeable with a competitor's vibe-coded launch page, the only thing left to compare is price. The goal below is not decoration. It is making the page look built for one specific audience, which is what a brand has always done.

How to make Claude design better: the nine-lever framework

Every fix that works, in Anthropic's guidance and in practitioner write-ups, pulls one of nine levers. Most teams pull one, usually a prompt saying 'make it modern', and wonder why nothing changes. Pull several and the output moves from the centre of the distribution to something with an author. Each lever has a deep-dive post in this series.

Start with brand context and art direction, not code

The single biggest change is ordering. Anthropic's current frontend-design skill tells Claude to work in two passes: first a compact design plan with 4 to 6 named hex colours, typefaces and their roles, a layout concept drawn as ASCII wireframes and a few principles, then a review of that plan against the brief, revising anything that reads like the generic default. Only then does it write code. The skill even lists newer clichés to avoid, including a warm cream background with a terracotta accent, near-black with one acid-green accent, and the SaaS card kit of identical rounded cards with the same rgba(0,0,0,.1) shadow. You can get the same effect in any tool with the sequence below; our post on Claude UI design prompts and art direction templates has fuller versions.

Design tokens and a rules file stop the drift

A good first page is not the hard part; the tenth page is. Without a persistent source of truth, every session starts from the distribution again and the site slowly reverts to purple. Two things fix that. First, tokens: the Design Tokens Community Group published its first stable specification, version 2025.10, on 28 October 2025, a vendor-neutral JSON format for colour, type and spacing decisions with theming and multi-brand support. Second, a rules file Claude reads every session. Anthropic's Claude Code best practices describe CLAUDE.md as persistent context Claude cannot infer from code, and warn that a bloated file gets ignored, so keep design rules short. We keep a short design-rules section in every repo we build; our post on design tokens and CLAUDE.md rules covers the full setup. Example rules:

• •Use only theme token colours; no raw hex or default palette classes in components.
• •Display font [your choice] at 600 to 800; body font [your choice] at 400. No third family.
• •Radius roles: 0 for layout blocks, small for inputs, large only for media.
• •No emoji icons, no gradient text, no glassmorphism unless the brief asks.
• •One animated moment per page; respect prefers-reduced-motion.
• •Before finishing UI work, screenshot mobile and desktop and check against these rules.

Typography, layout, imagery and motion: where distinctiveness lives

Anthropic's cookbook gives the most quotable typography rule: high contrast is interesting, so pair display with monospace or serif with geometric sans, and use weight extremes such as 200 against 800 and size jumps of three times rather than one and a half. The current skill adds that line length should stay under about 80 characters. For layout, it says to open the hero with the most characteristic thing in the subject's world, and to use numbered markers only when content really is a sequence. For imagery, real photographs of your product, people and work undo a generic look faster than anything, which is also the first fix 925Studios recommends. For motion, both Anthropic documents agree: one well-orchestrated page load beats scattered effects, and fade-up on every section reads as AI-generated. Honour the prefers-reduced-motion media query documented on MDN. Our post on Framer Motion and GSAP animations with Claude covers motion that does not cost Core Web Vitals.

• •Vary section density: a dense specification block beside an airy statement reads as designed; identical padding everywhere reads as generated.
• •Spend your boldness in one place: one memorable element, everything around it quiet.
• •Replace every emoji icon with a real image, a purpose-drawn icon, or nothing.
• •Write copy in plain verbs from the user's side: 'Book a site visit', not 'Get started'.

Close the loop: screenshots, Figma and human taste review

A model that never sees the page cannot judge it. Anthropic's Claude Code best practices make this a core rule: give Claude a check it can run, and for UI that check is a screenshot compared against a design, with the suggested prompt 'take a screenshot of the result and compare it to the original, list differences and fix them'. The frontend-design skill says it in fewer words: a picture is worth 1000 tokens. Wire up a browser tool such as Playwright or Claude in Chrome, capture mobile and desktop, and make the comparison part of the definition of done. Then add the step no tool replaces: a person with taste reviewing against the brief. Canatselis calls this the real bottleneck, the moment of judgment between generating a thing and shipping it. The rest of this series takes each part of the loop in turn.

• •Best tools to improve Claude AI UI design in 2026 - skills, MCP servers and plugins worth installing.
• •The Claude frontend-design skill and Agent Skills for better UI.
• •Claude UI design prompts and art direction templates.
• •The Claude Design to Claude Code handoff workflow.
• •Figma MCP with Claude Code for design-system websites.
• •The visual feedback loop: Claude, screenshots and Playwright UI QA.
• •Claude vs ChatGPT vs Gemini for website UI design in 2026.
• •Design tokens and CLAUDE.md rules to stop generic AI UI.
• •Framer Motion and GSAP animations with Claude and Core Web Vitals.

25 tells your site was designed by AI

Run this audit on any page built with an AI tool. Every item is a legitimate choice for some brief, and one or two are fine. Eight or more and visitors will read the page as a template. The list draws on Anthropic's calibration list in the frontend-design skill and the tells documented by Mania Design, 925Studios and Alan West.

Common mistakes when trying to make AI design less generic

Most failed attempts push the wrong lever, or push one so hard the result becomes a new cliché.

Frequently asked questions

Short answers to the questions people ask most about generic AI-built websites and how to fix them.