Claude Design: Anthropic's new product aiming to bypass Figma

Anthropic knocked 7% off Figma's stock in a single day. Not with a funding round, not with a pivot. With a product. Claude Design launched on April 17, 2026, three days after Mike Krieger, Anthropic's CPO, stepped down from Figma's board. And the tool squarely raises the question Figma, Lovable, and v0 had left hanging: what does a tool look like that actually bridges the gap between the idea and shipping to production?

At Scroll, we've been working for months with projects that arrive with an AI prototype in hand (mainly Lovable, Bolt, v0), and that need proper engineering to hold up in production. Claude Design answers precisely the part of the problem the other tools had left open: extracting a design system from an existing codebase and the direct handoff to code via Claude Code.

This article walks through what Claude Design actually does, where it stands against Figma, Lovable, and v0, the limits already becoming visible, and what happens concretely when a Claude Design prototype lands at an agency to be taken to production.

What Claude Design actually does

Claude Design is an AI-powered interactive visual generator, published by Anthropic and available in the Design tab of Claude.ai. You describe what you want (a landing page, an app, a pitch deck, a marketing one-pager) and the tool produces a first version in seconds. The output is not a static image: it's live HTML, clickable, testable, which you then refine through voice, inline comments, or sliders.

The key differentiator fits in one line: Claude Design can read your codebase and Figma files to automatically extract your design system, then apply that system to any new project. Where Lovable and v0 can import a Figma design but don't infer a consistent design system from a GitHub repo, Claude Design does it natively.

The product is powered by Claude Opus 4.7 and available to Pro, Max, Team, and Enterprise subscribers. Team and Enterprise plans may require admin activation. The status is that of a research preview: features are evolving, and the accessibility of the prototypes it produces still needs to be validated by independent audits.

Under the hood: 6 features that change the game

Prompt-to-prototype generation. The core of the product. Natural language description, interactive HTML as output. Early users report visually polished results on landing pages and simple app mockups. On more complex flows (dashboards, business workflows, heavily conditional UIs), quality depends heavily on prompt precision, and the tool needs several iterations to land.

Design system extraction. On first run, Claude analyzes your GitHub repo and/or Figma files to infer palette, typography, components, spacing, grid. One user (@eMeRiKa on X) shared a test where they pointed Claude Design at the repo of an iOS Markdown reader and got a prototype that visually matched the existing app without any additional prompt. That's what makes the tool potentially more useful than a blank-page generator for teams that already have an established visual identity.

Inline editing. Three modes coexist: commenting on an element ("increase contrast on the CTA"), direct text editing like in a classic editor, and sliders to adjust spacing, colors, and layout live. That last point matters: it avoids a full regeneration on every iteration, and the tokens that come with it.

Multi-source imports. Claude Design accepts as input a text prompt, images (screenshots, inspiration), DOCX/PPTX/XLSX documents, a URL to scrape, or an entire codebase. You can turn a Word spec sheet into a mockup, or say "redo this section of stripe.com's homepage with our branding" and get a coherent rendering.

Exports: Canva, PDF, PPTX, HTML, Claude Code. This versatility is what separates Claude Design from a pure-dev tool like v0. A marketer can export to Canva and edit it with their team. A founder can pitch in PDF. And, critically, a developer can send the bundle to Claude Code with one instruction and get code to iterate on.

Voice, video, 3D, shaders, built-in AI calls. A prototype can embed a functional chatbot, a video player, a 3D element, at the mockup stage, not as a placeholder. Gimmicky on some projects, genuinely useful on the ones selling an AI feature: you can show the product in action instead of a frozen mockup.

Who it's really designed for

Anthropic lists five profiles: experienced designers, product managers, founders, marketers, account executives. The list is fair, but it hides the strategic bet: the real target is non-designers. People who've never opened Figma. Founders preparing their first pitch deck. PMs who needed a mockup to validate a flow but had no one available to make it.

For a senior designer fluent in Figma, Claude Design is an exploration accelerator: interesting but not revolutionary. For a founder or PM starting out, it's possibly the first time they can produce a visual asset on their own that doesn't look like a 2015 slide.

It's this expansion of the user base that puts the collaborative design market under pressure. Figma remains untouchable for multi-player editing and advanced vector work. But the segment of "I need a credible mockup fast, without a design team," which represents a non-trivial share of early-stage projects, can shift toward Claude Design.

Claude Design vs Figma, Lovable, and v0

Each tool plays on a different part of the journey. Comparing them without nuance creates false equivalences. Here's what to remember about each.

Figma remains the reference for collaborative vector design. Free up to 3 files, $16/month per editor beyond that. Its moat fits in three words: multi-player, components, libraries. Figma Make (Figma's AI feature) generates prototypes from a prompt, but without design system extraction or native handoff to production-grade code. Established design teams won't switch to Claude Design. They'll add Claude Design to their stack for quick exploration.

Lovable generates functional full-stack apps, with DB and auth built in. It's the closest thing to an "MVP in a prompt." It now imports Figma designs through a shared link, but doesn't infer a design system from a codebase. Its strength: the backend layer works from the first iteration, something Claude Design doesn't do (Claude Design produces the front; Claude Code handles the back in a second step). Its weakness: the limits that appear after the prototype, on scaling, security, and code quality.

v0 by Vercel is the most dev-oriented of these tools. It also imports from Figma and produces directly usable React/Tailwind code. Less versatile on exports (no Canva, no PPTX), but more robust on the generated code side. Complementary to Figma for dev-centric teams.

Claude Design sits at the intersection: design system extraction from a codebase, interactive prototypes with voice/video/3D/AI calls, multi-format exports, handoff to Claude Code. The promise is broader coverage than any of its competitors, at the cost of high token consumption and no real-time collaboration.

Three clear verdicts come out of this matchup. Claude Design doesn't replace Figma for collaborative team editing. It doesn't replace Canva for quick social assets. But it eliminates the awkward step between mockup and code. And that's precisely where a lot of projects stall today.

The real bet: closing the loop from idea to live page

Anthropic's product positioning becomes clear when you stack the bricks. Claude for conversation and reasoning. Claude Code for development with 1 million tokens of context. Claude Cowork for team collaboration around documents. Claude Design for visual and prototyping. MCPs to connect everything (Webflow, Supabase, n8n...).

Anthropic isn't building a Figma competitor. Anthropic is building an integrated system for shipping digital products. In that logic, Claude Design is the brick that was missing between the idea and the code. The resignation of Mike Krieger from Figma's board three days before launch (covered notably in TechCrunch) confirms that the strategy is deliberate.

The handoff from Claude Design to Claude Code is the critical piece. Once a design is validated, Claude Design packages it into a bundle you hand to Claude Code with a single instruction. Claude Code then picks up the design system, components, structure, and produces code.

On paper, that's the promise few tools have actually delivered. No vibe-coding tool has managed to take an idea to production without breaks. In practice, the handoff still needs auditing: the code Claude Code produces is functional but requires the same review as any AI-generated code (security, scaling, tests).

The blind spots we're already seeing

Token cost. It's the first issue surfacing from early users. A review published by VibeCoding reports a case where two design sessions consumed 58% of a Pro weekly limit. Claude Design's outputs are rich (full HTML, interactions, assets), and that richness costs. On the $20/month Pro plan, a few intensive sessions drain the quota fast. Anthropic pushes toward Max ($100–200/month) for regular use, which repositions Claude Design as a team tool more than a solo-testing tool.

No real-time collaboration. Claude Design is conversational and single-seat. Two designers can't edit the same project simultaneously. Sharing is by org-scoped URL, with view or edit rights, but no live cursors, no in-line comments à la Figma. If your design culture is multi-player, that's a structural limit, not a temporary omission.

The extracted design system is still an inference. Claude Design doesn't read your design system, it deduces it. On edge cases (rare variants, contextual tokens, scoped components), the inference regularly gets it wrong. On an existing project, expect a re-prompting phase to correct the mapping. On a from-scratch project, the generated design system is consistent but generic, and won't pick up a brand's personality without human intervention.

The generated code isn't production-ready. "Works in demo" is not the same as "holds 10,000 users." The recurring pitfalls we see on Lovable and v0 projects will show up here too: database scaling, security, auth handling, migrations, third-party integrations, tests, monitoring. Claude Design plus Claude Code accelerates generation. Not validation.

Accessibility, SEO, performance: the blind angles. Generated prototypes are visually convincing. In practice: accessibility (ARIA, contrast, keyboard navigation, screen readers) isn't audited automatically, on-page SEO (title hierarchy, schema, meta, sitemap) is out of scope, and Core Web Vitals (LCP, INP, CLS) aren't optimized. On a product that needs to rank, convert, and last, those three blind spots become items to address before going live.

From Claude Design prototype to production product

What we tell people who reach out with an AI prototype in hand is always the same thing: clarify where you are before deciding the next steps.

In validation mode. You're testing an idea, pitching investors, running an internal concept, or you need a marketing one-pager for a short campaign. In those cases, the Claude Design prototype is the final deliverable. Export to PDF, Canva, or URL, share, iterate. That's exactly the use case the tool was designed for.

In scale mode. Your product has to serve more than a few hundred concurrent users, rank on Google and AI engines, handle sensitive data (auth, payments, GDPR), integrate with an existing IT stack, or be maintained for years. Here, the Claude Design prototype is a starting point. Not a product. Shipping to production requires engineering and design-system work that goes beyond what the tool can do alone.

In between. It's the most common case. The prototype works, people like it, it could go to production, but some areas look fragile: the generated design system lacks variants, the auth is held together with tape, the database wasn't planned for scale. Getting an audit before investing weeks of development saves the technical debt we typically see on Lovable projects taken over after the fact.

Dr Lovable is the Scroll service built for these situations. The name keeps the original use case's brand, but the scope today covers the full range of AI-prototype recoveries: Lovable, Bolt, v0, Framer AI, and now Claude Design. It's a consulting and recovery service that comes in three tiers depending on project stage: short consultation to tell you where you stand, structural recovery to put a prototype back on track, and ongoing support to advance alongside the development.

On a project that arrives with a Claude Design prototype, the work typically includes: auditing the design system extracted by Claude and consolidating what's missing, reviewing the code produced by Claude Code with refactoring of auth, DB, and security, making it accessibility- and SEO-compliant, integrating with existing business tools (Supabase, Directus, Airtable, Webflow, CRM, ERP), and shipping with monitoring in place. The point is to finish what the AI started, with the guardrails that were missing.

If you have a Claude Design prototype in progress and you're thinking about what's next, let's talk. Whether it's Claude Design, Lovable, v0, or another tool, the approach is always the same: measure the gap between what you have and what a production-grade product actually requires, then decide together what makes sense.

Claude Design is going to accelerate a lot of teams that didn't have the means to produce clean visuals. It's also going to produce a new wave of prototypes that look ready and aren't. Exactly like Lovable did two years ago, and Bolt eighteen months ago. Our industry, ourselves included, uses these tools every day. The point isn't to choose between AI and human expertise, but to know when one takes over from the other so a project actually holds up.