On 17 April 2026, Anthropic launched Claude Design, the first product from the Anthropic Labs programme. As a research preview, with Opus 4.7 under the hood, available for Pro, Max, Team and Enterprise plans. The category sits close to Figma and Canva, but Claude Design puts the accent somewhere else. If you work on prototypes, pitch decks, one-pagers or marketing visuals today, you get a tool that generates parts of the draft from natural language, documents and, most importantly, your own code.
For consulting and QA this is interesting because a boundary shifts here. Visual artefacts that previously had to pass through the designer bottleneck now arise on demand. What changes is less the act of designing itself and more the question of who works on which artefact, when, and at what level of maturity. The overview below explains how Claude Design works, where it shines and which gaps it currently leaves open.
What Claude Design is and isn’t
Claude Design is a web-based working environment in which a natural-language prompt is translated into an interactive visual result. The output ranges from simple slides through one-pagers to clickable prototypes that can include language, video, shaders and three-dimensional elements. Anthropic positions the product not as a replacement for designers but as a layer in front of them. The idea: quick visual sketches that are then refined further by designers, developers or marketing teams.
What it isn’t: a vector-pixel suite like Figma, where components are crafted with surgical precision. Nor a brand asset hub like Canva, which scales on finished templates and a library. Claude Design grows in the space between the two, with Anthropic’s typical signature: language-driven, context-aware, and with a strong eye on integration into existing engineering workflows.
The dual-pane work model
The interface splits into two areas. On the left sits the chat. You speak with Claude about the overall direction, upload reference documents, point at repositories or issue commands like “make the whole thing more formal”. On the right sits the canvas view with the generated artefact. There you can click directly into texts and edit them, comment on individual elements, or fine-tune spacing, colour or layout density via automatically generated sliders.
The principle is familiar from the current Figma AI panel or the canvas modes inside Claude itself. The implementation feels more tightly integrated though. Every change in the chat reflects immediately in the canvas, and every canvas change appears as context in the chat. That reduces the typical back-and-forth between tool and prompt.
Inputs: what goes in
Claude Design accepts considerably more than text prompts. DOCX, PPTX and XLSX files are supported as content or style references, as are PDF documents and images. A web capture mechanism lets you pull elements directly from web pages. And, most relevant of all, you can connect to a GitHub or GitLab repository, or attach existing design files. Several design systems per workspace are possible, which helps agencies with multiple clients or companies with several product lines.
Outputs: what comes out
The export paths are deliberately wide. Claude Design exports as PDF, PPTX, HTML file, ZIP archive or shares the result via link. A native Canva integration lets designs hand off as editable Canva files, and the brand kit stays intact rather than being flattened. For technically driven prototypes there is a handoff into Claude Code: from the visual draft you get a runnable code branch directly, with video, audio, shader effects or three-dimensional elements.
What’s notably missing: a Figma export. Anthropic explicitly positions Claude Design alongside Figma, not as an upstream feeder. If you want to keep using Figma as a production tool, you have to take the detour via HTML or image formats.
The centrepiece: codebase awareness as a design system source
The actual leap forward over Figma AI and Canva Magic Studio sits in codebase awareness. When you give Claude Design a link to your repository, the model reads React, Vue or Svelte component libraries, pulls out design tokens, CSS variables and Tailwind configurations, and uses existing pages as a structural reference. The result: new drafts use the right colours and font sizes, and they also use the component patterns actually present in the product.
For engineering teams this is the most exciting point. The typical break between design proposal and production reality (designer drafts in Figma, developer adapts to existing components, details fall through the cracks) is anticipated here. The draft already knows the system it will later be built from. For QA that means prototypes can be checked for consistency earlier, and deviations between draft and reality become visible as a structural decision instead of late implementation compromises.
Refinement: inline comments, sliders, direct edits
Refinement after the initial generation runs through three channels. First, direct text editing: click on a text, type, done. Second, inline comments on individual components (“more whitespace here please”). Third, automatically generated sliders for parameters fitting the current task, such as spacing, colour saturation, padding or grid density. The sliders aren’t drawn from a pre-baked set, they are produced in the context of the artefact at hand.
That feels smaller than it is. For non-designers, this mechanic means they can adapt drafts without knowing the Figma vocabulary. For experienced designers, the iteration loop between “first sketch” and “presentable” gets shorter. In pitch presentations, client materials or internal concept sketches, that’s a noticeable difference.
Collaboration and team context
At launch, sharing runs through organisation scope. Projects can be private, organisation-wide or shared by link, with view and edit rights. Inside a project, group conversations with Claude are possible. Several team members work on the same canvas and see what Claude proposes in response to which request. A classic team-sharing surface for prototype reviews is still missing at launch; according to Anthropic, additional integrations will follow in the coming weeks.
Launch partners: Canva, Brilliant, Datadog
Anthropic explicitly named three partners. Canva is integrated as an export target, designs land as an editable file rather than a flat PNG. Brilliant, a learning platform, reports that the path to interactive prototypes shrank from over 20 prompts to two. Datadog uses Claude Design for dashboard prototyping, accelerating alignment between product and engineering.
These three references reveal the intended use case: quick learning prototypes, dashboard drafts, interactive mockups that come from product or engineering rather than the design team.
Availability, cost, limits
Claude Design runs as part of existing Claude subscriptions, with no separate price. Anyone on Pro, Max, Team or Enterprise gets access as part of the research preview, sharing usage with their normal token budget. That is the most important point for planning. A more extensive design session, for instance building out a design system plus a prototype plus several iteration rounds, can consume a substantial portion of the weekly token quota. Wireframes are cheaper than fully developed mockups. If you want to work beyond the subscription allowance, you move into pay-as-you-go territory. There is currently no access on the free tier. Enterprise organisations need their admins to enable the feature.
Competitive landscape: Figma, Canva, and what’s shifting
The launch made waves. Figma’s stock dropped around five percent on launch day, and the twelve-month trend already stood at minus fifty percent. A few days before the launch, Mike Krieger, CPO at Anthropic, had stepped down from the Figma board. The market reads Claude Design as a strategic move, not an experimental sandbox.
In practical terms: Figma stays strong on detailed work and component discipline, Canva on brand scaling and template breadth. Claude Design occupies the corridor in between, with quick conception, tight coupling to real code and natural language as the primary interface. All three tools will exist alongside each other for the foreseeable future, and the question is less “which one wins” and more “which tool fits which phase in the product process”. Early, conceptual, code-near: Claude Design. Detailed, production-ready, component-driven: Figma. Scaled, brand-conform, high-volume: Canva.
Open flanks and early limitations
For the launch state there are a few points to keep an eye on. Built-in team collaboration for prototype reviews is still thin. If you want to comment or sign off, you currently export and align outside the tool. The token economics are non-trivial for intensive exploration phases. Spend three hours on a vision demo and you’ll soon find yourself in pay-as-you-go territory. A Figma export is missing. And, easy to overlook: the quality of codebase awareness depends heavily on how clean the repository is. A well-documented design system with clear tokens gets precise output back; a historically grown mixed project produces patchy results.
What this means for QA, product work and decision-makers
From a consulting perspective, three effects look likely. First, the number of visual artefacts per project will rise. Concept variants that used to be discussed verbally or via whiteboard sketch now arrive as clickable prototypes. That increases clarity in early decisions and asks for review rounds to stay disciplined. A prototype isn’t a commitment, it is a discussion artefact. Second, the boundary between product, design and engineering shifts. When a product manager can generate a first version from their own repository, the conversation with engineering is no longer about feasibility, it is about depth of detail. Third, and this is the QA angle, testability of prototypes becomes a question. When Claude Design builds prototypes from real code with real interactions, usability checks, accessibility audits or content review loops can be set up earlier than before.
What you can do concretely: if you have Pro, Max, Team or Enterprise, you get access via the Claude login. A sensible first step isn’t a big campaign visualisation, it is a small scope. An onboarding screen for an existing internal tool, for example. While doing that, connect the repository and check how far the codebase awareness carries. If you get clean results there, the tool will be useful in larger initiatives too. If accuracy stays thin, you at least walk away with an honest maturity check of your own design system.
Claude Design isn’t a panacea and it isn’t a finished production suite. It does shift the starting point. Visual work no longer begins on a blank canvas, it begins with a conversation with a system that knows your context. For some teams this will be the most relevant productivity lever this year. For others it stays one option among several. The difference will turn on how clean the technical foundation already is, and on how open a team is to bringing decision-makers, designers and engineering closer to the canvas together.
