What Claude can do in design
A realistic overview of Claude's design capabilities: generating mockups, describing components, critiquing existing designs, and building design systems. What Claude does well — and where it falls short.
Claude is not a Figma replacement
This is important to understand upfront: Claude doesn't "draw" in the traditional sense. It works with text descriptions, HTML/CSS, SVG, and structured formats like design.md. Here's what it genuinely does well:
Where Claude excels:
- Generating structured design specs (design.md, tokens, component guides)
- Writing HTML/CSS for specific components — buttons, forms, cards, navigation
- Describing the design of an existing interface (when given a screenshot)
- Critiquing mockups: finding UX issues, hierarchy problems, color inconsistencies
- Creating component documentation in Storybook or design tokens JSON format
- Generating color palettes, typography, and spacing scales with clear reasoning
Where Claude is limited:
- It has no subjective sense of "beauty" — it reasons about design principles, not aesthetics
- It can't generate raster illustrations or icons (only simple SVGs)
- It has no memory between sessions — you need to pass your design system every time
Three roles Claude plays in design
1. Design critic
Upload a screenshot or describe an interface — Claude will analyze it structurally:
"Here's a screenshot of my landing page. Find 5 visual hierarchy problems and suggest specific fixes."
This works far better than "make it look good" — Claude doesn't know what looks good in your context, but it knows hierarchy, contrast, and readability principles.
2. Spec generator
Claude turns vague "I want a modern SaaS feel" into a concrete design.md with tokens, typography, and components. This is the primary workflow we'll cover in the next lessons.
3. Design encoder
Given a design.md or Figma file, Claude writes CSS/Tailwind/React components that strictly follow the spec. This is the most reliable use case — the result is verifiable, there's no room for "interpretation."
What to ask to get good design
The most common mistake: requests that are too open-ended:
- ❌ "Make a beautiful interface for my app"
- ✅ "Create a design.md for a B2B SaaS platform in the style of Linear: dark and light theme, Inter as the typeface, accent blue #3B82F6, 8px base unit"
The more specific your context (industry, references, constraints, tech stack), the more accurate the result.
Take any site or app you use regularly. Take a screenshot or describe it in text. Ask Claude to: (1) describe its design system (colors, fonts, spacing), (2) find 3 UX problems, (3) suggest concrete fixes. Compare with what you thought yourself.
Copy and adapt to your context. Text in angle brackets should be replaced.
I want to analyze an interface. Interface: <paste screenshot or describe the page in text> Context: <product type, target audience> Analyze using these criteria: 1. Visual hierarchy — what draws attention first, second, third 2. Color system — how many colors, any contradictions, sufficient contrast (WCAG AA) 3. Typography — fonts, sizes, readability 4. Spacing and alignment — is there a consistent spacing system 5. 3 concrete changes with justification No generalizations — only specific observations and actionable suggestions.
- Asking for "make it beautiful" without context — Claude produces something generic and bland.
- Expecting Claude to remember your previous design — every session starts fresh, you need to pass design.md.
- Accepting the first output without iteration — design with Claude works as a dialogue, not a single command.
- Reference by name: "in the style of Linear", "like Vercel Dashboard", "similar to Stripe" — Claude has good knowledge of well-known design languages.
- Ask it to explain its reasoning: "Why did you choose that color?" — you understand the logic and can push back.
- Upload competitor screenshots: "Compare my interface with this one" — Claude will find specific differences.
Starting a new project, reviewing an existing interface, generating a design system from scratch.
Final pixel-perfect polish — that requires Figma and a human designer.