Why every AI-built website looks the same, and how to fix it

Ask any AI tool to build a and you almost always get the same output: a purple gradient on a white , Inter font, a centered headline with a button beneath it, and three identical cards lined up in a row. Once you notice this pattern, it becomes impossible to unsee, and it makes every AI-built site look like every other one. The fix is pasting a pre-written into the prompt before asking the AI to build anything.

A sample system specifies exact values: a warm cream (#FBF7F2) instead of pure white, warm charcoal for primary text (#3A342E), a warm coral accent (#E07856), and a soft sage green secondary accent (#7BA88F). For type, it calls for the serif font "Fraunces" for headings and "Source Sans 3" for body text, explicitly banning Inter, Roboto, or default system fonts. It defines a precise type scale (14/15/16/22/56px) with 1.7 line height, and a spacing system built on a 4px base with steps from 8 to 56px, aimed at generous, uncramped layouts.

It also pushes choices, like an asymmetric hero section, away from the generic centered layout AI tools default to.

Key points

  • websites default to predictable patterns: purple , Inter font, three cards in a row
  • Pasting a pre-written into the prompt before building breaks this pattern
  • The key is specifying exact colors, fonts, type sizes, and spacing values rather than vague style requests
  • The example uses a warm cream (#FBF7F2) and the serif font Fraunces to stand out
Read original