Claude Design: what's actually inside Anthropic's new canvas
It doesn't paint pictures. It writes real code on a live canvas next to the chat — and that changes what you should ask it for.
01 — What shipped
What did Anthropic actually ship with Claude Design?
Claude Design launched from Anthropic Labs on April 17, 2026. The interface is two panes: chat on the left, a live canvas on the right. You describe what you want — a landing page, an app screen, a pitch deck, a one-pager — Claude builds it on the canvas, and you refine through voice, inline comments, or adjustment knobs for spacing, color and layout.
The detail that matters more than the interface: the canvas isn't a picture of a design. It's the design.
You describe a landing page, get an image of one, then hand it to a developer to rebuild in actual code.
You describe a landing page, get the HTML/React that renders it — the same file a developer would ship.
02 — Real code
Why does Claude Design output code instead of an image?
Claude Design generates real, functional code — HTML, React, SVG — not mockup images. That's the whole bet: a picture of a landing page is a dead end until someone rebuilds it; a working page is done.
What this means in practice: ask for the thing you'd actually ship, not a "concept" you'll redo later.
Build a one-page pricing section for [product]. Three tiers,
middle one marked "most popular." Use these exact colors:
[hex codes]. Font: [your heading font] for prices, [your body
font] for the fine print. Output should be a single HTML file
I can drop straight into my site — no placeholder Lorem Ipsum,
use my real copy: [paste it].Naming the output format up front — "a single HTML file," "a React component" — is what separates a canvas you can ship from one you have to translate first.
03 — The honest limit
Can Claude actually draw anything from scratch?
No — and it's worth saying plainly instead of letting you find out mid-project. Claude can't generate photos or illustrations from nothing. What it can do: analyze an image you upload, build SVG graphics through Artifacts, construct interactive visual components, and connect to external image generators through MCP integrations.
Ask yourself: does this need a PHOTO or ILLUSTRATION rendered
from nothing (a hero image, a custom icon set, a character)?
→ Claude Design isn't the tool. Generate it elsewhere
(an image model via MCP, or a dedicated generator), then
hand Claude the file to lay out.
Does this need STRUCTURE — layout, typography, a working
component, a chart from real data?
→ This is exactly what Claude Design is for.Knowing this before you brief saves the round trip of asking for a hero photograph and getting a polite explanation of why that's not what's happening.
04 — The refine loop
How do you actually edit the canvas once it's built?
Three ways in: voice ("make the middle column wider"), inline comments directly on the canvas element you're pointing at, or the spacing/color/layout knobs when you want a numeric nudge rather than a sentence.
This is the same twenty-minute habit the rest of this piece keeps circling back to: name your fonts and colors once, in the prompt, instead of eyeballing them into every brief from memory.
05 — Fable 5.1
What does Claude Fable 5.1 add to this?
Claude Fable 5 released June 9, 2026 as a Mythos-class model built for autonomous knowledge work and coding; Fable 5.1 followed in September 2026 (it's the model behind sessions like this one). Fable's contribution to Claude Design isn't a new button — it's better follow-through on multi-step briefs: a pricing section that references three earlier design decisions in the same canvas session, without you re-stating them.
The interface didn't get smarter. The model holding the conversation did — and that's the part that actually shows up in a six-round revision.— Anjela Petkova
Round 1: "Make the CTA button magenta, #DC308F."
Round 4 (after three unrelated edits): "Add a second CTA below
the pricing table, same style as the first."
If it reuses #DC308F without you repeating the hex — that's
the multi-step follow-through Fable 5.1 is actually for.06 — vs. the OpenAI route
How does this compare to ChatGPT Images 2.5 + GPT-6 Astra?
OpenAI is betting on a different split. ChatGPT Images 2.5 (Sept 8, 2026) handles the creative part — sharper detail, better reference-image handling, a Sketch feature that turns a drawing into an AI image. GPT-6 Astra, OpenAI's computer-use agent (shipped Sept 3–4, 2026), handles the operational part — moving that output through Canva, a browser, a print service, without you copying files by hand.
Images 2.5 makes the visual, Astra drags it through your other tools. Strong when the deliverable is a finished image or poster.
Claude Design skips the "pixels that need rebuilding" step entirely. Strong when the deliverable is something you're going to ship as a page or a component.
Neither replaces the other yet. If the end product is a photo, a poster, or a video frame, OpenAI's pipeline is closer to done. If the end product is a page, a deck, or a UI you're going to deploy, Claude Design skips a translation step OpenAI's route still needs.
07 — Start here
How do you get a result that looks like you, not a template?
Everything above — naming fonts, colors, output format, feeding it your own copy instead of letting it invent placeholder text — is the same twenty-minute habit, done once instead of re-explained in every brief.
☐ I named the output format (HTML file / React component / SVG)
☐ I pasted my real copy, not "add placeholder text here"
☐ I gave exact hex codes, not "use my brand colors"
☐ I named my actual fonts, not "something clean and modern"
Missing 2+? You'll get a competent generic canvas — fix these
first, then brief.Claude Design ships real code, not a picture of one — so brief it like you're handing work to a developer, not a mood board. The exact walkthrough for turning your fonts, colors and layout rules into a standing instruction Claude checks against every time is the twenty-minute setup in Teach Claude Your Style, free.
FAQ
When did Claude Design launch and what is it?
Anthropic Labs shipped Claude Design on April 17, 2026: a chat pane on the left, a live canvas on the right. You describe a landing page, app screen, deck or one-pager, and Claude builds it directly on the canvas, refined through voice, inline comments, or spacing/color/layout knobs.
Does Claude Design generate images or code?
Code — real, functional HTML, React or SVG, not a mockup image. That's the core difference from a design-mockup tool: the canvas output is the thing you'd ship, not a picture you still have to rebuild.
Can Claude Design create a custom photo or illustration?
No. Claude can't generate photos or illustrations from scratch. It can analyze images you upload, build SVG through Artifacts, and connect to external image generators via MCP — but a hero photograph or a character illustration needs a different tool feeding into the same canvas.
How is Claude Design different from ChatGPT Images 2.5 and GPT-6 Astra?
OpenAI splits the job into two tools: Images 2.5 generates the visual, GPT-6 Astra (a computer-use agent) moves it through Canva, a browser or a print service. Claude Design skips that hand-off by generating working code directly — closer to done if you're shipping a page or component, further if you need a finished photo or poster.
