Claude Design: What It Makes and Where It Fits

Claude Design is Anthropic’s tool for visual work: you describe a prototype, a dashboard, a landing page, a one-pager or a slide, and Claude builds a working first version on a canvas beside the conversation. You refine it by chatting, by leaving comments on elements, or by editing directly, and it uses your organization’s colors, type and components once a design system is set up. Finished work exports as PDF, PPTX, HTML or a zip, goes to tools such as Canva or v0, or is handed to Claude Code to become real software. It is in beta on the Pro, Max, Team and Enterprise plans, as of September 30, 2026, and it now works inside any Claude conversation as well as at its own address.

What Claude Design is, and its status

Anthropic announced Claude Design by Anthropic Labs↗ (opens in a new tab) on April 17, 2026, as a research preview for Pro, Max, Team and Enterprise subscribers, powered at launch by Claude Opus 4.7. Its pitch was to make designs, prototypes, slides and one-pagers by talking to Claude, with a design system built from your codebase and design files.

The product has moved since. Anthropic’s help article Get started with Claude Design↗ (opens in a new tab) now calls it beta rather than a research preview, and describes it as one of the templates you can start an artifact from, so it works in any chat, in Claude Code and from the Artifacts tab. It sits beside two siblings, Claude Slides for presentations and Claude Docs for living documents, both also in beta. The original standalone app at claude.ai/design keeps working, and your existing projects stay there.

Where you use it

• In a conversation: ask for a design, such as “Mock up the onboarding flow we just discussed”, or choose Output, then Design, in the message box. Claude builds it beside the chat.
• In the Artifacts tab: pick a Design template.
• In Claude Code: ask for a design, or use the /design command to create, edit and sync designs, on desktop or in the terminal.
• At claude.ai/design: the standalone experience, with its own separate admin setting.
• In the iOS and Android apps: ask for a design and view it later, full screen. Editing on the canvas, starting from a template and changing sharing need the web or desktop app.

It is on by default on Pro, Max and Team. On Enterprise it is off until an owner turns it on under Organization settings, Artifacts.

What it makes

The output is working design on a canvas, not a flat image. Anthropic’s examples cover dashboards, landing pages, forms, mobile app flows and internal tools, and the launch post adds slides, one-pagers and interactive prototypes. You can give it context at any point: screenshots, competitor products or wireframes to copy a style from, an existing deck or document, a linked code repository so prototypes use your real components, and at launch Anthropic also described a web capture tool for taking elements from a website.

Design an internal tool for our support team to review refund
requests. Layout: a filterable queue on the left, the selected
request on the right with approve and deny buttons. Show customer
name, order date, amount and reason. Audience: support agents on
desktop. Use our Primary Button and Card components. Show me two
alternative layouts before you refine one.

The help article’s advice is to state the goal, the layout, the content and the audience, name components from your design system, say early whether it must work on mobile, and ask for two or three variations when you are unsure. Claude can also review a design for accessibility, contrast and hierarchy.

Design systems: why the output looks like yours

A design system is what separates Claude Design from a generic mockup generator. Anthropic’s page on setting up your design system↗ (opens in a new tab) says Claude extracts colors, typography, components and layout patterns from what you give it, and applies them to every new design and deck. There are three routes:

• From a chat: ask Claude to build one from uploaded files, connected apps, Figma files, decks, logos and fonts. Best for brand systems.
• From Claude Code: run /design-sync, which reads the tokens and components of a React component library directly. Best for product systems that live in code.
• From claude.ai/design: migrate existing team design systems, after which each becomes an artifact Claude can use in any chat. Migrated systems may need cleanup, and a banner offers to let Claude tidy them.

On Team and Enterprise plans one designer sets it up once and every new project inherits it. On Enterprise, admins can reserve publishing, setting the default and deleting design systems for specific people. The quality of the result follows the source: Anthropic warns that a messy codebase or an incomplete file shows up in the output.

Refining a design

• Chat for structural changes: new sections, a darker scheme, rearranging a dashboard, alternative layouts.
• Inline comments for one element: click the button and write “make this padding larger”.
• Direct edits for quick visual shifts: drag, resize and align, edit text, or use the adjustment sliders Claude creates for spacing and color.
• To explore without losing work, tell Claude to save what you have and try a different approach. There is no version history yet, so this is how you keep earlier directions.

Export and handoff to code

The Export button in the upper right of a project offers, per the help article:

• Files: a .zip, a PDF, a PPTX or standalone HTML. Export to Google Slides is available only at claude.ai/design.
• Other tools: Anthropic lists Adobe Experience Manager, Adobe for Creativity, Adobe Journey Optimizer, Base44, Canva, Gamma, HubSpot, Hyperframes, Lovable, Miro, Netlify, Replit, v0, Vercel and Wix.
• Claude Code: send to a local coding agent or to Claude Code on the web.

The Claude Code handoff is the important one for product teams. The launch post describes a handoff bundle you pass to Claude Code with a single instruction, and the help article says Claude Code then continues from the existing work instead of rebuilding from a screenshot. In the other direction, /design in Claude Code can import a design into your codebase or export your code as a live prototype to keep editing on the canvas. How Claude Code itself works is covered in Claude Code for beginners.

Designs start private. Share one and each person can view, comment or edit, following the same rules as sharing artifacts↗ (opens in a new tab), which differ by plan. What artifact sharing does and does not give a team is in Claude Artifacts sharing limits.

Limits to know

• Shared usage. Claude Design counts toward the same usage limits as the rest of Claude, including Claude Code. It used to have its own weekly allowance; that is gone. Large codebases and many iterations use more.
• No version history yet. Save directions deliberately.
• Comments can go missing. Inline comments occasionally do not appear on the page, though the comments view still has them; if Claude seems to miss one, paste it into the chat.
• Large repositories can lag the browser. Anthropic suggests linking them from Claude Code, and syncing a design system with /design-sync.
• Editing together is basic. Two or more people editing one project at once may not work reliably.
• Mobile is for viewing. Canvas editing and sharing settings need web or desktop.
• A “chat upstream error” is usually fixed by starting a new chat tab within the same project.

Claude Design vs Figma, Canva and v0

They overlap less than the headlines suggest, and Claude Design exports to two of them.

• Figma is a full design tool where designers own every pixel, with components, variables and collaboration built for design teams. Claude Design starts from a sentence and suits people who are not designers, or designers who want a first version fast. Figma’s own bridge to coding agents is covered in the Figma MCP server.
• Canva is a template-led editor for marketing and brand assets, and one of Claude Design’s export targets, so a one-pager can finish its life there. Canva’s own server for assistants is in Canva MCP.
• v0 by Vercel builds and deploys working Next.js apps with data and server code. Claude Design stops at the design and prototype, then hands off to Claude Code or sends the work to v0. See v0 by Vercel.

Where the follow-up work goes

A design review ends with a list: this screen needs an empty state, that button is the wrong component, the flow is approved and ready to build. Comments on a canvas are good for pointing at one element; they are a poor place to track what engineering still owes. fenbs is a task board that people and AI assistants share over MCP. Each change becomes a feature, enhancement or bug with a note naming the design and the screen, a priority from 1 to 10, and a plan once Claude Code picks it up. Claude Code connects with one command, reads the next task, and records its changes in History under its own name. fenbs does not store the designs themselves, and has no due dates or sprints.

claude mcp add --transport http fenbs https://fenbs.ai/api/mcp