Claude Design Now Keeps Your Brand Consistent Across Sessions and Syncs Directly with Claude Code

Claude Design launched in April 2026 as a research preview and pulled in over a million users in its first week. The pitch was straightforward: describe what you want, and Claude builds you a working prototype. The problem, as many of those early users quickly found, was that Claude would cheerfully invent its own colour palette, fonts, and component styles every time you started a new project. The output looked fine in isolation. It just didn’t look like your product.

The June 17 update fixes that, and brings several other meaningful changes along with it. Claude Design is now in beta, available on Pro, Max, Team, and Enterprise plans.

Your Design System, Once, Everywhere

The headline change is design system persistence. You import your design system once, from a GitHub repo, a design file, or a direct upload, and Claude uses it as the foundation for every project in your account. Colours, typography, components, spacing tokens: all of it. Claude also checks its own output against your design system before you see the result, which is a small but important detail. It’s doing the QA pass, not leaving it to you.

For teams on Team or Enterprise plans, an admin can set a single approved design system for the whole organisation and lock it down. Everyone’s work stays on-brand without anyone having to remember to import anything.

If you’re on Enterprise, note that Claude Design is turned off by default. Your admin needs to enable it in organisation settings, and anything you create is shareable only within your organisation.

Direct Canvas Editing

The previous version of Claude Design was very much a conversation-first tool. You described what you wanted, Claude built it, you described changes, Claude rebuilt it. That works well up to a point, and then it gets frustrating when you need to nudge a single element two pixels to the left.

The new WYSIWYG canvas editor lets you drag, resize, and align elements directly. It’s a proper layout tool, not just a preview pane. Anthropic says this release includes hundreds of stability fixes aimed at production use, which is a candid acknowledgement that the April preview had some rough edges.

The Claude Code Connection

This is the part that will matter most to teams shipping real products.

Claude Code and Claude Design now sync in both directions using a /design-sync command. Pull your local codebase’s design system into Claude Design, and every screen Claude generates uses your actual components, not approximations. After you implement a design in code, push the current state back into Claude Design to keep the canvas in sync with what you’ve built.

You can also work entirely from the terminal. The /design command in Claude Code lets you create, edit, and sync design projects without switching context. Import a design into your codebase, turn code into a live prototype, or let Claude carry a project through from canvas to deployed component.

The handoff works like this in practice: when you use the handoff button in Claude Design, it opens a new Claude Code session with full component context, layout, and canvas annotations transferred across. If you want to continue in an existing session rather than starting a new one, use /design-sync to pull the current design state into your active session instead.

One thing worth building into your workflow: /design-sync captures a snapshot at the time you run it. Changes to your components or tokens after that point won’t appear until you sync again. Treat it the same way you’d treat regenerating types after a schema change.

To access these commands, run claude update to reach v2.1.181 or later.

What This Solves

The oldest friction point between design and engineering is information loss at the handoff. A designer exports screens, an engineer interprets them, details get lost, decisions get relitigated. The bidirectional sync doesn’t eliminate all of that, but it removes the step where someone pastes a screenshot into Claude Code and describes what they want rebuilt from memory.

For people who work alone, the benefit is simpler: you spend less time re-explaining your own product to a tool that should already know it.

For designers specifically, this creates room to explore. Prototyping a dozen directions has always been a time constraint problem. When Claude is doing the generation work and already knows your component library, running through multiple concepts in an afternoon becomes realistic.

Export and Integrations

Claude Design now exports reliably to PDF and PowerPoint, and connects to nine external tools: Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel, and Wix. More destinations are listed as coming soon.

Where to Find It

Claude Design has a new permanent home in the Claude desktop app sidebar, and is also available at claude.ai/design. Usage limits are now shared with chat, Claude Cowork, and Claude Code under a single subscription. Anthropic says the tool also uses fewer tokens per turn for equivalent output, with lower error rates compared to the April preview.

If you were waiting for Claude Design to feel like something you could actually build a workflow around rather than a demo you’d show someone once, the June update is a reasonable point to take another look.