Claude Design + /design-sync: The Two-Way Bridge Between Design and Code

Every design-to-code workflow had the same broken step in the middle: a screenshot. The designer exported a frame, the developer described it to their AI coding agent, and the agent rebuilt it from scratch — guessing at spacing, missing tokens, approximating components that already existed in the codebase. The June 17 Claude Design update closes that gap for good. Design system imports, a WYSIWYG canvas with real drag controls, and a bidirectional /design-sync command that connects Claude Design and Claude Code now ship together in a single update — available on Pro, Max, Team, and Enterprise.

The result is the first time a major AI tool has closed the design-to-code loop from both ends simultaneously. A designer can start in Claude Design with real components. A developer can pull those components into Claude Code with one terminal command. Either one can push changes back. The screenshot is no longer part of the workflow.

What shipped on June 17

The June 17 release is three interlocking pieces that only make sense together. Design system imports let Claude Design start from your actual components rather than approximations. The WYSIWYG canvas gives real drag, resize, and alignment controls so edits don't require re-generating the whole page. And /design-sync is the command that connects them — run it from Claude Code to pull in your design system, or to push your built components back to the canvas for more visual editing.

Anthropic also shipped a fix for what the team calls the "token-burning problem": previous Claude Design sessions consumed dramatically more tokens per turn than expected when iterating on complex layouts. The June 17 update cuts token usage per turn with measurably fewer errors, which in practice means a design session that previously burned through half a Pro usage limit now uses a fraction of that.

Design system imports

The most consequential change in the June 17 update isn't the command — it's what feeds it. Claude Design can now import a design system from three sources: a GitHub repository, a design file upload, or a raw component dump. Once imported, Claude builds with those components, runs its output against the design system's token definitions, and auto-corrects before you see the result.

That auto-correction step is what separates this from every previous "import your tokens" feature. Earlier tools imported design tokens as CSS variables and then ignored them the moment the model started generating. Claude Design's imported system is treated as a hard constraint: if the generated layout uses a spacing value that isn't in the token set, Claude corrects it before rendering. Designers stop seeing outputs that "look close" but use wrong values.

Enterprise teams get an additional admin control: a designated admin can approve a standard design system and lock it for the organization. Individual team members can import personal systems, but the locked standard takes precedence for brand-sensitive outputs. This is the feature that makes Claude Design usable for design system governance at scale — not just personal productivity.

The /design-sync workflow

The /design-sync command lives in Claude Code and does two things depending on direction. Pull mode imports your design system into the current project so Claude Code builds against your real components. Push mode takes what you've built and sends it to Claude Design so you can continue editing it on the canvas. You can chain them: pull, build, push, iterate visually, pull again.

# Pull your design system into the current project
/design-sync pull

# Claude Code now builds with your real design tokens and components.
# Run your feature build as normal — Claude validates output against the system.
npx @skills-hub-ai/cli install design-sync   # optional: add the skill for structured phases

# Push your built components back to Claude Design for visual editing
/design-sync push

# In Claude Design, your built output appears on the canvas.
# Edit it visually (drag, resize, recolor), then pull again when ready.
/design-sync pull

The pull command writes a .claude/design-system/ directory to your project root. It contains the imported token set as a JSON file and a component manifest Claude Code reads before generating any UI code. The manifest maps component names to their source paths, so when Claude Code generates a <Button>, it imports from your actual component library rather than writing a new one.

The push command is the less obvious half of the command, and it's where the real productivity gain lives. Before push existed, the workflow was: build in Claude Code, take a screenshot, upload to Claude Design, explain what you want changed, regenerate. Push replaces all of that with one command. Claude Design receives the built output as structured component data — not a screenshot — so every element is individually editable on the canvas.

For teams using Claude Code's subagent pipelines, there's a natural extension: a design subagent that runs /design-sync pull at the start of any UI feature task and validates its output against the imported system before handing off to the implementer subagent. The design system becomes a constraint the agent enforces, not a document a human has to remember to check.

The token-burning fix

Claude Design shipped last year to significant enthusiasm and significant frustration. The enthusiasm was for what it could produce. The frustration was for how expensively it produced it: complex layout iterations consumed enormous token budgets per turn, and the error rate on multi-component pages made iteration painful.

The June 17 fix addresses both problems at the architecture level. Rather than regenerating the entire page representation on each edit, Claude Design now tracks a diff of what changed and only sends the modified components back through the model. For a page with 20 components where you adjusted spacing on one card, the model sees the card — not the whole page. The token reduction is substantial on complex layouts and roughly proportional to what you changed.

The error-rate improvement comes from the same source: smaller, more focused inputs produce more accurate outputs. When Claude sees the whole page on every edit, small spatial context errors compound. When it sees only the changed component in isolation, those errors vanish. Usage limits shared with chat, Claude Cowork, and Claude Code remain unchanged — you just get more design work out of the same budget.

Connectors and export

The June 17 update ships nine new connectors, expanding Claude Design's export surface from a mostly standalone tool into something that fits cleanly into existing team workflows. The full list now includes Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel, and Wix, plus PDF and PowerPoint exports for stakeholder presentations.

The Vercel connector is the one most relevant to Claude Code users. A design produced in Claude Design can be exported directly to a Vercel project, where it becomes a deployable Next.js page. The export generates clean component code — not inline-styled divs — and respects the imported design system so the deployed output matches the canvas exactly. Combined with /design-sync, the path from design to deployed URL can now happen without leaving the Anthropic toolchain.

What this changes for your AI coding stack

The practical change for AI-first development teams is that UI work now has a clean entry point from the design side. Before June 17, the correct workflow was to build UI directly in Claude Code and accept that the output would be a reasonable approximation of whatever design existed. Now there's a structured path in both directions.

For teams already using Figma Dev Mode MCP to give Claude Code access to design context, the two approaches are complementary rather than competing. Figma Dev Mode gives Claude Code read access to the design file mid-build — precise measurements, component props, design tokens. Claude Design's /design-sync handles the earlier phase: creating and iterating on the design before it's locked in Figma. For teams without a Figma subscription or with less mature design systems, Claude Design now covers the whole range.

The team composition effect is the bigger story. Design and engineering have always passed artifacts across a gap — design hands off a file, engineering builds from it, the gap is where most of the interpretation happens. Claude Design's two-way sync makes that gap bidirectional: a designer can receive what engineering built, edit it on the canvas, and send it back. The artifact is no longer a one-directional handoff; it's a shared object both sides can write to.

For developers who haven't tried Claude Design before, June 17 is the right moment to start. The token-burning problem that made early sessions frustrating is fixed. The tool now has a design system import that makes its output match your codebase rather than invent new components. And the /design-sync command turns it from a standalone design tool into a first-class member of the Claude Code workflow. Start with a /design-sync pull on your next UI feature and see how much of the approximation disappears.

# Add the design-sync skill for structured phases + checklists
npx @skills-hub-ai/cli install design-sync

# Or just run /design-sync directly in Claude Code without the skill
/design-sync pull    # pull your design system
/design-sync push    # push built output back to canvas

Related reading: Figma Dev Mode MCP for the read-side design context story, Claude Code subagents for composing the design-sync step into a full feature pipeline, and the UX category on skills-hub.ai for the full list of design-to-code skills.