Skip to main content

← Blog

AI DesignTailwindshadcn

Why every AI-built site looks the same — and the six tells people actually name

"It looks AI-generated" is the most common complaint about vibe-coded sites, and it is not vague. Someone mined 3.2 million Reddit posts and ranked the specific things that give a site away. Here is the list, why each one happens, and what fixes it.

2026-08-10 · 7 min read

"It looks AI-generated" is the single most common complaint about vibe-coded websites, and the reason is not that AI has bad taste — it is that every model was trained on the same component library and reaches for the same defaults every time. The result is a house style nobody chose: shadcn cards on a Tailwind grid, an indigo-to-violet gradient, a centred hero over three feature boxes. Once you can name the tells you stop shipping them, and naming them is most of the work.

This is not a vibe about a vibe. In July 2026 someone scanned 3.2 million Reddit posts across 47 subreddits, isolated 46,971 on-topic posts, and harvested 3,033 comments from 125 threads specifically about why AI-built sites look identical. The data and the scripts are public. Two numbers set the scene: "they all look the same" shows up in roughly 13% of on-topic posts, and the volume of that conversation grew by roughly 150× between 2023 and 2024.

So here is the ranked list, and what each one is actually caused by.

1. The shadcn / Tailwind default kit

The top tell by comment share, and the one everything else sits on. It is worth being precise about the accusation, because it is not "shadcn is bad" — shadcn is very good, which is exactly the problem. It is the default in the training data, so it is the default in the output: rounded-lg cards, border-border, a bg-muted/20 section band, the same h-16 sticky bar. Every one of those is a reasonable decision. Two hundred sites making the same reasonable decision is a uniform.

The fix is not to abandon the kit. It is to change what the kit's variables resolve to. shadcn's whole design is that --primary, --radius, --border and the rest are CSS custom properties; a build that swaps those has changed its entire surface without touching a single component.

2. "AI purple"

The second tell, and the most specific: a particular indigo-violet that people can identify on sight. It traces to Tailwind's default palette — indigo-500 and its neighbours — which is the colour a model reaches for when a prompt says "modern" and nothing else. It has become a flag.

The fix is a whole palette, not a hue swap. Replacing indigo with teal and leaving the neutral ramp, the muted text and the borders alone gets you a site that looks like the same template in a different shirt. A palette is six roles working together — ground, surface, text, muted, border, accent — and it is the relationships that read as designed.

3. The gradient hero headline

Purple-to-blue, on the h1, usually with a gradient background behind it. Third by comment share. Same cause as the last one and the same shape of fix: the gradient is not the problem, the specific gradient is. There is a version of this that works — it is just not that one, and it is not on every page.

4. Centred hero over three feature cards

A layout tell rather than a colour one, which is why it survives a repaint. If the page is a centred headline, a subhead, two buttons, then a three-across card row, it reads as generated no matter what colour you make it. Layout is genuinely harder to change than colour — but density, page measure and the radius ladder move it more than people expect, because "AI-built" is partly a spacing signature.

5. Neon glow and heavy blur

Glow rings on buttons, backdrop-blur on everything, the aurora blob behind the hero. These rank lower than people assume — glassmorphism and bento grids in particular score well below their social-media prominence. Worth knowing, because a lot of "stop looking AI-generated" advice tells you to strip effects that were never the main tell.

6. Emoji as icons

🚀 in the h1, ✨ on the feature cards. Cheap to fix, and it is at the bottom of the list for a reason: it is a copy tell more than a design one. Fix it because it is easy, not because it is the thing that gave you away.

The fix the community converged on

Across those 3,033 comments, the most-repeated advice is one sentence: feed the model a real reference instead of letting it guess. Not "prompt better", not "add more adjectives" — give it something concrete to match, and the defaults stop being the fallback.

That is a good instruction and an annoying one, because it moves the problem: now you need a reference. And "go find a site you like and describe it" is how people end up cloning one specific startup's landing page badly.

The version of this that works has three parts:

  1. A direction you actually chose, from a set wide enough to contain something that is not the default. Not one site you admired — a vocabulary of them.
  2. Seeing it on your own page before you commit. A style that looks right in a gallery mock can fall apart on your nav, your seven cards and your longest heading — and that is the only test that matters.
  3. Exact values, not adjectives. "Editorial, high contrast, serif headings" is four adjectives a model will interpret four ways. --radius: 0rem, --primary: 356 95% 46%, a named type scale and a shadow spec is one thing it can only build one way.

Where this leaves you

The tells are learnable, and the top two — the default kit and that purple — account for most of the recognisability on their own. Both live in CSS variables. That is unusually good news: the layer that gives your site away is the same layer that is one search-and-replace from being something else.

If you want the vocabulary part, the gallery is 83 design directions rendered as complete pages rather than described in adjectives, plus 127 palettes each wearing a whole mock page so you can see the six roles working. If you want to skip to the third part, the extension's prompt export hands your AI the direction with the numbers already attached.

Q: Is using shadcn/ui the actual problem? A: No. The problem is using its defaults unchanged. shadcn is built on CSS variables specifically so a project can redefine them; a build that does has changed its whole surface without replacing a single component.

Q: Will changing the colour palette be enough? A: It removes the most recognisable tell, "AI purple", but not the layout signature or the spacing. Colour, type, radius and density together are what read as a decision; any one of them alone reads as a re-skin.

Q: What does "give the model a real reference" mean in practice? A: Hand it concrete values rather than adjectives — the exact tokens for your stack, a named list of the effects tokens cannot carry, and ideally an image of the target. Four adjectives get interpreted four ways; a token list gets built one way.