Claude Design

Claude Design — UI generation with prompt + design-system + Claude Code handoff

Overview

Claude Design (claude.ai/design, Anthropic Labs, launched 2026-04-17, powered by Opus 4.8) is a chat-driven visual canvas. You describe what you want in plain English; Claude generates a working design on the right pane; you iterate via chat or by clicking individual elements to leave inline comments. A major 2026-06-17 overhaul repositioned it from a flashy demo into a design-system compliance layer with a bidirectional Claude Code round-trip + a fix for its token-burning problem. The standout features for engineering teams:

1. Org-wide design system (import from GitHub repo / local codebase / design files / raw uploads) — bring one or several design systems in ONCE; Claude builds with your real components, checks its output against the system, and auto-corrects before you see it. A new admin role can approve ONE standard system + lock edits (enterprise brand control).
2. Bidirectional Claude Code round-trip (the 2026-06-17 headline) — from a Claude Code terminal: /design-sync imports your local codebase's design system INTO Claude Design (so prototypes start from real components, not approximations); /design creates/edits/syncs design projects without leaving the terminal. When a design is ready it hands off to Claude Code, which picks up exactly where you left off — no screenshot, no rebuild. (This Claude Code environment exposes a DesignSync tool for this.)
3. Multi-output export + connectors — standalone HTML, PDF, PPTX, .zip, org-scoped share link (view/comment/edit), or push to a connected app: Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel, Wix (more added over time).

Available on Pro / Max / Team / Enterprise. NOT on Free. Usage now shares your subscription pool with chat / Cowork / Code (see Pricing). Still beta — treat as exploratory tooling, not a system of record (no audit logs yet).

When to use

• Generate a prototype / wireframe / high-fidelity mock from a verbal spec before you commit any engineering
• Build a pitch deck, investor slides, or sales one-pager that needs to look on-brand
• Produce dashboard/landing mockups using your real component library — then hand off to Claude Code with full context
• Explore 3-5 visual directions in parallel for a design crit without burning eng time
• Generate marketing assets (emails, banners, social posts) that match brand

When NOT to use

• Cloning a specific reference UI screenshot/URL → use aura-screenshot-clone skill (aura.build Pro is the project's asset source-of-truth)
• Translating an existing Figma file into code → use figma:figma-implement-design
• Mass image picking for hero/landing imagery → use web-aura-asset-images then web-unsplash-asset-images
• Production component edits in <web-app>/ → just edit React directly; Claude Design is for the design phase, not codebase surgery
• Anything that needs an audit trail (compliance, legal review, regulated industry) — research preview has no audit logs yet
• Free-plan users — feature isn't available

Quick start (fresh session, 5 minutes)

1. Navigate to https://claude.ai/design (drive it programmatically via use-claude-in-chrome — needs the operator's Claude login; navigate → prompt in the chat pane → file_upload reference screenshots → take_screenshot each state. chrome-devtools-mcp can't be used here — it has no logged-in session.)
2. Connect our real design system FIRST (the load-bearing step). Two paths: (a) /design-sync from a Claude Code session — pushes a linked GitHub repo / design files / the local <web-app>/ codebase into Claude Design so generation starts from our real components + tokens.css tokens (shipped 2026-06-17; the cleanest path for us); or (b) lower-left org name → "Set up design system" → upload the codebase (React component library = highest fidelity), slide decks, brand PDFs → toggle Published ON. Skip if already connected.
3. From the homepage, pick a project type:
   • Prototype → New prototype / Wireframe / High fidelity
   • Slide deck
   • From template
   • Other
4. Describe what you want. Attach screenshots, images, codebases, existing design files, or website captures as context.
5. Iterate:
   • Chat (broad changes): "Make the color scheme darker and more minimal", "Move the metrics row above the chart"
   • Inline comment (targeted): click an element on the canvas → "Make this button padding larger", "Change this to a dropdown instead of radio buttons"
6. Export (upper-right Export button) when ready: Handoff to Claude Code (local or web — the direct-to-repo path, preferred for us), Send to Vercel (then pull with mcp__plugin_vercel_vercel__import-claude-design-from-url), .zip / PDF / PPTX / Canva / standalone HTML, or a share URL. No native Figma export — see the Figma-bridge row in design-to-code-pipeline.

Design system setup — the load-bearing step

Skip this and Claude Design produces generic-looking output that doesn't match your brand. Doing it once unlocks every future project.

Steps (verbatim from the docs):

1. Click your organization name in the lower-left corner.
2. Select or create an organization → complete the onboarding flow.
3. Upload brand materials. Per docs: "If your design system lives in code (for example, a React component library)" you can upload the codebase directly.
4. Claude extracts and organizes color palettes, typography specs, UI components, and layout patterns. Validate with sample test prompts.
5. Toggle Published ON. After publishing, every project created from the homepage while in your organization uses your design system.
6. To update later: Organization Settings → click Open next to your design system → click Remix → edit via chat.

Scope is organization-wide — auto-applies for all team members on Team/Enterprise plans.

Export and handoff matrix

Figma: no native export. Confirmed 2026-07-02 (Anthropic docs + 3 sources) — Claude Design cannot export to Figma directly. To get a design INTO Figma: export standalone HTML → html.to.design (Chrome-extension "Copy to Clipboard" → paste into Figma with Ctrl/Cmd+V, OR the html.to.design Figma-plugin drop-zone), or the Anima Figma design-agent. For OUR repo you usually don't need Figma at all — Handoff to Claude Code is the direct path; reach for Figma only when a human designer must edit layers.

Pricing & usage

• Usage SHARES your subscription pool with chat, Claude Cowork, and Claude Code (2026-06-17 change — a heavy design session eats the SAME limits as a coding session; budget accordingly). The older "separate weekly allowance" framing is superseded; check the Help Center for current shared-limit details.
• Buy more usage (enable extra usage) if you blow through the shared cap.
• Enterprise usage-based: one-time ~20-prompt credit per Claude Design user, expires July 17.
• No exact "per-prompt" cost is published — Anthropic tunes the meter during research preview.
• No audit logs, no usage tracking yet — Labs release.

Common mistakes

Decision matrix vs other UI tools in this stack

What to verify after handing off to Claude Code

The handoff seeds the next session with design context, but Claude Code still needs to:

1. Map design components → your real component library imports (not the extracted clones)
2. Run npm run check-types + project lint before claiming the implementation matches
3. Verify in the browser at 375 / 1024 / 1440 viewports — frontend-audit skill or claude-in-chrome MCP
4. Pin a regression test if the design encodes a non-obvious invariant

Recommended path + the 2026 competitor landscape (verified via Exa 2026-06-28)

For this repo: run /design-sync from a Claude Code session at repo root to publish <web-app>'s React component library + tokens.css tokens as our Claude Design org design system. Then every mockup comes back on-brand (real components), and you hand back to Claude Code for the build. Visuals round-trip; state logic NEVER leaves the React code — all these tools round-trip markup / design-tokens / Figma layers, never hooks/state. (Not yet run as of 2026-06-28 — fire it when we next pick up UI work; it consumes the shared subscription pool, so don't run it speculatively.)

Verified design→code tool landscape (all confirmed via Exa 2026-06-28 — corrects the earlier "Aura→Figma is unverifiable" doubt; it's real):

• aura.build (our asset + clone source-of-truth) — outputs HTML/Tailwind/vanilla JS (+ newer React projects). Figma export IS real via the browser-console method (Pro feature; Auto Layout; respects preview size 1440/1024/393) + import from Figma by pasting a URL. Design model cycles (currently Gemini 3.1 Pro). Reach via aura-screenshot-clone + web-aura-asset-images.
• Figma — the real code bridge is the Figma MCP server (remote https://mcp.figma.com/mcp + desktop) into Claude Code/Cursor/VS Code, NOT console-paste. Figma Make now edits your local production codebase (beta, Git/PR workflow) + can capture live UI → editable Figma layers (generate_figma_design). Reach via figma:* plugin skills + Dev Mode + Code Connect.
• Google Stitch (stitch.withgoogle.com, Gemini 3) + Google Antigravity (agentic IDE) — Google's full design→code stack, bridged by the Stitch MCP server + SDK + an agent-friendly DESIGN.md token file. Direct Claude-Design analog; not in our stack today, noted for awareness.

Sources

• News announcement (launch 2026-04-17): https://www.anthropic.com/news/claude-design-anthropic-labs
• 2026-06-17 overhaul (design-system import + /design-sync code round-trip + connectors + token-burn fix): https://venturebeat.com/technology/anthropic-ships-major-claude-design-overhaul-with-design-system-imports-code-round-trips-and-a-fix-for-its-token-burning-problem
• Product page (current features): https://claude.com/product/design
• Get started: https://support.claude.com/en/articles/14604416-get-started-with-claude-design
• Set up design system: https://support.claude.com/en/articles/14604397-set-up-your-design-system-in-claude-design
• Subscription, usage, pricing: https://support.claude.com/en/articles/14667344-claude-design-subscription-usage-and-pricing
• Tool: https://claude.ai/design