The vibecoding design problem: why every AI-built site looks the same

TL;DR

• Drop the Design System Pack into Lovable, Cursor, or Claude Code and the AI slop patterns disappear in about 30 minutes. Every word of your copy stays.
• Every vibecoded site looks the same because every AI tool was trained on the same design corpus.
• Eight visual patterns repeat across vibecoded sites: purple-blue gradient hero, three-card feature grid, Inter at weight 700, centered body paragraphs, gradient "Most popular" pricing pill, Lucide check icons in tinted circles, DiceBear avatar fallbacks, five-star testimonial rows.
• Each pattern has a specific design move that breaks it. The post is the technical breakdown.

The site is the problem, not the product

You vibecoded a real product. The product works. You have users. The logic is solid. The site selling it does not.

Specifically, the site does the thing where it looks correct in every individual element and wrong in aggregate. The buttons are fine. The cards are fine. The pricing table is fine. Together they form a page that looks exactly like every other vibecoded site shipped this quarter. You can pattern-match it from across the room. So can your visitors. Conversion rates reflect that.

The convergence is not random. It's the predictable output of a small set of LLM behaviors trained on a smaller set of design corpora. There are eight patterns that show up in vibecoded sites with near-perfect consistency. This post walks through each one, what produces it, and what specifically replaces it.

Some of this will be obvious if you've been paying attention. Some of it will be a pattern you've seen a hundred times without naming. By the end you'll have a checklist of eight things to grep your code for, and the design move that breaks each.

The convergence problem

The reason vibecoded sites converge is structural, not accidental. Every AI coding tool has been trained on roughly the same corpus: shadcn/ui component libraries, the top Vercel templates, Tailwind documentation examples, the marketing pages of canonical YC startups from 2022 to 2024, and the public design systems that reference all of the above.

When the input corpus is that narrow, the output of any model trained on it converges to the corpus average. There is no "hidden" tasteful AI. They were all trained on the same files.

Every AI model seems to converge on the same aggressively-mediocre design when asked.

"Aggressively-mediocre" is the right phrase. The output is not bad in the sense of being broken. It's bad in the sense of being indistinguishable from every other output. It's stock photography for landing pages.

The convergence is reinforced by RLHF. Human evaluators rate "safe" higher than "interesting." A purple gradient gets approved. An asymmetric layout with a single accent gets flagged as confusing or off-brand. After thousands of feedback rounds, the model learns to produce safe output, which means median output, which means the same output as every other model.

The result: switching tools does not help. You can move from Lovable to Cursor to Claude Code to v0 to Bolt, and you will get variations of the same eight patterns. The pattern is the LLM behavior, not the tool. The tool is just the interface.

This is the part most "AI design tips" articles get wrong. They prescribe a different prompt, or a different model, or a different framework. The variance between those things is small. The variance between "use the LLM's default output" and "give the LLM a constrained design system" is enormous.

Every pattern below has the same fix shape: identify the default behavior, give the LLM an explicit constraint that breaks it, and verify the output. That's the entire game. The eight patterns are the eight places to apply it.

The eight patterns

The patterns are listed roughly in order of how visible they are. Number one is the most obvious from a screenshot. Number eight is more subtle, but once you see it you can't unsee it.

1. Purple-blue gradient hero

<section class="bg-gradient-to-br from-violet-600 via-purple-600 to-indigo-700">

The hero gets a multi-stop gradient that fades violet to indigo via purple. The text on top is white and centered. The button is also gradient. The training corpus is full of this; Stripe normalized it in 2021 and every template repo carries it forward.

Fix: solid bg-zinc-950 with a single radial accent in one corner using radial-gradient(circle at top right, rgba(255,100,80,0.08), transparent 60%). Atmospheric, not decorative. The hero stops competing with the content.

2. Three-card feature grid

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
  {features.map(f => <Card icon={f.icon} title={f.title} body={f.body} />)}
</div>

Three cards, equal width, identical structure. The LLM defaults to this because it's the lowest-risk way to express features.

Fix: asymmetric layout. Primary feature at 60% width with a screenshot, two secondary features at 40% sharing a column. Or vertical stack with alternating image sides. Anything except grid-cols-3 gap-6.

3. Inter at weight 700 for display

font-family: 'Inter', sans-serif;
font-weight: 700;
letter-spacing: -0.02em;

The display headline is Inter weight 700 with tight tracking. Every shadcn template ships with it.

Fix: Inter weight 500 (or even 400) at larger sizes, or replace Inter with Geist or a serif like Fraunces. Weight 500 at 64px reads "considered." Weight 700 reads "trying." The size does the work, not the weight.

4. Centered body paragraphs

<p class="text-center max-w-2xl mx-auto">

Body paragraphs are centered with a max-width. The hero is centered. The subhead is centered. The feature heading is centered. The whole page reads top to bottom, dead center.

Fix: left-align everything except the hero headline. Center alignment is for true hero moments. Reading copy in center alignment fights the eye. Ship text-left and let the layout breathe.

5. Gradient "Most popular" pricing pill

<Badge className="bg-gradient-to-r from-purple-500 to-pink-500">
  Most popular
</Badge>

The middle pricing plan has a gradient pill above it. The card has a gradient border. The reader is told twice which plan to pick.

Fix: drop the pill. Bold the recommended plan name. Slight extra vertical padding on the card. The reader gets the signal without the gradient screaming it.

6. Lucide check icons in tinted circles

<div className="rounded-full bg-emerald-500/10 p-1">
  <Check className="text-emerald-500" />
</div>

Every feature list, every pricing table, every "what's included" section uses Lucide check icons inside soft tinted circles. shadcn shipped this exact pattern in its Pricing example, and every model learned it.

Fix: swap for a simple monochrome dash or arrow without the circle, or use the check naked at 14px in the body color, or skip the icon entirely and rely on the alignment. The tinted circle is the tell.

7. DiceBear avatar fallbacks

<img src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${name}`} />

When the AI can't figure out what testimonial photos to use, it falls back to DiceBear avatars. They're geometric, slightly cartoonish, and instantly recognizable as "the AI couldn't find a photo so it generated one."

Fix: if you don't have real photos, use initials in a colored circle.

<div className="rounded-full bg-zinc-800 text-zinc-100 w-10 h-10 grid place-items-center font-medium">
  JM
</div>

It looks intentional. DiceBear looks like a placeholder you forgot to replace.

8. Five-star rating rows on testimonials

<div className="flex gap-1">
  {[1,2,3,4,5].map(i => (
    <Star key={i} className="fill-amber-400 stroke-amber-400 w-4 h-4" />
  ))}
</div>

Every testimonial card has a row of five amber stars above the quote. They're always five out of five. They're always amber. They're never connected to a real review.

Fix: drop the stars. A testimonial is a quote with attribution. The stars add nothing except visual noise and the appearance of having been generated. If you genuinely have ratings, link to where the rating came from (G2, Capterra, App Store). Otherwise the stars are theater.

The escape

Every pattern above has the same fix shape: identify the LLM's default behavior, give it an explicit constraint that breaks the default, verify the output. The constraints don't have to be elaborate. Most of the patterns are killed by a single prompt rule.

The mistake people make is trying to fix this at the prompt level alone. "Don't use a purple gradient" works once. The next time you ask for a section, the model defaults again, because the underlying corpus didn't change. Prompt-level fixes are a Ouija board. You spell out one word and the model goes back to averaging.

The fix is at the design-system level. You give the LLM a constrained vocabulary it can't escape from. A specific font, a specific color budget, specific layout primitives, specific typography rules. The model can still produce variation within those constraints, but the variation is on top of a foundation that doesn't look like the corpus average.

This applies regardless of which AI tool you use. Lovable, Cursor, Claude Code, v0, Bolt, Replit. The pattern is the model's relationship to its training corpus, not the tool's interface. Switch tools, you keep the same patterns. Switch design systems, the patterns disappear in every tool simultaneously.

The simplest version of "constrained vocabulary" is six rules:

1. One typeface for display, one for body. Display weight 500 maximum. Body weight 400.
2. Three accent colors, three appearances each. Nine total accent moments on the page.
3. No multi-stop gradients. Solid colors with single radial accents only.
4. No three-card grids. Asymmetric layouts with one primary and two-or-more secondary elements.
5. Vertical section padding 160px minimum.
6. Buttons are white on dark or dark on white. No gradient buttons. No icon-with-arrow buttons.

Drop these six rules into the system prompt of whatever tool you use, and you eliminate roughly 60 percent of the convergence problem with no other changes. The remaining 40 percent is the long tail: spacing rhythm, animation timing, copy hierarchy, image treatment. That's the part where a real design system earns its money.

If you want to skip building the design system yourself, the next section has a CTA. If you'd rather hand-craft your own, the six rules above are a useful start. Either way, the move is the same: stop fixing this at the prompt and start fixing it at the system.

Pack

Or paste a working pack into Lovable, Cursor, or Claude Code and skip the manual work. The Design System Pack ships with a renovate prompt that fixes all eight patterns in about 30 minutes, while preserving every word of your copy. The pack is the design system; the renovate prompt is the constraint set that keeps the model on it. $19 one-time, includes the renovate prompt and the new-project prompt, plus per-platform variants for Bolt, v0, and Cursor. 14-day refund.