AI · Practice
Claude for Design
Frame the ask, name the mode, give visual context. Practical phrases and patterns so Claude reads the brief the way another designer would.
Five things to state up front. The more of these Claude has, the less it guesses.
Description
Five things to state up front. The more of these Claude has, the less it guesses.
Terms
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.
The verb you lead with tells Claude what kind of help you want. Pick deliberately.
Description
The verb you lead with tells Claude what kind of help you want. Pick deliberately.
Terms
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.
Design is visual, feed Claude visuals. This single habit improves results more than any clever wording.
Description
Design is visual, feed Claude visuals. This single habit improves results more than any clever wording.
Terms
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.
The vocabulary of the feedback loop. These short phrases steer adjustments precisely.
Description
The vocabulary of the feedback loop. These short phrases steer adjustments precisely.
Terms
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.
Speak in systems and Claude produces consistent, scalable work instead of one-off pixels.
Description
Speak in systems and Claude produces consistent, scalable work instead of one-off pixels.
Terms
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.
With the Figma connector, Claude bridges design and code both ways. Name the direction you want.
Description
With the Figma connector, Claude bridges design and code both ways. Name the direction you want.
Terms
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.
Naming the principle gets you actionable feedback instead of "looks good." Ask Claude to use these lenses.
Description
Naming the principle gets you actionable feedback instead of "looks good." Ask Claude to use these lenses.
Terms
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.