Mike Krieger 前脚辞掉 Figma 董事会，Anthropic 后脚就把 Claude Design 发了出来，Figma 股价当天又跌 7%。这不是 Figma 的替代品，它替代的是 Figma 和代码之间那个尴尬的中间步骤。

为什么说"又"？上个月 Google 刚把 Stitch 升级成 AI 原生设计平台，Figma 当天就被砸下去 8.8%。这边还没缓过来，Anthropic 这一刀又补上。相比 2025 年 8 月 1 日 Figma 上市的历史高点 142.92 美元，累计下跌约 76.5%，年初至今（2026）跌幅 49%，8 个多月蒸发了超过四分之三的市值。

两家巨头一周内先后下场做设计工具，起手瞄准的都不是专业设计师，而是那些"脑子里有 idea，但打不开 Figma 的人"。

一句话讲清它是什么

你打字，它出设计稿。用对话方式，一句话生成设计稿、原型、幻灯片、一页纸等成品，由 Claude Opus 4.7 的视觉能力驱动。

想做一个产品登录页、一份融资 PPT、一张落地页，以前得打开 Figma 画半天，或者在 Canva 里拖模板，或者找设计师排期等三天。Claude Design 让你跟 Claude 聊天一样把需求说出来，右边画板上直接出一版可以点的页面。

TechCrunch 的例子很直白：你可以让 Claude "prototype 一个安静的冥想 App，色调要柔和、字体要宁静，加个深色模式切换"。它生成完你再调颜色、字号、加个按钮。

产出不是静态图片，是真的 HTML。鼠标悬停有反应，切换主题能切，按钮能点。导出可以选 PDF、PPTX、Canva、纯 HTML 文件，或者最有意思的一条：打包扔给 Claude Code 去写生产代码。

它到底给谁用

Anthropic 官方点了六个场景：

• 真实原型：把静态效果图变成能直接发出去的交互原型，不用走代码评审、不用开 PR
• 产品线框图：PM 画清楚功能流程，交给 Claude Code 实现或给设计师再打磨
• 设计探索：设计师一次并排出 N 个方向，不用再挑 2-3 个硬着头皮试
• Pitch deck 和演示：从粗大纲到完整带品牌色的幻灯片，导出 PPTX 或送到 Canva 继续精修
• 营销物料：落地页、社媒素材、活动视觉，设计师后期再优化
• 前沿设计：用语音、视频、3D 着色器、内置 AI 做代码驱动的原型

实测效果

提示词：Prototype a serene mobile meditation app. It should have calming typography, subtle nature-inspired colors, and a clean layout.（设计一款宁静的移动冥想应用。它应具备平和的排版、柔和的自然色调以及整洁的布局。）

然后它会先问你一些基本的问题：需要那些界面、配色、字体、风格等等。这种交互方式非常适合小白，而且很可控很直观。

提交后，它就开始设计了，这个交互的过程和 Claude 构建应用程序差不多。左边是聊天窗口，右边是设计界面，你可以看到过程和产出的各种代码、设计文件。

大概几分钟就能跑完，复杂一点可能需要 10 来分钟。看看效果：

还可以直接就预览修改，调整配色字体什么的。

完整的 CSS 代码都有，可以直接导出。

设计师不用紧张。它不替代你的多人协作，不替代你的精修。它替代的是你最讨厌的那部分：做给老板看的那版效果图。

三个关键功能

Design system extraction：让 Claude 先读一遍你们家的样式说明书

Design system 是你公司 logo 用的那个颜色、按钮圆角永远 8 像素、标题永远用苹方粗体、段落间距永远 24 像素，所有这些"我们家的东西该长什么样"的规矩合起来。

Claude Design 第一次打开的时候会让你做一件事：让它把你们公司的样式说明书先读一遍。两个路子：一是指给它看你们产品的 GitHub 代码仓库，它自动翻里面的颜色代码、字体设置、组件样式，提炼出一套规则；二是上传现有的设计稿或网站截图，它照着猜。

之后你每次让它设计新东西，它自动用这套规则，不用每次都说"记得用我们的品牌绿"。Team 和 Enterprise 套餐还支持一个工作区维护多套 design system，适合一人管多产品线的场景。

Tweaks panel：被低估的那个特性

用过 AI 生图的人都知道一个痛点：出了张图，80% 满意，唯独想把背景改深一点。你只能再提示一次，"保持其他不变，只把背景改深"，结果它重新生成了一张，人物脸也变了、姿势也变了，你花半天调好的细节全没了。

Claude Design 的 tweaks panel 是右边一溜像 iPhone 亮度条那样的旋钮。颜色深浅、字号大小、间距松紧，每个参数独立拖。拖一下，只改你拖的那个参数，其他完全不动，不用再打字跟 AI 解释。

Anthropic 设计师在发布日有条演示，重建 Claude Cowork 的落地页，全程没再输入一个字，只靠右边这排旋钮拖和点。像拼积木。评测站 vibecoding.app 把这条评为"发布报道里最被低估的特性"。Figma Make、v0、Lovable 这几个同类产品暂时都没有。

交接 Claude Code：整件事的真正口子

过去两年一堆 AI 设计工具涌出来。v0 打一句话出一个 React 页，Lovable 打一句话出一整个能部署的网站，Figma Make 让 Figma 原生支持 AI 生成。所有这些工具都停在一个地方：出一个好看的原型就完了。从原型到真正上线，中间那层"设计师交给工程师"的翻译依然要人做。

Claude Design 的做法是：在 Claude Design 里做完设计，点一下"交给 Claude Code"，它打包的不是一张图，而是：

• 组件树 + Tailwind 样式标签
• 文案候选：在 tweaks panel 里测过的几版副本
• 交互说明：鼠标悬停状态、滚动触发动画等
• 素材引用：logo、截图等资源
• 目标框架提示：比如 "Next.js 15 Pages Router"

Claude Code 拿到这个包，直接开始写生产级代码，输出具体到 /pages/landing.tsx、/components/pricing-card.tsx、/styles/tokens.css。中间没有设计师和工程师对齐沟通的环节，没有"这个字号说好 14 结果你写成 12"的循环。

苏米注：这个设计真正击中了痛点。我在实际项目中见过太多设计师和工程师因为细节来回扯皮的情况。Claude Design + Claude Code 把中间那层"翻译"工作自动化了，这才是真正的杀手锏。

Anthropic 设计师的 7 条高效用法

Ryan Mather（Anthropic verticals 团队的设计师）分享了自己最实用的 7 条经验，对任何想上手的人都值得认真看一遍。

价格：Pro 是试用档，不是使用档

套餐	月费	Claude Design 用量	适合人群
Free	$0	不开放	无免费档
Pro	$20	标准周度额度	偶尔试试
Max 5x	$100	5 倍额度	PM / 工程师经常做效果图
Max 20x	$200	20 倍额度	设计师 / 创意重度用户
Team	自定义	每个用户独立额度	小团队
Enterprise	自定义	按席位或按用量	大公司（默认关，管理员要手动开）

几条规则需要知道：

1. Claude Design 单独计量，跟你平时用 Claude 聊天、用 Claude Code 的额度分开算，是并排走不是挤占
2. 按用户发放，Team / Enterprise 里额度不能共享调度
3. 每个用户首发一次性赠送额度，约 20 个典型提示词体量，2026 年 7 月 17 日过期。系统优先消耗这份赠送额度
4. 当前还是公测期速率限制，后续可能变
5. 暂时没有审计日志或用量跟踪（audit logs）

实测 token 消耗

有两条公开数据值得看：

• TheNewStack 的 Frederic Lardinois：建一套 design system + 做一个新闻网站原型 + 几次调整 + 一个讲解视频，一周额度用掉 50% 多
• 开发者 @josuagolden 在 X 上发帖：两个完整 session，Pro 周度额度烧掉 58%

换算下来：Pro 的额度，一周认真做 2 个项目就见底。vibecoding.app 评测给的结论：想玩玩就 Pro，想每周都用，直接上 Max。

上手七步

1. 升级到 Pro 以上。Free 账号不能用。
2. 打开 claude.ai/design。
3. 连 GitHub 仓库（可选但值得）。design system extraction 是核心价值，值得花这一小时。
4. 写一个原型提示词。从小起步，单页、定价区、登录屏，不要一上来就让它做整站。
5. 用 tweaks panel 迭代。不整体重生成，只微调。重生成烧 token，微调不烧。
6. 导出：PPTX、Canva，或者主菜，Claude Code 交接包。
7. 通过 Claude Code 把交接包跑到自己的技术栈上。

官方给的好提示词四要素：目标（建什么）、布局（怎么排）、内容（显示什么）、受众（谁用）。

官方给的 5 个示例提示词：

• "Create a dashboard showing monthly revenue with filters for region and product line."
• "Design a mobile app onboarding flow with 4 screens that walks users through our core features."
• "Build a landing page for our new API product with a hero section, code examples, and pricing."
• "Create a form for collecting customer feedback with conditional questions based on category."
• "Design an internal tool for our ops team to review and approve content submissions."

它不跟谁竞争，它替代谁

TechCrunch 专门问过 Anthropic：是不是来抢 Canva 的？Anthropic 明确说，是互补不是替代，定位是"不从设计工具出发的人，需要把一个 idea 快速变成视觉物"。做完之后可以导 Canva，在 Canva 里继续编辑协作。

一张对比表：

对比项	Claude Design	Figma / Figma Make	Canva	v0 (Vercel)	Lovable
提示词直出原型	是	仅 Figma Make	有限	是 (React)	是
交互输出	是	是	是	是	是
读代码提 design system	是（从 GitHub）	手动导入	模板	否	否
代码交接	打包给 Claude Code	Dev Mode 导出	无	React/Next.js 直出	全站部署
多人协作	无	是（最强）	是	否	否
幻灯片/演示	是	否	是	否	否
免费档	无	有	有	有限	有限

第一个让人觉得是"写代码的人做的设计工具"，不是"做设计的人硬塞进去一个 AI 按钮"。

Anthropic Labs 神秘部门

Claude Design 是 Anthropic Labs 发的第一个公开产品。这个部门新扩编不久，定位是"孵化 Claude 能力前沿的实验性产品"。

这个团队之前孵出来的东西，成绩单不算普通：

• Claude Code：research preview 起步，6 个月做成 10 亿美金年收入的产品（前段时间还收购了 Bun）
• MCP（Model Context Protocol）：每月 1 亿次下载，已经是 AI 连接工具和数据的行业标准
• Skills / Claude in Chrome / Cowork：Cowork 就是前一天刚发的公测产品，把 Claude 的代理执行能力搬到桌面

Labs 现在的班子：

• Mike Krieger 加入（Instagram 联合创始人，过去 2 年是 Anthropic 首席产品官），跟 Ben Mann 一起建 Labs
• Ami Vora（2025 年底加入）接手整个 Product 组织
• Rahul Patil（CTO）跟 Ami Vora 搭档把 Claude 产品规模化

Anthropic 总裁 Daniela Amodei 的话是：AI 推进的速度需要一套不同的建造方式。Labs 给了我们打破成规去探索的空间。

今天能做什么

• Pro / Max / Team / Enterprise 用户：直接打开 claude.ai/design 试。从一页简单的落地页开始，不要一上来就做仪表盘，token 会心疼
• Enterprise 管理员：去 Organization settings 里打开这个功能，默认是关的，这一步不做下面的人都用不了
• 还没订阅想观望的：先看 Anthropic 官推那条 81.5 秒演示视频，比读十篇评测直观

• 注意：每个用户一次性赠送约 20 个提示词额度，7 月 17 日过期，想试早试，拖到夏天那笔额外额度就没了

总结与判断

从产品形态看，Claude Design 不像"又一个 AI 设计工具"，更像 Anthropic 把 Claude Code 上游那段"视觉想法层"自己补上了。Figma 剩下的核心价值是多人协作，Canva 剩下的核心价值是海量模板，这两块暂时没被动。被挤压的是中间那层"设计师把效果图翻译给工程师"的人工转换环节，Claude Design + Claude Code 把它吞进闭环了。

苏米注：对普通用户来说这条不关键，但对设计行业是实打实的位移。长期来看，AI 设计工具的真正价值不在于替代设计师，而在于消除那些重复、机械、低价值的中间环节，让设计师和工程师都能专注于更有创造性的工作。