# Claude for Design

> Talk to Claude like a design partner, not a vending machine.

Frame the ask, name the mode, give visual context. Practical phrases and patterns so Claude reads the brief the way another designer would.

Source: https://www.juanmnl.com/notes/claude-for-design.html

## Frame the Ask

Five things to state up front. The more of these Claude has, the less it guesses.

### Role

Tell Claude what hat to wear. It shifts the vocabulary, defaults, and rigor it brings.

Prompt: Act as a senior product designer. Critique this onboarding flow for clarity and friction.

### Audience & platform

Who uses it and where. "Enterprise dashboard" and "consumer iOS app" produce very different designs.

Prompt: It's a mobile-first app for non-technical small-business owners. Keep it simple and reassuring.

### Goal / job-to-be-done

State the outcome, not just the artifact. Claude designs toward the goal instead of decorating.

Prompt: The goal is to get a first project created in under 60 seconds.

### Constraints

Brand, tech, accessibility, space, must-haves. Constraints sharpen output, they don't limit it.

Prompt: Constraints: WCAG AA contrast, our brand purple, fits on one screen, no carousels.

### Output format

Be explicit about the deliverable: a wireframe, an HTML mockup, a token spec, a critique, copy.

Prompt: Give me a single-file HTML mockup I can open in a browser, dark theme.

### Vague → precise


## Working Modes

The verb you lead with tells Claude what kind of help you want. Pick deliberately.

### Generate / draft

Make something from scratch. Best with a clear brief and constraints attached.

Prompt: Generate three layout options for a settings page with grouped sections.

### Explore / diverge

When you want range, not one answer. Ask for distinct directions, not minor variants.

Prompt: Explore 3 visually distinct directions: one editorial, one playful, one ultra-minimal.

### Critique / audit

Have Claude evaluate against principles (hierarchy, contrast, consistency, accessibility).

Prompt: Audit this screen against usability heuristics and list issues by severity.

### Iterate / refine

Improve what exists. Reference the specific thing and the direction of change.

Prompt: Tighten the spacing and increase contrast on the secondary text.

### Explain / teach

Understand the "why" so you can decide yourself. Great for learning design rationale.

Prompt: Explain why this layout feels cluttered and what principle it violates.

### Convert / translate

Move between fidelities or formats: sketch→hi-fi, mockup→code, copy→UI.

Prompt: Convert this wireframe into a polished HTML prototype with real styling.


## Give Visual Context

Design is visual, feed Claude visuals. This single habit improves results more than any clever wording.

### Paste a screenshot

Drop in a screen of what exists. Claude can read layout, hierarchy, and problems directly.

Prompt: Here's the current screen [image]. What's hurting the hierarchy?

### "Match this" reference

Share an example you like and name what about it to borrow, don't assume Claude guesses the right part.

Prompt: Match the spacing and restraint of this [image], but use our colors.

### Describe the brand

Give adjectives + anti-adjectives. "Warm and trustworthy, not corporate or cold" steers fast.

Prompt: Brand feel: calm, precise, a little technical. Not flashy, not cute.

### Share tokens / specs

Paste your actual colors, type scale, spacing. Claude will design within your system, not invent one.

Prompt: Use these tokens: primary #6D28D9, radius 12px, 8px spacing scale, Inter.

### Point at a Figma file

With the Figma connector, share a frame link so Claude reads the real design, not a description.

Prompt: Here's the frame: [figma link]. Implement it as a React component.

### Name the device frame

Specify viewport so layout decisions are correct from the start.

Prompt: Design for 390×844 (iPhone), then show the desktop breakpoint.


## Options & Iteration

The vocabulary of the feedback loop. These short phrases steer adjustments precisely.

### "Give me 3 options"

Forces divergence so you can react to alternatives instead of judging a single guess.

Prompt: Show 3 directions side by side, then I'll pick one to refine.

### "Make it breathe"

Shorthand for more whitespace and looser spacing. Common, well-understood design slang.

Prompt: Too dense, let it breathe, more padding between sections.

### "Tighten / loosen"

Tighten = reduce spacing/scope; loosen = open it up. Pair with what (spacing, copy, scope).

Prompt: Tighten the card padding; loosen the line-height in body text.

### "Push it further"

Ask for more boldness when a draft is too safe. Or "dial it back" for the opposite.

Prompt: Too timid, push the contrast and scale further.

### "Keep everything except…"

Lock what works so iteration doesn't regress the parts you like.

Prompt: Keep the layout, only change the color treatment of the header.

### "Show the states"

Ask to see hover, focus, empty, loading, and error, not just the happy path.

Prompt: Now show the empty, loading, and error states for this list.


## Design Systems & Tokens

Speak in systems and Claude produces consistent, scalable work instead of one-off pixels.

### "Define tokens first"

Ask Claude to establish color, type, spacing, and radius tokens before any screens.

Prompt: Define a token set (color, type scale, spacing, radius) before designing screens.

### "Componentize this"

Turn a repeated pattern into a reusable component with named props and variants.

Prompt: Componentize the card: props for image, title, badge, and a hover state.

### "Use semantic naming"

Ask for role-based names (primary, surface, danger) over literal ones (blue, gray-2).

Prompt: Name colors semantically: primary, surface, danger, not by hue.

### "Document usage"

Have Claude write do/don't guidance so the system is usable by others.

Prompt: For each component, add when to use / when not to use.

### "Audit for consistency"

Point Claude at existing screens to find drift, off-scale spacing, stray colors, mixed radii.

Prompt: Audit these screens for tokens that break the system.

### "Theme it"

Ask for the same components driven by tokens so light/dark or brand themes swap cleanly.

Prompt: Make it themeable, one token set drives light and dark.


## Figma Workflow

With the Figma connector, Claude bridges design and code both ways. Name the direction you want.

### Design → code

Hand Claude a frame; get faithful, component-structured code back.

Prompt: From this frame [link], generate a React + Tailwind component matching spacing and tokens.

### Code → design

Push an existing page or component into Figma to design on top of it.

Prompt: Bring this component into Figma as an editable frame.

### Build a library

Generate a design system in Figma from your codebase or token set.

Prompt: Create a Figma library from these tokens and components.

### Read for review

Have Claude inspect a frame and critique it before you build.

Prompt: Look at [frame] and flag spacing or contrast issues before I hand off.

### Diagram in FigJam

Generate flows, maps, and architecture diagrams directly in FigJam.

Prompt: Diagram the signup flow in FigJam with decision branches.

### Code Connect

Map Figma components to your real code components so handoff stays in sync.

Prompt: Map this Figma button to our Button code component.


## Critique Language

Naming the principle gets you actionable feedback instead of "looks good." Ask Claude to use these lenses.

### Visual hierarchy

Does the eye land on the most important thing first? Size, weight, color, position.

Prompt: Is the hierarchy clear, does the primary action win attention?

### Contrast & legibility

Text/background contrast ratios and readability at real sizes.

Prompt: Check contrast ratios against WCAG AA.

### Alignment & grid

Are edges aligned to a consistent grid, or drifting?

Prompt: Flag anything off-grid or misaligned.

### Rhythm & spacing

Consistent spacing scale; related items grouped (proximity).

Prompt: Is the spacing rhythm consistent? Any one-off values?

### Affordance

Do interactive things look interactive? Buttons look like buttons.

Prompt: Does every control have a clear affordance and state?

### Cognitive load

Is the screen asking too much at once? What can be deferred or removed.

Prompt: Where's the cognitive load too high, what can we cut?