Why your AI generated website looks like every other AI generated website

TL;DR

• Skip the rest: paste the Design System Pack into Lovable, Cursor, or Claude and your site stops looking AI generated in about 30 minutes. Your copy stays verbatim.
• Why it happens: every AI was trained on the same corpus, Tailwind defaults, shadcn templates, and Vercel-aesthetic landing pages. Same input, same output.
• The five visible tells: purple gradient hero, three identical feature cards, Inter weight 700, centered everything, gradient "Most popular" pricing pill.
• Each tell has a specific fix. Read on if you'd rather do it yourself.

You've seen this exact post before

There's a kind of post that shows up in r/lovable and r/vibecoding every week, and it always sounds the same:

My finance app logic is solid but it still looks like AI slop. It still has that unmistakable "Claude built this" look. You know the one. Purple gradients, Inter font, predictable card layouts.

If you searched "AI generated website" and landed here, you already know the look. You probably built one. You shipped a real product, the logic works, users are using it, and the landing page looks like the same landing page you've seen a hundred times this year. You can't put your finger on what's wrong, except that it's wrong.

You're not imagining it. AI generated websites all look like each other. There's a precise, identifiable reason for it, and a precise, identifiable fix. This post is about both. We'll start with why every AI tool produces the same five visual patterns, walk through each one, and end with what to actually do about it.

If you'd rather skip the explanation and just fix it: there's a pack at the bottom.

Why it happens

LLMs don't have taste. They have training data. When you ask Claude, Lovable, Cursor, v0, or Bolt to build a landing page, the model isn't drawing on a sense of what looks good. It's drawing on the corpus it learned design from, and that corpus is shockingly narrow.

The corpus is, roughly: Tailwind documentation examples, shadcn/ui component libraries, the top 200 templates on Vercel, the public landing pages of YC-backed startups from 2022 to 2024, and a long tail of design systems that all reference the same canonical patterns. When you train a model on those examples and ask it to produce a landing page, you don't get variety. You get the average of the input.

A Reddit poster put it as well as anyone has:

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

"Aggressively-mediocre" is exact. The output isn't bad in the sense of being broken or unusable. It's bad in the sense of being indistinguishable. It's the design equivalent of stock photography. Technically competent, instantly forgettable, and the moment you see it you know what made it.

The pattern is reinforced by the way models get trained. Human evaluators rate "safe" higher than "interesting." A purple gradient hero gets approved. An asymmetric layout with a single accent color gets flagged as confusing or off-brand. After thousands of feedback rounds the model learns to optimize for safety, which is a synonym for "looks like the median landing page." The median landing page in 2024 has a purple gradient, three feature cards, Inter weight 700, and centered everything.

This is why switching tools doesn't help. Lovable, Cursor, Claude Code, v0, and Bolt all produce variations of the same five patterns, because they all learned design from variations of the same training corpus. You can change the prompt, change the model, change the platform, and you'll get a different shade of the same page.

The fix is not at the prompt level. The fix is at the design-system level. You need to give the model a different corpus, or constraints that force it off the median. The rest of this post walks through the five most visible patterns, why each one defaults to where it does, and what specifically replaces it.

The five visual tells

1. The purple gradient hero

You know this one. It's a hero section with a gradient background that fades from violet to indigo, sometimes via a third color like pink or cyan. The text on top is centered and white. There's usually a button, also gradient, that says "Get started" or "Try it free."

LLMs default to this because the training corpus is full of it. Stripe popularized the conic-gradient aesthetic in 2021. Vercel's marketing pages spread it. Every Tailwind template repository has at least three "gradient hero" examples. The model learns: hero equals gradient. Gradient equals modern.

It's not modern anymore. It's 2024 Vercel-aesthetic. The fix is to drop the gradient entirely. Use a solid dark background with one warm radial accent in a corner, or a noise texture at low opacity, or a static image with a heavy vignette. Anything except a multi-stop gradient. The hero should feel atmospheric, not gradient-y.

2. Three identical feature cards in a row

Three cards, equal width, each containing an icon, a heading, a paragraph, and sometimes a "Learn more" link. They align in a row that breaks to a single column on mobile. They might have subtle borders or a soft shadow.

The training data has this shape thousands of times. It's the easiest way to express "we have features," and it's what most landing-page templates ship with. The LLM produces it because it's the lowest-risk way to fill a feature section.

The fix is layout asymmetry. Replace three identical cards with a primary feature that takes 60% of the width and two secondary features that share the remaining 40%. Or stack features vertically with alternating image alignment. Or use a single hero feature with a tabbed interface for the rest. Anything except three identical cards.

3. Inter typography at weight 700

The display headlines on AI-built sites are almost always Inter, weight 700, with negative letter-spacing around -0.02em. It looks confident. It looks designerly. It looks like every other AI-built site.

Inter became the default because it's free, it's on Google Fonts, it's what shadcn ships with, and it appears in the canonical Vercel and Linear marketing pages that the training data scraped. Weight 700 is the default for display text in those examples. The model learned: headline equals Inter 700.

The fix is restraint. Use Inter weight 500 (or even 400) for display headlines, and let the size do the work. Or replace Inter entirely with a serif like Fraunces or a geometric sans like Geist. The visual difference between weight 500 and weight 700 at large sizes is the difference between "considered" and "trying."

4. Centered everything

Centered hero text. Centered subhead. Centered button. Centered feature heading. Centered testimonial. The whole page reads top to bottom, dead center, no asymmetry anywhere.

Center alignment is the LLM's safest bet. It works at every screen size. It doesn't require thinking about visual hierarchy. The training data is full of it. So the model centers everything.

The fix is to left-align almost all body text. Reserve center alignment for true hero moments, and even then consider a left-aligned hero with a generous right margin. Asymmetry is what makes a page feel composed instead of templated. Centered everything is the visual equivalent of every sentence ending in a question mark.

5. The "Most popular" gradient pricing badge

In the pricing section, the middle plan has a small pill above it that says "Most popular," and the pill has a gradient background, usually purple to pink. The middle plan card itself has a slightly different border, often a gradient stroke.

This is the most visible single tell, because pricing sections are short and the badge is impossible to miss. It comes from the same corpus that produced the gradient hero. The training data taught the model that "Most popular" gets a gradient pill, full stop.

The fix is to drop the badge entirely. Use a checkmark on the recommended plan's features, or bold the plan name, or give it slightly more vertical space. The reader understands "this is the recommended one" without a gradient pill telling them so.

The actual fix

The patterns are visible enough that anyone can fix them by hand if they have an hour and a half. Here's the short version of what to change:

Typography. Use Inter at weight 500 for display headlines, not weight 700. Let size and line-height carry the visual weight. If you want more character, replace Inter with Geist (free, similar geometry, more presence) or pair Inter at weight 500 with a serif accent like Fraunces for hero text.

Color budget. Pick three accent colors, maximum, and let them appear at most three times each on the page. That's nine total accent moments. Anything more turns the page into a slot machine. Most AI generated sites use four to six accents that each appear six to ten times.

Layout asymmetry. Stop using three-card grids. Replace them with one primary feature plus a small grid, or vertical stacks with alternating image sides, or a single tabbed interface. The page should not be visually predictable from the top.

Backgrounds. Drop multi-stop gradients. Use solid dark colors with a single radial accent, or noise textures at 4 to 6 percent opacity, or a static image with a heavy vignette. The hero should feel atmospheric, not gradient-y.

Spacing. Triple your section padding. Most AI generated sites use 64 to 96 pixels of vertical padding between sections. Use 160 to 200. The whitespace is what makes the page feel like a real product instead of a template.

Buttons. White button on dark background, with a subtle inner shadow and a soft outer glow. No gradient buttons. No "Get started for free" buttons with arrow icons. The button should be a button, not an event.

This list will get you 80 percent of the way to a non-generic site. Most teams stop at 60 percent and call it good. The remaining 20 percent is detail work: kerning, color contrast, animation timing.

Or skip the work

If you'd rather not spend the afternoon retooling 12 components by hand, the Design System Pack does this in about 30 minutes. It's a design system you paste into Lovable, Cursor, Claude Code, or your AI tool of choice. It ships with two prompts.

The first is a renovate prompt. You drop the pack into your existing project and paste the prompt. Lovable or Cursor reads your current site, maps your sections to the pack's design, and replaces the visual layer one section at a time, while keeping every word of your copy verbatim. Headlines, subheads, button text, testimonials, feature descriptions. All of it stays. Only the design changes.

The second is a new project prompt for if you're starting from scratch.

The pack is $19, one-time. Use it on unlimited projects, including paid client work. 14 days, no questions, refund if it's not for you.

It works because it gives the model a different corpus to draw from, with explicit constraints on the five patterns above (and six more). The output stops looking like training-data average and starts looking like a real product.