The handoff problem, designer produces a mockup, engineer rebuilds it in code, fidelity drops somewhere, is well-known. Claude Design plus Claude Code is Anthropic's answer: the prototype you built in Claude Design becomes the starting point for real code.
Three handoff paths
- Handoff bundle
- In the standalone app, Share > Project HTML downloads a .zip with the generated HTML, CSS, and assets. Drop it into a Claude Code session with a prompt like 'Port this to our Next.js codebase using our existing component library'.
- Direct to Claude Code
- In the standalone app at claude.ai/design, open Share, then More formats and apps, and click Send next to Claude Code. The Hand off to Claude Code dialog has two tabs. Local agent: pick the files to build, add instructions if you like, click Copy prompt, and paste it into Claude Code on your computer; it pulls the project in through Claude Design's connection (run /design-login once if asked). Web session: starts the build in Claude Code on the web instead. The in-chat Export menu has no Claude Code send; use the next row there.
- Ask in the chat
- Type "Hand this design off to Claude Code so I can build it". Claude writes HANDOFF.md, a build spec covering design tokens, layout, components, states, responsive rules, edge cases, accessibility and a build order, plus Main.dc.html, a visual reference with the exact values. Click Download all, put both files in an empty project folder, open Claude Code there, and paste the prompt Claude gives you.
Inside a chat, open Share, then the Export tab: download HTML, PDF, or PNG, or choose More formats and apps to send the design to another tool. Each tool needs a one-time Connect: Canva, Gamma, Miro, Lovable, Replit, Vercel, v0, Base44, Wix, Netlify, HubSpot, HyperFrames by HeyGen, and two Adobe apps. The standalone app's Share menu adds Project HTML (.zip or standalone), PowerPoint with editable text and shapes (handy for the pitch-deck workflow in Lesson 11), PNG, video, and Google Slides among its destinations. Pick the format that matches where the work goes next.
For a quick file, each artboard on the canvas has its own download button (top right of the artboard). It offers PNG at 1x or 2x, a PDF, an HTML .zip with the page and its images, or every artboard as one PDF.
Before you hand off
Freeze the design
Make sure you're happy with the prototype. Changes during handoff are expensive.
Write a handoff prompt
A short spec for Claude Code: target framework (Next.js, Vue, etc.), existing component library to reuse, file structure conventions, what's in-scope vs. out-of-scope.
Review the first PR
Claude Code produces a first implementation. Review it the way you'd review any contractor's first PR, tight feedback, specific comments, no wholesale rewrites.
Where this shines
- Small internal tools, admin panels, dashboards, config UIs
- Landing pages, marketing sites, docs homepages
- Prototypes becoming the real thing, you built it for user testing, now ship it
- Component-level additions, one new screen for an existing product
Where to be careful
- Complex state management. Claude Code's first pass may be naive
- Accessibility, always verify keyboard nav, screen-reader labels, and color contrast
- Performance, bundle sizes, image optimization, and runtime performance need a human pass
- Security, any auth or payment flows generated by AI need a security review
If you're serious about the Claude Design → Claude Code workflow, pair this with our Claude Code Course for Designers, it covers the code side of the handoff in depth.
- Get started with Claude Design· Claude Help Center
- Set up your design system in Claude Design· Claude Help Center
- Claude Design admin guide (Team and Enterprise)· Claude Help Center
- Introducing Claude Design· Anthropic
- Claude Design just dropped — how it completes the Designer's AI Stack· nervegna (Substack)
Designer's take on where Claude Design fits alongside Figma, Claude Code, and the existing stack.
- Claude Design Came for the First Three Rounds. Not the Designers.· Medium
Craft-perspective reaction piece on what Claude Design does and does not replace.
- Claude Design Complete Guide: Figma to Frontend· Medium (Design Bootcamp)
End-to-end workflow walkthrough with a task-manager app example.
You completed the Claude Design Guide
- Learned the four-part prompt framework
- Mastered iteration via chat, inline comments, and Tweaks
- Set up and published a design system for your org
- Shipped prototypes, decks, and handed off to code
You're ready to ship real design work with Claude Design.