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

As of September 2026, /design-sync is a command you run in Claude Code. It converts your repo's design system and uploads it to Claude Design, so every design Claude produces starts from your real components. The companion command /design works in the other direction: from Claude Code it creates, edits, and syncs designs. Both need a claude.ai account, so neither works on Amazon Bedrock, Google Cloud, or Microsoft Foundry.

Anthropic rewrote its three Claude Design help articles between September 16 and 18, 2026, when Claude Design moved into regular Claude conversations and the Artifacts tab, updated them on September 23, and updated them again on October 8, 2026, when it added Free plans and set a closing date for the standalone app. This page follows the October 8 versions, the Artifacts admin guide, the new migration article, and the Claude Code command reference, all read on October 9, 2026.

Key Takeaways

• /design-sync runs in Claude Code, not on the design canvas. The Claude Code command reference says it will "Convert your repo's React design system and upload it to Claude Design, so designs it produces use your real components."
• A first sync can be slow. The same reference says "A first-time sync verifies every component and can take a few hours on a large repo."
• /design-login authorizes it. The command reference describes /design-login as "Authorize design-system access for /design-sync with your claude.ai account".
• /design is the Claude Code entry point. Anthropic's help center says to "use /design to create, edit, and sync designs, on desktop or in the terminal". As of October 2, 2026, the command reference says it requires Claude Code v2.1.265 or later, a session where artifacts are available, and an account where the Design template is available.
• The MCP server instruction is gone. The August 2026 help article told Claude Code users to connect a Claude Design MCP server. The September 2026 article does not mention it.
• Self-checking output: Claude "builds with your real design system components, checks its own output against your design system, and makes corrections before you see them."
• Handoff destinations: the Export menu's "Handoff to Claude Code" entry offers "Send to local coding agent" and "Send to Claude Code Web".
• Availability: as of October 8, 2026, Free, Pro, Max, Team, and Enterprise, on by default; on Enterprise it turns on by default on October 15, 2026, and owners can turn it on before then in Organization settings > Artifacts. The standalone app at claude.ai/design closes on December 14, 2026.
• Usage: Claude Design draws from the same usage pool as the rest of Claude, Claude Code included.

Which Command Does What

Source for all three rows: the Claude Code commands reference, checked October 2, 2026. Our Claude Code artifacts coverage has more on /design.

What /design-sync Actually Does

Anthropic's Claude Design help article puts it in one sentence: "Use /design-sync to pull in your design system, so everything you build in Claude Design starts from your existing components."

The second half of the feature is a check on the output. In the same article: "Claude builds with your real design system components, checks its own output against your design system, and makes corrections before you see them." AI design output often lands close to a brand but wrong in spacing, color, or component choice. Checking the result against the actual design system before showing it is how Anthropic addresses that.

The help article says where the command runs in two places. 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."

The Claude Code command reference adds three details the help article leaves out. You can name the system with a hint (/design-sync Acme DS). A first-time sync "verifies every component and can take a few hours on a large repo." And the command "needs claude.ai", so it is unavailable when Claude Code runs through Amazon Bedrock, Google Cloud's Agent Platform, Microsoft Foundry, Claude Platform on AWS, or a Claude apps gateway.

How Claude Design and Claude Code Stay Synced

Anthropic's help article says: "You can move between working in Claude Design and Claude Code while keeping your work synced."

Design to code. "When a design is ready to become software, you can hand it off to Claude Code, which continues from your existing work instead of starting over from a screenshot." In the Export menu, "Handoff to Claude Code" has two destinations: "Send to local coding agent" and "Send to Claude Code Web".

Code to design. As of September 2026 the documented path is the /design command: "From Claude Code, use /design to import a design into your codebase, export your code as a live prototype, or let Claude build the whole thing from start to finish."

This part of Anthropic's documentation has changed twice. In June 2026 the help article described /design. By August 20, 2026 it had dropped /design and told Claude Code users to add a Claude Design MCP server and sign in with /design-login. The version updated on September 18, 2026 describes /design again and does not mention an MCP server. If you added that server in August, the current help article gives no instruction for it; /design and /design-sync are the documented commands.

The same Export menu also offers .zip, PDF, PPTX, Google Slides, standalone HTML, and a list of third-party tools: "Adobe Experience Manager, Adobe for Creativity, Adobe Journey Optimizer, Base44, Canva, Gamma, HubSpot, Hyperframes, Lovable, Miro, Netlify, Replit, v0, Vercel, and Wix".

Where You Can Import a Design System From

The help article lists four sources, and says you can bring in "one or several design systems":

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

Anthropic's two documents describe the command's scope differently. The help article lists all four sources under /design-sync. The Claude Code command reference describes the command only as converting "your repo's React design system". Anthropic's design system setup guide sits between them: "If your design system already exists as React components, run /design-sync in Claude Code. It reads your tokens and components directly, and works best for product design systems in code." For a brand system made of fonts, colors, and guidelines, the same guide says to ask Claude in a conversation to build the design system from connected apps, uploaded files, Figma files, decks, logos, and fonts.

Import quality depends on the source. The help article's wording: "A messy codebase or an incomplete file will show up in the output."

If you set up a design system in the standalone app at claude.ai/design, it does not move on its own. The setup guide says design systems are managed in Settings > Design systems, and that you bring an existing one over by opening the Design tab at the bottom of the sidebar and clicking "Migrate team design systems" in the banner. Each migrated system shows a banner with a "Let Claude clean it up" button, because, in Anthropic's words, "Migrated design systems may need some cleanup".

Availability and Setup

As of October 8, 2026, per the help article:

The standalone experience at claude.ai/design is closing. As of October 8, 2026, Anthropic's Artifacts admin guide says: "Standalone Claude Design at claude.ai/design closes on December 14, 2026. Until then, it has its own setting in Organization settings > Claude Design, separate from the Design template." A new help article, Migrate from standalone Claude Design to Claude, says existing projects stay at claude.ai/design until it closes and that design systems should be migrated before then: "One migration brings over every design system in your organization, including other people's, so it only needs to be started once." Before October 8 the help articles said the standalone app kept working with its own separate setting, and gave no end date.

You can now reach Claude Design from five places: any Claude conversation, the Artifacts tab, Claude Code, the Claude app for iOS and Android, and claude.ai/design. Mobile is still limited. As of October 8, 2026, the help article says you can ask for a design, view it full screen in the Artifacts tab, and edit a design, but "To change sharing settings, use Claude on web or desktop." Before October 8 it said canvas editing also needed web or desktop.

Two Enterprise controls are documented, and since September 23, 2026 their details live in Anthropic's Artifacts admin guide rather than the Claude Design admin guide. Custom roles turn a feature on for specific groups instead of the whole organization; the capabilities that cover Claude Design are Design (it grants "Starting artifacts from the Design template"), Design systems ("Creating and editing design systems"), and Claude Design [standalone] ("Access to standalone Claude Design at claude.ai/design"). The Claude Design Admin permission reserves three actions for specific users: publishing a design system, setting the organization default, and deleting a design system. As of October 8, 2026, the guide says that permission "applies only to the standalone Claude Design app." In Artifacts, any user with access to design systems can create one, share it with specific people, and delete their own, and "Only an Owner or Primary Owner can share a design system with everyone in your organization, set the organization default, or delete a design system that’s shared with everyone." The Claude Design admin guide still advises on sequencing: "Turning on Claude Design without a design system in place means your team gets functional but generic output."

On usage, the help article says: "Design activity draws from the same pool as the rest of your work with Claude, including Claude Code, so there's no separate Claude Design allowance to track." Claude Design previously had its own weekly allowance. If you reach your limit, Claude Design is unavailable until it resets, unless you have enabled usage credits.

Caveats Anthropic Calls Out

The help article lists nine known limitations as of October 8, 2026:

• Design system import. "Design system import is only as good as its source."
• Multi-person editing. "Two or more people editing a design project at the same time is still basic and may not work reliably."
• Comment persistence. Inline comments occasionally do not appear on the page but remain visible in the comments view. The article's note on inline comments gives the workaround: "paste the feedback directly into the chat instead."
• Chat errors. For a "chat upstream error", Anthropic says to "try starting a new chat tab within the same project."
• Mobile. Sharing settings only: "It's not possible to change sharing settings on the Claude app for iOS and Android, so you'll need to use Claude on web or desktop for this."
• Large codebases. "Consider linking very large repositories from Claude Code to avoid lag or browser issues."
• Version history. "Claude Design doesn't have version history yet." This item is new since August 2026.
• Deleting from the list of layers. "In the properties panel's list of layers, Delete, Backspace, and cut act on what's selected on the canvas, not the row you moved to. Press Return on the row first." New since October 8, 2026.
• Adding to a design with a keyboard. "Placing a new text layer, artboard, shape, or note on the canvas needs a mouse or trackpad. Ask Claude to add it." New since October 8, 2026.

Why This Matters

The Claude Design launch packaged finished designs for a one-way handoff to Claude Code. With /design-sync and /design, the design system moves from the repo into Claude Design, and designs move back into the codebase, without rebuilding from a screenshot at either step.

For a team, the practical order is: get the design system into Claude Design first (with /design-sync if it lives in React components), confirm the plan setting is on, then use /design and the Export menu to move individual designs. Anthropic's admin guide says a rollout without a design system produces generic output.

Corrections and Updates

• October 9, 2026: this page said Claude Design was in beta on Pro, Max, Team, and Enterprise plans, not on Free, off by default on Enterprise until an owner turned it on, that the standalone app at claude.ai/design kept working with its own setting, and that editing on mobile needed web or desktop. Anthropic's help articles, updated October 8, 2026, say Claude Design is available on Free, Pro, Max, Team, and Enterprise plans and is on by default; on Enterprise it turns on by default on October 15, 2026; the standalone app closes on December 14, 2026; and the mobile app can edit a design, with sharing settings still on web or desktop. (Get started with Claude Design, Migrate from standalone Claude Design to Claude)
• October 8, 2026: this page said that without the Claude Design Admin permission, any user with access to design systems could publish one, set the organization default, and delete design systems. Anthropic's Artifacts admin guide, updated October 8, 2026, limits that permission to the standalone Claude Design app; in Artifacts, only an Owner or Primary Owner can share a design system with everyone, set the organization default, or delete one shared with everyone. (Artifacts admin guide)

Sources

• Anthropic Help Center, "Get started with Claude Design", last updated by Anthropic 2026-10-08, checked 2026-10-09. Source for: what /design-sync does and that it runs in Claude Code; the /design sentence; the five places Claude Design is available; the import sources; plan availability and defaults; the shared usage pool; the export formats and handoff destinations; all nine known limitations.
• Claude Code docs, commands reference, checked 2026-10-02. Source for: the /design-sync, /design-login, and /design descriptions, the first-sync duration, the version and template requirements, and the platforms where the commands are unavailable.
• Claude Code docs, artifacts, checked 2026-10-02. Source for: /design drafting a canvas published as an artifact, the desktop-browser editing and PNG or PDF export, and the Pro and Max plan sentence in the availability table.
• Anthropic Help Center, "Set up your design system in Claude Design", last updated by Anthropic 2026-10-08, checked 2026-10-09. Source for: when to use /design-sync versus a conversation, Settings > Design systems, and the design system migration steps and cleanup banner.
• Anthropic Help Center, "Claude Design admin guide for Team and Enterprise plans", last updated by Anthropic 2026-10-08, checked 2026-10-09. Source for: the standalone Claude Design toggle under Organization settings > Claude Design, and the sequencing advice. Its 2026-09-16 version, read through the Internet Archive capture of 2026-09-20, placed the toggle under Organization settings > Capabilities.
• Anthropic Help Center, "Artifacts admin guide for Team and Enterprise plans", last updated by Anthropic 2026-10-08, checked 2026-10-09. Source for: the standalone app's December 14, 2026 closing date and its separate setting, the custom-role capabilities that cover Claude Design, the Claude Design Admin permission and the three actions it gates, and the default when nobody holds it.
• Anthropic Help Center, "Migrate from standalone Claude Design to Claude", last updated by Anthropic 2026-10-08, checked 2026-10-09. Source for: the closing date of the standalone app, what happens to existing projects, and the one-time migration of design systems.
• Internet Archive captures of earlier versions, the record for what the articles said before: "Get started with Claude Design" on 2026-08-22 (Anthropic's last update 2026-08-06; the MCP server instruction), the same article on 2026-09-20 (last update 2026-09-18; /design back, no MCP server), and the admin guide on 2026-09-20 (last update 2026-09-16; the standalone toggle under Organization settings > Capabilities).
• Anthropic, "Introducing Claude Design by Anthropic Labs". Source for: the April 17, 2026 launch this piece builds on.