How to prompt Claude for design

The method in five steps

1. Brief. Say what you are building, where the content is, the stack, and the look as values: hex colours, typefaces, sizes in px, spacing.
2. Plan. Ask Claude Code for a plan with no code: files, routes, tokens, questions. Read it and answer the questions.
3. Build. Let it work, in stages if the job is large. The first stage writes the rules into CLAUDE.md.
4. Run and look. Claude Code runs the build and reports. You open the page and look at it at phone and desktop width.
5. Correct. Send a short list of specific changes, each with a place and a value.

A brief Claude can act on

Claude follows instructions closely, so a vague brief gets a faithful rendering of vagueness. "Clean and modern" leaves every choice open. "Ground #f3efe6, one accent, a serif at 96px, 120px between sections, nothing moves except route changes" closes them. Write what you have decided as values and say plainly which decisions you are leaving to Claude.

Say what not to add. No UI library, no icon pack, no gradients, no invented copy. A short list of exclusions removes the habits that make generated pages look alike.

Plan first, and read the plan

A plan shows you Claude's reading of the brief while it is still cheap to change. Ask for the file tree, the routes, the custom properties and any open questions, and end with "wait for my OK". Claude Code also has a plan mode that proposes without editing files; check its documentation for how to use it.

Read the plan for what is missing as much as for what is there. If the brief said four routes and the plan has three, that is the moment to say so.

Make it run its own work

Claude Code can run commands, so ask it to: the build, the linter, the tests, the dev server. End every prompt with what to run and what to report, including what it could not check. An agent that has to state "I did not open the page on a phone width" is more useful than one that says "done".

Whether Claude Code can look at the rendered page depends on your setup, such as a browser tool connected to it. If it can't, you are its eyes: take a screenshot, save it in the project folder and ask Claude Code to read it.

Correct with a place and a value

"Make it pop" starts a guessing game. A correction names where and how much: which component, which property, from what to what. Group corrections into one message, number them, and ask Claude to confirm each. If the same correction comes up twice, it is a rule, and it belongs in CLAUDE.md.

A correction message to copy

Four changes to the home page. Make only these, in this order, and tell me which files you touched for each.

1. Hero headline: 96px is too large against the nav. Set it to 80px on desktop, keep 44px on phones. Line-height stays 0.95.
2. Section spacing: the gap between "Work" and "About" is 120px but looks tighter because the last project image has no bottom margin. Make the visible gap 120px.
3. Project cards: the hover state changes the title colour to the accent #d6452b. Remove that. On hover, only the image scales, from 1 to 1.03 over 0.4s, ease-out. With prefers-reduced-motion, no scale.
4. Footer: the email link wraps onto two lines at 390px. Reduce the footer type from 17px to 15px below 720px so it fits on one.

Do not change anything else, even if you see something you would improve; list those at the end instead.

If any of these values should become a token or already contradicts tokens.css, say so before editing. If one of them is now a standing rule, add it to CLAUDE.md.

Then run npm run build, open the page at 390px and 1440px, and report on each of the four points separately: fixed, not fixed, or could not check.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• Design rules in CLAUDE.mdHow to keep design rules in a CLAUDE.md file so every Claude Code session follows them, with an example rules block to copy.
• Connecting uberdesigner to Claude Code over MCPHow to add the uberdesigner MCP server to Claude Code, sign in, and what to ask once the template library is connected.
• Claude chat or Claude Code for design workWhich to use for what: the Claude chat app for one HTML file to look at, Claude Code for a real project. How to move a draft from one to the other.

• Whole sites
• Landing pages
• Animation