How to use Claude Design

Anthropic's design tool: type a prompt, get a live interactive HTML page in the canvas. Made for people who do not write code.

You can describe what a site, deck, or prototype should look like, but you cannot draw it from scratch and you do not write code. Claude Design closes that gap: you talk in the left pane, a live canvas renders in the right pane, and you refine through chat, inline comments, or direct canvas edits. The output can become a PDF, PPTX, standalone HTML, connector handoff, or Claude Code build path depending on what you need next.

L1L2

Before you startYou'll want a working sense of [what a brief tells an AI about your visual direction](/lessons/portfolio-l1-01) before opening Claude Design; the tool runs on the same kind of language your brief already uses.

Steps

Open Claude Design and describe what you want

Go to claude.ai/design, or open it from the Claude Desktop sidebar when your app shows it. Claude Design is in beta for Pro, Max, Team, and Enterprise plans; Enterprise accounts usually need an admin to enable it first. You'll see a chat pane on the left and a canvas on the right. Type a real description: who the site is for, the feeling, two or three reference brands, the sections you want. The richer the first prompt, the closer the first render is to where you want to end up.

I'm a [YOUR_ROLE] building my portfolio. I want the feeling of [REFERENCE_1] and [REFERENCE_2], [FEELING_DESCRIPTION]. The home page needs a hero with my name and tagline, a work grid with [N] case studies, an about section, and a contact link. Use [COLOR_DIRECTION] and a typography pair that feels [TYPE_DIRECTION]. Build it as a single HTML page I can host on Vercel.

[YOUR_ROLE]Your role e.g. motion designer

[REFERENCE_1]Reference brand 1 e.g. Linear

[REFERENCE_2]Reference brand 2 e.g. Apple

[FEELING_DESCRIPTION]How it should feel (one sentence) e.g. dark, confident, cinematic

[N]Number of case studies e.g. 6

[COLOR_DIRECTION]Color direction e.g. near-black background with a single warm accent

[TYPE_DIRECTION]Typography direction e.g. editorial; serif headlines, clean sans body

Iterate with chat, comments, or direct canvas edits

The canvas is live. Use chat for broad changes like 'replace the case study cards with a horizontal scroll.' Use inline comments for one element. Use direct canvas controls for quick text, drag, resize, and align fixes. You are not editing source files by hand; you are choosing the steering move that fits the change.

Attach or import a design system if you have one

Claude Design can bring in one or several design systems from a GitHub repo, design files, raw uploads, or a local codebase through `/design-sync` in Claude Code. You can also provide screenshots, decks, docs, logos, color palettes, typography notes, or a DESIGN.md file. The cleaner the source material, the better the generated system and the less Claude has to invent.

Export, hand off, or send it to the right destination

When the canvas matches your intent, choose the destination by the final proof. Export PDF for review, PPTX for a deck, standalone HTML for a static file, Send to Canva or another connector when that tool owns final editing, or hand off to Claude Code when the design needs to become a working site. Inspect the result after it lands; the destination owns the final QA.

How do you know it worked?

You have a Claude Design project that uses your name, your work, and your visual direction
You can name the two or three reference brands that shaped the result
You can choose chat, inline comment, or direct canvas edit for one section change
You can choose the right destination: PDF, PPTX, HTML, connector, or Claude Code handoff

If something looks off

Using direct edits for the wrong job

Direct canvas edits are useful for text, drag, resize, and align fixes. They are not the right move for page structure, tone, or section order. Use chat for broad changes and comments for local element feedback.

Trusting stale usage numbers

Claude Design is in beta and Anthropic's current docs have changed how usage is described. Check your account page or current Help Center before a long work session. Plan your first prompt, then batch follow-up changes.

Assuming hosting and backend are included

Claude Design ships HTML. It does not host your site, it does not run a backend, it does not handle forms or sign-ups. Pair it with a static host (Vercel, Netlify, GitHub Pages) and a forms service (Formspree, Tally) when those matter.

Skipping the design system

Without source material or an imported design system, Claude has to infer your brand from the prompt. Give it code, design files, screenshots, decks, docs, logos, colors, type notes, or a DESIGN.md before the first serious build.