Claude Code previews /design for editable Artifact mockups

• Claude Code’s new /design skill generates editable UI artboards in the CLI or desktop app, according to ClaudeDevs' announcement.
• The workflow moves from prompt to alternatives to a chosen mockup: nateparrott's announcement says users can pick an artboard, edit it, and implement it.
• Claude reads the existing codebase, matches its UI style, and creates shareable mocks in an Artifact, nateparrott's follow-up says.
• The research preview is available on Pro, Max, Team, and Enterprise after a Claude Code update, per ClaudeDevs' availability reply.

Anthropic’s Claude Design product page describes a broader idea-to-draft-to-handoff workflow, with imports from GitHub, design files, or a local codebase. The Help Center guide adds inline comments, direct canvas editing, exports, and /design-sync for moving design-system context between Claude Design and Claude Code. The Artifacts announcement describes live, shareable visual pages built from Claude Code sessions. The preview still has a small beta-era gotcha: users need to press Save for now, according to nateparrott's note.

Claude Code’s skills documentation says skills can be invoked directly with /skill-name. The new preview applies that mechanism to visual UI exploration, carrying Claude Design’s editor and prompting into Claude Code, as nateparrott's follow-up describes.

A working prompt in nateparrott's announcement is /design a few options for {feature}. Claude uses the project as context, generates visual directions, and keeps the user in the same coding-agent session before implementation.

The preview creates editable artboards, lets the user pick a direction, and returns the chosen design to Claude Code for implementation, according to ClaudeDevs.

The flow breaks into five concrete steps:

1. Describe the feature with /design.
2. Review several generated UI directions.
3. Select a preferred artboard.
4. Adjust the selected design.
5. Hand the edited direction back for implementation.

The checkpoint is a selected, editable layout that remains attached to the implementation workflow.

The preview reads the codebase, matches the project’s UI style, and makes shareable mocks in an Artifact, nateparrott's follow-up says. Anthropic’s product documentation describes the same context layer through design-system imports from GitHub, design files, or a local codebase, allowing Claude to build with real components.

In the Composer audit shown in the demo, the session starts with a request to redesign the composer around actual usage, checks the toolchain, runs four commands, creates four files, and presents multiple versions. The next prompt asks Claude to “implement option B with my edits,” as the Composer screenshot shows.

Anthropic’s Claude Code Artifacts post describes artifacts as live, shareable visual pages that can turn work from a coding session into something a team can open and explore. Nateparrott specifically describes the /design output as shareable mocks in an Artifact, in his follow-up.

That gives the design phase a shareable object alongside the code session. Claude Design’s Help Center documentation also lists organization-scoped sharing, comments, edit access, HTML export, and handoff to Claude Code among the available paths.

Claude Code’s research preview is available to Pro, Max, Team, and Enterprise users, with an update required before trying it, ClaudeDevs' availability reply says.

The parent Claude Design product is in beta on those plans, according to Anthropic’s product page, with Enterprise access off by default. The Help Center says Claude Design shares its usage pool with chat, Claude Code, and Cowork, and that large codebases or many iterations consume more usage.

The preview still requires a manual Save step. Nateparrott says that requirement should disappear soon, while noting that the model’s adherence to a requested design is still improving, according to his reply.

The same reply leaves one implementation detail with the model: a selected design can be carried forward, but Claude still has to follow it accurately when generating the code.