Why AI-built websites all look the same, and how to make yours stand out

You tell the agent what your product does, it builds the thing, and the thing works. Yet it also looks like the last ten sites you saw on Product Hunt: a centered headline set in a tidy sans serif, a purple gradient sitting behind it, three feature cards with icons, a pricing table, a dark footer. Nothing here is wrong, and nothing here belongs to you. This guide looks at where that sameness comes from and walks through the changes that make an AI-built site recognizable, whether you build in Claude Code, Cursor, Lovable, v0 or Bolt.

Where all that sameness comes from

Everyone starts from the same parts. Most AI builders output React with Tailwind CSS, and plenty of them use shadcn/ui as the component layer. The v0 documentation names shadcn/ui as its default component system. Lovable styles with Tailwind and made shadcn/ui its default UI kit. Bolt produces React, Vite and Tailwind unless you request something different. These are all good tools. The trouble is that when each project begins with identical components, identical spacing, radius and gray palette, each project also begins with an identical look.

Everyone ends up with the same fonts. A brand-new Next.js app from create-next-app ships with Geist and Geist Mono. Tailwind's default font-sans is a system font stack, which means that unless you decide, you get whatever the operating system happens to have. And when the model chooses a font on its own, it gravitates toward the safest, most widespread option. Anthropic has said this openly: left without guidance, Claude tends to produce Inter, purple gradients on white backgrounds and minimal animation. Inter, Roboto and Open Sans are genuinely excellent typefaces. They also sit on millions of sites, and that is exactly the problem.

Models aim for the statistical middle. A language model predicts the most probable next token. Anthropic calls the design side of this "distributional convergence": the safe choices that offend nobody dominate the web, so they dominate the model's output whenever you do not say otherwise. The purple story shows it nicely. Adam Wathan, who created Tailwind, once joked that he owed the world an apology for making every button in Tailwind UI bg-indigo-500, because these days every AI-generated UI is indigo as well.

The agent is not a poor designer. It fills the gaps you leave with averages. Close those gaps and the averages go away.

Why typography is your biggest lever

Color, spacing and layout all matter, and we will come to them. But type covers most of what a visitor actually looks at on a page: headlines, body text, buttons, navigation, numbers. Swap the typeface and all of those change in one move, while your components and layout stay exactly where they were.

It is also the lever hardly anyone pulls. Picking a typeface feels like a specialist's call, so people leave it to the default, and that is precisely why a deliberate pick stands out so fast.

1Step 1: Pick the typeface first

Treat the font as your first design decision, ahead of colors and ahead of layout. The typeface sets the mood that everything else has to answer to. A warm serif asks for different colors and spacing than a tight geometric sans.

• Begin with the feeling, not the category. Write down three words for how the product should feel to a visitor: calm and precise, loud and playful, old-world and trustworthy. Then go hunting for a typeface that fits those words.
• Master one family before you add a second. A single family with several weights often gives you all the range you need. If you do bring in a second face, hand it a clear job, such as a display face for headlines with a quieter one for text.
• Test it with your real content. Set your actual headline, a paragraph and your prices in it. A typeface that shines on the specimen page can fall apart on the words you actually use.
• Check for the characters you need. Accents, currency signs and figures for tables all have to exist in the font, or the browser falls back to a system font.

Keep in mind that the popular alternatives drift toward defaults as well. Once a font appears in every "stop using Inter" list, it turns into the next thing everyone reaches for.

2Step 2: Create contrast in size and weight

Generic designs play it safe in the middle: headlines only slightly larger than text, weights of 400 and 600. Distinctive designs commit. Anthropic's own guidance for Claude puts it bluntly: use extremes, like 100 or 200 against 800 or 900 rather than 400 against 600, and size jumps of three times or more rather than 1.5 times.

You do not need to follow this to the letter. What matters is that a headline should look like a decision. A huge, heavy headline beside calm body text comes across as confident; a light, oversized display line comes across as elegant. Either one beats the polite middle.

3Step 3: Define your own type scale

A type scale is a fixed set of sizes you reach for everywhere. Rather than choosing sizes element by element, you choose a base size and a ratio, then multiply. A ratio of 1.25 gives you gentle steps, 1.5 gives you dramatic ones. Working from a scale makes a page feel intentional, because every size has a relationship to every other size.

Here it is in plain CSS, with fluid sizes that grow with the viewport:

:root {
  --text-body: 1.125rem;
  --text-lead: 1.5rem;
  --text-h2: clamp(2rem, 4vw, 3rem);
  --text-display: clamp(3rem, 9vw, 7rem);
}

h1 {
  font-size: var(--text-display);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 800;
}

In Tailwind CSS v4 you express the scale as theme variables, carrying line height and weight along for each step:

@theme {
  --font-display: "Your Display Face", serif;
  --text-display: 7rem;
  --text-display--line-height: 0.95;
  --text-display--letter-spacing: -0.03em;
  --text-display--font-weight: 800;
}

This gives you the font-display and text-display utilities. Large type generally wants tighter line height and slightly tighter letter spacing than body text, which is why the scale carries those values along with it.

4Step 4: Use color and spacing with intent

• Choose a palette that is not indigo. Take your starting point from something in your product's world: a material, a place, a photograph. Commit to one strong color instead of a gradient that hedges between two.
• Rework the grays. The neutral grays of a component library are part of its fingerprint. Even a slightly warm or slightly cool gray already distances you from the template.
• Treat space as a signal. Templates space everything evenly. Give your hero far more room than any template would, and keep related things close together. Uneven, deliberate spacing is what makes a layout feel designed.
• Break up the three-card row. Not every set of features calls for three equal cards. A list, a single large example or an asymmetric grid often tells the story better.

5Step 5: Hand your agent a design brief

Your agent reads your prompt, not your mind. "Make it modern and clean" hands you the average, because modern and clean is what the average already looks like. Write a short design brief and store it where the agent sees it on every run:

• Claude Code: in CLAUDE.md in your project. Anthropic also publishes a frontend-design skill that pushes Claude away from generic output.
• Cursor: in a project rule under .cursor/rules/.
• Lovable: name your fonts directly in the prompt, and record the choice in your project knowledge so each new page picks it up. Lovable's own docs recommend choosing fonts early for exactly this reason.
• v0: set fonts and tokens in the project's design system or layout, so every generation starts from them.

A brief for a new landing page can fit in a single prompt:

Prompt for your agent

Before writing any code, set up the design system: use [your typeface] for headlines at weight 800 and [your text face] for body text, build a type scale with a display size at least four times the body size, use a warm off-white background with one strong accent color and no gradients, no purple or indigo, and no row of three identical feature cards; show me the type scale on a test page first.

Look at the test page before you let the agent build the rest.

6Step 6: Bring references, not adjectives

Adjectives mean one thing to you and another to the model. References do not. Rather than "premium and bold", hand the agent something it can work with:

• A screenshot of a site whose typography you admire, plus a note about what exactly to take from it: "the size of the headline and how little else is on the screen".
• A print reference, such as a magazine cover, a poster or a book jacket. Print design is less template-driven than the web, so it feeds your agent fresher material.
• What to avoid, spelled out just as clearly: "no glassmorphism, no gradient text, no emoji icons".

Borrow the principles from a reference (scale, weight, spacing, mood), not the entire look.

Questions people ask

Why do all AI generated websites look the same? Because they are assembled from the same components, fonts and layouts, and the models answer every open decision with the most common choice on the web. Make those decisions yourself and the output changes with them.

How do I make my Lovable site look unique? Name your fonts in the prompt, write your design direction into the project knowledge, change the default colors and grays, and hand Lovable a screenshot or reference instead of adjectives. Your typeface is the fastest single change you can make.

Is it bad to use Inter or Geist? No. Both are well-made and very readable. They are simply everywhere, so they cannot make your site recognizable. They do fine work for body text or interface text next to a more distinctive headline face.

Does Claude Code have a design mode? Not as a separate mode, but you can steer it with a design brief in CLAUDE.md and with skills such as Anthropic's frontend-design skill. The more concrete your brief, the less generic the result.

A font nobody else has

Each step in this guide moves your site further away from the template. The final step is a typeface that exists only for your project, so no other site on the web can look like yours. That is what we are building at MakeFont: your agent designs a typeface for your project, and you use it like any other font file. It is in development, and early access is open. Read more in What is MakeFont, or see how to host your own fonts.