How to Hand Off a Claude Design Project to Claude Code (2026)

How to hand off a Claude Design project to Claude Code (the short answer)

To get Claude Code to build your Claude Design project faithfully, set things up before you hand off, not after:

1. Sync your real design system first. Run /design-sync in Claude Code so Claude Design builds with your actual React components instead of inventing look-alikes.
2. Link your repo and use the built-in handoff, not screenshots or a downloaded zip. Claude Code then continues from your existing work.
3. Build one section at a time and check each one against a short list of the details that matter: tab style, spacing, type sizes, mobile layout.
4. Make code the source of truth once the site is built. Claude Design doesn't update itself when your code changes.
5. Do later visual edits on the running app, and hand Claude Code the exact change.

Steps 1–3 fix "it looks generic and the tabs turned into pills". Steps 4–5 fix "how do I keep editing without making things harder". Subframe helps with the second half: its built-in browser lets you edit your running app visually and send the exact change to Claude Code (desktop app, macOS and Windows).

Why the build looks generic after the handoff

You approved a design with underlined tabs and tight spacing. Claude Code shipped pills and roomy cards. Nothing went wrong with the model; it filled every gap in the handoff with its defaults.

There are usually three gaps. The design used components that don't exist in your codebase, so Claude Code rebuilt them its own way. The handoff was a picture or a bundle of HTML rather than your components and tokens, so details had to be re-guessed. And the whole page was built in one pass, so nobody compared the result against the design until the differences had piled up.

Close those three gaps and most of the "generic" goes away.

How to hand off from Claude Design to Claude Code, step by step

Step 1: Sync your real design system before you design

If you have a React component library, run /design-sync in Claude Code before you design anything. According to Anthropic's command reference, it converts your repo's React design system and uploads it to Claude Design, so the designs it produces use your real components. The first sync checks every component and can take a few hours on a large repo, so start it early.

No design system yet? Ask Claude Design to write down the rules it used (colors, type scale, spacing, component styles) in a markdown file you keep in the repo. It's not as good as real components, but it gives Claude Code something firmer than a screenshot.

Step 2: Link your repo and use the built-in handoff

Link your code repository to the project so Claude understands your components and styles. When the design is ready, use Claude Design's handoff to Claude Code. The handoff bundle carries the design files, the conversation that produced them and a README telling the model how to read them, so Claude Code continues from your existing work instead of starting over from a screenshot.

Avoid screenshots as the spec, and treat a downloaded HTML export as a reference, not the thing to build from. Both make Claude Code re-derive structure that the bundle already carries.

Step 3: Build one section at a time and check each one

Don't ask for the whole page in one prompt. Ask for the header, compare it with the design, fix it, then move on. Give Claude Code a short checklist of the details you care about:

• Components: "Tabs are underlined, not pills. Buttons use our Button component."
• Spacing and size: "Card padding matches the design; the hero heading is the largest text on the page."
• Behavior: "On mobile, the nav collapses into a menu; nothing scrolls sideways."

Then ask for differences only: "Compare this section with the design and list what doesn't match." Never "make it look better", which invites new guesses.

Step 4: Make code the source of truth

Once the page is built, decide where changes happen. For almost everyone that should be the code, because the code is what ships. If you keep making changes in Claude Design and re-handing them off, every round is another chance for drift, and changes made in code won't flow back on their own.

Step 5: Keep editing the live site on the running app

Most later changes are small and visual: this spacing, that button, the mobile layout. Describing them to Claude Code in paragraphs or screenshots is slow and imprecise. Make the change where you can see it instead:

• Claude Code's own tools: run the app and point Claude Code at the element you mean.
• Subframe's built-in browser: open your running app in Subframe's desktop app (macOS and Windows), Inspect the element and change its props, styles, classes or content directly on the live page. Then send the change to Subframe's agent, which edits the files in your connected folder, or copy a prompt for Claude Code. Claude Code gets the exact change, not a description of it.

If you want to explore a bigger redesign of a page that's already live, Subframe can capture the page from your running app as an editable design, so you redesign from the real thing rather than from an old Claude Design copy.

Can Claude Design stay in sync with your codebase?

Partly. Anthropic's tools move work in both directions on demand: /design-sync uploads your React design system to Claude Design, and from Claude Code, /design can import a design into your codebase or turn your code into a live prototype. What you don't get is a live link. When you change the code in Claude Code, your existing Claude Design project doesn't update by itself. Some articles describe /design-sync as two-way; Anthropic's own command reference describes it as converting and uploading your design system.

So pick one place to make changes. If it's the code, re-run /design-sync when your components change, and use a tool that edits the running app for visual fixes.

Handing off a Claude Design prototype to developers

If developers will build it, give them the handoff, not the zip: link the repo, sync the design system and pass the bundle so their Claude Code session starts from the design files, the conversation and the README. Add your section checklist from step 3. If they need to see responsive behavior, show them in the live prototype and write the breakpoints down; don't expect a static export to carry them.

What changes on December 14

The standalone Claude Design site at claude.ai/design closes on December 14, 2026. Claude Design keeps working inside Claude as an artifact template, in any chat, in Claude Code and from the Artifacts tab. Move your design systems over before the standalone site closes. Anthropic's command reference notes that /design-sync uploads to the standalone site, so check the migration guide before relying on it after that date.

Other ways to do it

• Deploy the design directly. Vercel publishes a guide to deploying a Claude Design project. Fast for a landing page, but you still need a plan for editing it later.
• Screenshot-and-diff loops. Some developers have Claude Code render each section and compare it against the design with a browser automation tool. It works, but it's slow and catches less than a checklist plus your own eyes.
• Design in a tool that starts from your code. If you're redesigning an app that already exists, starting from the real app avoids the copy problem entirely. That's the approach Subframe takes: it imports your theme, components and icons from your codebase (rebuilding them as Subframe components), and generated code is deterministic React and Tailwind your engineers can use.

What most guides on the Claude Design handoff miss

The guides that rank for this explain the handoff bundle and stop when Claude Code finishes the first build. The real problems start there: details get reinterpreted unless you check section by section, and the design and code drift apart the moment the code changes. A handoff that lasts treats the first build as the beginning, keeps one source of truth, and makes later visual edits where the code actually runs.

FAQ

How do I get Claude Code to implement a Claude Design design exactly?

Sync your React design system with /design-sync first, link your repo, use the built-in handoff instead of screenshots, and build one section at a time with a checklist of the details that matter. Ask Claude Code to list differences against the design rather than to improve it.

Why does Claude Code turn my tabs into pills?

Because the component in the design doesn't exist in your codebase, or the handoff didn't say how it should look, so Claude Code used its default. Syncing your real components and naming the detail in your checklist fixes it.

Can Claude Design stay in sync with my codebase?

Not automatically. /design-sync uploads your design system and /design can move a design into code or code into a live prototype, but your Claude Design project doesn't update when you change code in Claude Code.

What's the cleanest way to turn a Claude Design site into a live site I can keep editing?

Hand it off to Claude Code with your repo linked, make the code the source of truth, and do later visual edits on the running app, for example with Subframe's built-in browser, which hands Claude Code the exact change.

Is standalone Claude Design shutting down?

The standalone site at claude.ai/design closes on December 14, 2026. Claude Design continues inside Claude as an artifact template.

Keep editing your app after the handoff

Download Subframe's desktop app for macOS or Windows, open your running app in the built-in browser, and make your next visual change directly on the page. Claude Code gets the exact edit.