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.

Update (August 20, 2026): re-checked against Anthropic's help center today. Four things on this page have moved, and one of them was a working instruction that no longer works.

Everything else on this page still matches the help article. The self-check loop, the import sources, the plan availability, and the shared-usage-limits change are unchanged.

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. You run it from Claude Code, not from the design canvas.
• 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: to work from Claude Code, add the Claude Design MCP server and run /design-login -- then import a design into a codebase, export code as a live prototype, or have Claude build start to finish. The /design command this piece described in June is no longer in Anthropic's help article as of August 20, 2026.
• Import sources: /design-sync can bring in one or several design systems 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, under Organization settings > Capabilities in the Anthropic Labs section), available on web and desktop only -- claude.ai/design or the Claude Desktop sidebar.
• Usage counts against shared limits: Anthropic's help article now states all Claude Design activity counts toward your plan's shared usage limits; it previously had its own weekly allowance.
• Handoff destinations: the export menu offers "Send to local coding agent" and "Send to Claude Code Web", alongside .zip, PDF, PPTX, standalone HTML, and a named list of third-party tools.
• Caveats: import quality depends on the source; simultaneous multi-person editing is still basic and may be unreliable; Anthropic documents six known limitations in total.

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.

Where you type it matters, and the help article is now explicit about it. /design-sync is a Claude Code command, not something you run on the Claude Design canvas. Anthropic's help article states it twice: design systems come in "using the /design-sync command in Claude Code", and under Known limitations, "To sync a design system, use /design-sync from Claude Code."

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. Anthropic's documented path here has changed since this piece was written. The help article no longer mentions a /design command; instead it says, "If you prefer to work from Claude Code, connect the Claude Design MCP server to create and edit designs without leaving your terminal." You add the server once:

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp

Then, in Anthropic's words, "Run /design-login to sign in." After that: "Once you're connected, you can import a design into your codebase, export your code as a live prototype, or let Claude build the whole thing from start to finish."

Two handoff destinations, not one. Going the other way, the Export menu's "Handoff to Claude Code" entry offers "Send to local coding agent" and "Send to Claude Code Web" as separate destinations, so a design can go to the CLI on your machine or to Claude Code on the web. The same menu covers .zip, PDF, PPTX, Canva, standalone HTML, and -- in Anthropic's list -- "Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel, and Wix, with more destinations coming soon."

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

Run from Claude Code, /design-sync brings in one or several design systems from any of these sources:

• 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.

Setting the system up in the first place is a separate, one-time job, and Anthropic has since published a dedicated guide for it: create or switch to your organization in Claude Design, upload codebases, prototypes, slide decks, or individual brand assets, review the generated palette, typography, components, and layout patterns, then switch the "Published" toggle on so the rest of the organization inherits it.

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; the help article states it is available on web and desktop only.

Anthropic's admin guide names where the Enterprise toggle lives: Organization settings > Capabilities, under Anthropic Labs. It also adds a control that did not exist when this piece was written. By default any member with Claude Design access can publish a design system, set the organization default, and delete design systems; on Enterprise, a Claude Design Admin permission delivered through custom roles reserves those three actions for named members. Anthropic's advice on sequencing is blunt: "Turning on Claude Design without a design system in place means your team will get functional but generic output."

Two usage notes Anthropic's help article has added since this piece was first published: all Claude Design activity now counts toward your plan's shared usage limits -- it previously had its own weekly allowance separate from other usage -- and for very large repositories, Anthropic suggests linking them from Claude Code to avoid lag or browser issues.

Caveats Anthropic Calls Out

Anthropic's help article lists six known limitations. All six, as documented on August 20, 2026:

• Import quality depends on the source. The fidelity of the synced design system is only as good as what you point /design-sync at -- "A messy codebase or an incomplete file will show up in the output."
• 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.
• Inline comments can go missing. They occasionally fail to appear on the page itself but remain visible in the comments view. Anthropic's workaround: paste the feedback directly into the chat.
• Chat upstream errors. "If you hit a 'chat upstream error,' try starting a new chat tab within the same project." This one is new since this piece was published.
• Web and desktop only. There is no mobile Claude Design surface.
• Large codebases. Anthropic suggests linking very large repositories from Claude Code rather than loading them into the browser, "to avoid lag or browser issues," and reminds you that syncing a design system means running /design-sync from Claude Code.

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.

Sources

• Anthropic Help Center, "Get started with Claude Design", checked 2026-08-20. Source for: what /design-sync does and that it runs in Claude Code; the Claude Design MCP server command and /design-login; the import sources and "one or several design systems"; plan availability and the web-and-desktop-only limit; Claude Design counting toward shared usage limits rather than a separate weekly allowance; the export formats and the "Send to local coding agent" / "Send to Claude Code Web" handoff destinations; all six known limitations.
• Anthropic Help Center, "Set up your design system in Claude Design", checked 2026-08-20. Source for: the one-time design-system setup flow, the asset types Claude extracts a system from, and the "Published" toggle that makes it the organization default.
• Anthropic Help Center, "Claude Design admin guide for Team and Enterprise plans", checked 2026-08-20. Source for: the Organization settings > Capabilities > Anthropic Labs toggle, the Claude Design Admin custom-role permission and the three actions it gates, and the design-system-before-rollout sequencing advice.
• Anthropic, "Introducing Claude Design by Anthropic Labs", checked 2026-08-20. Source for: the April 17, 2026 launch this piece builds on.