Anthropic announces Claude Design, an Opus 4.7 tool for generating prototypes and slides
Contents
Anthropic has finally stepped into Figma and Canva territory.
On April 17, 2026, Anthropic Labs launched Claude Design as a research preview.
It is a new visual creation product that generates prototypes, slides, one-pagers, and marketing assets from prompts and a back-and-forth conversation.
It climbed to 520 points on Hacker News, so the high-signal crowd was paying attention.
There were even reports that Figma’s stock price dropped right after the announcement.
That said, it is still a research preview.
The matchup is asymmetric — a polished, years-matured Figma and Canva versus a freshly released Claude Design — so this is not the stage where feature count can displace the incumbents.
That is exactly why “which one do I actually open in practice?” is the information you want most.
This post walks through what Claude Design actually is, compares it with Figma and Canva, and lays out scenario-by-scenario guidance on which tool to pick when.
Quick guide to picking one
Before the long version, here is the short answer.
- Starting a new product UI and running it straight into implementation → Claude Design
- Maintaining an existing product’s design system → Figma
- SNS banners, flyers, internal newsletters, decks by non-designers → Canva
- Mass-producing pitch decks or internal presentations via prompts → Claude Design
- “Redesigning” an already-shipped UI from the codebase → Claude Design
- Multiple designers editing the same artboard at once → Figma
- Handing files back and forth with external designers or agencies → Figma
- Rich prototypes with 3D, shaders, or audio → Claude Design
The ambiguous zone is between “revising an existing product” and “starting a fresh prototype.”
Extracting a design system backwards from an existing codebase is uniquely Claude Design’s move — if you do not need that, Figma or Canva is enough.
Below, the details behind the mechanics and the decision axes.
Visual generation on top of Claude Opus 4.7
The engine inside Claude Design is the recently released Claude Opus 4.7.
Opus 4.7 scored 87.6% on SWE-bench Verified, introduced an xhigh effort tier with self-verification, and strengthened both code generation and vision.
It generates a first draft from a text instruction, then you refine it through four channels.
- Steer the overall direction through chat
- Attach inline comments to specific elements for localized changes
- Edit the text inside the artifact directly
- Use the custom adjustment sliders Claude generates to move color, spacing, and layout in real time
The last one — “adjustment sliders that Claude generates” — is what sets it apart from other AI tools.
Claude assembles the control UI itself based on the design context, closer to having Figma’s property panel built on the fly.
Reading a codebase and building a design system
The piece most likely to pay off in practice is the onboarding-phase design system construction.
Claude Design first reads your team’s codebase and existing design files, then extracts colors, typography, and component definitions into a design system.
It applies that system automatically to every project you generate afterwards, so you do not have to paste your brand guidelines back in every time.
The New Stack notes in its review that “the cleaner the codebase, the cleaner the output” — the quality of your repo directly feeds back into the quality of the design output.
Teams who already keep their design system on the code side (Tailwind config, design-tokens JSON, CSS variables, Storybook, etc.) will get along well with it.
Flip side: you will not get a clean design system out of messy CSS and a pile of !important.
That part is written pretty honestly in the announcement, which is a nice touch.
Inputs and outputs
The range of input sources is wide.
| Input source | Use |
|---|---|
| Text prompt | Direction exploration from zero |
| DOCX/PPTX/XLSX | Redesigning from existing documents |
| Codebase | Design system extraction |
| Web capture tool | Grabbing elements from reference sites |
| Reference images / sketches | Cleaning up hand-drawn wireframes |
Outputs are equally varied.
Org-scoped share URLs, view-only links, group conversations with edit rights, folder saves, and exports to Canva, PDF, PPTX, and standalone HTML.
Anthropic also announced a partnership with Canva, letting you pull a Claude Design draft into Canva as a collaboratively editable document.
Canva is positioning Claude above its own in-house AI for this flow.
Feature comparison: Figma / Canva / Claude Design
The biggest question is what separates it from the existing tools.
Same “design creation product” label, but the assumptions and editing models differ quite a bit.
Laying them out axis by axis makes it easier to see where the decisions actually get made.
| Item | Figma | Canva | Claude Design |
|---|---|---|---|
| Status | Official (mature over years) | Official | Research preview |
| Main audience | Product designers, UI engineers | Non-designers, marketing, SNS ops | Engineers, PMs, early-stage startups |
| Input | Blank canvas plus components | Templates plus asset library | Prompts plus code plus documents |
| Editing model | Direct vector editing, Auto Layout | Template fill-in | Conversation plus inline instructions plus dynamic sliders |
| Collaboration | Multiplayer real-time editing | Sharing, comments, team permissions | Share URLs, group conversations with edit rights |
| Component management | Variants / Libraries / Tokens | Brand Kit | Extracted automatically from the codebase |
| Implementation handoff | Dev Mode / MCP / Figma-to-code | No code export | Direct hook into Claude Code (handoff bundle) |
| 3D, shaders, interaction | Plugin-dependent | Not supported | Code-driven, native support |
| Assets / stock | Via plugins | Large built-in stock | Generation-focused (no stock) |
| Learning curve | Steep (pro tool) | Low | Low if you can write prompts |
| Best-suited output | Product UI, design systems | SNS banners, flyers, general docs | Prototypes, code-driven demos, slides |
On feature count Figma wins decisively — vector editing, Variants, Auto Layout, Dev Mode, the whole “things a designer touches daily” region is concentrated there.
Canva’s weapons are template volume and stock assets; it keeps teams without a dedicated designer running.
Claude Design takes the opposite angle, re-framing prototype creation as an extension of “an AI that can write code,” with codebase ingestion and a direct line to Claude Code — two things the other two do not have.
What Claude Design does not yet have
Flagging the weaknesses of the research preview too.
Teams that cannot absorb these will stay on Figma and Canva.
| Area | What Claude Design is missing |
|---|---|
| Vector editing | No pixel-level bezier or pen-tool equivalent; you substitute conversation, which costs the designer’s tactile feel |
| Real-time co-editing | Not “two people moving the same artboard in real time” — it is URL-share plus group conversation |
| Component ops | Not the traditional Variants / Libraries maintenance flow; code is treated as the source of truth |
| Stock assets | No built-in asset library equivalent to Canva’s images, icons, and fonts |
| Stability | Research preview, so factor in spec changes, UI shifts, and the possibility of pauses |
| Deliverable compatibility | No output in .fig or other existing ecosystem file formats |
Easier to situate if you think of it as Opus 4.7’s vision and code-generation capabilities dropped into the design workflow.
The flip side: it has not fully stepped into the craft that designers have built up professionally.
Picking one by scenario
Given the feature gaps, here is how the common real-world cases shake out.
Spinning up an MVP solo or in a tiny team
Claude Design fits.
Prototypes emerge from the codebase and go straight into Claude Code for implementation.
You skip the “draw in Figma, then transcribe into code” step, and you can compose screen transitions and lightweight interactions from prompts.
Actively running an existing product’s design system
Stay on Figma.
Maintaining Variants, Libraries, and Tokens is Figma’s core, and Claude Design does not yet have that operational model.
If your Figma design system is already in two-way sync with your code-side design-tokens, there is no reason to break that flow.
Mass-producing pitch decks and internal presentations with AI
Claude Design is strong here.
You can explore multiple options in parallel via prompts and export to PPTX/PDF.
Direct text editing lets you tighten the details too.
The differentiator versus Canva’s AI is that you can feed it your own codebase and land on “decks that match the real product’s UI feel.”
SNS banners, flyers, newsletters, everyday creative work
Canva is fastest.
Template and stock volume keep the pace up, and Claude Design does not carry stock.
Even with Anthropic inside Canva now, the fill-in-the-template region stays on Canva.
Rich demos with 3D scenes, shaders, or audio
Claude Design, no contest.
It is one of the very few design tools that handles this natively via code, which is not a sweet spot for Figma or Canva.
You can export standalone HTML and publish it to the web as-is.
Working with external designers or agencies
Figma is the safe choice.
Figma files are the de facto standard, and Claude Design’s share URLs do not slot cleanly into the receiver’s workflow.
A hybrid run — initial exploration in Claude Design, final polish in Figma — is realistic.
Cleaning up the design by reading the code
Claude Design has this to itself.
Extracting a design system backwards from existing code is a move only it makes today; Figma and Canva have nothing in that slot.
Especially effective when you are reviewing UI consistency as a side effect of a refactor.
A designer doing vector editing every day
Stay on Figma.
Pen tool, bezier handling, and fine-grained Auto Layout are not yet replaceable by Claude Design’s conversational model.
This is not the area to consider switching.
In one line: not a Figma replacement, but an entry point for developers who want to thin the line between code and design.
The canvas a designer touches daily stays on Figma; engineers call Claude Design when they need to spin up a prototype or turn a document into slides.
Canva for SNS creative, Figma for the product itself, Claude Design for prototypes and internal decks — split the usage by purpose and they coexist fine for now.
Handoff to Claude Code
This is where Anthropic’s real target sits.
Once a design is settled, it gets packaged as a “handoff bundle” and passed straight to Claude Code for front-end implementation.
The exploration → prototype → production-code pipeline is designed to stay entirely inside Anthropic’s products.
flowchart LR
A[Text/Docs<br/>Codebase] --> B[Claude Design<br/>Prototype generation]
B --> C[Design system<br/>Auto-applied]
C --> D{Output target}
D --> E[Canva integration]
D --> F[PDF/PPTX/HTML]
D --> G[Handoff bundle]
G --> H[Claude Code<br/>Implementation code]It mirrors Figma’s “Dev Mode + MCP server + Claude Code” pipeline, but from Anthropic’s side and pointed in the opposite direction.
Figma has already shipped Claude Code integration, so this territory will stay contested for a while.
Availability and pricing
It is bundled into the existing plans.
| Plan | Availability |
|---|---|
| Claude Pro | Included |
| Claude Max | Included |
| Claude Team | Included |
| Claude Enterprise | Enabled via org settings |
Usage consumes your in-plan limit, with overage available as an add-on.
Enterprise orgs enable it from Organization settings, so individual users cannot push company data into it on their own.
Intended use cases
The uses Anthropic calls out.
- Interactive prototypes that can be tested without code
- Wireframes and mockups for product managers
- Parallel design exploration across multiple directions
- Pitch decks and presentation material
- Marketing collateral and landing pages
- Code-driven prototypes that include audio, video, shaders, and 3D