How to make an AI-built website not look AI-generated

What the “AI look” actually is

It helps to name the pattern before fighting it. Most generated sites share the same handful of choices:

• A blue-to-purple gradient behind a centered headline.
• Frosted glass cards with soft blurred shadows (glassmorphism).
• Neon glows, especially on dark backgrounds.
• Three feature cards with generic line icons.
• Every corner rounded the same, every section padded the same.
• Inter or a similar neutral sans, one weight, everywhere.
• Fade-in animation on every block as you scroll.
• Copy that could belong to any company: “Elevate your workflow.”

Each of these is the statistically safest answer to an open question. Put them together and you get a site that looks like ten thousand others. The rules below close those questions one by one.

1. Pick a real-world reference

Designers rarely start from “modern.” They start from something physical: a printed poster, a museum label, a restaurant menu, a field guide. Give Claude a reference like that in the first line of the prompt. It pulls every later choice in one direction.

It should feel like a printed protest poster that also works as a website.
It should read like a museum wall label: quiet, exact, a lot of white space.
It should feel like an evening: dark, expensive, unhurried.
It should look like a risograph-printed zine, slightly misregistered.

Compare Loudmouth Agency and Nocturne Hotel: both started from one sentence like these.

2. Use a warm or committed palette, with hex values

Pure white and saturated blue are what you get when nobody chooses. Choose. A warm off-white (#FAF9F6), near-black ink (#121212) and one accent color already look more considered than any gradient. Or commit fully to a style palette: acid yellow and black for brutalism, washi paper and vermilion for Japanese minimal.

Then limit the accent. “Terracotta only on the primary button and one underline” is a design decision. Accent everywhere is decoration.

3. Ban the defaults explicitly

Claude follows exclusions reliably, so write them down. This block is worth adding to any prompt:

AVOID:
- Gradients (except soft vignettes on image placeholders).
- Glassmorphism, backdrop blur, frosted cards.
- Neon glow, colored drop shadows, cyberpunk styling.
- Generic three-card feature rows with line icons.
- Fade-in-on-scroll for every section.
- Stock phrases like "elevate", "unlock", "seamless", "next-level".

4. Make typography do the work

Generated sites use one sans-serif at one weight. Hand-made sites have a type system: a display face with character, a quiet body face, and often a mono or serif for labels and accents. Specify all three, with weights and sizes, and let the headline be big. A 9rem headline with tight tracking says more than any illustration.

TYPE:
- Display: Instrument Sans 700, tracking -0.04em, headline at clamp(3rem, 8vw, 7rem).
- Accent: Instrument Serif italic for one word per headline.
- Labels: JetBrains Mono 11px uppercase, tracking 0.16em.
- Body: 17px, line-height 1.6, max width 65ch.

5. Hard shadows and hairlines instead of blur

Soft blurred shadows are the fingerprint of UI kits. Print has no blur. Use 1px hairlines to divide sections and hard offset shadows (a solid copy of the shape, shifted 3–8px) for things you can press. It instantly reads as graphic design rather than software.

DETAILS:
- Section dividers: 1px solid #121212 hairlines, full width.
- Buttons and cards: 1px border, hard offset shadow 3px 3px 0 #121212, no blur.
- Corner radius: square, or one radius used everywhere (no mix).

6. Break the grid once, on purpose

Templates center everything. Use a 12-column grid and place things asymmetrically: headline across seven columns, intro in the remaining five, aligned to the bottom. Let one element break out: a rotated sticker, an oversized number, a vertical caption. One deliberate break per page is enough. Ten is noise.

7. Motion with physics, used sparingly

Fades everywhere feel automated. Pick two or three moments and give them physical motion: a button that squishes when pressed, cards that tilt toward the cursor, a headline word that swaps with a spring. Specify spring values and animate only transform and opacity. The animated buttons and kinetic typography collections are full of examples with their exact settings.

8. Write real copy before you design

Nothing gives a site away faster than vague copy. Write the actual headline, the actual prices, the actual opening hours, and put them in the prompt. Specific words (“Open from 7. Closed Saturdays.”) make the design specific too, because Claude lays out what is really there.

9. Add one detail nobody asked for

Well-designed sites have small surprises: a ticker strip, a drawn underline, a page number in the corner, a cursor that leaves ink. These details cost one line in a prompt and are the part visitors remember. Browse the hero sections for ideas.

Before and after: the same request, rewritten

Here is a typical prompt, followed by the same request with the rules applied. The second is longer, but every extra line removes a default.

Make a modern, beautiful website for my yoga studio with a hero, classes, pricing and contact. Use nice animations.

Build a one-page website for "Ashtanga Lab", a small yoga studio in a converted print shop.

CONCEPT: It should feel like a printed class timetable pinned to a cork board: calm, exact, a little analog.

SECTIONS: hero with the headline "Practice, not performance." and this week's timetable beside it; three class types with level and length; prices (drop-in $18, 10 classes $150); a short note from the teacher; address and hours.

DESIGN: paper #F6F2EA, ink #1A1A1A, one terracotta accent #C4502F only on buttons and today's column. Display: Instrument Sans 700, tracking -0.04em. Labels: JetBrains Mono 11px uppercase. 1px hairlines, hard 3px 3px 0 shadows, square corners.

MOTION: today's column slides in with a spring; buttons press into their shadow. Nothing else moves.

AVOID: gradients, glassmorphism, neon, icon cards, fade-in on every section, stock phrases.

The first prompt leaves about thirty decisions to chance. The second makes them all, and the result looks like a studio with a point of view.

Putting it together

You do not need all nine rules on every page. A reference, a fixed palette, a ban list and a real type system already move a site out of the template look. Add hard shadows and one piece of physical motion and most people will read it as a designed site.

Every design in the Specimen library is made with Claude from prompts that follow these rules. Open one, read its prompt, and you will see each principle written out.