Claude Code's /design skill (research preview) brings Claude Design's artboard workflow into the CLI/Desktop, letting you iterate on UI visually and have Claude implement it—run /design to start.
What Changed
Anthropic just dropped a research preview that merges visual design with terminal-native coding. The new /design skill in Claude Code brings Claude Design's artboard workflow directly into the CLI and Desktop app, built on top of artifacts. This means you can now go from a blank canvas to implemented UI without ever leaving your terminal.
The announcement came via Boris Cherny on Twitter: "Claude Code can design now. The new /design skill (research preview) brings Claude Design's artboard workflow into the CLI and Desktop, built on artifacts. Run /design to get editable artboards for your UI — pick one, tweak it, then have Claude implement it."
This isn't just another code-gen wrapper. It's a full design loop: generate artboards, edit them visually, then hand them to Claude to implement as actual code. The workflow is designed to close the gap between "what the UI should look like" and "what the UI is in code."
What It Means For You
If you've been designing UIs in Figma or similar tools and then manually translating them into React or Tailwind, this changes your workflow. The /design skill lets you:
- Generate artboards — Describe your UI in natural language, and Claude produces multiple editable artboard options.
- Tweak visually — Adjust colors, spacing, layout directly on the artboard, not by editing code or CSS.
- Implement automatically — Once you're happy, tell Claude to implement it, and it writes the code for you.
This is particularly powerful for solo developers and small teams who don't have a dedicated designer. Instead of fighting with CSS to match a mockup, you iterate visually and let Claude handle the implementation.
It also integrates with Claude Code's existing strengths. Since it's built on artifacts, the design files live alongside your code, making versioning and iteration seamless. And because it's a skill, you can combine it with other skills and CLAUDE.md instructions to enforce your project's design system.
Try It Now
To get started with /design:
claude
# Inside the REPL, type:
/design
You'll get a set of artboards based on your current project context. From there:
- Ask for variations: "Show me a darker theme version" or "Try a more compact layout."
- Tweak specific elements: "Make the header sticky and reduce the hero section height."
- Implement: "Implement the second artboard as a React component with Tailwind classes."
You can also invoke it with a specific prompt:
/design a landing page for a SaaS analytics tool with a pricing section
This is a research preview, so expect rough edges. But the core loop—design, tweak, implement—is already functional and worth trying on your next UI task.
Why This Matters
This is a significant step toward unifying design and development. Previously, you'd need to switch between a design tool, a code editor, and a terminal. Now, the entire loop lives inside Claude Code. For developers who dread pixel-pushing, this is a huge time-saver.
It also hints at where Anthropic is heading: making Claude Code not just a coding assistant, but a full product development environment. Combined with recent updates like AGENTS.md support and the skills framework, Claude Code is becoming the single place where you spec, design, build, and ship.
Source: twitter.com
Originally published on gentic.news
Top comments (0)