How to write a Claude prompt for a website design

Why one-line prompts give you a template

When a prompt leaves a decision open, Claude fills it with the most likely answer. The most likely hero is a centered headline over a soft gradient. The most likely palette is blue and purple. The most likely feature section is three cards with icons. None of those choices are wrong, they are just average, and average is what a template looks like.

The fix is not a longer prompt for its own sake. It is a prompt that makes the decisions a designer would make: what the site should feel like, what goes on each section, which colors and fonts, how things move, and what the code should look like when it comes back.

The five parts of a website prompt

Every prompt in the Specimen library follows the same five-part skeleton. You can open any design, switch to the prompt tab and see it in full.

1. 01Concept. One or two sentences on who the site is for and what it should feel like. Use a metaphor: “a Bauhaus exhibition poster that sells coffee” gives Claude far more to work with than “clean and modern.”
2. 02Layout and content. Every section in order, with the real words. Headlines, button labels, prices, the number of cards. Placeholder text produces placeholder design.
3. 03Interactions and motion. What moves, when, and how. Name the trigger (hover, scroll into view, click) and the feel (a spring with stiffness 260, not “smooth animations”).
4. 04Design system. Exact hex colors, font names and weights, border widths, shadow style, corner radius. Also the things to avoid.
5. 05Output rules. Framework, styling, libraries, one file or many, accessibility requirements. This keeps the code usable after the first answer.

A copy-ready template

Fill in the brackets. Leave nothing vague: if you do not know a color yet, pick one and change it later. A wrong decision is easier to fix than no decision.

Build a "[Business name] Website" React component.

CONCEPT: [Who it is for, in one sentence]. It should feel like [a physical object or place: a printed menu, a gallery wall, a field notebook].

LAYOUT & CONTENT:
- Nav: [logo text], links [A / B / C], primary button "[label]".
- Hero: headline "[exact headline]", subline "[one sentence]", [what sits next to it].
- [Section 2]: [what it shows, how many items, the real text].
- [Section 3]: ...
- Footer: [address, hours, small print].

INTERACTIONS & MOTION:
- [Element] [does what] on [hover / click / scroll into view].
- Spring physics (stiffness 260, damping 20). Animate transform and opacity only.
- Respect prefers-reduced-motion.

DESIGN SYSTEM:
- Colors: background [#hex], text [#hex], one accent [#hex] used sparingly.
- Type: [display font + weight] for headings, [body font] for text.
- Details: [1px hairlines / 3px borders], [hard offset shadows / no shadows], [corner radius].
- Avoid: gradients, glassmorphism, neon glow, generic stock icons.

OUTPUT: one self-contained React component (Tailwind CSS, framer-motion, lucide-react), default export, no external images, semantic HTML, visible focus states, keyboard operable.

A real example: a café website

Here is a shortened version of the prompt behind Café Bauhaus. Notice how much of it is content and constraints rather than adjectives.

Build a "Café Bauhaus Website" React component.

CONCEPT: The website of a neighbourhood café and roastery in a 1930s white-city building. It should read like a Bauhaus exhibition poster that sells coffee.

LAYOUT & CONTENT:
- Nav: circle logo + 'CAFÉ BAUHAUS', links Menu / Beans / Visit, red 'Order ahead' square button.
- Hero: headline 'FORM / FOLLOWS / COFFEE' stacked; right a 3x3 geometric composition.
- Menu: 6 tiles (Espresso, Flat white, Cortado, Filter, Cardamom bun, Shakshuka toast), each with a shape icon, price and short note.
- Hours: each weekday as a horizontal bar with times.

DESIGN SYSTEM — Bauhaus:
- Off-white #F3EEE3, black #111, red #E63322, blue #1F4E9E, yellow #F6C21B.
- Only circles, squares, half- and quarter-circles; strict grid.
- Syne 800 uppercase for display, Inter Tight for body.

Every line closes a door. Claude cannot reach for a gradient, because the palette is fixed. It cannot invent a generic feature grid, because the menu tiles are spelled out. That is what makes the result look designed.

Write the design system like a style guide

The design system block does most of the work against the “AI look.” Three habits help:

• Give hex values, not color names. “Warm beige” can be anything. #F3EEE3 is one thing.
• Limit the accent. Say how often the accent color may appear: “used twice at most” or “only on the primary button.” Restraint reads as intent.
• Write a ban list. Name what you do not want. Claude follows explicit exclusions well, and the defaults you exclude are exactly the ones that make sites look generated.

If you are unsure what a style needs, borrow it. Each style page, like Swiss International or Japanese Minimal, collects designs whose prompts already contain a full design system.

Describe motion with numbers

“Add smooth animations” produces fades on everything. Instead, pick two or three moments that matter and describe them precisely: the hero headline slides up word by word, cards lift 4px on hover with a spring, the hours bars grow when the section enters view. Ask for transform and opacity only, so it stays fast, and ask Claude to respect reduced-motion settings.

Iterate in small, specific steps

The first answer is a draft. Do not ask for “better.” Ask for one change at a time and say why:

The hero feels crowded. Remove the subline, make the headline 20% larger and give it 2x more space above.

The menu tiles all look the same weight. Make the first tile span two columns and use the accent color only there.

Replace every rounded-2xl with square corners and add a 3px black border with a hard 6px 6px 0 shadow.

On mobile, stack the hero composition under the headline and reduce it to a 2x2 grid.

Short, concrete follow-ups keep the parts you already like. A vague follow-up invites Claude to redo everything.

Common mistakes

• Lorem ipsum. Real words change the layout. A three-word headline and a twelve-word headline need different designs.
• Too many sections at once. For a first pass, five to seven sections is plenty. Add the rest once the system is set.
• Mixing styles. “Brutalist but elegant and playful” cancels itself out. Pick one design language and commit.
• No output rules. Without them you may get a page that depends on images you do not have or libraries you did not install.

Start from a working prompt

The fastest way to learn the structure is to copy a prompt that already works and change it. Browse the full website designs, find one close to your business, and swap in your name, content and colors. For single sections, try the hero sections or forms.