Claude Design 在设计工作流中的实战验证

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 的一些设计。

它很快给了我一个新版本，基本上就是那种“我想要，但自己描述不清楚”的效果。

比如，它用一个 Tab 将 Documents 和 Chat 分开，这正是我喜欢的设计，比我预想的“一上一下”更好。

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

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

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

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

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

整个过程中，有几件事让我非常意外：它会主动询问需求，会提供多个方案，能理解多张图片的混合参考，能够自检自纠，而且输出的是可运行代码，而不是静态稿。

这套协作模式和之前任何一种设计工具都不一样。

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，而不是画布式设计工具。

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

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

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

这个区别听起来很抽象，但落到产品上，会体现为几个非常具体的差异。

在上面的 Mac App 案例中，我最终拿到的是 React + CSS，是一个真正能运行的东西：链接可以点击，标签可以切换，版本可以进行 diff。

这和“生成一张漂亮的 UI 图”完全是两个物种。

上传代码库、PPT、品牌资料之后，它会从中提取颜色、字体、组件和布局规范，后续所有项目都会自动套用这些规范。

Brilliant 的设计师反馈说，以前在其他工具里需要经过 20 多轮 prompt 才能搞定的复杂交互，在 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 提到，Claude Design 能够直接生成视频形式的演示，而不只是静态图片。这为产品发布、用户测试和投资人沟通提供了一个新的能力位。

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

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

生产力会指数级提升，但团队规模大概率会缩小。

过去一家公司需要 5 个设计师完成的工作，现在可能只需要 1～2 个人，而且单人产出反而更多、更好。

能够留下来的人会变得更有价值，因为他们做的是真正依赖判断力的工作：品牌方向、关键插画、命名和战略级决策。剩下 80% 的执行工作，将由模型接手。

编程圈有 Claude Code。能用好 AI 的工程师，产出会翻几倍；跟不上的人，则会慢慢被挤出去。

分析圈有各种 AI 辅助数据分析工具。分析师从“写 SQL 的人”，变成了“和 AI 一起提出问题的人”。

每当这种变化轮到一个新的专业领域，走的都是同一条轨迹：人均产出飙升，头部人才获得更多，尾部人才则眼看着机会一点点消失。

设计圈刚好走到了这个拐点。

这是一种全新的能力。

以前，当你有一个想法时，要么先画个草图，找设计师排队；要么忍着自己做一个丑到令人抑郁的 PPT。

现在，你只需要把想法描述清楚，它就能给你一个可以直接交给工程师、投资人或客户的成品。

这是一记警钟，但股价下跌 10% 可能只反映了表层冲击。

Ryan Mather 的那条推文中，还有一层更深的信号：Anthropic 自己的设计团队已经将 Claude Design 作为主力工具使用，Figma 只是偶尔才会被提到。

如果 Anthropic 的设计师已经不再主要使用 Figma，那么其他科技公司为什么还要继续以 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 时一样，会发现历史的分水岭就在不经意间出现了——而我们刚刚走进那个全新的未来。