Guide
Why so many AI websites look the same
A language model writes the most likely page for a vague request, and the most likely page is the one it has seen most often. That's why so many AI-built sites share a purple gradient, three identical cards and the word “seamless”. The fix is to name those habits and check for them.
Where the sameness comes from
- Defaults fill every gap in the prompt. “A modern website for my bakery” says nothing about type, colour, layout or tone, so each of those is decided by whatever is most common in the model's training data.
- The training data is full of starter templates. Landing-page templates, UI kit demos and component library examples are published in huge numbers, and many of them share the same structure and the same indigo and violet accents.
- One-shot generation has no critic. A designer drafts, steps back and cuts. A single generation pass writes the first idea and stops, so the first idea is what ships.
- Component libraries flatten differences. When every section comes from the same kit with the same radius, shadow and spacing, sites built for very different businesses converge on the same shapes.
The nine tells
These are the nine habits Anticode's Critic agent checks for on every build. They're useful on their own as a review list for any site, however it was made.
1. A purple-to-blue gradient
The gradient hero is the single most recognisable sign of a generated page. Instead: use a plain ground with one action colour that comes from the business itself, such as the paint on the shopfront, the colour of the product or the ink on the menu. The Critic flags gradients that mix purple, violet or indigo.
2. Emoji used as icons
A rocket for speed, a lightning bolt for performance and a fire for popularity. Emoji render differently on every platform and read as filler. Instead: use one set of drawn icons on a consistent stroke, or no icons at all when the words carry the meaning.
3. Stock AI phrases
“Revolutionize your workflow”, “unlock your potential”, “next-gen”, “seamless”, “game-changing”, “cutting-edge”, “elevate your”, “supercharge” and “effortless” turn up so often that readers skim past them. Instead: write the sentence only this business could say, such as “Skin fades and beard work, no waiting room” or “Bread out of the oven at 7, gone by noon”.
4. More than one font family
Mixing two or three unrelated families is a common way generated pages end up looking unplanned. Instead: choose one family with the weights you need and build hierarchy with size, weight and spacing. Each of Anticode's design systems uses exactly one.
5. Default “ease” curves
The browser's default ease timing gives every transition the same slightly mushy feel. Instead: define one or two custom curves, for example a quick ease-out for interface feedback and a longer one for reveals, and use them everywhere. Respect prefers-reduced-motion.
6. A hero forced to full screen height
A 100vh hero pushes the actual content below the fold, and on phones it often leaves a headline floating in empty space. Instead: size the hero to its content and let the first real piece of information, such as a price, an opening time or a product, show without scrolling.
7. Every card lifts on hover
When every card jumps up on hover, the movement stops meaning “this is clickable” and becomes noise. Instead: reserve hover feedback for things that respond to a click, and keep it subtle.
8. The same radius and shadow on everything
Buttons, cards, inputs and images all at the same rounded corner and the same drop shadow make a page feel like a single component repeated. Instead: give shape a role. For example, pill-shaped controls, cards with a hairline border and a small radius, and images with square corners.
9. Body text under 16px
Small, low-contrast body text looks tidy in a screenshot and is tiring to read on a phone. Instead: set body text at 16px or larger with a line length of roughly 60 to 75 characters, and check contrast against the WCAG 2.2 contrast guidance.
Two more habits worth checking
Two patterns aren't in the Critic's automated lint but show up just as often. Three identical feature cards with an icon, a two-word title and a one-line description: replace them with the real things the business offers, with prices, durations or sizes. Everything centred: centred text works for a headline but is hard to read in paragraphs, so give body copy a left-aligned reading line.
Before and after
| Element | Typical one-shot output | After the Critic |
|---|---|---|
| Badge | ✨ AI-powered | Est. 2019 · Leith Walk |
| Headline | Revolutionize your grooming workflow 🚀 | Skin fades, beard work, no waiting room. |
| Sub-line | Unlock your potential with our next-gen platform. | Pick a chair and a time. We text you when it's your turn. |
| Cards | Seamless · Lightning fast · Effortless | Skin fade, 45 min · Beard shape, 20 min · Walk-ins before 11am |
Nothing about the second version needs a better model. It needs a decision about what this business actually offers and a check that removes the defaults. For a step-by-step version of that process, see how to make an AI website look professional.