Claude Design v2 Guide

Jun 26, 2026

Claude Design hit a million users in its first week. The problem? Everyone was burning their limit in 15 minutes. They just fixed that, and shipped 5 features designers were actually waiting for.

This is your full guide: what changed, how to use each feature, and the workflow that ties it all together.

Before you start

Connect your design system first. The single biggest upgrade in v2 is that Claude can now build with your real components. Set this up before anything else (see feature #2) - it's what separates clean, on-brand output from generic AI slop.

Work one screen at a time. Don't prompt an entire app at once. Build one screen, refine it in the new editor, then expand. You'll get better results and waste fewer tokens.

1. A usage limit that actually lasts

The old limit ran out in about 15 minutes of real work. Now your usage is pooled with Claude Chat, Code, and Cowork, so it stretches across everything you do in a session instead of draining on design alone.

How to use it: You don't need to do anything to enable pooling - it's automatic. But to make it last even longer, lean on the new editor (#3) and tweaks panel for small changes instead of re-prompting. Every full regeneration costs tokens; a manual drag costs nothing.

2. Design system import

This is the feature that changes the quality of everything Claude builds. Run the design sync command and Claude pulls your real design system straight from a GitHub repo, a Figma file, or your codebase. From that point on, every screen it generates uses your actual colors, typography, and components.

How to set it up:

  1. Open the command bar and run design sync
  2. Pick your source - a GitHub repo, a Figma file URL, or a connected codebase
  3. Let Claude index your tokens and components (colors, type scale, spacing, named components)
  4. Prompt as normal - reference your components by name ("use my ProductCard") and Claude builds with the real thing instead of a generic placeholder

Why it matters: No more redesigning what Claude gives you to match your brand. The output is on-brand from the first generation. This is the difference between a toy and a tool.

3. A rebuilt editor (finally feels like Figma)

The editor was the weakest part of v1. It's now fully rebuilt. You get real drag, resize, and align controls, plus a full layer tree like Figma. You can tweak any design manually instead of burning tokens re-prompting for every small change.

How to use it:

  • Drag, resize, align - move and snap elements directly on the canvas
  • Layer tree - select, reorder, group, and rename layers from the side panel
  • Tweaks panel - adjust spacing, color, and layout with sliders, no regeneration needed
  • Inline comments - click an element and leave a note like "tighter padding" for a precise AI edit

Rule of thumb: if it's a small visual change, do it by hand. Save prompts for structural changes.

4. New export options

You're no longer locked inside Claude Design. You can now send any design out as a zip file, standalone HTML, or straight into other tools.

When to use each:

  • Zip - hand the full design + assets to a developer or archive a version
  • Standalone HTML - drop a working page onto a host or share a live preview instantly
  • Into other tools - move the design into your existing workflow without rebuilding it

5. Two-way Claude Code handoff

The big one. The Claude Code handoff now goes both ways. Push any design to Claude Code to actually ship it as real code - or pull an existing project back into the canvas to redesign it visually.

The full loop:

  1. Design → Code - happy with a screen? Push it to Claude Code and it ships the implementation with full design context, so the build matches what you drew
  2. Code → Design - pull a live project back into Claude Design, redesign it on the canvas, then push the changes back

This closes the gap between design and development. You stay in one continuous loop instead of handing off and hoping.

The workflow, end to end

Sync your design system with design sync so everything is on-brand from the start.

Prompt one screen at a time, referencing your real components by name.

Refine in the editor with drag, align, the layer tree, and the tweaks panel - not new prompts.

Push to Claude Code to ship it, or export as HTML/zip for handoff.

Pull projects back into the canvas anytime you need to redesign. One continuous loop.