AIToday
AI Coding AssistantsTHE DECODERPublished: Aug 18, 2026, 22:00 JST

Claude Code adds /design command for terminal-based UI mockups

Claude Code adds /design command for terminal-based UI mockups

3 Key Points

  1. What happened

    Anthropic released an early preview of a /design command in Claude Code that lets developers create UI design mockups directly in the terminal or desktop app before writing code. Users run commands like "/design a few options for {feature}" and Claude generates multiple draft designs as artboards that can be selected, edited, and carried into the build phase.

  2. Why it matters

    Developers can now visualize and iterate on design concepts within their coding environment rather than switching between separate design and development tools. Claude reads the existing codebase and matches the current UI style, so mockups integrate with the project's design system from the start.

  3. What to watch

    The designs are currently generated as shareable Artifacts and must be saved manually for now. To access the feature, developers run "claude update."

Not sure about something? Ask the AI

Questions and answers are published on this page.

Summaries like this, in your inbox every morning.

Context & Analysis

The /design command represents a tighter integration of design and development workflows within Claude Code. Rather than forcing developers to use separate tools or external design platforms, the feature embeds design iteration into the same terminal or desktop environment where code is written. By reading the existing codebase and matching current UI styles, Claude can generate contextually appropriate mockups that already align with the project's design system—eliminating a common friction point where design and engineering work diverges.

The feature builds on existing components: the editor and prompting capabilities come directly from Claude Design, now ported into Claude Code. Designs are exported as shareable Artifacts that carry forward into the build phase, though they currently require manual saving. This early preview positions the tool as a way to compress the design-to-development cycle, allowing developers to validate visual direction before investing in implementation.

FAQ
How do you use the /design command?
Users run a command like "/design a few options for {feature}" in Claude Code, and Claude generates multiple draft designs as artboards. Developers can then pick their favorite, edit it, and carry the design into the build step.
How does Claude know what design style to use?
According to developer Nate Parrott, Claude reads the existing codebase and matches the current UI style when creating mockups.

AI news that matters for your work, delivered every morning.

Pick your industry and the AI tools you use, and get news related to your work every day.

Free · 30 seconds with Google · unsubscribe anytimeWhat is AIToday? →

Ask AI

Ask AI anything about this article. The AI reads this article, earlier AIToday articles, and Wikipedia, and cites its sources. Q&As are published on this page for other readers too.

Questions and answers are published on this page.

Related Articles

Next articleAnthropic's revenue run rate hits $65 billion ahead of fall IPO