Anthropic is bringing more of the design step into Claude Code. Its new early-preview /design command lets developers create UI mockups before they begin writing code, directly from the terminal or the desktop app.
The feature is meant to turn a short prompt into multiple visual directions. From there, a developer can compare options, pick one, make changes, and continue into implementation with that design context carried forward.
A design step inside Claude Code
The core idea is simple: developers can ask Claude Code to explore interface ideas before the code starts. A sample prompt is written as "/design a few options for {feature}". Claude then generates several drafts as artboards.
That matters because a UI feature often begins with uncertainty. The developer may know what the feature should do, but not yet how it should look or fit into an existing product. The /design command gives that question a place inside the same workflow where the build will happen.
Instead of moving immediately from an instruction to code, Claude Code can now produce mockups first. Those mockups are not described as final production output. They are drafts that can be selected, edited, and used as the basis for the next step.
How the mockup workflow works
The source describes a flow with several clear stages. First, the developer starts with a /design prompt. Then Claude creates multiple drafts. Those drafts appear as artboards, giving the user more than one possible direction for the same feature.
After that, the developer can choose the preferred version. The design can also be edited before moving on. Once a direction is chosen, the developer can build it out.
The process can be summarized as:
- Run a /design prompt for a feature.
- Review multiple generated artboards.
- Select the strongest option.
- Edit the mockup where needed.
- Carry the chosen design into the build step.
This structure gives the design phase a more explicit role. The developer is not only asking for code; they are asking for options, making a decision, and then letting that decision inform implementation.
Claude reads the existing codebase
According to developer Nate Parrott, Claude reads the existing codebase and matches the current UI style. That is an important part of the feature as described, because a useful mockup is not just a standalone screen. It needs to fit the product already being built.
For a codebase with an established interface, consistency can be as important as novelty. A generated mockup that follows the current UI style can help keep a new feature aligned with the surrounding product. It also gives the developer a visual draft that is connected to the real project rather than a generic concept.
The mockups are created as shareable Artifacts. That means the design output is not limited to a private terminal moment. It can be shared, reviewed, and used as part of the development process.
The editor and prompting features come from Claude Design and are now built directly into Claude Code. In practical terms, the source presents this as a closer connection between design exploration and code implementation. The design tools are no longer separate from Claude Code in this preview; they are available from within it.
What still needs attention
The preview has one limitation called out in the source: designs carry over into the build step, but they still need to be saved manually for now. That detail matters for anyone trying the feature in an active workflow.
Manual saving means users should treat the generated mockups as work that needs deliberate handling. If a design direction is important, the developer needs to save it rather than assume everything is automatically preserved.
Because Anthropic describes the release as an early preview, the current behavior should be understood as an initial version of the command. The available information does not describe every future change or limitation. What it does establish is the current path: generate mockups, choose and edit a draft, save manually, and build from the selected design.
Why this changes the development loop
The /design command places visual decision-making closer to implementation. For developers working in Claude Code, the terminal or desktop app can now become the place where a feature is first explored as a UI, not only written as code.
That can make the early stage of feature work more concrete. Multiple artboards give the developer something to compare. Editing gives them a way to refine the chosen direction. Carrying the design into the build step gives Claude Code more context for what should be implemented.
The feature also reflects a broader shift in how AI coding tools are being positioned. Claude Code is not only responding with code; in this preview, it is also helping shape the interface before code exists. The source does not claim that the design is final or automatic, but it does show a workflow where mockups become part of the coding environment itself.
Developers who want to try the preview are told to run "claude update." Once updated, the /design command gives them a way to move from feature idea to UI mockup to build step without leaving Claude Code.