Claude Design

Claude Design (Anthropic Labs) is a visual creation product: you describe what you need in natural language, and Claude produces editable work on a live canvas, UI prototypes, presentations, one-pagers, and similar outputs, not a static image dump. The official announcement is Introducing Claude Design; day-to-day how-to lives in the Claude Help Center.

How the UI is organized

From Anthropic’s Get started guide:

• Left: chat, prompts, follow-ups, and broad changes.
• Right: canvas, the generated artifact you iterate on.

Refinement is meant to use chat for structure and theme, and inline comments (click a specific element) for targeted tweaks, faster than describing coordinates in prose. The announcement also highlights inline edits, comments, and custom adjustment controls (e.g. spacing/color/layout) for fine control.

What you can bring in (inputs)

The help center describes:

• Images: screenshots, competitor or inspiration references, wireframes.
• Documents: decks, PDFs, or other brand-heavy files.
• Codebases / design files: connect material so new work aligns with real components and patterns (especially once a design system exists for the org).
• Onboarding: Set up your design system in Claude Design explains uploading code, decks, prototypes, and logos so Claude can extract colors, type, and components for Team/Enterprise use.

The labs announcement also mentions a web capture flow to pull from a live site so prototypes can mirror a real product surface, verify the exact steps in product UI when you teach.

Handoff to engineering

Claude Design can hand work to Claude Code on the web or a local Claude Code session so implementation starts from the design intent instead of a screenshot. Use /design-sync for the documented design-system sync workflow.

You can also connect Claude Code directly to the Claude Design MCP server:

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp

Then run /design-login in Claude Code to authenticate the connection.

Who can use it and limits

• Status: beta.
• Plans: Pro, Max, Team, and Enterprise.
• Surfaces: web at claude.ai/design and Claude Desktop.
• Enterprise: off by default; an administrator enables it under organization capabilities. Team access is on by default.
• Usage: draws from the same shared limits as Chat, Claude Code, and Cowork. There is no separate Design allowance; usage credits can continue work after included limits where enabled.

When to teach it in this workshop

• Paired with vibe coding: “design in Claude Design → implement in Cursor or Claude Code” closes the loop that Common workflows in Claude Code encourages when you attach mockups and screenshots, the best-practices doc recommends comparing implementation to references in a tight loop.

Workshop checklist (short)