Claude Code /design Explained: Turn a Sentence Into an Editable UI Design (2026)
Claude Code can design now. The new /design skill takes a written brief and gives you a canvas of editable UI mockups — pick one, tweak it by hand, then tell Claude to build it. Here's how it works, what you need to run it, what it can't do, and when it's genuinely worth using.
`/design` is a Claude Code skill that turns a written brief into a set of editable interface mockups — called artboards — on a shareable canvas. You describe the screen you want, Claude drafts several versions side by side, you pick one and adjust it by hand, then you tell Claude to build it. It arrived as a research preview on August 17, 2026.
What is the /design skill in Claude Code?
Until now, asking Claude Code for a user interface meant skipping straight to code. You'd describe a screen, Claude would write it, you'd run the project, look at it, and then try to put "the spacing feels cramped and the button is the wrong shade" into words. Repeat until you either got what you wanted or gave up and accepted version four.
/design inserts a picture step in the middle. In Anthropic's own words from the Claude Code release notes: "The /design skill brings Claude Design's artboard workflow into the CLI and Claude Code Desktop, built on artifacts. Run it with a brief and Claude publishes a canvas of editable artboards for your UI. Pick one, tweak it, then have Claude implement it" (Claude Code docs).
An artboard is one mockup of one screen. A canvas is the page they all sit on. When you run /design, Claude doesn't hand you a single answer — it hands you several distinct options laid out next to each other, so you're choosing rather than describing.
The other half of the trick is that the canvas is live, not a screenshot. It's published to a web page you open in your browser, and you can edit it directly: change text, nudge spacing, adjust colors. Nothing about that requires you to know CSS.
What actually changed in August 2026?
- August 17, 2026 —
/designshipped as a research preview in Claude Code, in both the terminal and Claude Code Desktop. - Requires Claude Code v2.1.233 or later. On an older version, the command simply isn't there.
- Available on Pro, Max, Team, and Enterprise plans. It's built on artifacts, which have the same plan requirement.
- It's a bridge, not a new product. The canvas is Claude Design — the visual tool Anthropic Labs launched on April 17, 2026 for designs, prototypes, slides and one-pagers.
/designlets you reach it from a coding session instead of switching apps.
"Research preview" is worth taking literally. It means the feature is real and usable but still moving — behavior, limits, and even where the buttons live can change between releases. Build habits around it, not business-critical processes, at least for now.
How do I use /design in Claude Code?
Check your version and sign in
Two things gate this feature: your Claude Code version, and being signed in with a Claude account. Check the first with:
claude --version
If it's below 2.1.233, update it the same way you installed it — the desktop app updates itself, and the terminal version updates with claude update. Then make sure you're signed in to your Claude account with /login. Artifacts, and therefore /design, don't work in sessions authenticated with a raw API key or through Amazon Bedrock, Google Vertex, or Microsoft Foundry.
Run /design with a real brief
The command takes a plain-English description. Anthropic's own example in the docs is refreshingly loose:
/design redesign the composer based on what people actually use it for
Yours can be more specific. The more you tell it about purpose and audience — not visual adjectives — the better the options come back:
/design a pricing page for a two-tier subscription aimed at small business owners,warm and friendly, one recommended plan, no dark mode
A useful habit: describe what the screen has to accomplish, then let Claude propose how it looks. "A signup page that makes the free trial obvious and doesn't ask for a card" produces better options than "a modern, clean signup page."
Open the canvas and pick an artboard
Claude prints a link to the published canvas, and your browser opens to it. You'll see your options laid out side by side. Look at them as a set: the point isn't to find the perfect one, it's to notice which parts of which option you like.
If you lose the link, you don't have to re-run anything. Press Ctrl+] in the terminal to reopen the most recent artifact from your session, or run /artifacts to list every artifact you own and open one from there.
Tweak it by hand, then hand it back to Claude
This is the part that makes /design different from asking for a mockup image. On the Claude Design canvas you can edit text directly, comment on a specific element, and use adjustment controls for things like spacing, color, and layout — no code involved.
When the draft looks right, go back to your Claude Code session and point at it:
Implement the second artboard as the pricing page in this project. Use the components we already have and keep our existing color tokens.
That last sentence matters more than people expect. Without it, Claude may build the page from scratch and quietly invent a second set of styles alongside your existing ones.
Where do these designs live, and who can see them?
Your canvas is published to a private page on claude.ai. Nobody else can see it until you deliberately share it from the Share control in the page header. What sharing options you get depends on your plan:
- Pro and Max: a public link is the only sharing option. Anyone with the URL can open it, without signing in. There's no "just my team" middle ground.
- Team and Enterprise: you can share with specific people in your organization, or everyone in it, and you can make someone an editor who publishes their own new versions of the page.
- Every publish is a version. From the Share control you choose which version viewers actually see, so a rough experiment doesn't have to become the thing your client opens.
/design at anything confidential.What can't /design do?
Being clear about the ceiling saves a lot of frustration. The canvas is built on artifacts, and an artifact is one self-contained web page — which sets some real limits:
- It's a design, not an app. There's no backend behind the page, so a form on an artboard can't store what someone types into it.
- It's a single page. Multi-screen flows live as multiple artboards on one canvas, not as a clickable site with separate URLs.
- It won't replace a designer on hard problems. It's excellent at getting you from a blank page to five credible options fast. Brand systems, accessibility judgment calls, and "why does this feel wrong" still need a person.
- It's a preview. Features in research preview change. Anthropic can adjust how it behaves, and did — twice — in the weeks around launch.
There's also a cost worth naming: generating a visual page uses noticeably more of your usage allowance than the same answer as plain terminal text. Not a reason to avoid it — just a reason not to fire off ten speculative canvases before lunch.
When is /design actually worth using?
The honest test is whether you'd struggle to write down what you want. If you can already describe the screen precisely, skip the canvas and ask Claude to build it. /design earns its keep when the description is the hard part.
Good moments to reach for it
You know what a page needs to do, but not what it should look like.
You want to show a client or teammate three options before anyone writes code.
You've rebuilt the same screen four times and each version is wrong differently.
You're redesigning something that already exists and want to see alternatives side by side.
You need a second opinion on layout, and you're the only person on the project.
Give it your design system first
Before you run /design, write your actual colors, fonts, and spacing into your project's CLAUDE.md file — a few lines is enough. Claude reads it and treats your system as higher priority than its own taste, so the artboards come back looking like your product instead of a generic AI page.
## Design system- Colors: primary #E8B828, accent #CC3366, surface #FBF8F4- Typography: Fraunces for headings, Figtree for body- Spacing: 8px scale, 12px border radius
This is the single highest-leverage minute you can spend on the whole feature — and it improves every other artifact Claude builds for you too. If you haven't set that file up yet, start with our guide on how to write a good CLAUDE.md.
The bigger shift worth noticing
For two years, the way to work with AI on anything visual was to describe it in words and hope. /design swaps that for something people have always been better at: looking at options and pointing at one.
That's the pattern to take with you, whether or not you ever run this particular command. When AI gives you one answer, you're stuck critiquing it. When it gives you five, you're choosing — and choosing is a skill you already have.
Want to learn Claude Code the hands-on way?
Inside the club there's a full Claude Code course — step-by-step video lessons with me, plus a support group so you're never stuck. We start from the basics and build up to agents, designs, and automations.
Frequently asked questions
What is the /design skill in Claude Code?
It's a Claude Code skill that turns a written brief into editable UI mockups. You run /design followed by a description of the screen you want, and Claude publishes a canvas of artboards — several design options side by side — that you can open in your browser, edit by hand, and then ask Claude to implement as real code. It launched as a research preview on August 17, 2026.
Do I need a paid plan to use /design?
Yes. /design is available on Claude Pro, Max, Team, and Enterprise plans, and it requires Claude Code version 2.1.233 or later. You also need to be signed in with your Claude account using /login — sessions authenticated with a raw API key, or running through Amazon Bedrock, Google Vertex, or Microsoft Foundry, can't publish the canvas.
Can other people see the designs I create?
Not unless you share them. A new canvas is private to you. On Pro and Max plans, the only way to share is a public link that anyone with the URL can open. On Team and Enterprise plans you can share with specific people in your organization or with everyone in it, and give someone editor access so they can publish their own versions.
Do I need to know design or code to use it?
No. You describe what the screen needs to accomplish in plain English, and you edit the result by clicking and dragging — changing text, spacing, and colors directly on the canvas. The code only appears at the end, when you tell Claude to implement the artboard you picked.
How is /design different from just asking Claude to build a page?
Asking for a page gives you one answer in code, which you then have to run, look at, and critique in words. /design gives you several visual options before any code exists, so you choose and adjust instead of describing. It's the difference between editing a draft and picking from a lineup.
Can /design make a working website or app?
The canvas itself can't — it's built on artifacts, which are single self-contained pages with no backend, so a form on an artboard can't save what someone types. But the whole point of the workflow is the handoff: once you pick an artboard, Claude Code implements it as real code in your actual project, and that can be a working site.
Still have questions?
Stuck on a step, or want to send a screenshot and have someone take a look? That's exactly what the community is for — real people, quick answers, and no question too basic.
Try your first two weeks for $1No commitment · cancel anytime