Summary
- The /design skill has been added to Claude Code CLI and desktop as a research preview
- It brings Claude Design's artboard workflow into CLI and desktop via artifacts, generating multiple editable UI drafts
- Following artifacts in 2024, the Claude Design launch this April, and handoff integration in June, the artboard workflow has now moved directly into the coding tool
A tool that once only wrote code now draws screens first
Until now, Claude Code has been a tool for writing and fixing code inside a terminal. When a screen design was needed, a person had to sketch the layout first, describe it in words, and have it translated into code. The /design skill Anthropic just added flips this order. It's invoked like a slash command, but the official announcement classifies it as a "skill." When run, Claude first generates and presents several editable screen drafts — so-called "artboards" — and once the user picks and refines one, Claude implements it as actual code.
The news was shared by the ClaudeDevs account and relayed by TestingCatalog. According to the announcement, /design is still in research preview and layers an artboard workflow on top of artifacts — Claude's output format that displays generated code or documents in a separate window for immediate review and editing. The artboard concept itself comes from Claude Design, referring to a workflow of laying out and refining multiple UI drafts side by side.
How to try it
Per the announcement, supported environments are the Claude Code CLI and desktop app. It's launched by typing /design in the prompt, and as a research preview it may not yet be visible to all accounts depending on rollout status.
- Open the Claude Code CLI or desktop app and type /design.
- Claude generates and displays several editable artboards for the requested screen.
- Pick a draft you like.
- Adjust colors, layout, and copy directly, or ask Claude to make changes verbally.
- Hand off the finalized artboard to Claude, and it implements it as working code.
Beyond being labeled a research preview, the announcement doesn't specify plan tier or regional restrictions. For example, it could be used to generate several landing page drafts and turn one into deployment-ready code, or to iteratively refine an internal dashboard layout.
Two years in the making for Claude Design
This skill didn't appear out of nowhere — it's the latest step in Anthropic's steady effort to close the gap between design and code.
- June 2024 — artifacts introduced: Code and documents Claude generates could be reviewed and edited directly in a separate window next to the chat. This is the foundation the artboard feature now builds on.
- April 17, 2026 — Claude Design launched: Anthropic Labs released an artboard-based design tool as a research preview, available to Pro, Max, Team, and Enterprise plans, built on a version of Claude Opus 4.7 tuned for visual work.
- June 18, 2026 — first integration with Claude Code: A handoff feature let finished drafts be bundled into a "handoff bundle" and passed to Claude Code for implementation, with usage limits unified across chat and Claude Code.
- August 17, 2026 — /design skill research preview: The artboard workflow, which previously required switching between separate apps, now runs directly inside the Claude Code CLI and desktop app.
In roughly four months, the workflow has narrowed from "separate product" to "handoff integration" to "built directly into the tool."
| Category | Previous approach | After /design |
|---|---|---|
| Draft creation | Person manually drafts | Claude auto-generates multiple artboards |
| Editing method | Request via text, then check code | Adjust directly on the artboard |
| Output location | Separate documents/images | Edited directly within artifacts |
Editor's take
/design should be read as a signal that competition among coding agents is shifting from "who writes better code" to "who can be trusted with the whole screen." Rival tools like Cursor have also recently been testing tabs for reviewing entire codebases in closed beta — pointing in a similar direction. Everyone seems to be moving toward agents that operate not on a single line of code but on the full context of a project — now including design.
The generational shift is tangible. With older coding agents, asking for "a nicer login screen" would produce a single chunk of code. If you didn't like it, you had to rewrite the prompt from scratch. What's different here is the insertion of a "choose and refine" step in between. The process of comparing multiple drafts side by side resembles what people used to do in design tools themselves.
Practically speaking, the "research preview" label shouldn't be taken lightly yet. Rather than attaching this to a production codebase, it makes more sense to try it first on side projects or prototypes and check for yourself how many files get touched in a single call. A feature that can modify several files at once with one invocation isn't yet ready to be merged without review.
In the coming weeks, expect a wave of feedback from developers who've actually tried it, with the key question being how far artboards translate into production-grade code quality. It's also worth watching when the research preview label gets dropped.
Comments