Design with Claude: from idea to design system · Lesson 1

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.

20 min read2 questions in quizReady prompt includedIn progress

Practical exercise

What to do after this lesson

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.

Task grader

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.

Your answer

Ready-to-use prompt

Template for this lesson

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.

Prompt sandbox

Prompt

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.

Report a bug