Why AI-built websites all look the same (and how to fix it)

Building and designing are two different jobs. A coding agent like Claude Code is very good at the first and does not do the second unless you make it. Give it no design direction and it produces the statistically most likely page, which is the one you have already seen a hundred times. Save the file at the bottom as DESIGN.md, hand it over before it builds, and it works to your spec instead.

AI-built websites look the same because a coding agent builds the most likely design, the average one, unless you give it a design direction first. Decide the fonts, exact colours, radius, shadow and layout rules up front, write them in a short design file, and give the agent that file before it builds.

1. The look is the average, because that is what the model reaches for

A coding agent predicts the most probable next choice. With no brief, the most probable homepage is the one it has seen most in its training: centred headline, gradient behind it, rounded cards with a soft shadow, three features in a row. Each piece is fine on its own. Stacked together with no steer, they add up to the page everyone recognises as AI-made.

2. The layout is where the generic look lives, more than the buttons

This is the part people miss. You can polish a button, pick a nicer shade, round the corners just so, and the page still reads as generic, because the sameness sits one level up, in the arrangement. A tidy button on a centred hero above a three-card grid is still the standard page. Fix the layout and the components fall into place. Fuss over the components and the layout still gives you away.

3. A few AI slop tells that shout "an AI built this"

These are the giveaways of an unsteered build, the patterns a reader clocks in a second. If your site has all of them, it was designed by nobody. Design them out.

• Default sans fonts (Inter, Roboto, or the system font) with no display face doing the talking up top.
• A purple-to-blue gradient on a white background.
• Everything as rounded cards with big soft shadows and a bit of glassmorphism, the floating-card look.
• A centred hero sitting above a three-card feature grid.
• Placeholder copy that means nothing, like "Elevate your workflow".

4. What AI slop actually looks like

Here are four small mockups we built to look generic on purpose. The brands are made up and the numbers are sample figures, so these are obviously fake demos. Read them as the shapes to design away from.

5. Design the direction first, then let it build

The fix is an order of operations. Decide the look before the agent writes a line of code, then hand that decision over as the thing it builds to. You can settle the direction in a visual tool, or you can write it down as a short design file. Either way the point is the same: the agent stops guessing because you have already made the calls.

One free way to get a direction on screen is Google Stitch, a Google Labs tool. You give it a text prompt or upload a screenshot or wireframe, and it turns that into UI designs plus front-end code. It can paste straight to Figma or export the front-end code, so you can see a real look before you commit. It is free with monthly generation limits and needs a Google account. Use it to find the direction, then capture that direction as named choices in the file below, so the agent has exact rules to follow rather than a picture to interpret.

If you want more ways to find a direction worth copying, our web design inspiration guide lists the galleries designers actually use, free fonts and resources covers where to get a display face, and creative web effects shows the small touches that lift a page.

6. What actually makes a page look designed

Before the file, the fundamentals it is built on. These are the "why" behind every field in DESIGN.md, and they are widely-used conventions rather than absolute law.

• Generous whitespace. Room around things reads as considered; cramped reads as a template.
• One clear type hierarchy. A reader should see at a glance what is a heading, what is body, what is a caption.
• A tight colour palette with a single accent. One colour does the shouting, the rest stay quiet.
• A consistent spacing scale, commonly built on a 4px or 8px base so every gap is a multiple of the same unit.
• Real contrast. WCAG AA asks for at least 4.5:1 between body text and its background, which is the genuine accessibility floor.

7. The file that fixes it: DESIGN.md

This is the whole trick in one file, and it follows Google's open DESIGN.md format (alpha): a portable design spec a coding agent reads before it builds, supported by Claude Code, Cursor, Copilot and Stitch. Save it as DESIGN.md next to your project, or paste it into your CLAUDE.md, and point the agent at it first. The format has two layers: YAML front matter between --- lines holding machine-readable tokens, then a Markdown body whose ## headings explain the why. Below is a fill-in instance you complete with your own values. Keep the universal structure; choose the stylistic parts yourself. Where a value is blank it tells the agent to ask you, never to guess, because prescribing defaults is how slop happens.

---
# Front matter: machine-readable tokens the agent reads first.
# This follows Google's open DESIGN.md format (alpha). Fill in your own
# values. Leave a token OUT and list it under `omitted` rather than
# guessing it. Write each token once, then reference it elsewhere as
# {colors.primary} so a value lives in one place.
name: "[Your project name, e.g. Rowan Studio site]"   # required
version: "0.1"
description: "[One line on the feel you are after, e.g. calm editorial, warm, not techy.]"

# omitted: sections you deliberately left out. This doubles as an
# anti-hallucination signal: if it is listed here, the agent must ask,
# not invent it.
omitted:
  - "[e.g. dark-mode palette, not decided yet]"
  - "[e.g. icon set, ask before choosing]"

colors:
  # CSS colour values: a hex like "#1A1C1E" or an oklch() value.
  # Name the role, the use, and the contrast so the choice is deliberate.
  background: "[#hex]"   # e.g. "#FAF7F2"  warm off-white, page ground, not pure white
  ink: "[#hex]"          # e.g. "#1A1C1E"  main text, 14.8:1 on {colors.background}
  accent: "[#hex]"       # e.g. "#8B4529"  terracotta, used only on links and one button, 6.1:1 on the page background

typography:
  # Commit to a pairing. Do NOT default to Inter or Roboto alone.
  display: "[exact face + weights, e.g. Fraunces 600/700, headings only]"
  body: "[exact face + weights, e.g. Source Sans 400/600, everything else]"
  tracking: "[e.g. -0.02em on display, 0 on body]"

rounded: "[one radius, e.g. 6px, or 0 for square. Not rounded-2xl on everything.]"

spacing:
  base: "[4px or 8px]"   # every gap is a multiple of this
  scale: "[e.g. 8, 16, 24, 40, 64]"

components:
  # Name each state so hover and focus are not left dead.
  button: "[fill, radius {rounded}, states: default / hover / focus-visible / disabled]"
  card: "[e.g. hairline border, no drop shadow, no glassmorphism]"
---

# Overview
Build this site to the spec above, not to your defaults. Read it before you
write any markup or CSS. If a value is blank or listed under `omitted`, stop
and ask me. Never invent a colour, a font, or a layout I did not give you.

## Colours
One accent does the shouting; the rest stay quiet. Body text meets WCAG AA
contrast of at least 4.5:1 against its background, which is the real
accessibility floor, so keep it. No gradient unless I name the two stops
myself, and never a purple-to-blue one.

## Typography
One clear hierarchy: the display face on headings, the body face everywhere
else. Body never borrows the display face. If I have not named a face, ask me
before you pick one.

## Layout
Generous whitespace and a spacing scale on a {spacing.base} base, so every gap
is a multiple of one unit. The hero is not a centred headline over a gradient:
pick a shape I named and vary the section shapes down the page. Do not use a
row of three equal feature cards.

## Elevation & Depth
Depth comes from a hairline border or one faint shadow, not big soft glows. No
glassmorphism by reflex. No floating-card look.

## Shapes
Use the single {rounded} radius consistently. Do not round everything to
rounded-2xl and do not mix three different radii.

## Components
Name every interactive state. A button has a real hover and a visible
focus-visible ring, never a dead hover. Reuse the same card and button specs
across the page.

## Do's and Don'ts
Avoid the banned patterns below, grouped by how obvious the tell is. This list
is built from the open-source avoid-ai-design skill.

P0 (a layperson spots the AI):
- Purple-to-blue gradient hero on white.
- A gradient bg-clip-text headline.
- An untouched shadcn zinc or slate theme.

P1 (a developer notices):
- Inter or Roboto with no pairing.
- Default Tailwind blue-600 buttons.
- rounded-2xl and shadow-lg on everything.
- Dead hover states.
- Glassmorphism by reflex.
- An icon sitting in a rounded square.

P2 (craft gaps):
- Flat spacing with no rhythm.
- The same fade-in-up on every element.
- Sparkles, ArrowRight or Zap icons.
- Emoji feature bullets.
- "Elevate / Seamless / Powerful" copy.
- A generic "Get Started" CTA.
- The hero-plus-three-feature-cards template.
- Three-tier pricing and a four-column footer by default.

Watch the Space Grotesk trap: fleeing Inter and all landing on the same
second-choice font. The fix is to commit to one direction with three to five
concrete moves, not to swap one default for another.

---
# What is UNIVERSAL (keep this structure): the two-layer split of front
# matter plus body, semantic colour roles, a spacing scale on a 4px or 8px
# base, 4.5:1 body contrast, named component states, the Don'ts list, and the
# `omitted` note.
#
# What is a STYLISTIC CHOICE you must fill yourself: the actual font pairing,
# your dominant colour and single accent, the radius feel, the shadow depth,
# the motion personality, and the layout. No defaults are prescribed here on
# purpose, because prescribing defaults is how slop happens.

Once the look is settled and the site is built, Claude can go on to build the real product around it: Supabase for auth and a database, Stripe for payments, Resend for email, with Tailwind CSS and shadcn/ui for the front end. That is a separate job from the look. When you are ready to put it online, follow our publish your website with Vercel guide rather than working it out from scratch.

8. A second pair of hands: the avoid-ai-design skill

If a build has already drifted into the generic look, there is a free open-source Claude Code skill that audits AI-generated front-end and strips the slop patterns out: avoid-ai-design on GitHub, MIT licensed. It is a genuine indie tool you can install and run over your own code. Rebecca Bultsma makes the same case from the other end in Before You Use Claude Code: Build This First: decide your context and direction before you open the agent, so it builds from your ground rather than its defaults.

If you want the direction built into the agent from the start, there is a bigger open-source option: taste-skill by Leonxlnx (MIT), described as an anti-slop frontend framework of portable skills for AI agents. It gives the agent design judgement through a few dials you set, such as how far the layout can experiment, how much motion to use, and how dense the page is, and it installs with npx skills add for Claude, Cursor and others. It is more to set up than a paste-in file, so reach for it once the DESIGN.md habit feels natural and you want the rules to travel with the agent.

Where the line is

Do this now

Open a blank file, save it as DESIGN.md, and paste the block above in. Fill in two fonts and three hex values, even rough ones, and write one line under THE LAYOUT that bans the centred hero. That is enough to change the next build. Give the file to Claude Code before you ask it for a single page, and watch it stop reaching for the average.

Want to hand it real references to draw the fonts and colours from? Start with our web design inspiration guide.

A couple of quick questions

Why do all AI-built websites look the same?

A coding agent builds the statistically most likely design, which is the average one it has seen most: a centred hero, a purple-to-blue gradient, floating rounded cards, a three-card feature grid. Building is what it does; design is a separate job it skips unless you ask, so with no direction it lands on the middle of everything.

How do I make Claude Code build a website that does not look generic?

Decide the look before it builds. Write a short design file that names your exact fonts, hex colours, corner radius, shadow and layout rules, then give Claude Code that file first so it builds to your spec instead of the average. A tool like Google Stitch can turn a prompt or a screenshot into a direction to draw those choices from.

Is Google Stitch free?

Stitch is a free Google Labs tool with monthly generation limits and it needs a Google account. It turns a text prompt or an uploaded screenshot into UI designs plus front-end code, and can paste to Figma or export the code.