What is the /design command in Claude Code?

/design is a Claude Code command, released as a research preview on August 17, 2026, that generates editable UI artboards from inside a coding session. You describe a screen or feature, Claude produces several UI options rendered through its Artifacts runtime, you pick and tweak one, and Claude then implements the corresponding code in your repository — without leaving the terminal or Desktop app for a separate design tool.

Is /design the same as Claude Design?

No. Claude Design is a standalone visual product for creating web apps, mobile designs, prototypes and slide decks from natural language on an interactive canvas. The /design command is a Claude Code feature that brings artboard generation into an existing coding session so the output lands directly in your codebase. A related /design-sync command pulls design-system information across the two so generated screens follow your existing colours, fonts and component patterns.

Do I need Figma if Claude Code can generate UI?

For most production design work, yes. /design is a research preview aimed at the gap between 'describe a screen' and 'implement it' — fast exploration of layout options during coding. It does not replace design systems governance, multiplayer design review, handoff specs or accessibility auditing. Anthropic itself ships a Figma 'Code to Canvas' integration that pushes AI-generated interfaces into Figma for refinement, which signals coexistence rather than replacement.

Quick Answer

Claude Code /design Command: Artboards Explained

Published: August 18, 2026

The Short Answer

/design puts UI generation inside the coding loop. Released as a research preview on August 17, 2026, it lets you describe a screen from within a Claude Code session, get several editable artboards back, pick one, adjust it, and have Claude write the implementing code — with no context switch to a separate design tool.

The interesting claim isn’t that an AI can draw a UI. It’s that the design artifact and the code that implements it are produced in one session with one context.

How the Workflow Runs

Describe — invoke /design in Claude Code (Desktop app or CLI) and describe the feature or screen.
Generate — Claude produces multiple UI options, rendered live through the Artifacts runtime as real HTML with embedded JavaScript, not static mockup images.
Choose and tweak — select a direction and adjust the artboard directly.
Implement — Claude writes the corresponding code into your project.

Because Claude Code already holds your repository context, the generated UI can reference components, conventions and styles that actually exist in your codebase. That is the structural advantage over a design tool that has never seen your source.

Why “Artboard” Is the Right Word

Naming matters here. An artboard is a bounded, editable canvas you iterate on — not a finished screenshot and not a code diff. That framing sets the expectation correctly: /design produces something you are meant to argue with and revise, not accept.

The Artifacts runtime backing it means each artboard is live and interactive — charts animate, widgets respond — rather than a flat rendering. You are evaluating behaviour, not just layout.

Where It Sits in Anthropic’s Design Stack

August 2026 finds Anthropic with three overlapping surfaces, which is genuinely confusing:

Surface	What it is	Where it lives
Claude Design	Standalone visual prototyping product — web apps, mobile, prototypes, slide decks	Claude web app
`/design`	Artboard generation inside a coding session	Claude Code (Desktop, CLI)
Artifacts / Generative UI	Runtime that renders live interactive interfaces in-conversation	Everywhere
`/design-sync`	Pulls design-system info so both stay consistent	Claude Code
Figma “Code to Canvas”	Pushes AI-generated interfaces into Figma	Figma integration

The simple rule: Claude Design is where you start from nothing. /design is where you start from an existing codebase.

What This Is Actually For

The honest use case is exploration speed at the point of implementation. A developer building a settings page can see four layouts in a minute, inside the session where they’re already working, without opening a design tool or waiting on a designer for a low-stakes screen.

That’s real value for internal tools, admin surfaces, prototypes and greenfield features where the design bar is “coherent and usable” rather than “brand-defining.”

What It Is Not For

Be clear-eyed about the boundary:

Design systems governance. Even with /design-sync, consistency across dozens of screens is a process problem, not a generation problem.
Multiplayer design review. Figma’s real product is collaboration and comment threads, not shape-drawing.
Accessibility. Generated UI needs auditing. Contrast, focus order, semantics and screen-reader behaviour are not guaranteed by a prompt.
Anything brand-critical. Preview-quality generation is not a substitute for design judgement on your most visible surfaces.

It is also a research preview, which in Anthropic’s vocabulary means behaviour and availability can change without warning. Don’t build a team process on it yet.

The Broader Pattern

/design is the third notable Claude Code change in two weeks: Auto Mode became the default on Pro, Max and Team plans on August 14, 2026, imperceptible watermarking of Claude-generated text began rolling out from August 2, 2026 for EU AI Act compliance, and now design generation moves into the terminal.

The direction is consistent: Claude Code is being pushed from coding assistant toward the place the whole build happens. That is the same bet Cursor made with Origin code hosting on August 17, 2026 — absorb an adjacent stage of the workflow into the tool where the agent already lives.

Last verified: August 18, 2026. /design is a research preview; behaviour may change.