Why AI-built websites all look the same, and how to fix it
Ask a coding agent for a website without design direction and you tend to get the same site: a purple gradient, Inter, a centred headline, three cards with emoji. Visitors notice. This guide lists the tells, why they happen, and what to put in their place.
People are noticing
On Hacker News on 11 October 2026 a commenter wrote: "I really despise these AI generated websites, they often look so samey. IDK about the numbering, but the overuse of cards everywhere, and abusing my favorite color schemes (tokyo-night, dracula style)" (source). Another, in May, said that when they can tell a site was AI generated within a few seconds, they doubt the content behind it (source). That cost lands on the site owner, not on the tool.
Why it happens
With no design direction, a model reproduces the most common patterns in what it has seen, and a general instruction such as "avoid a generic AI look" tends to swap one default for another. A September 2026 Hacker News comment quoting a model-vendor guide makes the same point and says naming the specific patterns to avoid works better (source). So the fix is concrete: give the agent a specific look to copy, name what not to do, and check the output.
The tells and the fix for each
These are the 16 checks in the free checker and the MIT-licensed slop-lint tool. The first 12 are tells of the generic look; the last 4 are craft errors that make a page worse for people whatever its style.
| Rule | What it finds | What to do instead |
|---|---|---|
purple-gradient | Purple or indigo gradient | Use one flat anchor colour from your look's tokens. If you need depth, use a hairline rule or a tinted surface instead of a gradient. |
gradient-text | Gradient-filled headline text | Set the headline in a solid colour from the tokens. Emphasis comes from size, weight or a different typeface, not from a gradient. |
theme-palette | A stock editor-theme or framework default colour | Replace it with a colour chosen for this subject (the look's token). These exact values appear in a large share of generated sites. |
overused-font | Overused default typeface leads the stack | Pick a different lead font, or a deliberate system stack such as Georgia, Charter, Gill Sans or a monospace. Inter and Roboto are what an agent picks when no one chose. |
glass-glow | Glassmorphism or glow effect | Remove backdrop blur and large soft shadows. Separate layers with a border or a surface colour. |
card-grid | A row of identical feature cards | Show the three things in the form that fits them: a ruled list, a table, a numbered sequence or prose. A grid of equal boxes with an icon each is the strongest tell. |
emoji-icons | Emoji used as feature icons | Drop the emoji. Use a number, a rule, a short word or a drawn shape that belongs to the subject. |
eyebrow-label | Small uppercase eyebrow labels above headings | Delete the label; if the heading needs context, make the heading say it. Uppercase tracking is the second-strongest tell. |
stock-copy | Stock marketing phrase | Say the concrete thing: what it does, for whom, in numbers. Delete the phrase. |
radius-everywhere | One large corner radius on everything | Choose a corner policy for the look (square, small, or one pill shape for buttons only) and keep the rest square. |
fade-up-reveal | The same fade-up reveal on every section | Use at most one deliberate motion (for example the page-load rise of the headline) and skip scroll-triggered reveals. |
centered-hero | Centred hero block | Align the first screen to the page's grid (left-aligned, or split) and lead with the most specific fact about the subject. |
no-focus-style | No visible keyboard focus style | Add a :focus-visible rule with a 2px or thicker outline in a contrasting colour (WCAG 2.2 2.4.7). With Tailwind, pair every outline-none with a focus-visible:ring or outline class. |
no-reduced-motion | Motion without a reduced-motion rule | Wrap transitions and animations in @media (prefers-reduced-motion: no-preference), or disable them in a reduce query (WCAG 2.3.3). With Tailwind, use motion-safe: or motion-reduce: variants. |
no-viewport | No viewport meta tag | Add <meta name="viewport" content="width=device-width, initial-scale=1">. |
img-no-alt | Image without alt text | Add alt text (alt="" if purely decorative). |
A prompt that holds
Put this in the rules file your tool reads (CLAUDE.md for Claude Code, .cursor/rules for Cursor, .github/copilot-instructions.md for Copilot, or AGENTS.md), next to a written design file:
Before writing any HTML or CSS, read DESIGN.md and look.css.
Use only the colours, fonts and components they define.
Never add: card grids of equal boxes, emoji or icons as decoration,
eyebrow labels above headings, gradients, gradient text, glass or
glow effects, one large radius on everything, scroll fade-ins,
stock phrases ("seamless", "unlock", "supercharge").
When done, run: node tools/slop-lint.mjs . and fix every finding.What this will not fix
A checklist removes the strongest tells; it does not make a design good. Copy still has to say something specific, and the layout still has to fit the content. The checker is a text heuristic: it can miss a tell written in an unusual way and it can flag something you meant. Use --ignore on a rule you disagree with.
It reads HTML, CSS, Tailwind class names (in class and className) and .jsx, .tsx, .vue, .svelte and .astro files. It cannot see class names built at run time, custom colours in tailwind.config, styles imported from other files or a stylesheet you do not give it, and it does not run your build. We tested it on sample pages we wrote in the default style, not on a measured set of real-world sites.
If you want a finished look to start from
Looksheet is 4 original looks (12 finished pages) with a DESIGN.md, CSS and rules files for each, so the agent has something concrete to follow. The live demo shows one of them. You can also write your own design file from the checklist above; the paid kit saves you the writing and the testing.