How is /design different from the older approach of pasting a screenshot into Claude Code and asking it to modify the interface?
The older approach — pasting a screenshot into the terminal and describing verbally what to change — essentially treats the screenshot as a reference image: Claude reads the image and directly generates or modifies code, with no independent, editable design file existing in between. What you see as the result is simply the running code itself. /design is different because its output is a genuine design file — a canvas saved in Claude Design — not code written directly. That means you can adjust and compare on the design file before any code exists at all, even have others (on Team/Enterprise plans) co-edit it, and only ask Claude to translate the design into code once a version is settled.
Put simply, the old approach was "image in, code out." /design is "idea or screenshot in, editable design file out, and the design file then becomes code" — an independent, repeatedly revisable intermediate artifact now exists in between.
Why did Anthropic build a dedicated "design" Skill instead of continuing to strengthen Claude Code's ability to generate code directly?
The most direct reason is that design and implementation are inherently different kinds of decisions — the design stage cares about what a screen should look like and how information should be arranged; the implementation stage cares about how to actually build that screen in code. If every screen adjustment has to happen by modifying code, you're solving a problem that should be low-cost (comparing a few layout options) using a much higher-cost method (editing code, recompiling, re-checking the result).
Making design an independent, editable file carries another implication: a design file can be shared and co-edited, while code changes typically go through stricter permissions and review processes. Letting people without an engineering background — product managers, designers — adjust a screen directly in Claude Design without touching code at all is, in a sense, redrawing the permission boundary between "deciding what the screen looks like" and "implementing it in code."
What does the full process actually look like, from input to getting working code?
Step one is the input, which can take one of three forms: a plain-text description of the screen you want ("a three-column subscription plan comparison, with the middle column highlighted"), a screenshot of an existing interface, or a design you already have. Step two, /design returns an editable canvas based on that input, saved in Claude Design — at this stage it's worth generating multiple versions to compare side by side rather than accepting the first result outright.
Step three is adjustment and confirmation: you can edit details directly on the canvas — colors, spacing, text — and on Team or Enterprise plans, invite others to co-edit and publish a new version. Once the screen is finalized, step four is asking Claude to translate that design file into actual code. Because the first three steps don't involve writing any code, the cost of revising is relatively low, and by the time you actually get to the code-writing stage, what you're implementing is usually a finalized design rather than a still-guessed-at draft.
If I want to try /design right now, what should I keep in mind? What kind of use case is it actually suited for?
The first thing to know is that it's currently in research preview, meaning the operational details, output quality, and feature scope may continue to change. It's not advisable to treat it as a stable, mature feature you can rely on, especially for critical, externally-shipping product design. It's better positioned as "an early draft stage for internal work" — quickly pulling together a draft interface for an internal tool, or a product manager wanting to show the engineering team a few screen options before a meeting. These are the scenarios where the "no need to wait for a designer to build it first" efficiency gain is directly noticeable.
If your team already has an established Design System or brand guidelines, keep in mind that the first version /design generates usually needs to be adjusted against those existing standards — it doesn't automatically apply your company's visual guidelines. A more realistic way to use it is as "quickly generating a few directional drafts," not "a one-shot final version." Right now this feature only exists in Claude Code's CLI and desktop app; it hasn't rolled out to other interfaces yet.
On August 17, 2026, Anthropic released a new Skill for Claude Code called /design, as a research preview. Give it an idea, a screenshot, or an existing design, and it returns an editable Claude Design canvas — meaning the old back-and-forth between "the mockup lives in one tool, the code lives in Claude Code" can now happen in the same place, without leaving the terminal.
/design is built on Artifacts and works in both the CLI and the desktop app. The input can take three forms: a description of the screen you want, a screenshot of an existing interface, or a design you already have. Regardless of the input, the output isn't an image — it's a real design file, saved in Claude Design. Because it's a genuine design file rather than a picture, it can be shared and co-edited: on Team and Enterprise plans, anyone you set as an editor can change it and publish a new version.
The typical workflow used to be: a designer builds the screen in a separate tool, then a developer translates it back into code, with waiting and back-and-forth communication in between. That gap is exactly what /design is meant to close — within the same loop, you describe a screen, get several options, pick one, adjust it, and then have Claude write the code that implements the chosen version directly. Because the whole process runs in one toolchain, design and implementation stop being a "hand it off, wait for it to come back" relationship.
Rather than writing the code first and discovering the interface isn't what you wanted, the more efficient approach is to use /design to generate several different versions of the same screen before you write a single line, compare them directly, settle on one, and only then have Claude implement it. That reverses the old sequence of "write first, revise if unsatisfied," moving the decision point to the stage where it costs the least.
/design is still in research preview, meaning the feature itself and its operational details may continue to change. It was announced in Anthropic's August 2026 Claude Code roundup newsletter alongside other updates like the Concise output style and auto-continue after hitting a usage limit — the shared theme across this round of updates is that Claude Code is gradually expanding from "a coding assistant in your terminal" into a more complete workspace.