12 Claude Prompts for Website Design That Don't Produce Generic Sites

Claude is very good at building websites. Left to guess, it's also very good at building the same website over and over. The fix is almost never a "magic" prompt. It's giving Claude the decisions a designer would make, one stage at a time.

These twelve prompts cover the whole process. They work in Claude chat and in Claude Code; swap the bracketed parts for your own project.

Before you build

1. Get Claude to ask before it builds

I want to build [a website for X]. Before writing any code, ask me
up to 8 questions about the audience, goal, pages, content and the
look I want. Wait for my answers.

Why it works: most generic sites come from missing information. Making Claude ask first fills the gaps with your answers instead of its defaults.

2. Turn your answers into a brief

Turn my answers into a one-page brief: goal, audience, the single
action visitors should take, the page list, and the sections of the
homepage in order. Keep it short. We'll build from this.

Why it works: a written brief keeps every later prompt consistent, and you can paste it into a new chat at any time.

Layout and structure

3. Start from a reference

Use this section as the reference for layout, spacing and type:
[paste a section prompt or describe a site precisely].
Adapt it to my brief. Keep the structure, change the content.

Why it works: a concrete reference replaces vague words like "modern". Every section on Oversight Supply's sections page can be copied as a prompt like this.

4. Build one section at a time

Build only the hero section from the brief. Use my copy exactly.
Stop when it's done so I can review it before the next section.

Why it works: you review each part while it's small, and problems don't spread across the whole page.

5. Break the symmetry

Make the features section asymmetric: one large item and two small
ones, not three equal cards. Left-align the text.

Why it works: three equal cards in a row is the most recognisable AI-generated layout. One deliberate change makes the page feel designed.

Typography and colour

6. Set a type scale

Typography: [heading font] for headings, [body font] for body.
Headline 64px desktop / 40px mobile, tight letter-spacing (-0.03em).
Body 17px, line-height 1.6. Use no more than four font sizes.

Why it works: strong contrast between headline and body is what makes a page look intentional. Limiting the sizes keeps it clean.

7. Restrain the colour

Palette: warm off-white background, near-black text, two greys for
secondary text and borders. One accent colour, [colour], used only
for the main button and one highlight per section. No gradients.

Why it works: generic sites spread colour everywhere. One accent, used rarely, looks confident.

Copy

8. Ban invented content

Use only the copy I give you. Do not add statistics, testimonials,
client logos, awards or claims that aren't in my brief. If a section
needs content I haven't provided, leave a clear placeholder.

Why it works: AI loves filler like "Trusted by 10,000+ teams". Fake proof hurts trust and can mislead people, so rule it out up front.

9. Tighten the headline

Give me 5 alternative headlines for the hero, each under 8 words,
in plain language a customer would use. No buzzwords.

Why it works: short, specific headlines beat clever ones. Asking for options lets you pick instead of settling.

Mobile, motion and polish

10. Check mobile properly

Check every section at 375px wide. Nothing may scroll sideways,
text must be at least 16px, and buttons at least 44px tall.
List what you changed.

Why it works: "make it responsive" is vague; specific numbers give Claude something to test against.

11. Add motion with restraint

Add subtle entrance animations: elements fade in and move up 12px,
450ms, ease-out, staggered 70ms. Exits faster than entrances.
Disable all of it when the user prefers reduced motion.

Why it works: specific timing and easing is what separates designed motion from default fades. For more, see 10 Claude animation prompts.

12. Run a final review

Review the page like a senior designer. List the 5 biggest issues
with hierarchy, spacing, contrast and consistency, then fix them.

Why it works: Claude is often better at critiquing than at getting everything right first time. A review pass catches what you've stopped seeing.

Putting it together

Use 1–2 to plan, 3–5 to structure, 6–9 to style and write, and 10–12 to finish. For the bigger picture on why AI sites look alike, see how to make AI-generated websites look less generic, and for comparing tools, Claude vs Lovable vs Cursor vs v0.