Table of Contents
Updated October 12, 2026: With the official announcement of October 8, 2026, Claude Design came out of beta and is now available on every plan, including Free. The standalone claude.ai/design closes on December 14, 2026. We updated the availability in section 4 and the FAQ to match.
Updated September 26, 2026: We rewrote section 3 to match the official Claude Code docs and help center. /design-sync is the command that brings your repo's design system into Claude Design; moving designs into code is handled by the handoff to Claude Code and /design. We also corrected the list of export destinations added in June to match the official announcement, and added what /design, a bundled Claude Code skill since August, does.
Claude Design is an Anthropic Labs design tool that lets you create UI designs, prototypes, one-pagers, and other visual work through conversation (launched April 17, 2026 as a research preview). Then on June 17, 2026, a major overhaul added design-system imports and two-way sync with Claude Code (/design-sync, /design), sharply shrinking the round-trip between designers and developers. Then on September 16, 2026, alongside the merger of Claude Cowork and chat, Claude Design began working inside any conversation (the standalone claude.ai/design closes on December 14, 2026).
This article covers what Claude Design is, the June overhaul, how /design-sync and /design split the work, availability, and why it matters — based on official information. Three takeaways up front. (1) Claude Design is a conversation-based design tool you refine with chat, comments, direct edits, and sliders. (2) The June highlights are "import your design system and build with its real components" and "sync two ways with Claude Code." (3) It came out of beta on October 8, 2026 and is available on every plan, including Free (on by default for Enterprise from October 15). Since September 16 you can use it just by asking for a design in an ordinary conversation, while /design-sync lives in Claude Code.
Design and code, both ways
— move between the canvas and the repo
/design-sync · /design ↔
Code→Design bring your repo's design system in with /design-sync and build with real components,
Design→Code hand finished designs to Claude Code, which continues the build, and turn code into a live prototype on the canvas (/design).
1. What Claude Design is
Claude Design is a tool where "you describe what you want in conversation, Claude builds the design, and you refine it via chat, inline comments, direct edits, and sliders." It makes visual work such as designs, interactive prototypes, and one-pagers (official help: "Get started with Claude Design"). The launch announcement also listed slides, but since September 16, 2026 presentations have their own tool, Claude Slides. It launched April 17, 2026 as a research preview for Pro / Max / Team / Enterprise, and over one million people used it in the first week.
On the model: at the April launch it ran on Claude Opus 4.7 (which Anthropic called "our most capable vision model"). However, the June overhaul announcement does not restate the model, so this article does not assert that "the June version runs on Opus 4.7" (confirm the latest officially). For a broader survey, see AI design tools compared.
2. The June 2026 overhaul
The June 17, 2026 overhaul shifted Claude Design from "a prototyping toy" toward "a workspace that does on-brand, everyday work." The main changes:
What the June overhaul added
/design-sync brings in your design system, and finished designs are handed off to Claude Code to build. /design can also turn code into a live prototype (§3).In short, it's evolving toward "build on your brand, round-trip with code, and fit enterprise governance."
3. /design-sync and /design — moving between design and code
Claude Code has two commands that connect to Claude Design. According to the official Claude Code command reference, /design-sync is a skill that "converts your repo's React design system and uploads it to Claude Design, so designs it produces use your real components" (you can also name it, as in /design-sync Acme DS). A first-time sync verifies every component and can take a few hours on a large repo. You authorize it with your claude.ai account via /design-login.
| Direction | What you use | What happens |
|---|---|---|
| Code → Design (design system) | /design-sync | Reads your repo's tokens and components and brings them into Claude Design, so later designs start from your real components |
| Design → Code (handoff) | Handoff to Claude Code / /design | Hand a finished design to Claude Code and it continues from your existing work instead of rebuilding from a screenshot. Use "Handoff to Claude Code" in the export menu (a local coding agent or Claude Code on the web), or import a design into your codebase with /design from Claude Code |
| Code → Canvas (prototype) | /design | Turn the code you built into a live prototype and refine it on the canvas |
This split comes from the June official announcement and the official help. /design-sync fits best when your design system already exists in code as React components; a brand design system built around fonts, colors, and guidelines is better created in chat from files, Figma files, decks, and logos (official help: "Set up your design system in Claude Design").
/design was already mentioned in the June announcement, and since August 2026 it has been a bundled Claude Code skill: give it a brief and it draws UI mockups, screen flows, landing pages, or posters as several artboards on one canvas, published as a Design artifact (official docs: "Artifacts"). You edit the artboards by selecting elements in a desktop browser, and can export each artboard as PNG or PDF. Both commands work on the Anthropic API but not through cloud providers such as Amazon Bedrock, Google Cloud, or Microsoft Foundry (they rely on claude.ai features). It pairs well with spec-first development; see spec-driven development.
4. Availability
Here is the availability as of October 12, 2026, checked against the official help and the official announcement of October 8. Two things changed since June: the September 16 merger widened the entry point from a dedicated screen to your ordinary conversations, and on October 8 it came out of beta and reached the free plan.
| Item | Details |
|---|---|
| Plans | Every plan: Free / Pro / Max / Team / Enterprise, on by default. On Enterprise it turns on by default on October 15, 2026, and owners can turn it on earlier under Organization settings > Artifacts |
| Access | Ask in any conversation (or pick Output > Design in the message box) / the Design template in the Artifacts tab / Claude Code (/design) / the iOS and Android apps / the standalone claude.ai/design (closes on December 14, 2026; design systems can be migrated from the Artifacts page in Claude) |
| Where it runs | Edit on the canvas on web / desktop. The mobile apps can request, view, and edit designs too (changing sharing settings needs web / desktop). /design-sync and /design live in Claude Code (desktop or terminal) |
| Usage | Draws from the same usage limits as chat and Claude Code (no separate Claude Design allowance) |
| Status | Out of beta (April 17 research preview → June 17 major overhaul → September 16 available inside conversations → October 8 out of beta, including on Free) |
The easy thing to confuse: the "canvas (web/desktop)" and "/design-sync / /design (Claude Code)" live in different places. You work the design on the canvas that opens beside your conversation (or at claude.ai/design until December 14, 2026) and sync with code via Claude Code commands — and that split is exactly the bridge between designers and developers.
5. Why it matters
Until now, moving from design to code often meant "rebuilding from a screenshot." Claude Design + /design-sync closes that gap by (1) importing your design system to build with "real components," and (2) letting design and code round-trip both ways. Engineers don't rebuild from scratch, and designers can polish the code's output on the canvas.
In other words, Claude Design is a product that connects the "designer × developer" workflow in a single line. When you want to share a build quickly, turn it into a shared page with Claude Code Artifacts; for on-brand UI, use Claude Design — combining the new Claude Code-adjacent features pays off. Press reports that AI's move into design is impactful enough that incumbent design-tool stocks reacted (we don't assert exact figures, which fluctuate).
Joining Claude Design as creation tools in the same family, Claude Dashboards, which builds data dashboards, and Claude Motion, which creates explainer animations, have also arrived in beta. The differences and how to choose between them are explained in What Claude Dashboards and Motion are.
Summary
Claude Design (April 2026 research preview, June 17 major overhaul) is an Anthropic Labs design tool for creating UI, prototypes, one-pagers, and more through conversation, and since September 16, 2026 it works inside any conversation. The June highlights are (1) design-system imports (build with real components), (2) moving between design and Claude Code (/design-sync, handoff, /design), (3) direct canvas editing, (4) shared usage limits (the "token-burning" fix), (5) enterprise brand controls, and (6) expanded export connectors.
/design-sync is a Claude Code command that brings your repo's React design system into Claude Design. Finished designs go to implementation through a handoff to Claude Code or /design, and /design can also turn code into a live prototype on the canvas. It's available on every plan, including Free (out of beta since October 8, 2026), the standalone claude.ai/design closes on December 14, 2026, and /design-sync is in Claude Code. The essence is shrinking the designer-developer round-trip. Note that things can change — e.g., the June version's model isn't restated officially — so confirm the latest in the docs. Related: AI design tools compared, Claude Code Artifacts, spec-driven development.
FAQ
Q. What is Claude Design?
A. An Anthropic Labs design tool for creating designs through conversation. Describe what you want in words and Claude generates UI, prototypes, and one-pagers, which you refine via chat, inline comments, direct edits, and sliders. It launched April 17, 2026 as a research preview, with over a million users in the first week. Since September 16, 2026 you can use it just by asking for a design in an ordinary conversation (also from the Design template in the Artifacts tab, Claude Code, or the standalone claude.ai/design until December 14, 2026).
Q. What does the /design-sync command do?
A. It brings your repo's design system into Claude Design. When your design system already exists in code as React components, it reads the tokens and components and uploads them, so the designs Claude Design produces use your real components. The first sync verifies every component, so it can take a few hours on a large repo. The other direction (design to code, code to canvas) is handled by the handoff to Claude Code and /design: hand a finished design to Claude Code and it continues from your existing work instead of rebuilding from a screenshot.
Q. What changed in the June 2026 overhaul?
A. Mainly (1) design-system imports (build with your components, with output checked and corrected), (2) moving between design and Claude Code (/design-sync, handoff, /design), (3) direct canvas editing (drag/resize/align), (4) a "token-burning" fix via shared usage limits with chat/Cowork/Claude Code, (5) enterprise brand controls where an admin approves and locks a standard, and (6) expanded export connectors. It moved from prototyping toward an "on-brand, real-work workspace."
Q. Which plan can use it?
A. It came out of beta on October 8, 2026 and is available on every plan, including Free (Free / Pro / Max / Team / Enterprise), per the official help as of October 12, 2026. Usage draws from the same limits as chat and Claude Code. It's on by default, and on Enterprise it turns on by default on October 15, 2026 (owners can turn it on earlier). The mobile apps can request, view, and edit designs, while /design-sync and /design live in Claude Code. The standalone claude.ai/design closes on December 14, 2026, so migrate any design systems there early.
Q. Which model powers it?
A. At the April launch it ran on Claude Opus 4.7 (which Anthropic called "our most capable vision model"). However, the June overhaul announcement doesn't state the model, so we can't assert that "the June version runs on Opus 4.7." Models and details can be updated, so check the official page for current information.
