Claude Design in Claude Code: the /design command that hands you an editable canvas

TL;DR Type /design followed by what you want designed. Claude publishes a canvas of artboards and gives you the link. Open it, move the pieces yourself, then tell Claude which one to build. Nothing to install, and it does not draw on a separate allowance. Requires v2.1.233 or later.

I spend a lot of time in Claude Design, and until now the bridge only ran one way. You designed on the web, hit export, copied the link, and pasted it into Claude Code so it could pick up from there. It worked, but the design always started somewhere else. Since v2.1.233 there is a command that starts it right where you already are.

What the /design skill is

It is a built-in Claude Design skill inside Claude Code, in research preview. You give it a brief in plain language and it publishes your designs as an artifact, the same object you already get when you ask for a web page of what the session did.

What lives inside that artifact is not a screenshot. It is Claude Design's canvas editor, packaged and served alongside the design itself. Every file Claude writes becomes an artboard with its own frame, title and controls, sitting on a single canvas you pan and zoom.

What you actually see

/design a pricing card for a single plan: name, price,
        three feature lines and one button

Claude writes the design, publishes it, and answers with the link to the canvas. Open it and the artboards sit in a row, each one labeled.

In the top bar, on the left, undo and redo sit next to the zoom control. On the right, a Save button. You retype text right in place; the properties panel, for everything else, opens from the toolbar or from a selection's quick menu. None of it reaches the terminal until you save, and saving publishes a new version for everyone with access to the link.

Above each artboard you also get whatever tweaks Claude declared. In the example above, an accent-color picker per artboard: change it and that whole design recolors without you writing a line.

How to use Claude Design from Claude Code

1. Put the brief in the command

/design three directions for the app's settings screen

The more specific the brief, the fewer rounds. Inside a repo, Claude first goes looking for your tokens, your components and your closest existing screens, and draws with those instead of inventing a look.

2. Choose on the canvas, not in the chat

Ask for several directions and compare them side by side. That beats putting into words what is wrong with the first one.

3. Fix by hand whatever is faster by hand

A padding, a color, a word. Nudging it in the panel costs less than composing the sentence that explains it.

4. Hand it back to the terminal

Name the artboard you want and tell Claude to build that one. That is the whole point of the command: design and code stop living in two separate apps.

The questions people ask before trying it

Nothing to install. No server, no extension, no new account. To find out whether your account has it, type /design at the prompt: if it does not autocomplete, the preview has not reached you yet.

It is not a separate site. claude.ai/design exists and is the full product. This is its canvas editor running inside Claude Code.

It is not free, and it has no allowance of its own. It ships on the paid plans: Pro, Max, Team and Enterprise. Claude Design used to have its own weekly allowance; it no longer does, and the usage comes out of the same pool as your chat and your Claude Code.

The canvas starts private. You share it from the page's own menu. Anyone who opens it without write access gets a read-only view and can export PNG or PDF, but cannot save.

What this preview does not do

Worth knowing before you lean on it. /design import, /design export and /design status do not work here and point you back to claude.ai/design; that road goes through the Claude Design MCP server, which you install separately. There are also no design-system color tokens and no ask-for-tweaks loop inside the canvas, because both depend on the web backend.

Two more limits are worth keeping in mind. The editor is packaged inside each canvas you publish, so an older canvas never picks up later improvements. And if two people edit at once, whoever saves second gets a conflict: nothing is merged.

If what you want is for the code Claude already writes to stop looking machine-made, that is a different skill entirely. This one does not touch your code; it hands you a canvas. And if you end up using the result to understand a change before delegating it, that habit is in how I use artifacts to understand what I delegate.

Reference

Official docs: What's New, week 34

Requirements

• Claude Code v2.1.233 or later
• A Pro, Max, Team or Enterprise plan