How to Make AI-Generated Websites Look Less Generic

You can usually tell a site was generated by AI within a second. Not because it's bad, but because it's the average of every site the model has seen: a soft purple-to-blue gradient, a centred headline, a row of three feature cards with emoji icons, rounded corners on everything.

The model isn't wrong to do that. If you don't give it a direction, the average is the safest answer. The fix is to give it the decisions a designer would have made. Here's what to look for and what to say instead.

Spot the defaults first

Before changing anything, look at your page and check how many of these it has:

• A gradient background or gradient headline that isn't part of your brand
• A centred hero with a headline, a subtitle and two buttons
• Exactly three feature cards, each with an icon on top
• The same border radius and soft shadow on every element
• Generic copy like "Supercharge your workflow" or "Built for the future"
• Inter or the system font at default sizes and weights
• Everything evenly spaced, so nothing feels more important than anything else

Three or more and it'll read as generated. Each one is easy to fix on its own.

1. Start from a reference, not a description

"A modern, clean landing page" means something different to everyone, and to an AI it means the average. A concrete reference gives it real decisions to copy: type sizes, spacing, layout, how sections flow.

That's the idea behind copying a section as a prompt: instead of describing a hero, you hand Claude, Cursor or v0 a complete, designed section and ask it to adapt the content. You can do the same with your own favourite sites by describing their structure precisely.

2. Make typography decisions

Type does more to make a site feel designed than any other single thing. Tell the AI:

• Which fonts. A distinct heading font paired with a quiet body font. Name them.
• A scale with contrast. For example a 56–72px headline, 16–18px body, and very little in between. Big jumps look intentional; lots of similar sizes look generated.
• Tight headline tracking. Large headlines usually look better with slightly negative letter-spacing.

Headings: [font], 64px desktop / 40px mobile, weight 500,
letter-spacing -0.03em, line-height 1.05.
Body: [font], 17px, line-height 1.6, colour #555.
Never use more than four font sizes on the page.

3. Pick one accent colour and use it rarely

Generic sites spread colour everywhere. Designed ones are mostly neutral with one accent used for the thing that matters: the main button, a key number, a highlight.

Palette: warm off-white background (#f3f2ef), near-black text
(#111), greys for secondary text. One accent colour, [your colour],
used only for primary actions and one highlight per section.
No gradients.

4. Break the symmetry on purpose

Not every section needs to be centred. Left-aligned heroes, a large image bleeding off one side, a two-column layout where one column is much wider: these immediately feel less templated. Ask for one asymmetric section and see how much it changes the page.

5. Write real copy before you generate

The fastest way to look generic is generic words. Write the headline yourself, in the way you'd explain your product to a friend. Give the AI your real features, real numbers (only ones you can back up) and real names, and tell it not to invent any.

Use only the copy below. Don't add slogans, testimonials,
statistics or logos that aren't in it.

That last line also stops it making up social proof, which is worth avoiding for its own sake.

6. Vary the rhythm

Give sections different weights. A big, quiet hero. A dense feature grid. A single line of text with lots of space around it. A dark section to break the page. Ask for spacing that changes with importance instead of the same padding everywhere.

7. Add the details people notice but don't name

• Hover states that do something specific, not just a colour change
• A subtle texture or grain instead of a flat background
• Real images or product screenshots instead of abstract illustrations
• Icons from one consistent set, or no icons at all, instead of emoji

A prompt that puts it together

Build the hero and features section for [product].
Reference: [paste a section prompt, or describe a site you like
precisely]. Typography: [fonts and scale]. Palette: [neutrals +
one accent, no gradients]. Layout: left-aligned hero, features as
an asymmetric grid, not three equal cards. Use only my copy below.
No emoji icons. Spacing should vary: more space around the
headline, tighter inside the grid.

[your copy]

The short version

AI makes generic sites when it's left to guess. Give it a reference, a type scale, a restrained palette, real copy and permission to be asymmetric, and the result stops looking like everyone else's.

If you want a head start, every section on Oversight Supply's sections page can be copied as a single prompt for Claude, Cursor or v0, and many of them are free.