Claude Design Adds Two-Way Sync With Claude Code via /design-sync

Anthropic has connected its two design-and-build tools. As of June 17, 2026, Claude Design and Claude Code sync in both directions through a new /design-sync command, so a design on the canvas and its implementation in code can stay aligned instead of drifting apart after handoff. The update also rebuilds design-system imports and adds genuine on-canvas editing. Here is what shipped, how the two-way workflow actually runs, and where it sits next to the familiar Figma-to-code pipeline.

What Claude Design is, and what just changed

Claude Design is an Anthropic Labs product for visual work — designs, prototypes, slides, and one-pagers generated in conversation with Claude. It first launched on April 17, 2026, powered by Claude Opus 4.7, and even at launch it could package a finished screen into a handoff bundle that Claude Code would implement in one instruction. That was a one-way street: design flowed to code, and any later code change left the design behind.

The June 17 update closes that loop. According to coverage from VentureBeat and The New Stack, the release adds three things: two-way synchronization with Claude Code, rebuilt design-system imports (from GitHub repositories, design files, or raw uploads), and direct WYSIWYG editing on the canvas with drag-and-drop element manipulation rather than chat-only iteration. The headline feature is the sync.

How the two-way /design-sync workflow runs

The mechanism is a single command, /design-sync, run from the Claude Code terminal, with two directions:

• Design and components into code. The design system and the screens Claude Design generated are brought into the working codebase so Claude Code builds against your project's real components — actual colors, typography, spacing, and component vocabulary — instead of inferring markup from a picture.
• Code back onto the canvas. After a design is implemented (or edited) in code, /design-sync pushes the current state back into Claude Design, so the canvas reflects what was actually built and a designer can keep refining it visually.

The underlying bet, as Anthropic frames it, is that when the same AI system sits on both sides of the workflow and both modes draw on the same component library, there is nothing to "interpret" at the boundary — the handoff stops being a translation step. That is the problem the feature targets: the loss of information between a mockup and the shipped product.

The design-system import, rebuilt

The sync only works because Claude Design now ingests a real design system. You can bring in one or more systems from Git repositories (component libraries, tokens), design files, or raw uploads. Claude then builds with those approved components, checks its output against the system, and auto-corrects before showing a result — so generated screens inherit your house style automatically rather than approximating it.

For larger organizations there is governance: a new admin role can approve a single standard design system and lock down edits, which matters when you do not want every team improvising its own buttons. On Enterprise, Claude Design is off by default and an admin must enable it.

The token fix that made this practical

A practical-but-important part of the release addresses Claude Design's earlier reputation for burning through usage. Per VentureBeat's reporting, Claude Design now shares its usage limits with chat, Claude Cowork, and Claude Code instead of drawing from a separate, smaller pool; Anthropic also says the average turn uses fewer tokens and that error rates have dropped sharply. Exact figures were not published, so treat the magnitude as directional — but a round-tripping workflow that re-syncs frequently is only viable if each turn is cheaper, so the two changes are linked.

How it compares to Figma-to-code

Figma-to-code is the incumbent pattern: design in Figma, then export to code through Dev Mode, MCP connectors, or third-party plugins. It is mature, deeply collaborative, and tool-agnostic — but the export is still a translation across two separate systems, and once developers change the code, the Figma file no longer matches. Claude Design's pitch is to remove that seam by keeping one component source on both sides.

The comparison is not a clean win. The New Stack tested the overhaul and reported that a designer and an engineer disagreed on whether it actually solved the handoff — useful signal that "one system on both sides" is a promising architecture, not a settled outcome. Figma's strength remains real-time multi-stakeholder collaboration and a vast ecosystem that a months-old Labs product has not matched.

If you already live in Figma, this guide on the surrounding pipeline is worth reading alongside the news:

Read: From Figma to React — the best design-to-code workflow

Who benefits

• Developers who want to implement a UI against their own components and not hand-translate a static mockup — and who would rather drive the whole thing from the Claude Code terminal.
• Designers who want changes made in code to come back to a canvas they can keep editing, including non-engineers using the new drag-and-drop WYSIWYG mode.
• Design-to-code teams at scale where the manual mockup-to-production translation is a recurring tax, and where an admin-locked standard system keeps output consistent.

It matters less for solo builders with no formal design system, and for teams whose collaboration is centered on a mature Figma setup they are not ready to leave.

FAQ

What is the /design-sync command?

A Claude Code command that synchronizes a project with Claude Design in both directions — bringing the design system and screens into the codebase, and pushing implemented or edited code back onto the Claude Design canvas.

Which plans include it?

Anthropic is shipping the update in beta at claude.ai/design and in the Claude desktop sidebar, included on Pro, Max, Team, and Enterprise at no extra cost. On Enterprise it is off until an admin enables it.

Does it replace Figma?

No. It targets the handoff seam between design and code with a single shared component source. Figma remains a more mature, collaboration-heavy ecosystem; the two are not feature-equivalent today.

Where do design systems come from?

From GitHub repositories, design files, or raw uploads. Claude builds with the imported components, checks output against the system, and auto-corrects.

Bottom line

Claude Design's June 17 update turns a one-way handoff into a loop: /design-sync keeps a design and its code aligned in both directions, on top of a real, imported design system and a fix for the tool's token appetite. The strategic idea — one AI, one component library, both sides of the workflow — is the clearest answer yet to the design-handoff problem, even if early testers disagree on how completely it lands. The bigger tell will be whether round-tripping survives contact with large, messy production codebases over the coming months.

Sources and further reading