设计圈的 Claude Code 时刻来了

Anthropic 今天发布了 Claude Design，第一时间体验了一下，震惊程度不亚于当年第一次用 Claude Code 写代码。借用 flypig 老师一句话：

刚才用了一下，这么说：Claude Design 让 Google 那个 Stitch 看起来像个笑话。

这就是设计领域的 Claude Code 时刻。 我不会说“设计已死”、“设计师要被替代了”之类哗众取宠的话，只是想说：

从想法到高保真交互原型的差距已基本消失，非设计师终于能独立产出可交付设计；设计师生产力指数级提升，但设计外包和传统设计工具要大幅缩水了。

今天 Figma 股价大跌也侧面印证了这一点。

给大家看一个完整案例，这是我大约 3 轮交互做出来的一个设计作品，不是简单的一个静态图片或者网页，里面的链接大部分可以点击交互。

初始提示词很简陋：

帮我设计一个 writing Agent 的 Mac App
支持多 workspace，可以看到 workspace 的文档（markdown、文本文档），可以对文档进行手动编辑，也可以调用 agent 编辑 markdown 文档
也可以在聊天对话中创建/编辑文档

主要是我还没想好做成个啥样，期待着它帮我想想，所以说得比较模糊。

然后它给了我一些问题让我选择，有单选有多选，还可以自己输入，或者让它自行决定。

过了一会去看，它给了我 3 个方案让我选择，就像一个专业的设计师，先跟你确认清楚需求，然后给几个不同方向让你挑。

每个结果都不是静态图片或者静态网页，都是可以点击交互的。

看完我觉得方案 2 和方案 3 都不错，但都有问题，需要综合一下。于是给了一些修改意见，还把 Codex 的截图发给它参考，让它把方案 2 和方案 3 综合一下，再结合 Codex 的一些设计。

它很快给了我一个新版本，基本上就是我想要但是描述不清楚的那种。 比如它把 Documents 和 Chat 用一个 Tab 分开，就是我喜欢的设计，比我预想的“一上一下”更好。

整体设计我挺满意，也提不出更好的要求，接下来就是抠细节。文档编辑历史它没实现，我就让它补这块。

提示词很简单：

帮我基于当前设计，设计 history 部分，希望用户能更方便的看文档编辑历史，对比差异

很快它就出了一版，但是打开一看，效果不行。

我正准备提示它改，结果发现它自己检测出了布局问题，自己修复了。

修复后的版本就很好看了，没有布局问题，甚至还能方便地选择任意两个版本比较变更。

从左边的消息历史看，它有自动纠错机制。

最终产出物是 React 代码和样式表。

整个过程让我很意外的几件事：它会主动问需求、它会给多方案、它能理解多图混合参考、它能自检自纠、它输出的是可运行代码而不是静态稿。这套协作模式，和之前任何一个设计工具都不一样。

Claude Design 到底是个什么东西

先说基础信息。Claude Design 是 Anthropic Labs 今天发布的新产品，由 Claude Opus 4.7 驱动，Pro、Max、Team、Enterprise 订阅都能用（Enterprise 默认关，需要管理员开），直接去 claude.ai/design 就能进。

界面很简单：左边聊天，右边画布。 你描述想要什么，它在右边画出来；你用聊天、行内评论、直接编辑、或者它自动生成的调节滑杆去改；改完之后可以导出成 HTML、PDF、PPTX、ZIP，或者送进 Canva 继续编辑，或者直接打包给 Claude Code 去落地成产品代码。

看起来好像就是个 AI 版 Figma？并不是。

Ryan Mather 是 Anthropic 自己设计团队的人，一个人同时负责 7 个产品线。他今天发的推文里面说了一条很关键的话：

不要用对待画布工具的方式来用 Claude Design。它是另一种动物，有自己的超能力。老实说它更像 Claude Code，而不是像画布式的设计工具。
https://x.com/Flomerboy/status/2045162328593670321

这句话是理解 Claude Design 的钥匙。

和 Figma、Canva 们的根本不同

过去一年，Figma 加了 AI、Adobe 加了 AI、Canva 也加了 AI。它们的逻辑都是一样的：在以人为主的画布工具上，加一层 AI 插件，帮你画得更快一点、写文案方便一点。

Claude Design 走的是另一条路：AI 是主要的生成者，人是主要的审阅者。整套工具的骨架就是围绕这个假设搭的。

这个区别听起来抽象，落到产品上有几个很具体的差异。

输出是可运行代码，不是静态设计稿

我上面那个 Mac App 案例，最终拿到的是 React + CSS，是一个能跑的东西，链接可以点、标签可以切、版本可以 diff。这和“生成一张漂亮的 UI 图”是两个物种。

组织级设计系统

你上传代码库、PPT、品牌资料之后，它会抽出颜色、字体、组件、布局规范，后面所有项目都自动套用。Brilliant 的设计师反馈说，以前在别的工具里需要 20 多轮提示才能搞定的复杂交互，在 Claude Design 里 2 轮就搞定，原因就是它已经“认识”你的设计语言。

理解你的代码库

不是把代码当截图看，是真的读组件结构、框架模式、文件组织。所以设计师做完之后点一下 handoff，工程师那边拿到的不是“这是一张图你去还原”，而是“这是一组可以直接接到你现有组件库里的实现草案”。

会做工具，不只是做设计

官方博客里提到一个能力：你可以让 Claude Design 临时给你生成一个专门的工具，比如一个针对你品牌色盘的拾色器、一个自定义的 spec 生成器、一个小的交互原型测试工具。产出不局限于“设计文件”，而是“任何帮你把问题想清楚的计算产物”。

Datadog 的反馈也有意思：以前需要一周、跨多轮 brief → mockup → review 才能完成的事，现在在一次会议里就能边聊边做出成型原型，甚至让工程师现场参与到设计对话里。

这不像“Figma 提速 30%”那种优化。更像另一种工作方式。

能拿来做什么

从官方博客和目前披露的使用场景看，Claude Design 至少能覆盖这几类工作：

产品原型和交互流程。 比如我的 Mac App 案例，或者 5 屏 onboarding 流程、带筛选和详情抽屉的搜索体验、审批工作流队列。这是它最强的一块。

演示文稿。 10 页 Q1 结果 Deck、15 页董事会 roadmap、客户会前材料、全员会 Deck。导出 PPTX 直接可用，也可以送去 Canva 继续编辑。

营销物料。 落地页、社媒图、活动视觉。

内部工具后台。 管理面板、内容审核队列、权限管理界面。这一类过去专门养一个前端岗来做，现在 PM 自己就能出可交付原型。

设计探索。 一次性出 3 到 5 个方向，让你挑。以前这是“我时间不够所以只能做两版给你看”，现在是“我出五版，你挑一版再精修”。

还有官方没重点讲但其实很重要的：视频 demo。Ryan Mather 提到它能直接生成视频形态的演示，不只是静态图。这对产品发布、用户测试、投资人沟通是新的能力位。

一句话概括使用边界：结构清晰、信息块明确、交互逻辑可描述的东西，它都做得不错；模糊情绪导向的纯艺术创作，它不是来抢这个饭碗的。

这事不止关于设计

Ryan Mather 一个人服务 7 个产品，这是一个信号。这事放在两个月之前是不可能的。

对设计师

生产力会指数级提升，但团队规模大概率会缩。过去一家公司需要 5 个设计师的活儿，现在 1 到 2 个就能做完，而且单人产出反而更多、更好。留下来的人会更值钱，因为他们做的是真正吃判断力的工作：品牌方向、关键插画、命名、战略级决策。剩下 80% 的执行工作，模型接走了。

同样的剧本，已经演过了

编程圈是 Claude Code，能用好 AI 的工程师产出翻几倍，跟不上的慢慢被挤出来；分析圈是各种 AI 辅助数据分析，分析师从“写 SQL 的”变成“和 AI 一起提问题的”。每一次轮到新的专业，走的都是同一条轨迹：人均产出飙升，头部的人拿得更多，尾部的人看着机会一点点消失。设计圈刚好走到这个拐点。

对 PM、创始人、营销人员

这是一个完全新的能力。以前你有想法，要么画个草图找设计师排队，要么忍着自己做个丑到抑郁的 PPT。现在你描述清楚想法，它给你一个可以直接拿去给工程师、给投资人、给客户的成品。

对 Figma、Adobe、Canva

这是警钟，但股价跌 10% 可能只反映了表层冲击。Ryan Mather 那条推里还有一层更深的信号：Anthropic 自己的设计团队已经把 Claude Design 当主力工具用，Figma 只是偶尔才会被提到。如果 Anthropic 的设计师已经不主要用 Figma，别的科技公司凭什么还主要用？再过 2 到 3 个季度，当企业年度预算开始重新整合设计工具开销，老牌工具的续费数字会比股价给出更直接的答案。

对公司决策层

有两件事要重新算账。一件是设计岗位的编制。Mather 一个人覆盖 7 个产品线，背后的参照线是原本需要 3 到 5 个设计师的工作量；放到年度预算表里，这个数字很难不被问到。另一件是工具订阅成本。当主力工作能在一个产品里基本完成，那些原本分散在 Figma、Sketch、Notion、Miro、Keynote 上的账号就会被拿出来重新评估。

对工程师

这是久违的好消息。设计到工程的交接一直是最痛苦的环节之一：设计师按视觉做，工程师按代码做，中间全靠 Figma 标注和来回 review。现在从 Claude Design 出来的东西本身就带着组件结构和实现草案，落地成本直接降一个量级。

其他

Claude Design 目前还是 research preview，有一些现实边界需要清楚：

它还没有审计日志和用量追踪，不支持数据驻留，上传的资产会被持久存储。如果你在一家对合规要求很严的公司，短期内最好不要把最高敏感度的设计素材直接放进去。

它目前只有网页界面，没有开放 API。你想把它嵌到自己产品里，目前还不行，只能基于 Claude API 和 Agent SDK 自建类似能力。但 Claude Design 能力这么强，最关键的是 Opus 4.7 模型在多模态能力上的增强，理论上来说你用 Opus 4.7 也能搭出来类似的产品。

但是和 Claude Code 一样，虽然同样用 Claude 的模型，但是 Claude Code 在很多方面就是能表现更好，毕竟 Anthropic 他们自家才知道怎么最大化的利用好新的模型，以及他们还能反过来，根据用户使用的设计数据和交互，去训练下一代的模型，形成数据飞轮。

这个优势短期内其他家比如 OpenAI 和 Gemini，还无法很快追上。

价格与额度

这张表基于 Anthropic 官方 Claude Design 定价文档整理；官方没有公开 weekly allowance 的具体数值，所以这些格子必须标记为“未说明”。

我自己是 Claude Max@5x，就设计了一个 App 和生成了一个 Slides，一周的额度就没了。

模型、规格与多模态能力

Claude Design 当前唯一明确公开的底层模型是 Claude Opus 4.7。 官方没有说明用户是否可以在 Claude Design 中切换到 Sonnet 或 Haiku，因此这一项应视为未说明 / 大概率固定。与此同时，Anthropic 的模型总览页面给出了当前主力模型的对比，便于理解 Claude Design 选型背后的原因。

上表数据由 Anthropic 模型总览汇总；其中“Claude Design 采用关系”来自 Claude Design 官方博客。

在视觉规格上，Opus 4.7 是首个支持高分辨率图像的 Claude 模型，最大原生分辨率可达长边 2576 像素，单图最高约 4784 图像 token。这对 Claude Design 尤其重要，因为它大量依赖截图、网页捕获、原型对照和文档视觉语义。与此同时，Opus 4.7 使用新 tokenizer，处理相同文本时 token 可能比 Opus 4.6 高出约 1x–1.35x，这意味着在图像/代码/长上下文场景里，开发者必须重新估算 max_tokens、缓存与成本。

最后

Claude Design 带来的冲击，不只是设计圈的一次效率升级，更像一场深刻的范式转变。过去，设计师们习惯于在画布上精雕细琢、手动标注；现在，AI 已经可以直接从想法到可运行的高保真交互原型，让设计师的角色从纯粹的执行者向战略性的决策者转变。这种变化不只发生在设计领域，程序员、分析师、营销人员、产品经理，都已经或者即将经历类似的革命。

在这样一个时代里，真正被重新定义的不仅是我们的工作方式，还有我们对生产力和创造力的理解。AI 不会取代人类对美的判断、对品牌的洞察、对战略的规划，但它的到来却让每个人都有机会更加专注于这些最具价值的能力。

也许几年后，我们会回头看今天的 Claude Design，就像今天我们看待第一次使用 Claude Code 那样，发现历史的分水岭就在不经意间发生了——而我们刚刚走进了那个全新的未来。