Claude Design โ Claude Code Handoff
On April 17, 2026, Anthropic Labs released Claude Design โ a tool that creates designs, prototypes, and presentations through conversation.
Claude Design itself is a separate product from Claude Code, but its Export menu includes a "Handoff to Claude Code" option. That means you can pass a design straight into a Claude Code session and implement it in code.
This is the path most likely to interest non-developer builders, designers, and solo founders. This chapter covers the Claude Design integration workflow from a Claude Code user's perspective.
What Claude Design Isโ
| Item | Detail |
|---|---|
| Launch | 2026-04-17, Anthropic Labs |
| Model | Claude Opus 4.7 vision |
| Entry URL | claude.ai/design |
| Interface | Chat (left) + canvas (right) |
| Main outputs | Designs, prototypes, presentations, microsites, landing pages |
| Stage | Research Preview |
From text prompts alone, it generates UI mockups, interactive prototypes, pitch decks, and one-pagers. It applies brand guidelines automatically and reads your codebase to extract a design system.
Why This Matters to Claude Code Readersโ
Because the Export menu has "Handoff to Claude Code."
The full set of Export options:
- Save as folder (save the design assets as a folder structure)
- Export as PDF
- Export as PPTX
- Send to Canva
- Export as standalone HTML
- Share a URL within your organization (with view/edit permission levels)
- Handoff to Claude Code (local agent or Claude Code Web)
It packages the design into a bundle and delivers it to a Claude Code session. The bundle carries the design intent as context, so Claude Code doesn't have to reinterpret everything from scratch.
In other words, the two-stage pairing "design in Claude Design, implement in Claude Code" is officially supported.
When to Use Itโ
- When an idea comes to you visually first: when writing a text spec is hard, express it as a design first and hand it off
- When a non-developer builds a prototype and leaves the implementation to Claude Code
- When a solo builder runs planning, design, and implementation of a landing page, dashboard, or pitch deck as one flow
- On teams where designer-to-developer handoff is costly: intermediate specs, Figma links, and Zeplin cleanup are replaced by a single bundle
Access Conditionsโ
| Plan | Default | How to enable |
|---|---|---|
| Pro | On | Use as-is |
| Max | On | Use as-is |
| Team | On | Use as-is |
| Enterprise | Off (default) | Enable under Organization settings โ Capabilities โ Anthropic Labs |
Pricing: it is included in your main Claude subscription (Pro/Max/Team/Enterprise) and is used within your subscription limits. When you hit your limit, you can extend with extra usage. For the exact usage and pricing policy, check the official support docs (search "Claude Design subscription usage and pricing" on support.claude.com).
Enterprise plans are off by default. An admin has to turn on the Claude Design toggle under Anthropic Labs in Organization settings before users can access it. Department-level access can also be granted via RBAC.
The Handoff Workflow in 3 Stepsโ
Step 1. Create a design in Claude Designโ
Go to claude.ai/design and create a project.
Upload context (the more you provide, the higher the output quality):
- Screenshots, existing design files, web flows (including web capture)
- A codebase link/upload (Claude reads your React components and styles)
- Brand documents (DOCX, PPTX, XLSX, PDF)
- Logos, color palettes, typography specs
Structure an effective prompt:
- Goal: what you're making
- Layout: how it's arranged
- Content: what information it displays
- Audience: who it's for
Official example prompts:
Create a dashboard showing monthly revenue with filters
for region and product line.
Design a mobile app onboarding flow with 4 screens.
Build a landing page for our new API product with a hero section,
code examples, and pricing.
How to iterate:
| Method | When to use it |
|---|---|
| Chat | Broad, structural changes |
| Inline comments | Click a specific part of the canvas and make a targeted edit |
| Direct text editing | Fixing copy |
| Custom adjustments | Fine-tuning spacing, color, and layout |
Step 2. Create the handoff bundleโ
Once the design is ready, select Handoff to Claude Code from the Export menu at the top.
Options:
- Local Claude Code agent โ sent to a terminal session
- Claude Code Web โ sent to a session at claude.ai/code
Delivering to a local session makes file-system control easier, but if you don't have an environment set up, Web can get you started faster (you can always pull it to local with --teleport).
Step 3. Implement in Claude Codeโ
The bundle is included in the Claude Code session's context. From there, it's your usual Claude Code workflow:
- Plan: Claude Code parses the bundle contents โ planning which components, pages, and routing to build
- Do: write the actual code (matching the project's language and framework)
- Verify: confirm it matches the design intent via build, tests, and preview
Just apply the Task-Do-Verify loop as-is.
When revisions come up after implementation, it's cleaner to go back to Claude Design, fix the design, and hand it off again. If you only fix the code in Claude Code, it drifts out of sync with the design file.
Automatic Design System Extractionโ
One of Claude Design's strengths is that it builds a design system automatically from existing assets.
The 4-step setup flowโ
- Select/create an organization โ pick an organization at the bottom left and go through onboarding
- Upload brand assets
- A codebase link (automatically reads React components and styles)
- Existing prototypes, screenshots, design files
- Brand documents (PPTX, PDF)
- Individual assets (logo, color, typography)
- Review the generated system โ Claude extracts the color palette, typography, components, and layout patterns
- Publish (Publish toggle) โ automatically applied to every project in the organization
After setup, new projects use the organization's design system by default.
How to edit itโ
Under Organization settings โ Open next to the design system โ select Remix to edit it through the chat interface.
Recommended Admin Rollout (Team/Enterprise)โ
The official docs' recommendation for a 4-phase gradual rollout:
| Phase | Audience | Purpose |
|---|---|---|
| Phase 1 | 2โ4 designers | Build and validate the design system |
| Phase 2 | The whole design team | Stress-test the system |
| Phase 3 | Product/UX teams | Integrated use |
| Phase 4 | The whole organization | Broad access |
Core principle: "The most important thing before rolling out Claude Design to your organization is to have experienced designers set up the design system first." The step of validating and refining the auto-extracted result is the success factor.
Limitations (as of April 2026)โ
- Web interface only (
claude.ai/design). No desktop app or CLI - No data residency support โ review before use if you have region-specific data storage requirements
- No audit log or usage tracking โ planned for later
- Third-party platform integrations require contacting sales
- Research preview stage โ features, pricing, and availability may change
Known bug workaroundsโ
| Symptom | Fix |
|---|---|
| Inline comments disappear | Paste the feedback directly into chat |
| Save error in Compact layout mode | Switch layout modes, then save |
| Browser lag when connecting a large repo | Upload only the subdirectories you need |
| "chat upstream error" | Open a new chat tab within the same project |
Recommended Patterns for Claude Code Readersโ
Pattern A โ Non-developer builder, end-to-endโ
1. Idea โ Claude Design (prompt)
2. Prototype โ iterate on the canvas
3. Handoff โ "Handoff to Claude Code" โ Web session
4. Implement โ Claude Code generates the code
5. Deploy โ Cloudflare Pages, Vercel, Netlify, etc.
6. When revisions โ edit the design in Claude Design โ hand off again
are needed
Pattern B โ A team's design-to-development pipelineโ
1. Design team โ high-quality design in Claude Design
2. Handoff bundle โ delivered to the dev team's repo
3. Developer โ open the bundle in a local Claude Code session
4. Review the โ auto-review with /ultrareview or /autofix-pr
implementation
5. PR & deploy โ your existing Git workflow
Pattern C โ Presentation & marketing assetsโ
1. Slides, landing pages, one-pagers โ Claude Design
2. Export as PPTX / PDF โ for immediate sharing
3. Export to Canva โ when further editing is needed
4. Handoff to Claude Code โ when you want to implement the web version in code
Related Docsโ
- Task-Do-Verify loop โ apply it during the implementation step after handoff
- Claude Code on the web guide โ default setup when receiving a handoff into a Web session
- Official Claude Design support docs โ search "Claude Design"
- Anthropic Labs announcement โ launch notice
The Claude Design โ Claude Code handoff is the first official path for closing the design-to-code gap. It's a structure where designers, PMs, and non-developer builders create prototypes without code, and leave the implementation to Claude Code.
Because it's in the research preview stage, changes may be frequent, but the direction is clear โ a flow that unifies design and code into a single conversation.