Claude Code /design: Claude Design’s workflow comes to the CLI

Claude Code now has a /design command. It brings Claude Design’s artboard workflow into a development session and is built on Claude Code Artifacts.

That distinction matters. /design does not turn the terminal into the full Claude Design application. It uses the repository as context, generates a visual HTML page, opens it in the browser, and lets the developer return to the code after choosing a direction.

The remaining break in my workflow

Design was still a separate step in my agentic workflow. I prepared the product in Claude Code, then had to:

1. open Claude Design on the web;
2. provide the product context again;
3. explain the existing design system and components;
4. generate several mockups;
5. export or describe the selected direction;
6. return to Claude Code to implement it.

This manual handoff created a simple problem: the repository and the mockup did not automatically share the same context. I had to repeat the constraints for each user story and check that the design had not invented components, data, or actions that the product did not support.

What /design actually does

The official Claude Developers announcement describes /design as Claude Design’s artboard workflow in Claude Code, built on Artifacts. An Artifact is an interactive web page published from a Claude Code session to a private URL on claude.ai.

The flow becomes:

1. Claude Code inspects the repository, its components, and its tokens;
2. /design creates a self-contained HTML page with one or more visual directions;
3. the browser displays the artboards;
4. the user compares them and requests corrections;
5. Claude Code then changes the real project files according to the approved direction;
6. tests and git diff still need to be reviewed before any pull request.

The repository context is the useful part. The model can account for the design system, React components, supported states, and available data instead of starting from a blank page.

/design and Claude Design are different products

They share the artboard exploration approach. The technical surface is different: /design creates an Artifact, not a synchronized Claude Design project.

Testing it on a real SaaS feature

I tested the command on DNS Connects, an AgentMail feature. The backend and states already existed: empty domain, verification pending, success, failure, and SES unavailable.

I did not want an invented landing page. The design had to respect the product components, display the actual DNS records, and preserve the available actions.

This is the kind of prompt I used:

/design
Inspect the existing DNS Connects flow, its components,
tokens, and available data.

Propose three genuinely different directions.
Reuse the existing design system.
Cover only the states supported by the backend.
Do not implement anything before I approve a direction.

The last line matters. Waiting for a selection before coding is a prompt constraint, not an automatic guarantee provided by the command. I want to compare the directions, fix the labels, and check the responsive layout first.

Human review is still required

A polished mockup does not prove that the feature is correct. After implement that, I still review:

• the components that were actually reused;
• the business states that are covered;
• the actions connected to the existing backend;
• responsive behavior and accessibility;
• targeted tests;
• every changed file in git diff.

The Artifact helps choose a direction. The repository, tests, and code review determine whether that direction is ready for production.

Artifact limits

The Claude Code documentation lists several practical limits:

• an Artifact is a single HTML or Markdown page;
• it has no backend of its own;
• external requests are heavily restricted by the security policy;
• the rendered file must remain below 16 MiB;
• publishing requires a compatible claude.ai account and a recent Claude Code version;
• the result is not automatically synchronized with a Claude Design project.

The format works well for a mockup, a comparison, or an interactive report. A multi-page application with authentication, persistence, and APIs still has to be implemented on real infrastructure.

My verdict

/design reduces the manual handoff between the repository, the mockup, and implementation. It is especially useful when the project already has a design system and components Claude can inspect.

The command does not replace the full Claude Design product, tests, or diff review. It brings the visual decision closer to the code that will implement it.

Watch my complete /design test

Get my next AI and development workflows in The Agentic Dev

Official sources

• Claude Developers /design announcement
• Claude Code Artifacts documentation
• Claude Design announcement