Design, Code, or Chat? Now there are three.
Claude Design is Anthropic Labs' visual work surface: a chat panel where you direct the work and a live canvas where it appears. It is not a chat feature with a preview pane — the output is real, runnable HTML, CSS and JavaScript. This guide covers how to direct it, where it strains, and which of the three surfaces the thing in front of you actually belongs on.
Getting a good first version is the easy part.
Claude Design will hand you something credible in one prompt. That is not where the work is, and it is not where people come unstuck. The difficulty sits either side of the canvas: writing a brief that gives the design something to be right about, and choosing an exit that does not quietly discard half of what you made.
This guide is organised around those two seams — the brief and the export — because that is where the afternoons actually go.
Conversation, inline comments pinned to an element, direct text edits on the canvas, and adjustment sliders Claude generates for the properties in play. Each has a job. Re-prompting from scratch when a comment would do is the commonest wasted move.
Chapter 03 · DirectingClaude Code handoff, standalone HTML, an internal URL or folder, Canva, PPTX, PDF. They are not interchangeable, and what each one costs you is decided by choices you make on the canvas — before you know you are making them.
Chapter 06 · The handoffOnly the Claude Code handoff speaks the canvas's native language. It carries component structure, the design tokens actually in play, layout hierarchy and assets — so intent survives the jump instead of being reverse-engineered from a picture.
The strategically interesting part of the productEight chapters, in playing order.
Read straight through, or jump to the one you need. Each chapter stands on its own and ends where the next picks up.
The canvas
What Claude Design actually is, who Anthropic built it for, and why the output being real code changes what you can do with it.
Read → 02The workflow
Six moves, in order — from the ten minutes of design-system onboarding that pays back on every project to the exit you should have picked first.
Read → 03Directing
The first prompt is a brief, not a specification. Three worked examples, and what each of the four refinement channels is actually for.
Read → 04The work
Six patterns from the field, from designer-side exploration to the marketing draft that arrives already on brand.
Read → 05Design, Code or Chat
All three can hand you an HTML page. What separates them is not the output — it is what you can do to it next.
Read → 06The handoff
What is inside the bundle Claude Code receives, and the export seam where most disappointment actually happens.
Read → 07Failure modes
Eight ways this goes wrong, each with its fix — including the one that only shows up after you export.
Read → 08Reference
A three-question surface picker, a copy-ready brief, the session checklist, and the sources everything here is verified against.
Read →