Claude Design to Claude Code: A Handoff Workflow That Keeps Fidelity

What is the Claude Design to Claude Code workflow?

Claude Design is an Anthropic Labs product launched on 17 April 2026 for making prototypes, slides and one-pagers by talking to Claude. It launched on Claude Opus 4.7 as a research preview for Pro, Max, Team and Enterprise subscribers, with a handoff bundle you pass to Claude Code with a single instruction. A June 2026 update tightened the link: Anthropic says Claude Code now continues from your existing design work instead of starting over from a screenshot, and reports that over one million people used Claude Design in its first week. The workflow treats design and code as two phases with a clean contract between them.

• •Explore: generate several directions, then refine one with comments, direct edits and chat.
• •Contract: export the handoff bundle plus a paste-in prompt that points at it.
• •Implement: Claude Code builds the UI layer with your components and tokens, leaving business logic alone.
• •Verify: screenshot the build at fixed widths and compare it with the approved artboards before merging.

Where do you start: claude.ai/design, a chat, or /design in Claude Code?

Claude's help center lists several doors into the same canvas: claude.ai/design as a standalone experience with its own project storage, design requests inside ordinary Claude conversations, the Artifacts tab, and the /design command in Claude Code. Anthropic says Claude Design is in beta on paid plans, on by default for Pro, Max and Team and off on Enterprise until an admin enables it. For developers, /design is the interesting one. It arrived as a research preview in the Claude Code Week 34 digest (17 to 21 August 2026), bringing Claude Design's artboard workflow into the CLI and Claude Code Desktop: run it with a brief, Claude publishes a canvas of editable artboards, you pick one, tweak it, and tell Claude to implement it.

• •Use claude.ai/design when a designer or founder is driving and the work needs its own project, a linked codebase and team sharing.
• •Use /design when a developer is driving and the repo is already open, for example: /design three directions for the pricing page using our existing card and button components.
• •/design needs a claude.ai sign-in on the Anthropic API; the artifacts docs say API-key sessions cannot publish and list Claude Code v2.1.265 or later, so run claude --version first.
• •Artboards open in a desktop browser, edits save automatically, and each artboard exports as PNG or PDF, useful later as screenshot baselines.

Why should you set up the design system before exploring?

Most fidelity problems start before the first mockup. If Claude Design explores with generic components, every direction you like must later be translated into your real components, and that translation is where spacing, radii and colours drift. Anthropic's launch post says Claude can build a design system during onboarding by reading your codebase and design files. The June update lets you import one or several systems from a GitHub repo, design files or raw uploads, and Claude checks its output against them before you see it. From the code side, /design-sync in Claude Code pulls your design system into Claude Design. Juan Ruiz at wmedia.es found that it compiles a React component library (a package with a built dist folder, or a Storybook), so Vue, Angular and Svelte libraries do not get in today, and a first sync can take hours on a large repo. Nitay Neeman notes the mirror is a snapshot, not a live link, so rerun /design-sync when components change.

• •Linking a codebase: the Import button accepts a GitHub repo or local folder. Anthropic recommends linking only the components package on very large repos and leaving out .git and node_modules.
• •No React library? Write the tokens down (colours, type scale, spacing, radii, shadows) in one rules file generated from tailwind.config.js, and give it to both tools. Our post on design tokens and CLAUDE.md rules covers that file.

How do you iterate in Claude Design without drifting off-brand?

Claude's help center describes three ways to refine: chat for structural changes like rearranging a dashboard, inline comments on a clicked element for targeted feedback like larger button padding, and direct canvas edits to drag, resize and align. The launch post adds custom sliders that Claude builds for tuning values. For a good handoff, decide in chat and record why: Anthropic's tutorial notes that decisions made during iteration become implementation context, and component names used in the conversation carry through to the handoff. Ask for edge states before exporting, or the coding agent will invent them.

Claude Design vs Figma Make vs v0 vs Google Stitch for exploration

Plenty of teams explore in one canvas and implement with Claude Code anyway. The table lists only what each vendor documents as of 1 October 2026; it says nothing about output quality, which you should judge on your own brand. Our post on the best tools to improve Claude AI UI design covers more options.

How do you hand off from Claude Design to Claude Code step by step?

Anthropic's tutorial describes the mechanics: Export, then Hand off to Claude Code. The bundle holds the design files, the chat and a README telling the model how to interpret the designs, and you get a prompt with the bundle's URL to paste into Claude Code. The help center lists two targets, Send to local coding agent and Send to Claude Code Web. Our steps for a Next.js and Tailwind site:

What should you tell Claude Code when you paste the handoff?

The bundle says what the design looks like, not which parts of your app are load-bearing. Your brief decides whether you get a careful UI refresh or a rewrite that quietly breaks a form. This is close to the text we append:

• •Scope: implement the UI layer only. Do not change data fetching, Redux or RTK Query logic, form validation, analytics events or routes.
• •Reuse: use existing components in /components first; propose any new component before building it.
• •Tokens: map every colour, font, spacing value, radius and shadow to tailwind.config.js; never hardcode hex values when a token exists.
• •Responsive: build mobile first, match the artboards at 390px, 768px and 1440px, and ask where breakpoints are ambiguous.
• •Motion: use Framer Motion for implied animation and respect prefers-reduced-motion.
• •Done means: lint and build pass, with screenshots at all three widths.

How do you map design tokens to tailwind.config without breaking pages?

Token mapping either strengthens your design system or forks it. In Tailwind v3, the docs say values under theme.extend merge with the defaults and become new utilities, while keys placed directly under theme replace that option's defaults. So if Claude Code writes a colors object under theme instead of theme.extend, default colour classes used elsewhere on the site can stop existing. In Tailwind v4, theme variables are defined in CSS with the @theme directive and tell Tailwind which utilities to create. Either way, give the agent a rule and check the diff.

• •Ask Claude Code to diff the bundle's palette against your config and report matches, near-matches and new values before editing.
• •Snap near-matches to existing tokens; a hex two shades off your brand colour is usually the canvas approximating.
• •Add genuinely new tokens under theme.extend with semantic names like surface or ink-muted.
• •Ban arbitrary values such as text-[#3b2f7a] or mt-[37px]; they pass review and silently fork the system.

How do you verify fidelity with side-by-side screenshots?

Do not accept 'it matches the design' from the agent; check it. Compare screenshots of the running page with the exported artboards at the same widths. Claude Code's Chrome integration, which needs a direct Anthropic plan and the Claude in Chrome extension, lets it open your dev server, take screenshots and read console errors in the same session that wrote the code. To keep checking after launch, Playwright's toHaveScreenshot creates reference screenshots on the first run and compares against them afterwards. Our sibling post on the visual feedback loop with Playwright goes deeper.

Where does responsive drift creep in after a handoff?

A canvas usually shows a desktop artboard and maybe a phone; the coding agent invents everything in between, and that is where most post-handoff fixes land.

How does Tech Arion use this workflow?

We are a Hyderabad software and marketing studio, and many of our marketing pages now start as directions on a design canvas rather than a blank component file. The habits that matter are dull: design system first, the same scope-and-tokens brief on every handoff, side-by-side screenshots at three widths before merging, and a separate branch so existing behaviour is checked before release. If you want a site built this way, see our vibe coding service at techarion.com/services/vibe-coding or our landing page work at techarion.com/services/landing-pages. For why AI-built sites look alike in the first place, read our pillar post on why AI websites look the same.

Frequently asked questions

Short answers to common questions about moving from Claude Design to Claude Code.