Claude Design to Claude Code: The First Closed Loop in AI Design

The Claude Design to Claude Code handoff is the part that matters. Figma can make you a pixel-perfect mockup. v0 can spit out a React component. Lovable can auto-deploy a full app. None of them can do what Anthropic shipped today: a prototype in one tool that a coding agent in another tool reads natively and turns into production code without a translation step in between.

That is what Claude Design, launched today at claude.ai/design and in the Claude Mac app, is built for. Not another AI prototyping toy. A front end to the Claude Code pipeline. You describe the feature, Claude Design builds the prototype on a collaborative canvas, and a one-click Export sends the whole thing to Claude Code as a handoff bundle. Claude Code picks it up and writes the feature. Same conversation. Same model family. No JPEGs passed between rooms.

Most of the coverage today is framing this as a Figma competitor. That misses the real story. The handoff is the story.

What Claude Design Actually Is

Claude Design is a two-pane canvas. Chat on the left, rendered design on the right. Inputs include a text prompt, file uploads (DOCX, PPTX, XLSX, images), a linked codebase, and a web capture tool that pulls live elements straight from a target URL. Refinement happens three ways: chat instructions, inline comments on canvas elements, and direct edits to the rendered output.

It's powered by Claude Opus 4.7, Anthropic's newest flagship, which is why vision and layout reasoning hold up under detailed prompts. The 3x vision-resolution jump in 4.7 is what makes ingesting a Figma file or a hand-drawn wireframe actually reliable.

The feature that most tools can't match: during onboarding, Claude Design reads your codebase and your existing design files, then builds a design system from both. Brand colors, typography, spacing tokens, component patterns. That system is then applied automatically to every new project. You don't set it up. It reads it off your actual code. Multiple systems per workspace are supported.

Outputs are generous. Export to .zip, PDF, PPTX, Canva (via the formal partnership), standalone HTML, or an internal share URL with three access levels: view, comment, edit. And then there's the one export that actually changes the workflow: handoff to Claude Code.

Availability is the least interesting part. It's included in Pro, Max, Team, and Enterprise plans with no separate SKU. Enterprise admins have to enable it explicitly, since it ships off by default there.

The Handoff Walkthrough

Here's what the handoff actually does, because it's the part the launch coverage keeps glossing over.

Imagine you're redesigning the settings page of your SaaS. You open Claude Design and describe what you want. "Rebuild our settings page. Three tabs: Profile, Billing, Team. Move the notification toggles under a new Preferences tab. Use our existing design system."

Because the workspace is linked to your codebase, Claude Design already knows what your existing design system looks like. It knows you use Radix primitives, Tailwind, and a specific spacing scale. It renders the new layout on the canvas using those tokens. You refine through chat, inline comments, and direct edits until it matches what you want.

Then you hit Export and choose "Send to Claude Code" (or "Send to Claude Code Web," if you're not in a terminal). Claude Design packages the design into a handoff bundle. That bundle contains the component structure as a machine-readable spec, the design tokens actually used on the canvas, the layout hierarchy, and the referenced assets. Not a PNG. Not a Figma URL that requires a plugin. A spec file Claude Code can read directly.

Claude Code receives the bundle, loads it into context, and builds the feature. Because it's reading structured spec output from a model in the same family, it doesn't need to infer intent from pixels. It already has the component tree, the tokens, and the layout relationships. It writes the code against your actual component library and your actual patterns.

What makes this different from copying a Figma link into a prompt: Claude Design writes the handoff bundle specifically so Claude Code can consume it. The producer and the consumer are the same system. The format is not a standards-committee compromise like design tokens in JSON. It's whatever works best between two models from the same lab.

For anyone running the Code Kit agent teams pipeline, the bundle arrives as context for /team-plan. The plan file gets written against the spec, specialist agents get dispatched, and the feature ships. The design and the implementation are the same continuous flow.

Why This Is a Closed Loop

The phrase "closed loop" matters. Every other AI design tool is open-loop or half-loop.

Figma is open-loop by design. The designer hands off a file or a PNG, and the developer rebuilds the thing in code. Figma Dev Mode and plugins like Figma-to-Code help, but the fundamental loop stays open: the design representation and the production representation are different artifacts, maintained separately, drifting constantly.

v0 is half-loop. It generates React components. But those components live in v0's sandbox, not in your codebase. Pulling them into your actual project is a manual copy-and-adapt job. The design system it uses is v0's, not yours. If you want to iterate, you go back to v0 and start over.

Lovable closes the loop in a different way, by auto-deploying a full app you don't control. The design and code are linked, but they're linked inside Lovable's hosted environment. You don't own the substrate. You own the output of Lovable's opinion about what the substrate should be.

Claude Design plus Claude Code is the first loop where the design artifact and the code artifact are the same conversation in the same ecosystem. The bundle is not a lossy export. The codebase is not a sandbox. The next iteration starts with Claude Code's changes already reflected back into the design context, because the workspace shares both.

That's the loop. Prompt, design, handoff, code, feedback, prompt again.

The Cost Reality

Now the part the launch posts are burying. Claude Design is token-heavy.

The New Stack's hands-on review reports that a single working session (design system setup plus a news-site prototype plus tweaks plus an explainer video) burned more than 50% of their weekly Pro allotment. One session, half the week's tokens.

That matches what you'd expect from Opus 4.7 doing detailed visual generation with an updated tokenizer that produces 1.0 to 1.35x more tokens per input than 4.6. The vision resolution ceiling is 2,576 pixels on the long edge. Canvas rendering at that quality is expensive.

Who should actually care: if you're a Max subscriber or on a Team plan, you have the headroom. If you're on Pro and you're already stretching your weekly cap between Claude Code sessions, Claude Design will eat your week if you're not careful. Wireframe mode exists and is explicitly cheaper, which is the right mode for early iteration. Save the polished mockups for when the structure is settled.

Pay-as-you-go overflow kicks in once you hit the cap, so you're not bricked. But the unit economics shift meaningfully. Plan accordingly.

Who Should Use This

This is built for teams already running Claude Code. If you've got /team-plan and /build in your workflow, Claude Design slots in at the top of that pipeline as the design authoring step. The handoff is the feature. Take it away and you have a good but not unique AI design tool.

Designers who code are the second obvious fit. People who live in the overlap between Figma and VS Code, who end up rebuilding their own mockups in React anyway. The round-trip cost of that rebuild is exactly what Claude Design removes.

Founders without designers. Product managers prototyping on Friday afternoon. Solo builders who want a prototype they can iterate on with the same model that's going to write the feature. If you're new to the pipeline entirely, start with what Claude Code is and then come back. All of them benefit disproportionately from the closed loop, because they don't have a design-engineering handoff team to absorb the friction of an open-loop workflow.

Not for everyone. Designers who live deep in Figma's Auto Layout and component variant system will find the canvas less precise. Enterprises with locked design systems that must be maintained by a design ops team will struggle with a tool that builds systems from code. Agencies that bill clients for Figma files will not want to switch production formats. If your workflow depends on handing a Figma file to a client for approval, Claude Design is not the tool.

The honest framing: Claude Design is a bet that the next generation of product teams will own their design system in code, not in a dedicated design tool. If you already think that way, this is the first tool built for you.

What's Next

Anthropic is now shipping a product stack. Claude Code for engineering. Claude Cowork for async collaboration. Claude Design for visual work. The pattern is the same Microsoft played with Office three decades ago: adjacent tools, shared substrate, compounding value if you use more than one. The closed design-to-code loop is the first visible synergy. It won't be the last.

The research preview caveat applies. Inline comments occasionally vanish. Large monorepos lag when linked. The canvas is not Figma-precise. These are the things that get fixed between preview and general availability.

But the handoff is the feature, and the handoff works today. If you're already in the Claude Code loop, this is the missing step at the top of the funnel. If you're not, the Code Kit and the Complete Kit are built around this exact pipeline: /team-plan reads the handoff bundle, specialist agents build from it, quality-engineer validates against the spec. The design-to-production loop that Claude Design completes is the same loop our framework has been tuned for since v5.0.

Prompt, design, hand off, build. Same conversation.