Claude for Design
Working with Claude
Frame the ask, name the mode, give visual context.
Juan M. Cornejo
Notes, no. 09
Frame the ask, name the mode, give visual context. Practical phrases and patterns so Claude reads the brief the way another designer would.
1Claude for Design
Part 01
Five things to state up front. The more of these Claude has, the less it guesses.
Five things to state up front. The more of these Claude has, the less it guesses.
Tell Claude what hat to wear. It shifts the vocabulary, defaults, and rigor it brings.
Who uses it and where. "Enterprise dashboard" and "consumer iOS app" produce very different designs.
State the outcome, not just the artifact. Claude designs toward the goal instead of decorating.
Brand, tech, accessibility, space, must-haves. Constraints sharpen output, they don't limit it.
Be explicit about the deliverable: a wireframe, an HTML mockup, a token spec, a critique, copy.
Part 02
The verb you lead with tells Claude what kind of help you want. Pick deliberately.
The verb you lead with tells Claude what kind of help you want. Pick deliberately.
Make something from scratch. Best with a clear brief and constraints attached.
When you want range, not one answer. Ask for distinct directions, not minor variants.
Have Claude evaluate against principles (hierarchy, contrast, consistency, accessibility).
Improve what exists. Reference the specific thing and the direction of change.
Understand the "why" so you can decide yourself. Great for learning design rationale.
Move between fidelities or formats: sketch→hi-fi, mockup→code, copy→UI.
Part 03
Design is visual, feed Claude visuals. This single habit improves results more than any clever wording.
Design is visual, feed Claude visuals. This single habit improves results more than any clever wording.
Drop in a screen of what exists. Claude can read layout, hierarchy, and problems directly.
Share an example you like and name what about it to borrow, don't assume Claude guesses the right part.
Give adjectives + anti-adjectives. "Warm and trustworthy, not corporate or cold" steers fast.
Paste your actual colors, type scale, spacing. Claude will design within your system, not invent one.
With the Figma connector, share a frame link so Claude reads the real design, not a description.
Specify viewport so layout decisions are correct from the start.
Part 04
The vocabulary of the feedback loop. These short phrases steer adjustments precisely.
The vocabulary of the feedback loop. These short phrases steer adjustments precisely.
Forces divergence so you can react to alternatives instead of judging a single guess.
Shorthand for more whitespace and looser spacing. Common, well-understood design slang.
Tighten = reduce spacing/scope; loosen = open it up. Pair with what (spacing, copy, scope).
Ask for more boldness when a draft is too safe. Or "dial it back" for the opposite.
Lock what works so iteration doesn't regress the parts you like.
Ask to see hover, focus, empty, loading, and error, not just the happy path.
Part 05
Speak in systems and Claude produces consistent, scalable work instead of one-off pixels.
A table drawn as parts, by hand: each part has a name, a colour step and a corner radius.
One screen, and the brands it can be dressed in. The layout never changes; only the named values do.
Speak in systems and Claude produces consistent, scalable work instead of one-off pixels.
Ask Claude to establish color, type, spacing, and radius tokens before any screens.
Turn a repeated pattern into a reusable component with named props and variants.
Ask for role-based names (primary, surface, danger) over literal ones (blue, gray-2).
Have Claude write do/don't guidance so the system is usable by others.
Point Claude at existing screens to find drift, off-scale spacing, stray colors, mixed radii.
Ask for the same components driven by tokens so light/dark or brand themes swap cleanly.
Part 06
With the Figma connector, Claude bridges design and code both ways. Name the direction you want.
With the Figma connector, Claude bridges design and code both ways. Name the direction you want.
Hand Claude a frame; get faithful, component-structured code back.
Push an existing page or component into Figma to design on top of it.
Generate a design system in Figma from your codebase or token set.
Have Claude inspect a frame and critique it before you build.
Generate flows, maps, and architecture diagrams directly in FigJam.
Map Figma components to your real code components so handoff stays in sync.
Part 07
Naming the principle gets you actionable feedback instead of "looks good." Ask Claude to use these lenses.
Naming the principle gets you actionable feedback instead of "looks good." Ask Claude to use these lenses.
Does the eye land on the most important thing first? Size, weight, color, position.
Text/background contrast ratios and readability at real sizes.
Are edges aligned to a consistent grid, or drifting?
Consistent spacing scale; related items grouped (proximity).
Do interactive things look interactive? Buttons look like buttons.
Is the screen asking too much at once? What can be deferred or removed.
Elsewhere
another notebook Claude for Development
Claude for Branding
Claude for Development