Anthropic Adds /design Command to Claude Code for Terminal UI Mockups

Anthropic has expanded Claude Code with a new /design command that lets developers create, iterate, and view UI mockups without leaving the terminal.

UI Prototyping Directly in the Terminal

Instead of hopping between Figma and a shell, you can now type something like /design a few options for a login screen. Claude replies with several interactive “artboards” that display high-fidelity mockups. You compare layouts, pick a favorite, and refine the look by asking follow-up questions—all before writing a single line of production code.

Context-Aware Mockups from Your Codebase

Developer Nate Parrott notes that Claude actually reads the current repository. It pulls colour palettes, component libraries, and layout conventions, then tailors each design to match the project’s existing style. The results appear as “Artifacts,” a dedicated view inside Claude that shows the images without opening a separate graphics editor. At this stage the mockups exist only in Claude’s workspace; you must explicitly save them to the file system before turning them into code.

Why It Matters for AI-Assisted Development

The command collapses two stages of the software development life cycle—design and coding—into one. Teams that prize speed can generate multiple layout options with a single prompt, accelerating early-stage discovery. Because Claude uses the live codebase, the mockups stay on-brand and compatible with the component system, cutting the manual cleanup that follows generic image generation.

Anthropic frames this as a step toward an “AI software engineer” that handles both logic and aesthetics. If the terminal can serve as a multi-modal workspace, the line between writing code and shaping the user experience thins dramatically.

Current Limitations

The feature is still in preview. Generated mockups do not become source files automatically; you must export and integrate them yourself. That extra step can eat into the time savings, especially on larger projects with dozens of components.

How to Try It

Run claude update to pull the latest preview build and enable the /design command.

Key Takeaways

  • Integrated Prototyping: /design generates multiple UI artboards directly from terminal prompts.
  • Contextual Consistency: Claude scans the current codebase to keep mockups aligned with the existing design system.
  • Streamlined Workflow: By merging Claude Design’s prompting power with Claude Code’s execution, developers move from concept to visual prototype without switching tools.

Anthropic’s new /design command lets developers create and iterate UI mockups straight from the terminal, cutting the back-and-forth between design tools and code editors—a bottleneck many fast-moving teams still wrestle with.

Generating Visual Drafts from a CLI Prompt

You type a command like /design a few options for a login screen and Claude returns a set of interactive artboards. Each artboard shows a high-fidelity mockup that you can inspect, compare, and refine by asking follow-up questions.

Claude reads the files in the current project, extracts colour palettes, component libraries, and layout conventions, then tailors the designs to match. The output appears as “Artifacts,” a view that displays the images without opening a separate graphic editor. At this point the mockups live only in Claude’s workspace; you must explicitly save them to the file system before turning them into code.

Why Developers Care About a Design-in-the-Terminal Tool

Most developers spend a large chunk of their day swapping between a code terminal and a UI design app. Bringing visual prototyping into the same window where code is written collapses two stages of the software development life cycle into one.

For speed-focused teams, generating several layout options with a single prompt can accelerate the early-stage discovery phase. Claude’s read of the existing codebase keeps the mockups on-brand and compatible with the project’s component system, reducing the manual cleanup that typically follows a generic image-generation step.

Anthropic frames the addition as a step toward an “AI software engineer” that can handle both logic and aesthetics. If the terminal can now serve as a multi-modal workspace, the line between writing code and shaping the user experience becomes thinner.

Einschränkungen und das Argument für traditionelle Design-Tools

Die Funktion befindet sich noch in der Preview-Phase, und es bestehen weiterhin mehrere praktische Einschränkungen. Erstens werden die generierten Mockups nicht automatisch zu Quelldateien; Entwickler müssen sie manuell exportieren und integrieren. Dieser zusätzliche Schritt kann die Zeitersparnis bei größeren Projekten zunichtemachen, bei denen Dutzende von Komponenten synchronisiert werden müssen.

Worauf man achten sollte, während die Funktion reift

Das Update von Anthropic merkt an, dass der Befehl mit einem einfachen claude update aktiviert werden kann.

Fazit: Das Einbetten eines Design-Prompts in das Terminal von Claude Code bietet Entwicklern eine Abkürzung vom Konzept zum visuellen Prototyp, aber der Workflow hängt nach wie vor von der manuellen Übergabe ab und lässt die Tiefe dedizierter UI-Tools vermissen. Ihre Entwicklung wird darüber entscheiden, ob der Befehl eine Nischen-Erleichterung bleibt oder zu einem Kernbestandteil eines KI-gesteuerten Development-Stacks wird.