Every website built with AI looks the same: purple gradient, Inter font, three cards in a row. Here's why it happens and the exact fix that makes it stop.
You have seen it a hundred times. Ask any AI to build a landing page and you get the same result: a purple gradient on white, Inter font, a centered headline with a button under it, and three identical cards in a row. Once you notice it you cannot unsee it, and it makes anything you build look like every other AI site.
Here is why it happens. When you leave the look up to the model, it reaches for the average of everything it was trained on, and that average is the bland SaaS template you keep seeing. Anthropic has a name for this, distributional convergence. Every AI tool lands on the same narrow look because they were all trained on the same web. Asking it to "be more creative" does nothing, because vague direction just gets you a different flavor of the same average.
The fix is not creativity, it is specificity. Give the AI a named design system with exact colors, named fonts, defined spacing, and real component rules, and it stops inventing from the default and builds to your spec instead. Paste a system like this before you tell it what to build:
Use this design system for everything you build.
Follow it precisely.
AESTHETIC: Soft, human, approachable, calm. Warm
tones, gently rounded forms, welcoming, never clinical.
COLOURS (use these exact values as CSS variables):
- Background: #FBF7F2 (warm cream, never pure white)
- Surface: #FFFFFF
- Primary text: #3A342E (warm charcoal)
- Secondary text: #8A8178
- Accent: #E07856 (warm coral)
- Secondary accent: #7BA88F (soft sage green)
- Border: #EDE6DD
TYPOGRAPHY:
- Headings: "Fraunces" (serif, from Google Fonts),
weight 600
- Body: "Source Sans 3" (from Google Fonts)
- Never use Inter, Roboto, or system fonts
- Type scale: 14 / 15 / 16 / 22 / 56px, line height 1.7
SPACING: 4px base. Scale: 8 / 16 / 22 / 34 / 56px.
Generous, never cramped.
COMPONENTS:
- Asymmetric hero: reassuring copy on one side, a
functional card on the other, not centered
- Rounded everything: cards, inputs, tags (12 to 24px
radius)
- Buttons: sage green pill for nav, solid coral for
primary actions
- Pill tags with a hairline border
AVOID: purple, gradients, pure white backgrounds,
sharp corners, cold greys, clinical blues, Inter font.
Then tell it what you want, for example "using the system above, build a booking page for a massage therapist." You get something warm and intentional instead of the usual template.
One more step that matters. Even with a system loaded, the first build sometimes drifts back to defaults, so run this right after:
Audit what you just built for generic AI design
tells: any purple gradients, any Inter or Roboto
fonts, any three-column card layouts, any centered
hero with a single button below, any low-contrast
grey-on-white text. Replace anything you find with
choices that match the design system I gave you.
The system above is the warm, human one, good for anything that should feel calming, a coach, a wellness brand, a service booking. It is one of ten I put together, each a complete named system with a different feel, technical and precise, dark and premium, editorial and magazine-style, bold and brutalist, so you can match the look to the business instead of accepting the default.
Works in ChatGPT or Claude. If you build in Claude Code, save your chosen system as a DESIGN.md file in the project and every page you build uses it automatically, which is how you keep a whole site consistent.
If you want all ten design themes, each with the exact colors, fonts, and component rules to paste in, plus the audit prompt and how to save them so every build uses them, I put them in one doc, here if you want them.