Why AI-Generated Websites All Look the Same (and How to Avoid It)

AI-generated websites look the same because models regress to the most common patterns in their training data: purple-gradient heroes, glassmorphism cards, emoji feature grids, identical bento layouts, and sun/moon theme toggles in the nav. The output is statistically average design—and average reads as cheap.

Avoiding it requires a written design constitution, mechanical linting for banned patterns, and one signature element per page instead of five decorative ones.

Name the tells precisely

If you see three or more on a landing page, assume unowned design:

| Tell | Why models default to it | |------|--------------------------| | Purple/violet gradient hero | Dominant SaaS marketing aesthetic 2020–2024 | | Glassmorphism cards | Reads "modern" in Dribbble shots | | Emoji feature grids | Cheap icon substitute in training snippets | | Identical bento grids | Tailwind UI / component library sameness | | Sun/moon nav toggle | Every tutorial's dark mode demo | | Pill badges everywhere | Startup template cargo-cult | | Rounded-2xl everything | Friendly defaults, no hierarchy |

None of these are evil in isolation. Together they scream "generated, not designed."

Why models regress to the mean

LLMs predict likely tokens. Likely UI copy uses the same headline verbs and filler phrases you see on template marketplaces. Likely layout is hero + three columns + testimonial carousel + pricing cards with one highlighted tier.

Training data over-represents template marketplaces and under-represents disciplined editorial systems. The model gives you the internet's median taste.

That is fine for internal tools. It is death for a premium positioning claim.

Before and after: median vs owned

| Median AI landing | Owned editorial landing | |-------------------|-------------------------| | Purple gradient hero | Ivory canvas, ink type | | Three identical feature cards | One signature element, hairline rules | | "Unlock seamless workflows" | Specific job-to-be-done headline | | Hidden pricing | Published tiers from offers | | Theme toggle in nav | Appearance in settings only |

The left column is statistically likely from a one-shot prompt. The right column requires a constitution someone enforces. Lab Twelve lives in the right column on purpose.

The fix: design constitution

A constitution is law, not inspiration. Lab Twelve's lives in docs/design-constitution.md and is enforced by pnpm check:design in CI.

Banned visual patterns (excerpt):

• Purple / violet / fuchsia / indigo Tailwind classes
• Gradient headline text (bg-clip-text + gradient)
• Glowing blobs, orbs, glassmorphism (except allowlisted modal blur)
• rounded-xl / rounded-2xl / rounded-3xl (except structural pills)
• Emoji as icons or decoration
• Stock 3D humans, AI robot/brain hero imagery
• Generic bento grids with no hierarchy

Banned copy patterns (excerpt):

• Words: supercharge, unlock, seamless, elevate your, harness the power, transform your, 10x your
• Em-dash spam
• Passive voice in product UI
• Clever vagueness over specific facts

Banned UX patterns (excerpt):

• Theme toggle in navigation (appearance belongs in settings)
• Pretending incomplete data is complete
• Raw hex in components (use tokens)

When CI fails, the build fails. Taste becomes mechanical, not aspirational.

Full ban list lives in docs/design-constitution.md. scripts/check-design.mjs scans app/, components/, and content/ on every verify run. Blog MDX cannot use inline style=. Marketing copy in components cannot use raw hex outside allowlisted OG paths.

That means agents and humans get the same rejection message: fix the pattern, not the reviewer.

Linting in practice

What actually trips the gate:

| Pattern | Why it fails | |---------|--------------| | purple-500 in a component | Brand law | | rounded-2xl on a card | Radius cap is 4px | | supercharge in hero copy | Banned marketing word | | #AABBCC in JSX | Tokens only | | style= in blog MDX | No inline styles in content |

Founders should ask vendors: "Show me your CI design gate." If the answer is "we have good taste," you have a person, not a system. People quit. Systems stay.

One signature element per page

Our constitution allows one kitchen-ticket, diagonal cut, or editorial bold moment per page—not both, not five.

Spend the accent budget once. Everything else stays ivory and ink (practical system).

Lab Twelve as worked example

Lab Twelve ships black-and-white surfaces, 4px radius max, hairline borders over shadows, Geist typography, and ticket-card metaphors on quote flows. No purple. No nav theme toggle. No emoji checkmarks in feature lists.

That is not minimalism for aesthetics. It is differentiation through restraint—harder than adding another gradient.

AI-native delivery without AI-default visuals

AI-native development accelerates missions. It does not remove the pass. Humans enforce the constitution on every merge.

What founders should ask any studio

Before you hire, run this five-minute audit:

1. Is there a purple gradient on the hero? If yes, ask what their constitution says about it.
2. Are prices published or hidden behind "book a call"?
3. Can they show you the structured scope artifact before quoting?
4. Is source code yours at handoff?
5. Does the UI look identical to their last three clients?

Lab Twelve publishes answers: no purple, yes prices, yes ScopeSpec, yes repo, no clone aesthetic. See the 2026 cost guide for numbers that do not move after kickoff.

Working with generators without becoming one

Teams using AI should treat models as junior drafters, not creative directors. Prompt for structure; reject pattern defaults in review. Run mechanical lint on every PR. Keep a human pass before deploy.

If your process cannot say no to a gradient, you do not have a process—you have a slot machine that usually lands on violet.

Pairing constitution with AI-native delivery

AI-native pipelines generate faster than humans alone. Without a constitution, faster just means more sameness per hour.

The workflow that works:

1. Agent drafts against mission spec
2. pnpm check:design runs in verify
3. Human pass rejects pattern defaults
4. Deploy only after both pass

Speed without gates is how you get another purple SaaS in production on Friday.

For founders auditing their own product

You do not need our constitution verbatim. You need written nos your team can cite in review:

1. List three visual patterns you refuse (gradients, emoji icons, etc.)
2. List three copy words you refuse (marketing filler)
3. Assign one owner to hold the pass before release
4. Run grep or lint if you have engineering bandwidth

Without that, every new hire and every new agent prompt resets you to median taste. Median is free. It is also invisible in a crowded market.

The fix is not "hire a better designer." The fix is document the nos, lint the defaults, and hold the pass before deploy. Everything else is hope.

Read three-Michelin-star discipline for the ops metaphor. See black-and-white SaaS design for token-level craft. Compare budgets in the 2026 cost guide. When you are ready to scope software that will not look like a template, /start.

The honest take

Banning patterns feels rigid until you watch a model ship purple again on the first prompt. Rigidity is the point. This article is marketing for the design gate—and the gate exists because willpower does not scale across agents and contractors.

Compare surfaces on examples. When you want software that does not look like a template, /start with scope.