Design's Claude Code Moment Has Arrived设计圈的 Claude Code 时刻来了

Anthropic released Claude Design today, and I got to try it right away — the shock was no less than the first time I used Claude Code to write code. To borrow a line from teacher flypig:

I just tried it, and here's what I'll say: Claude Design makes Google's Stitch look like a joke.

This is the Claude Code moment for design. I'm not going to say sensational things like "design is dead" or "designers will be replaced" — I just want to say:

The gap from idea to high-fidelity interactive prototype has basically disappeared, and non-designers can finally produce deliverable designs independently; designer productivity is getting an exponential boost, but design outsourcing and traditional design tools are going to shrink significantly.

Figma's stock plunging today also indirectly confirms this.

First, my hands-on test case

Let me show you a complete case — a design I made in about 3 rounds of interaction. It's not just a static image or webpage; most of the links inside can actually be clicked and interacted with.

My initial prompt was pretty crude:

Help me design a Mac App for a writing agent that supports multiple workspaces, where you can see the workspace's documents (markdown, text documents), manually edit documents, also call an agent to edit markdown documents, and also create/edit documents within a chat conversation

Mainly because I hadn't figured out exactly what I wanted, and was hoping it would help me think it through — so I kept it fairly vague.

It then gave me some questions to choose from — some single-choice, some multiple-choice, and I could also type my own answer, or let it decide on its own.

A bit later I checked back, and it gave me 3 options to choose from — just like a professional designer, first confirming your requirements clearly, then giving a few different directions to pick from.

None of the results were static images or static webpages — they were all clickable and interactive.

After looking them over, I felt both Option 2 and Option 3 were good, but each had issues, so I needed to combine them. So I gave some revision notes, and also sent it a screenshot of Codex for reference, asking it to combine Option 2 and Option 3, incorporating some of Codex's design as well.

It quickly gave me a new version that was basically what I wanted but hadn't been able to articulate clearly. For example, it split Documents and Chat with a single tab — that was exactly the design I liked, better than the "stacked top-and-bottom" layout I had originally imagined.

I was quite satisfied with the overall design and couldn't come up with better requirements, so next was polishing the details. It hadn't implemented document edit history, so I asked it to add that piece.

The prompt was simple:

Based on the current design, help me design the history section, so users can more easily view document edit history and compare differences

It quickly produced a version, but when I opened it up, it didn't work well.

I was just about to point out the issue and ask for a fix, when I found it had already detected the layout problem itself and fixed it on its own.

The fixed version looked great — no layout issues, and it even let you conveniently pick any two versions to compare changes.

Looking at the message history on the left, it has an automatic error-correction mechanism.

The final output was React code and stylesheets.

Several things surprised me throughout the process: it proactively asks about requirements, it offers multiple options, it can understand mixed multi-image references, it can self-check and self-correct, and its output is runnable code rather than a static draft. This collaboration model is unlike any design tool before it.

What exactly is Claude Design

First, the basics. Claude Design is a new product released today by Anthropic Labs, powered by Claude Opus 4.7. It's available to Pro, Max, Team, and Enterprise subscribers (off by default for Enterprise, needs an admin to enable it), and you can access it directly at claude.ai/design.

The interface is simple: chat on the left, canvas on the right. You describe what you want, and it draws it out on the right; you refine it via chat, inline comments, direct editing, or auto-generated adjustment sliders. Once done, you can export to HTML, PDF, PPTX, ZIP, send it to Canva to keep editing, or hand it straight to Claude Code to turn into production code.

Sounds like it's just an AI version of Figma? It's not.

Ryan Mather is on Anthropic's own design team, and he personally handles 7 product lines at once. In a tweet he posted today, he made a key point:

Don't use Claude Design the way you'd use a canvas tool. It's a different animal, with its own superpowers. Honestly it's more like Claude Code than a canvas-style design tool. https://x.com/Flomerboy/status/2045162328593670321

This sentence is the key to understanding Claude Design.

The fundamental difference from Figma, Canva, and the rest

Over the past year, Figma added AI, Adobe added AI, Canva added AI too. Their logic is all the same: add an AI plugin layer on top of a human-centered canvas tool, to help you draw a bit faster, write copy a bit more easily.

Claude Design takes a different path: AI is the primary generator, and humans are primarily the reviewer. The whole tool's skeleton is built around this assumption.

This distinction sounds abstract, but it translates into several very concrete product differences.

The output is runnable code, not a static design draft

In my Mac App example above, what I ended up with was React + CSS — something that actually runs, where links can be clicked, tabs can be switched, and versions can be diffed. This is a different species from "generating a pretty UI image."

Organization-level design systems

Once you upload your codebase, slide decks, and brand materials, it extracts colors, fonts, components, and layout conventions, and every subsequent project automatically applies them. Designers at Brilliant reported that complex interactions that used to take 20-plus rounds of prompting in other tools got done in just 2 rounds in Claude Design — because it already "knows" your design language.

Understands your codebase

It doesn't treat code as a screenshot — it actually reads the component structure, framework patterns, and file organization. So after a designer finishes and clicks handoff, what the engineer gets isn't "here's an image, go replicate it," but rather "here's a draft implementation that plugs directly into your existing component library."

It can build tools, not just designs

The official blog mentions a capability: you can ask Claude Design to temporarily generate a dedicated tool for you — say, a color picker tailored to your brand palette, a custom spec generator, or a small interactive prototype-testing tool. The output isn't limited to "design files" — it's "any computational artifact that helps you think through the problem."

Datadog's feedback is interesting too: what used to take a week, spanning multiple rounds of brief → mockup → review, can now be turned into a finished prototype in a single meeting while chatting it through, with engineers even joining the design conversation live.

This isn't like a "Figma but 30% faster" optimization. It's more like a different way of working.

What can it actually be used for

Based on the official blog and currently disclosed use cases, Claude Design can cover at least these kinds of work:

Product prototypes and interaction flows. Things like my Mac App example, or a 5-screen onboarding flow, a search experience with filters and a detail drawer, an approval workflow queue. This is its strongest area.

Presentation decks. A 10-page Q1 results deck, a 15-page board roadmap, pre-meeting client materials, an all-hands deck. Exported PPTX is directly usable, and can also be sent to Canva for further editing.

Marketing materials. Landing pages, social media graphics, campaign visuals.

Internal tooling backends. Admin panels, content moderation queues, permissions management interfaces. This used to require dedicating a frontend role, but now a PM can produce a deliverable prototype on their own.

Design exploration. Producing 3 to 5 directions at once for you to choose from. In the past this meant "I don't have enough time so I can only show you two versions"; now it's "I'll produce five versions, you pick one and we'll refine it."

There's also something the official materials didn't emphasize but that's actually quite important: video demos. Ryan Mather mentioned it can directly generate video-form demonstrations, not just static images. This is a new capability for product launches, user testing, and investor communications.

To sum up the usage boundary in one line: anything with clear structure, well-defined information blocks, and describable interaction logic, it handles well; purely emotion-driven abstract art creation isn't what it's here to compete for.

This isn't just about design

The fact that Ryan Mather alone serves 7 products is a signal. This would have been impossible two months ago.

For designers

Productivity will get an exponential boost, but team sizes will very likely shrink. Work that used to require 5 designers at a company can now be done by 1 to 2, and per-person output is actually higher and better. Those who remain will become more valuable, because what they do is work that truly requires judgment: brand direction, key illustrations, naming, strategic-level decisions. The remaining 80% of execution work gets taken over by the model.

The same script, already played out before

In programming, it was Claude Code — engineers who could use AI well saw their output multiply several times over, while those who couldn't keep up gradually got squeezed out; in analytics, it's various AI-assisted data analysis tools — analysts went from being "the ones who write SQL" to being "the ones who ask questions together with AI." Every time a new profession hits this point, it follows the same trajectory: per-capita output soars, those at the top capture more, and opportunities for those at the bottom gradually disappear. Design has just reached this inflection point.

For PMs, founders, and marketers

This is an entirely new capability. In the past, if you had an idea, you'd either sketch it out and queue up for a designer, or grit your teeth and make a depressingly ugly slide deck yourself. Now you describe the idea clearly, and it gives you a finished product you can hand straight to engineers, investors, or clients.

For Figma, Adobe, and Canva

This is a wake-up call, but a 10% stock drop probably only reflects the surface-level shock. There's a deeper signal buried in Ryan Mather's tweet: Anthropic's own design team already treats Claude Design as their primary tool, and Figma only comes up occasionally now. If Anthropic's own designers are no longer primarily using Figma, why would other tech companies keep primarily using it? In another 2 to 3 quarters, when enterprises start reconsolidating their annual design-tool budgets, renewal numbers for the legacy tools will give a more direct answer than the stock price does.

For company decision-makers

There are two things that need to be recalculated. One is design headcount. Mather covering 7 product lines by himself is, as a baseline, the workload that used to require 3 to 5 designers; when that number shows up on the annual budget sheet, it's hard for it not to get questioned. The other is tool subscription costs. When the core work can basically be completed within a single product, the accounts that used to be scattered across Figma, Sketch, Notion, Miro, and Keynote will get pulled out and re-evaluated.

For engineers

This is welcome news, long overdue. The handoff from design to engineering has always been one of the most painful steps: designers work by visuals, engineers work by code, and everything in between relies on Figma annotations and back-and-forth review. Now what comes out of Claude Design already carries component structure and a draft implementation, cutting the implementation cost by an order of magnitude directly.

Other notes

Claude Design is still a research preview right now, and there are some real-world limitations to be aware of:

It doesn't yet have audit logs or usage tracking, doesn't support data residency, and uploaded assets are stored persistently. If you're at a company with strict compliance requirements, it's best not to put your most sensitive design materials directly into it in the near term.

Right now it only has a web interface, with no open API. If you want to embed it into your own product, that's not possible yet — you can only build similar capabilities yourself based on the Claude API and Agent SDK. But Claude Design's strength really comes down to the enhanced multimodal capability of the Opus 4.7 model — in theory, you could build a similar product yourself using Opus 4.7.

But just like with Claude Code — even though it uses the same Claude models, Claude Code just performs better in many respects, after all, only Anthropic itself really knows how to get the most out of its own new models, and on top of that, it can turn around and use the design data and interactions from user usage to train the next generation of models, forming a data flywheel.

This advantage is one that other companies like OpenAI and Gemini won't be able to catch up to quickly in the short term.

Pricing and quotas

This table is compiled based on Anthropic's official Claude Design pricing documentation; the official docs don't disclose specific weekly allowance figures, so these cells have to be marked "not specified."

I'm personally on Claude Max@5x, and just designing one App and generating one Slides deck used up an entire week's quota.

Model, specs, and multimodal capability

The only underlying model currently explicitly disclosed for Claude Design is Claude Opus 4.7. The official docs don't state whether users can switch to Sonnet or Haiku within Claude Design, so this should be treated as unspecified / most likely fixed. Meanwhile, Anthropic's model overview page provides a comparison of its current flagship models, which helps explain the reasoning behind Claude Design's model choice.

The data in the table above is compiled from Anthropic's model overview page; the "Claude Design adoption relationship" comes from the official Claude Design blog post.

In terms of visual specifications, Opus 4.7 is the first Claude model to support high-resolution images, with a maximum native resolution of 2576 pixels on the long side, and up to roughly 4784 image tokens per single image. This matters especially for Claude Design, since it relies heavily on screenshots, web captures, prototype comparisons, and the visual semantics of documents. At the same time, Opus 4.7 uses a new tokenizer, which for the same text may produce roughly 1x-1.35x more tokens than Opus 4.6 — meaning developers need to re-estimate max_tokens, caching, and cost for image, code, and long-context scenarios.

Finally

The impact of Claude Design is not just an efficiency upgrade for the design world — it feels more like a profound paradigm shift. In the past, designers were used to painstakingly refining work on the canvas and manually annotating it; now, AI can go directly from an idea to a runnable, high-fidelity interactive prototype, shifting the designer's role from pure executor to strategic decision-maker. This shift isn't confined to design — programmers, analysts, marketers, and product managers have already begun, or are about to begin, similar transformations.

In an era like this, what's truly being redefined is not just how we work, but how we understand productivity and creativity. AI won't replace human judgment about beauty, insight into branding, or strategic planning — but its arrival gives everyone the chance to focus more on these most valuable capabilities.

Perhaps a few years from now, we'll look back at today's Claude Design the way we now look back at our first time using Claude Code, and realize that a historic turning point happened without our even noticing — and that we had just stepped into that brand-new future.