How to Write Claude Prompts That Generate Designer-Grade Websites

Claude is better at web design than most people realise, and most people use it worse than they should.

The typical interaction goes like this: type "build me a landing page for my SaaS product," get back a reasonable but generic result, tweak it a few times, end up with something that works but doesn't stand out. Repeat for every project.

The problem isn't Claude. The problem is that the prompt asks Claude to make creative decisions it can't make well — decisions that require knowledge of your brand, your audience, your competitive context, your aesthetic references — without giving it any of that information.

Claude is a precision instrument. It does exactly what you specify. When you don't specify, it infers. When it infers, it defaults to the middle of its training distribution. The middle of the training distribution is generic.

Here is how to use Claude for web design in a way that produces output worth shipping.

Why Claude specifically

Three things make Claude particularly good for design work compared to other models.

Long context, high fidelity. Claude maintains coherence over long, detailed prompts. You can specify 2,000 words of design requirements — every spacing value, every colour token, every animation curve — and it will implement all of it. Other models lose the thread.

Code quality. Claude produces clean, readable React + TypeScript + Tailwind code. It follows conventions. It names things properly. The output requires less cleanup than most alternatives.

Design reasoning. Claude has a developed aesthetic sensibility — more so than GPT models, in my experience — and responds well to design-reference language. "Inspired by the restraint of Muji's visual identity" or "the editorial rhythm of a broadsheet newspaper" produces different and usually better output than the same instruction given to other models.

The structure of a good Claude design prompt

A prompt that produces design-grade output has six parts. All six matter.

1. Tech stack declaration

Start with the exact technology. Not "React" but "React 18 + TypeScript + Vite + Tailwind CSS 3 + lucide-react." This tells Claude which component patterns, which utility class conventions, which icon library to use. Vagueness here produces import errors and inconsistent patterns.

2. Palette as named tokens

Don't say "dark background with blue accents." Say: "Color system: bg #0C0A09 (name: ink), primary text #E8E0D0 (name: cream), accent #B87333 (name: copper). Add these to tailwind.config.js as theme extensions."

Named tokens do two things: they produce consistent colour usage across the component, and they tell Claude that colour is a considered system rather than an ad hoc choice. Ad hoc choices produce generic output.

3. Typography as specific declarations

Name the fonts. Name the weights. Name the sizes in viewport units or pixels. Name the letter-spacing. "Display: Fraunces, font-optical-sizing auto, weight 400, italic, size 18vw desktop to 12vw xl, letter-spacing -0.045em" leaves no room for Inter 700 to sneak in.

Include the Google Fonts link tags if you want Claude to generate the full HTML setup. It will include them if you specify them, skip them if you don't.

4. Layout as explicit coordinates

Don't describe layout in vague terms. Describe it as positioning. "Headline: absolute, top 20% from section top, centred horizontally. Subheadline: absolute, top calc(20% + 14vw), centred. CTA block: absolute, bottom 12, right 14."

Claude is good at translating spatial descriptions into Tailwind positioning utilities when the descriptions are specific. "Put the headline somewhere prominent" produces whatever prominent means to Claude that day.

5. The signature interaction

This is the single element that makes the component memorable. Name it explicitly and describe the mechanics.

"Magnetic headline: each letter is a separate span tracked with a RAF loop. Mouse position stored in a ref. Each frame, compute distance from letter bounding-box centre to cursor. If distance under 140px, translate letter toward cursor with magnitude (140 - distance) / 140 * 18px. Apply via style.transform for GPU compositing. Lerp factor 0.12 for smooth easing. Clean up on unmount."

That level of specificity produces the mechanic you actually want. "Cool cursor interaction" produces whatever Claude thinks is cool.

6. Animation choreography

Specify the entrance animations. Sequence them. Give them timing values.

"Entrance sequence: background image begins breathing animation immediately (18s ease-in-out scale). Headline letters rise individually with 80ms stagger starting at 0ms. Subheadline fades up at 1100ms. CTA block fades up at 1500ms. All animations respect prefers-reduced-motion — short-circuit to opacity: 1 if reduced motion is set."

Specifying the choreography produces a component that feels considered and deliberate. Saying "add some animations" produces random transitions that don't relate to each other.

Common mistakes

Asking for "modern" or "premium" without specifying what those mean. Modern and premium mean different things to different people and different things at different points in design history. To Claude in 2026, they mean "dark background, Inter, subtle gradient." Specify the aesthetic reference you actually want.

Asking for too many things in one prompt. "Build me a full landing page with hero, features, pricing, testimonials, and footer" produces a page with each section at the lowest common quality. Each section needs its own focused prompt, then integrate them. Quality degrades with scope.

Not specifying what to avoid. Claude will default to the patterns it's seen most. "Avoid rounded dashboard mockup screenshots, avoid radial gradient glows, avoid Inter unless no other font is specified" explicitly forecloses the defaults. If you don't close the door, Claude walks through it.

Asking for it to "make it look good." Claude doesn't know what looks good for your brand, your audience, or your competitive context. It knows what has been judged to look good historically. Specify what good means for this specific thing.

The before and after

Bad prompt:

"Build a hero section for a design agency. Make it look premium and editorial. Dark background, elegant typography, smooth animations."

This gets you: Inter 700 on #09090B with a subtle gradient and a fade-in animation. Premium by 2022 standards.

Good prompt:

"Build a hero section for an independent design studio called Halcyon°. Tech: React 18 + TypeScript + Vite + Tailwind 3 + lucide-react. Colors: ink #0C0A09 (add to tailwind config), cream #E8E0D0, copper #B87333, fog rgba(232,224,208,0.55). Fonts: Fraunces (variable, italic, optical sizing) for display, Inter Tight for UI — load from Google Fonts. Layout: full-screen section at 100dvh. Headline 'Halcyon' in Fraunces at 14vw desktop, absolute centred at top 20%, with magnetic cursor mechanic per letter (RAF loop, 140px radius, 18px max offset, 0.12 lerp). Subheadline italic in Fraunces at 1.5rem below headline. CTA block bottom-right: 'Start a project' pill button in cream bg, copper arrow circle. Background: a high-res editorial image with 18s breathing scale animation. Add grain texture overlay at opacity 0.35. Entrance: letters stagger at 80ms each, subheadline at 1100ms, CTA at 1500ms. Fully responsive. Respect prefers-reduced-motion."

This gets you a specific, distinctive, ready-to-ship hero section.

The real insight

The shift from bad to good prompting is a shift in who makes the creative decisions.

A vague prompt delegates creative decisions to Claude. Claude makes those decisions based on statistical patterns in its training data. The decisions are safe, average, and identical to decisions made by everyone else using the same tool with similarly vague prompts.

A specific prompt keeps the creative decisions with the human and delegates execution to Claude. Claude executes those decisions precisely and quickly. The output reflects your judgment, your aesthetic, your brand — with Claude's technical precision doing the implementation.

The best AI-generated design doesn't look AI-generated because the human made all the interesting choices and let the AI handle the code.