Anthropic just launched /design for Claude Code (it's awesome)

🎨 What /design Is

Anthropic just launched an official /design skill for Claude Code — it brings Claude Design's popular artboard workflow directly into Claude Code. "You can use it wherever you use Claude Code — terminal or the VS Code extension." Update, type /design, and it's built in. 0:00

The demo: one prompt produces a full RoboNuggets landing page — dark/light mode, copy, fonts, and design "all built from just one prompt, and it doesn't look vibe-coded at all." The result is an editable artifact delivered as a link. 0:20

🖼️ The Canvas Editor

The artifact opens in a canvas with Figma-style editing: change accent colors, adjust spacing and font scale, tweak fonts and weights via the right-hand sidebar, and edit text in place. "A much better experience when you're polishing a website for production." 0:47

Feature	What it does
Live editing	Accent colors, spacing, font scale, font weights — from the canvas
Sharing	Toggle to share with peers/clients (like a Google Doc link)
Comments	Leave comments on the canvas
Chat edits	Apply bigger changes by chatting from the same Claude Code session

"One clear benefit: this whole artifact is connected to your Claude Code. Leave comments, or chat with it to apply bigger changes." 1:26

⚔️ /design vs Claude Design

The obvious question — how is this different from Claude Design? The answer is context. With /design in Claude Code, one prompt captured "all our designs, all the details, and all the numbers were correct." With Claude Design, the same prompt produces default fonts, a generic black-and-blue palette, and incorrect details. 2:00

The reason: "Claude Design has no memory of my business outside the conversation. It asks what RoboNuggets is, what the visual direction is. Each session is self-contained — you can upload files, but most of the time you rework everything for every project." 3:03

🧠 The Context Advantage (ARMS)

"Claude Code actually doesn't work from just one prompt — it also works on your workspace context." Jay teaches context engineering through the ARMS framework: connect Claude Code to your Applications, set up Routines, and connect Memory (design systems, brand books, business details) + Skills. 2:20

Why that one prompt worked: "My context has memory connected to it — design systems, brand books, business details, and my own skills." His "second brain" workspace holds ~60,000 files — a folder on his machine with all the memory, skills, app context, and routines. 4:05

🔌 Using Your Own Skills

A second advantage: you can combine /design with your own skills. Jay invokes his /generate skill (which connects to AI video/image models on a pay-as-you-go basis) to generate a dot-matrix robot video and place it as the landing page's background. 4:22

The contrast: in Claude Design, the skills dropdown only has the default skills Anthropic ships — "it doesn't let you create new skills." If you want native skills and flexibility, /design in Claude Code wins. 5:35

🚀 Deploy Straight to Vercel

The final difference: deployment. Ask Claude Design to "push this to Vercel" and "it tells me to do it myself." Ask Claude Code the same thing and "it did just that — it's now live at this URL." 5:58

And it's not just websites: "you can probably do all of Claude Design's templates — a 3D object, email templates, mobile app mockups. If you're designing something and want to use Claude Code for the rich context you've built up, try /design." 6:30

✅ Key Takeaways

/design brings Claude Design's artboard workflow into Claude Code — one prompt produces an editable, shareable artifact.
The canvas is Figma-like: live color/spacing/font editing, comments, sharing links, and chat-driven edits.
Context is the whole difference. Claude Design has no memory; Claude Code has your workspace context — so the same prompt yields correct details vs generic defaults.
ARMS framework: Applications + Routines + Memory + Skills are what make one prompt produce a non-vibe-coded design.
Your own skills work with /design (e.g. /generate for AI media) — Claude Design locks you to default skills.
Deploy seamlessly: Claude Code pushes to Vercel; Claude Design tells you to do it yourself.

🔗 Resources & Links

📺 Original video — RoboNuggets

📍 Timestamp Index

0:00 Intro — the official /design skill

0:47 The canvas editor (Figma-style)

1:26 Sharing, comments, chat edits

2:00 /design vs Claude Design

2:20 The ARMS context framework

4:22 Using your own skills (/generate)

5:58 Deploy straight to Vercel