Why AI-generated UI all looks the same (and how to fix it)

You can spot an AI-generated website from across the room. A soft purple-to-blue gradient. A centred hero with a headline about unlocking your potential. Three feature cards with an icon each. Rounded corners on everything, the same sans-serif, the same shadow.

None of it is bad, exactly. It's just nobody's. And if you're a designer building with AI tools like Claude Code, Cursor, v0 or Lovable, it's the look you'll keep getting until you give the model something better to work from.

The tell-tale signs of AI-generated UI

The patterns show up so often they've become a style of their own:

• Gradients in purple, indigo and blue, usually behind the hero.
• The centred hero: big headline, one line of grey subtext, two buttons side by side.
• Three or four feature cards in a row, each with an icon, a bold title and two lines of copy.
• Rounded corners and soft shadows on every surface, all the same radius.
• One safe sans-serif at a handful of sizes, with little contrast between them.
• Generic copy: "Streamline your workflow", "Built for teams of every size".
• Decoration without a point: glows, blurred blobs, emoji used as icons.

Each choice is defensible. Together they read as a template, because that's roughly what they are.

Why AI design looks generic

Language models learn from a huge amount of existing code and design. When you ask for "a modern landing page", the model produces something close to the middle of everything it has seen labelled that way. The middle is, by definition, the most common answer.

That's useful when you want a working page fast. It's a problem when you want a page that looks like it came from you. Without direction, the model has no reason to leave the middle.

Why vague prompts make it worse

The natural fix is to add adjectives: "more premium", "make it pop, but calmly", "cleaner". We've all typed some version of it.

The trouble is that adjectives point back to the middle. "Premium" to a model means the most common signs of premium: dark backgrounds, thin serif headings, gold accents. "Clean" means more white space and fewer colours. You get a different generic, not your own.

Taste lives in specifics: this exact green, this much space, this curve and not that one. To get away from generic AI design, the instructions have to be that specific too.

How to make AI-generated design look less generic

1. Start from references, not adjectives

Before you prompt, collect a handful of details you actually like: a type pairing, a button, a section layout, a single colour. Give those to the model with a note on what to take from each. "Use this headline weight and size" beats "make the typography elegant". I wrote a step-by-step guide to building a moodboard for AI-generated UI.

2. Point at specifics on the page

When reviewing what the AI made, don't describe the whole page. Point at one element and say what's wrong with it. "This card's padding is too tight, match the spacing in the reference" is something a model can act on. More on that in how to give Claude Code visual feedback.

3. Say what to avoid

Tell the model which defaults are off the table: "No gradients. No icons on feature cards. Corners are 4px, never more." Ruling out the first guess pushes it towards your second idea instead of its first one.

4. Decide the system yourself

Pick the type scale, the spacing steps, the colours and the corner radius, and write them down in a file the AI reads on every task. In Claude Code that's CLAUDE.md. A model following your system can't fall back to its own.

5. Review like a designer, one thing at a time

Generic results often come from accepting the first full page. Review in passes instead: layout, then type, then spacing, then colour, then detail. Small, specific corrections add up to a page with a point of view.

Taste is the part AI can't average

AI makes bad design much easier to make, which makes good judgement matter more, not less. The model can produce pixels quickly. Deciding which pixels are right is still your job, and it's the part that makes the work look like yours. I wrote about this in the Moodbit manifesto.

That's also why I built Moodbit. It's a Chrome extension for keeping the details you notice, with a note on what you saw in each, and carrying them into Claude Code when you build. Less prompting, more pointing.

Common questions

Why does every AI-generated website use purple gradients?

Gradients like that were common on startup sites in the years models learned from, so they're part of the statistical middle a model falls back on. Telling it "no gradients" or giving it a palette of your own removes the default.

Can AI design tools have good taste?

They can follow good taste very well when it's spelled out: references, rules and specific feedback. Without that, they produce the most common answer, which reads as generic.

How do I give an AI coding tool a design direction?

Give it a short design system (type, spacing, colours, radius), a few annotated references, and a list of what to avoid. Then review its work element by element rather than page by page.

Is "vibe coding" bad for design quality?

Not by itself. The quality depends on the direction you give. Vibe coding with references and specific feedback can produce distinctive work; vibe coding with adjectives tends to produce templates.

What's the fastest way to make an AI-generated page look less generic?

Remove the defaults first: gradients, the icon-card grid, the generic copy. Then replace the typography and colours with ones you chose. Those two passes change the feel of a page more than anything else.