Claude Design's `/design-sync` Makes Claude Design and Claude Code a Two-Way Workflow

Anthropic connected Claude Design and Claude Code into a two-way workflow with /design-sync, a command that pulls your design system into Claude Design so everything Claude builds starts from your real components -- and keeps the work synced as you move between the design surface and your codebase. The launch made Claude Design a place to produce visual work; /design-sync makes it less a separate canvas and more a continuous loop with the code.

This piece covers exactly what Anthropic documented: what /design-sync does, how the two surfaces stay synced, where you can import a design system from, who can use it, and the caveats Anthropic calls out.

Key Takeaways

• What /design-sync does: per Anthropic's help center, it pulls in your design system so everything Claude builds in Claude Design starts from your existing components.
• Self-checking output: Claude builds with real design system components, checks its output against the design system, and makes corrections before you see it.
• Two-way with Claude Code: you can move between Claude Design and Claude Code while keeping work synced; a ready design hands off to Claude Code, which continues from existing work rather than starting from a screenshot.
• Start from either side: begin in Claude Code with /design -- import a design into a codebase, export code as a live prototype, or have Claude build start to finish.
• Import sources: /design-sync can attach or import a design system from a GitHub repo, design files, raw uploads, or a local codebase.
• Availability: Claude Design beta is on Pro, Max, Team, and Enterprise (default off for Enterprise), available on the web at claude.ai/design or in the Claude Desktop sidebar.
• If the command is missing: run /update -- only new Claude Code sessions have the skill.
• Caveats: import quality depends on the source; simultaneous multi-person editing is still basic and may be unreliable.

What /design-sync Actually Does

Per Anthropic's Claude Design help article, /design-sync pulls in your design system so everything Claude builds in Claude Design starts from your existing components. Rather than generating UI from a blank slate and hoping it resembles your product, Claude builds with the real components, checks the output against the design system, and makes corrections before you ever see it.

That self-check loop is the meaningful part. The common failure mode of AI design output is the "almost right" mockup -- close to your brand but subtly off in spacing, color, or component choice. Validating against the actual design system before surfacing the result is how Anthropic frames closing that gap.

This builds directly on the brand-aware onboarding from the Claude Design launch, where Claude reads your codebase and design files to construct a design system. /design-sync is the explicit command that attaches or refreshes that system on demand.

How Claude Design and Claude Code Stay Synced

The headline shift is bidirectional. Anthropic says you can move between Claude Design and Claude Code while keeping your work synced, so the two surfaces are no longer a one-way export.

Design to code. When a design is ready to become software, you hand it off to Claude Code, which continues from the existing work rather than starting from a screenshot. That is the difference between "here is a picture, rebuild it" and "here is the actual design, keep going."

Code to design. You can also begin from Claude Code with /design. From there you can import a design into a codebase, export code as a live prototype, or have Claude build the whole thing start to finish.

The result is a loop: prototype in the design surface, hand to the codebase, pull updates back, without re-specifying the design each time you switch. It extends the orchestration direction Anthropic has been pushing across the rebuilt Claude Code desktop.

Where You Can Import a Design System From

/design-sync accepts several sources for attaching or importing a design system:

• A GitHub repo
• Design files
• Raw uploads
• A local codebase

Anthropic notes the obvious caveat: import quality depends on the source. A well-structured design system in a clean repo will sync more faithfully than scattered raw uploads.

Availability and Setup

Claude Design is in beta and available on Pro, Max, Team, and Enterprise plans. For Enterprise, it is off by default, consistent with how Anthropic gates research-stage features in managed environments -- an admin enables it.

You reach Claude Design on the web at claude.ai/design or from the Claude Desktop sidebar.

If /design or /design-sync does not appear in Claude Code, run /update. Anthropic notes that only new Claude Code sessions have the skill, so start a fresh session after updating.

Caveats Anthropic Calls Out

Two limitations are worth setting expectations around, both stated by Anthropic:

• Import quality depends on the source. The fidelity of the synced design system is only as good as what you point /design-sync at.
• Simultaneous multi-person editing is still basic and may be unreliable. If your team is planning to co-edit a design live, treat that as early-stage rather than production-ready.

Why This Matters

The Claude Design launch already packaged finished designs for a Claude Code handoff, but that was a one-direction bundle. /design-sync turns the relationship into a continuous, two-way workflow grounded in your real design system: Claude builds from your components, validates against them, and keeps work synced as you cross between the design surface and the codebase.

For teams that live in both worlds -- designers prototyping, engineers implementing -- the value is removing the translation tax at the boundary. Instead of exporting a screenshot and rebuilding it, the design and the code stay the same artifact, evolving in whichever surface you happen to be in.