小互AI · 深度解读

Mike Krieger 前脚辞掉 Figma 董事会，Anthropic 后脚就把 Claude Design 发了出来。Figma 股价当天又跌 7%。

这不是 Figma 的替代品。它替代的是 Figma 和代码之间那个尴尬的中间步骤。

为什么说"又"?

是因为上个月 刚把 Stitch 升级成 AI 原生设计平台，Figma 当天就被砸下去 8.8%^[1]。

这边还没缓过来，Anthropic 这一刀又补上。相比 2025 年 8 月 1 日Figma上市的的历史高点 142.92 美元，累计下跌约 76.5%…

年初至今（2026 ）跌幅 49%…

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

01

你打字，它出设计稿。

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

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

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

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

02

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代码都有，可以直接导出

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

03

光看清单没感觉，挑三个真正不一样的东西展开讲。

先翻译一下 是什么。你公司 logo 用的那个颜色、按钮圆角永远 8 像素、标题永远用苹方粗体、段落间距永远 24 像素，所有这些"我们家的东西该长什么样"的规矩合起来，就叫 design system。大公司会写成一本品牌手册，小公司通常在老板脑子里。

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

之后你每次让它设计新东西，它自动用这套规则。不用每次都说"记得用我们的品牌绿"。

Team 和 Enterprise 套餐还支持一个工作区维护多套 design system，适合一人管多产品线的场景。

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

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

Anthropic 设计师在发布日有条演示，重建 Claude Cowork 的落地页，全程没再输入一个字，只靠右边这排旋钮拖和点（后文案例区展开）。像拼积木。

当然也有一些简单的编辑操作

评测站 vibecoding.app 把这条评为"发布报道里最被低估的特性"。Figma Make、v0、Lovable 这几个同类产品暂时都没有。

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

装修打个比方。你让 AI 帮你设计了客厅效果图，施工队拿到效果图还得再画一版施工图，因为效果图里没有水电走线、没有承重墙标记、没有材料清单。这一步转化永远是返工的重灾区。

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

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

Claude Code 管下游，Claude Design 管上游。中间那层叫"设计师一天要跟工程师对齐十次"的活，没了。

这一口才是付费理由。其他都是锦上添花。

04

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

05

先把表格贴出来：

几条规则要知道：

有两条公开数据值得看：

换算下来：Pro 的额度，一周认真做 2 个项目就见底。

vibecoding.app 评测给的结论：想玩玩就 Pro，想每周都用，直接上 Max。

功能越强的东西烧 token 越狠。Pro 档想重度迭代基本跑不动，要么省着用，要么升 Max。

降低消耗的办法也有。官方建议：选线框图而不是精致效果图、选基本款幻灯片而不是完整演示，消耗会低一些。

06

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

官方给的 5 个示例提示词，可以直接抄：

迭代的时候，聊天框适合全局改动（"配色再暗更极简"、"把指标放顶部、图表放下面"、"给我 2-3 个不同布局"）。行内评论适合局部，在具体元素上点评（"这个按钮内边距调大"、"改成下拉菜单"）。想换方向不丢现有的，说 "Save what we have and try a completely different approach"（保存当前的，换个完全不同的方向试），Claude 会存快照再开新的。

07

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

一张对比表（来自 vibecoding.app 实测评测）：

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

08

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

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

Labs 现在的班子：

Anthropic 总裁 Daniela Amodei 的话是：

AI 推进的速度需要一套不同的建造方式。Labs 给了我们打破成规去探索的空间。

08

最后给个判断落点。

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

对普通用户来说这条不关键，对设计行业是实打实的位移。

— END —