Draw First, Build Later: /design in Claude Code
The /design skill generates editable UI artboards inside Claude Code. Pick one artboard, tweak it in chat, and Claude builds it. No Figma, no mockup tools needed.
Evgenii Arsentev · PhDReviewed for accuracy by Evgenii Arsentev, PhD · 2026-09-30
The /design skill does something I didn't expect from a coding tool: it lets you draw the interface first and build it second. You write a brief in plain words, Claude generates a canvas of editable UI artboards, you pick the one you like, and then Claude implements it as real code. I've been building products with Claude Code every day, and this is the first time the design step felt native instead of bolted on.
What is /design in Claude Code?
Run /design followed by a short brief, and Claude publishes an artboard canvas — a set of visual mockups showing different UI directions for your feature. The artboards are built on Artifacts, so they open in the browser as interactive previews you can look at side by side. Pick one and tell Claude which option to implement, and it turns that mockup into working code. No switching to Figma, no exporting assets, no 'now make this real' disconnect. The whole loop — brief to artboard to code — stays inside the same conversation.
/design is a beta feature. Available by default on Pro, Max, and Team plans; on Enterprise, an Owner turns it on under Organization settings > Artifacts. Requires Claude Code v2.1.265 or later. Check your version with claude --version.
How to use /design: step by step
From brief to built UI in four steps
- 1Write a brief in plain language — describe the feature, the user, or the problem you're solving. Claude doesn't need design vocabulary: 'redesign the composer based on what people actually use it for' works fine.
- 2Run /design followed by your brief: for example, /design a settings screen for a small task app, mobile-first. Claude generates a canvas of artboards and prints a link to the published canvas.
- 3Open the link, compare the artboards, and pick the direction you like. You can also describe tweaks right in the chat: 'make the header smaller', 'use a dark background', 'add a search bar'.
- 4Tell Claude which artboard to implement: 'build option 2'. Claude writes the code and applies it to your project — same session, no copy-paste needed.
What can you design with /design?
Anything that has a UI. I'd use it for landing pages, settings screens, onboarding flows, dashboards, and modal dialogs — basically wherever you'd normally sketch on a napkin before coding. The brief can be functional ('a login form that also works as signup') or aesthetic ('cleaner, more whitespace, feels like Linear'). Claude interprets both. You can even iterate: after seeing the first canvas, ask for more options before committing to one.
After the artboard: the build step
The artboard is not a static image — it's a live preview inside Artifacts. When you tell Claude to build option N, it reads the artboard and produces the implementation in your project's stack, whether that's React, plain HTML, or whatever you're working in. The conversation history carries over, so Claude already knows the project structure and doesn't need a separate briefing. If the first build doesn't match the mockup exactly, describe the gap ('the spacing looks off') and Claude adjusts.
Lab: your first /design run in 10 minutes
0/6The usual workflow is: words → code, hope it looks right. /design flips it to: words → visuals → code, know it looks right. For anyone who's ever lost an hour to CSS because the idea in their head didn't survive the translation to code — this is the feature worth trying.
Free course
Stop reading about AI — start building with it
The free Claude Code course: your first site, tool or game — no coding. No upsells, no cross-sells — nothing to buy here.
Start free →Author
Evgenii Arsentev
PhD · Chief Executive Officer, digital health
Reading is a good start
Want to actually build this?
Guides explain. The free course transforms — personalized, gamified, and built to get you shipping fast.
Start the free course →