Part of the Claude Code workflow series. See the install primer, the post-install workflow, the Codex vs Claude Code comparison, and the GPT-5.5 vs Opus 4.7 short-term read. This one covers the companion product Anthropic Labs shipped on April 17 2026 for the design side of the same workflow.
Anthropic Labs shipped Claude Design on April 17 2026. It is not a chat feature and not a Claude Code plug-in. It is a separate surface that sits alongside the CLI. You ask for a prototype, a deck, or a one-pager in natural language, Claude builds a first draft, you iterate on it with comments and sliders, and when the design is finished Claude packages it into a handoff bundle that Claude Code consumes for implementation. It runs on Claude Opus 4.7, which Anthropic describes as their strongest vision model. Research preview, Pro and above only.
That is the short version. The longer version is about which workflows it actually clears, where it still breaks, and the one feature that separates it from "Figma with an AI plugin."
What it does without the marketing
Three things matter.
The first is design and prototype creation from a prompt. You describe what you need, Claude drafts it, and you refine through inline comments, direct edits, and custom sliders for things like whitespace, contrast, or headline size. The loop is conversational and preserves what you already like instead of regenerating from scratch at every turn.
The second is a design system extracted from your codebase. During onboarding, Claude reads your code and any design files, then builds a token set: colors, typography, spacing, component library. After that, every new design uses those tokens automatically. This is the feature that separates it from generic "make me a UI" tools, because the output is grounded in your real visual language rather than a stock Tailwind look.
The third is multi-format in and multi-format out. You can feed it text, images, Word, PowerPoint, Excel, URLs, or elements captured directly off a live website. On the way out, Claude will emit a share URL, a PDF, a PPTX, standalone HTML, or a push to Canva. For engineering handoff, the output is a bundle structured for Claude Code.
Collaboration sits closer to Figma than to claude.ai. A design can be private, shared read-only to an org, or shared with edit access so colleagues can open the canvas and chat with Claude together as a group. Version history and comments behave the way a designer expects.
Three use cases that hold up
Anthropic names designers, product managers, and founders. Having spent a few hours inside the preview, those three framings each map to a meaningfully different workflow.
For designers, the most immediate win is turning a static mockup into a clickable prototype without opening a code editor. Drop the mockup in, describe the click-through behavior, ship a shareable link for user testing. The refinement loop feels closer to directing a junior designer than to driving a code tool.
For product managers, the sketch-to-handoff path is the win. You rough out a flow in plain English plus a couple of reference images, Claude drafts screens and states, you iterate with the designer in the same canvas, then push a handoff bundle to Claude Code. An end-to-end cycle that used to span a sprint now fits inside a day for small scope.
For founders and solo operators, decks and one-pagers are the hit. A rough outline plus the company brand voice go in, an on-brand PPTX or HTML deck comes out. The codebase-derived design system is what makes this useful versus a generic AI slide tool, because the output actually looks like it came from your company rather than a stock template.
None of these are autonomous. The iteration loop is the point. The human stays in the conversation and the output improves because both sides are adjusting at each turn.
The feature that makes it different from Figma with an AI plugin
Every tool in this space is converging on "describe your UI, get an AI draft." What makes Claude Design distinct is the design-system-from-codebase step.
A Figma AI plugin produces a beautiful but generic result, and you spend the next hour retokenizing colors, swapping fonts, and matching component spacing to your existing library. Claude Design reverses the order. Tokenization happens first, once, from your real code, and every generated design afterward lands inside that token space automatically. Less beautiful-and-wrong, more on-brand on the first try.
It is also the part most likely to break, because the extraction is only as good as the signal in your codebase. Five competing color systems from five rebrands will produce a muddy derived system. Clean Tailwind with a consistent config produces surprisingly accurate tokens. A cleanup pass beforehand pays off.
Where it still breaks
Four places worth knowing.
Research preview means the API surface is not final. Workflows built on top of it may need to shift when it goes generally available.
Opus 4.7 tier means the bill is not small. Each refinement turn costs more than an equivalent text-only Claude Code call. Heavy iteration moves the monthly number noticeably compared to a Claude Code plus Figma AI plugin stack.
The handoff to Claude Code is one-directional. Code generated from a design bundle does not sync back into the canvas. If the developer edits the implementation, the next design iteration does not see the change. This is the same limitation every design-to-code tool has and it is still unsolved.
No Figma import at launch. You can point Claude at a codebase or upload documents, but opening a Figma file directly is not a supported input yet. If your team's source of truth lives in Figma, expect to export before you upload for the early preview.
How it fits with Claude Code
The handoff is the point. You draft a feature in Claude Design, review and polish with your team, hit the handoff button, and a bundle lands in a Claude Code session with specs, component references, the token set, and sample states.
From the CLI side, the result reads like a well-written task prompt, except the spec came from a real shared design artifact instead of being typed into the terminal. For teams already running Claude Code with a CLAUDE.md memory, this cuts the "translate the Figma into words Claude can act on" step, which is where most spec drift happens.
If you work solo and do not need the collaboration layer, Claude Code alone with an image paste is still the fastest path for small one-person work. The handoff bundle starts paying back the moment a second person is involved in the review.
When to adopt
Three conditions I would want before making it a workflow anchor.
You need an existing codebase Claude can read cleanly. Tailwind plus a component library makes the tokenization sharp. Years of accreted CSS makes it muddy.
You need at least one collaborator. The comment and slider loop is built for two or more people. Solo, Claude Code plus image paste is a simpler equivalent.
You need to be comfortable paying for the Opus 4.7 tier. Research preview is included in Pro and above, but generation cost makes high-iteration workflows noticeably pricier than a pure Claude Code flow.
If all three are true, Claude Design replaces sixty to seventy percent of the Figma-to-dev-handoff path for feature-sized work. If any are false, stay on the two-CLI workflow a little longer and re-evaluate when the tool hits general availability and pricing lands.
The adjacent-product signal
Claude Design launching as its own surface, rather than an Artifact upgrade inside claude.ai, is the same move OpenAI made when they separated Codex CLI from ChatGPT. Product work has different latency, persistence, and collaboration needs than a chat tab. Splitting it into a focused app lets the UX match the real workflow instead of living inside a strapped-on panel.
That pattern is worth tracking if you build on top of these platforms. Expect more separate surfaces, each tuned to a distinct workflow, and expect the connective tissue between them to carry more of the value than any single tool on its own. The multi-model routing post is where this story starts. Claude Design is the designer-visible half of it.
A quick first-week playbook
Sign up on Pro or higher and opt into the research preview. Point Claude at your codebase during onboarding and review the extracted design system carefully, because it becomes the foundation for everything after. Start with a small scope, something like a single feature flow or a pitch-deck cover, and run one handoff-to-Claude-Code cycle end to end. Measure the time saved against your current Figma-to-dev path. Under thirty percent, wait for general availability. Over fifty percent, the workflow is probably permanent. Last step, add the design system export to your CLAUDE.md so pure-CLI Claude Code sessions pick up the same tokens. That is where most of the compounding sits.
If this sounds like infrastructure that shifts how a small shop operates, the same thinking about where to spend your effort applies to the whole digital-product stack. That is the frame I walk through in The $97 Launch on Kindle at $9.99. Same playbook, different stack: find the tools that compress the longest step in your workflow and keep the savings.
Related reading
- AI Terminal Kickstart — install both CLIs on a fresh machine.
- CLI installed — now what? — the Claude Code workflow Claude Design hands off to.
- GPT-5.5 vs Claude Opus 4.7 CLI comparison — the same model shift on the terminal side.
- Codex vs Claude Code — task-level comparison — the deeper CLI-vs-CLI read.
- Prompt style — GPT vs Claude — the stylistic differences that shape how each tool reads your intent.
- Multi-model routing — the framing for why Anthropic keeps splitting surfaces.
- Two-CLI workflow — the split-screen pattern Claude Design slots next to.
Fact-check notes and sources
- Anthropic: Introducing Claude Design by Anthropic Labs. The April 17 2026 announcement, source for the research-preview status, Opus 4.7 framing, import and export format list, design-system-from-codebase workflow, and the three-persona use-case framing.
- Anthropic: Claude product page. Subscription tiers (Pro, Max, Team, Enterprise) and access details.
- Anthropic: Introducing Claude Opus 4.5. Historical context for the Opus release cadence that led into 4.7.
Informational, not consulting or investment advice. Claude Design is a research-preview product. Feature surface, pricing, and tier mapping are likely to evolve before general availability. Verify current availability against anthropic.com/claude before building a team workflow on top of it. Mentions of Anthropic, Claude, Claude Code, Claude Design, Opus 4.7, Figma, Canva, and OpenAI are nominative fair use. No affiliation is implied.
