Claude Code Prompts for Website Design: 10 to Copy

The best Claude Code prompts for website design set the design rules before any code is written, then build one section at a time with a review after each step. The 10 prompts below take you from a design system in CLAUDE.md to a responsive, accessible site, and each one tells Claude Code when to stop and wait for you.

Fill in the [brackets] with your project details. Commands and file paths depend on your framework, so confirm anything Claude Code wants to run in your own setup.

Prompts for setting the design system

1. Write the design direction

I am building a site for [business] whose visitors are [audience]. The main action is [action]. Write a five line design direction covering mood, layout density, type pairing, color use, and imagery. Do not write code.

2. Add design rules to CLAUDE.md

Add a design section to CLAUDE.md for this [framework and styling] project: folder structure, a spacing scale, a type scale, a rule to use theme tokens instead of raw colors, and a do-not list that includes [things to avoid].

3. Create the design tokens

Create theme tokens for these brand colors [hex values] and fonts [fonts] in [tailwind config or CSS custom properties]. List every text and background pair so I can check contrast.

Prompts for building

4. Plan before code

Read CLAUDE.md. Propose a component list and file tree for a site with these sections: [sections]. Do not write any code until I approve the plan.

5. Build one section

Build the [section name] section as [component file]. Use only theme tokens, placeholder images labeled as placeholders, and the copy in [content file]. Stop when it renders and wait for my review.

6. Match a layout described in words

Restyle [section] to feel like this description: [layout, spacing, and type you like]. Keep our tokens and content. Explain each change in one line.

Prompts for reviewing the design

7. Screenshot critique

Here are screenshots of the site at [mobile, tablet, desktop widths]. Compare them with the design direction in CLAUDE.md and list the five biggest visual problems in priority order, with the files to change. Do not edit yet.

8. Responsive fixes

Fix the layout issues visible in these screenshots at [widths]. Change only spacing, sizing, and layout classes, and do not change content or colors.

9. Accessibility pass

Check the site against [accessibility target]: one h1, heading order, alt text, visible focus states, form labels, keyboard order, color contrast, and reduced motion. Report failures first, then fix them one at a time.

10. Polish and consistency

Review every component for values that break our spacing or type scale, mismatched button styles, and hover or focus states that are missing. Fix them and list what changed.

Plan the whole build session

To get a tailored plan instead of assembling prompts yourself, use the Claude Code Website Design Prompt: Build Session Planner. You give it the site brief, brand tokens, sections, stack, visual references described in words, and an accessibility target, and it returns a design direction, a CLAUDE.md design section, a tokens draft with contrast pairs, a phased prompt sequence with stop points, a screenshot review loop, an accessibility pass, and commit checkpoints. The example on the prompt page plans a one page site for a small landscape design studio.

Why this order works

When Claude Code starts without rules, it picks its own colors, spacing, and components, and the result looks generic. Writing the rules first, reviewing after every section, and committing at each checkpoint keeps the design consistent and makes a bad change easy to roll back.

Related prompts

To turn one of these steps into a reusable command, use Claude Code Slash Command from a Repeatable Job. To plan page content before you build, try Landing Page Wireframe in Words. Find more in the Coding prompts hub, browse more prompts, or share a prompt from your own workflow.