Website prompts for Claude Code: write a design brief, not a wish

Claude Code is very good at building a working website from a one-line request. It is much less good at guessing what you want it to look like. Ask for "a modern landing page for my app" and you'll get exactly that: a centered hero, a soft gradient, three feature cards, and a footer. It works. It just looks like every other AI-built page.

The fix isn't a longer prompt. It's a different kind of prompt. Good website prompts for Claude Code read like a short design brief: they make the visual decisions up front so the agent doesn't have to invent them. Here's the structure I use.

1. Start with what the page has to prove

Before any styling, tell Claude what the page is for and in what order the visitor should be convinced:

Build a single-page site for a time-tracking app for freelancers.
The page must prove, in order:
1. It's fast to start (hero)
2. It replaces spreadsheets (before/after section)
3. It's affordable (pricing with 2 tiers)
4. Other freelancers use it (leave a placeholder, no fake quotes)

This keeps Claude from padding the page with generic sections ("Why choose us", "Our mission") and gives every block a job.

2. Make the type decisions yourself

Typography is where "designed" and "default" diverge first. If you don't specify it, you get one font at five similar sizes.

Typography: a serif display font for headings, a clean sans for body.
Scale: 64 / 40 / 24 / 16px on desktop. Headings tight (line-height 1.1),
body relaxed (1.6). Max line length ~65 characters.

Three lines, and the page already looks more intentional than most.

3. Restrict the palette

AI builders love to use every color they've been given. Give fewer:

Color: warm off-white background, near-black text, ONE accent color
used only for primary buttons and links. No gradients on text.

Restraint reads as confidence. A single accent color does more than five.

4. Specify spacing and layout like a designer would

Generic pages are usually cramped and centered. Ask for the opposite:

Layout: 12-column grid, max width 1200px. Section padding 120px top/bottom
on desktop, 72px on mobile. Hero is left-aligned text with the product
visual on the right, not centered.

Asymmetry and generous whitespace are two of the cheapest ways to escape the template look.

5. Ask for one motion idea, not "animations"

"Add animations" gets you fade-ins on everything. Name one thing:

Motion: the hero product visual tilts slightly with the cursor.
Sections fade up 16px on scroll, once. Buttons have a 150ms hover state.
Respect prefers-reduced-motion.

One memorable motion beat plus quiet transitions everywhere else is what most well-designed sites actually do.

6. Tell Claude Code how to work, not just what to build

Because Claude Code is an agent working in your repo, you can also give it process constraints, which matter as much as the visuals:

Process: put design tokens (colors, type scale, spacing) in one file
first and use them everywhere. Build the hero, stop, and show me
before building the rest.

Tokens-first means later edits ("make the accent green") change one value instead of thirty. Stopping after the hero gives you a cheap checkpoint before the style spreads across the whole page.

7. Edit in small, named steps

Once the first version exists, the biggest risk is the follow-up message. "Make it about my product" is often read as permission to redesign. Be explicit:

Replace the copy and images only. Keep the layout, type scale,
colors and motion exactly as they are.

Putting it together

A full brief using all of the above is maybe 20 lines. That's the whole trick: you're not writing a better wish, you're making the five or six design decisions Claude would otherwise make by default.

If you'd rather start from briefs that already make those calls, MotionSites (motionsites.org) is a library of copy-paste website prompts written for Claude, Lovable, Bolt and Cursor, each paired with a preview of the design it builds. There's a free section too. But the structure above works with any prompt you write yourself, so try it on your next page and see how far a design brief gets you compared to a one-liner.