Anthropic Labs opened a research preview of Claude Design on April 17, 2026, aimed at Pro, Max, Team, and Enterprise subscribers. The tool runs on the Claude Opus 4.7 vision model and produces visual work — interfaces, prototypes, slide decks, one-page documents — from a conversation rather than a toolbar.
How the workspace is arranged
The screen splits in two. You describe what you want in the chat panel on the left; Claude renders a design on the canvas to the right. From there you refine it three ways: keep talking, drop inline comments on specific elements, or manipulate the canvas directly.
A design system that carries across projects
During onboarding, Claude reads your team's codebase and design files to assemble a design system — brand colors, typefaces, component patterns — that later projects inherit automatically. Work can also start from a text prompt, an uploaded image or document (DOCX, PPTX, XLSX), an existing repository, or elements pulled straight off a live site with the web capture tool.
Finished work leaves through several doors: PPTX, PDF, or standalone HTML, or a handoff to Canva, Adobe, Gamma, Lovable, Miro, Replit, Vercel, or Wix.
Where Claude Code picks up
A design can be passed to Claude Code, which continues from the exact point the designer stopped — no screenshots, no rebuilding the layout by hand. The traffic runs both ways: developers can type /design in the Claude Code terminal to create or sync a design project. Design and implementation end up inside the same system instead of across a tool boundary.
The practical fit is broad. Designers explore several directions quickly, product managers sketch feature flows, founders and account managers turn a rough outline into a branded deck. Prototypes, wireframes, and design explorations all land in the same place.
Getting in
Use claude.ai/design on the web, or the sidebar in Claude Desktop. Pro, Max, Team, and Enterprise plans have access; Enterprise seats start switched off until an administrator enables them.
The usual sequence: create a project, attach or import a design system, add context material such as screenshots or a repository, describe the build, review what appears on the canvas, iterate, then export or share.
Context is the lever
Output quality tracks the material you supply. Screenshots of an existing interface, a competitor's flow, a rough wireframe, or visual references all help — as does attaching a slide deck or document whose style Claude should mirror. Linking a repository is the heavier option, and usually the one that makes a prototype feel production-adjacent, because Claude can see your actual components, architecture, and styling conventions.
A prompt works best when it names four things: the goal, the layout, the content, and the audience. Prompts in that shape look like:
- "Create a dashboard showing monthly revenue, with filters for region and product line."
- "Design a four-screen mobile onboarding flow that introduces the core features."
- "Build a landing page for a new API product with a hero section, code samples, and pricing."
- "Design an internal tool that lets the operations team approve content submissions."
Three ways to push back
Chat suits sweeping changes: "make the palette darker and more minimal," "add a settings panel on the right," "show me two or three alternative layouts."
Inline comments suit surgical work — click the element, describe the fix: "increase the padding on this button," "turn this into a dropdown," "use the primary brand color here."
Direct editing covers the fast visual adjustments: dragging, resizing, aligning on the canvas.
If you want to branch without losing ground, say so plainly — ask Claude to save the current version and then try something completely different. It archives the project and tells you where the copy lives.
Exporting and sharing
The Export button in the top right covers downloads as a .zip, PDF, PPTX, or self-contained HTML, transfers to outside tools, and a handoff to Claude Code (local agent or Claude Code Web). You can also generate an organization-level share link with view-only, comment, or edit permissions.
Working from the terminal
/design-sync in Claude Code pulls down the design system. The same channel can be opened over MCP:
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
Then run /design-login to authenticate.
Habits that pay off
Import the complete design system, styles, fonts, and components included, rather than a partial one. Establish the core layout before piling on interactions and detail. Be precise in feedback: "tighten the spacing between form fields to 8px" gets further than "this looks wrong." Raise responsive behavior early and state whether you're targeting mobile, tablet, or desktop. When the direction is unclear, ask for two or three options side by side rather than one take. And treat Claude as a collaborator with opinions worth soliciting — accessibility, contrast, information hierarchy, and usability are all fair questions to put to it.
A shared budget
Claude Design draws from the same usage pool as chat, Claude Code, and Cowork; there is no separate allowance for it. Heavy projects — large repositories, many rounds of iteration — consume proportionally more.