2025 年秋天，Nate Parrott 是 Claude Code for VS Code 项目里唯一的产品设计师。
和他协作的两名工程师借助 Claude Code，交付速度越来越快；模型升级之后，这种差距还在继续扩大。工程侧已经进入高频迭代状态，设计侧却仍沿用原来的节奏。摆在 Nate 面前的问题很直接：当 AI 已经明显加快开发速度，设计师怎样才能跟上？
他最初的尝试并不成功。因为 Claude Code 工作在终端里，他也沿用了文本工具的思路：复制运行结果，附上截图，再让 Claude 直接设计某个功能。得到的方案既不稳定，也缺少产品和品牌上下文。
真正的转折点，是他不再把 Claude 只当成一个“回答设计问题的聊天机器人”，而是给了它一块可以直接运行 HTML 的视觉画布。
HTML 不只是网页，也是设计媒介
我们习惯把 HTML 理解为网页的底层格式，但它其实是一种很灵活的交互式视觉媒介。
演示文稿、动画、交互原型、数据图表、可打印的一页纸，甚至简单的视频编辑器，都可以在浏览器里完成。更重要的是，Claude 本来就擅长生成 HTML、CSS 和 JavaScript。
Nate 因此做了一个左右分栏的内部原型：
- 左侧与 Claude 对话
- 右侧实时查看和操作生成结果
这套界面很快解决了“如何把语言变成视觉方案”的问题，但还缺少另一块关键拼图：品牌上下文。
产品设计不是随意生成一个看起来不错的页面。字体、颜色、间距、图标、素材和设计原则，都要与已有产品保持一致。于是 Nate 又把 Anthropic 的品牌资产和设计规范提炼成一套提示上下文，让 Claude 生成的内容从一开始就站在正确的视觉基础上。
原型分享给团队后，设计师们很快用它做起了可点击的交互方案。过去，设计师需要手工绘制每个页面状态，再逐一连接交互；现在，只要把素材和目标交给 Claude，就能先得到一个真正可以运行、也可以通过链接分享的版本。
从产品原型，变成通用视觉工作台
Claude Design 最初只是 Nate 的业余实验，目标也很窄：帮助产品设计师更快制作原型。
后来，在一次 Anthropic Labs 的团队活动上，参与者几乎都用它临时制作演示文稿，有人甚至在轮到自己上台之前才开始生成页面。那次使用让团队意识到，它的价值并不限于产品界面。
Claude Design 随后被重新定义成一个更宽泛的视觉创作工具，可以用来制作：
- 可交互的产品原型
- 演示文稿和提案
- 落地页
- 可导出为 PDF 的单页资料
- 邮件和社交媒体素材
- 动画与动态信息图
Nate 把它理解为“比产品设计再高一层”的工具。这里的重点不是直接产出最终产品，而是用视觉内容完成沟通、探索和说服：让一个模糊想法尽快变得可见、可讨论、可操作。
这种变化也说明，AI 设计工具真正有价值的地方，未必是把传统设计步骤压缩得更短，而是让设计师能尝试过去成本太高、很难动手验证的表达形式。
Claude Design 不适合做什么
任何工具都需要明确边界。
Claude Design 本身不是图像生成模型，因此不适合从零设计 Logo，也不适合承担需要专业图像模型的视觉创作。更合理的工作方式，是先准备好 Logo、图片、字体和品牌素材，再让 Claude 围绕这些真实资产组织页面和交互。
它同样不是用来替代 Claude Code 的。
- Claude Design 适合早期构思、视觉探索、快速协作和争取团队认同。
- Claude Code 适合把已经明确的方向落实为可维护、可上线的生产代码。
两者可以形成往返流程：在 Claude Code 里开始的原型，可以同步到 Claude Design 继续调整；在 Claude Design 里验证成熟的方案，也可以交给 Claude Code 进入正式开发。
这个分工很重要。模型越擅长写生产代码，团队越应该把精力前移到那些仍然决定产品质量的问题上：想法是否值得做、方向是否清晰、团队是否达成共识，以及能否在投入开发前收到足够多的反馈。
Nate 的日常使用方式
Nate 每天都会用 Claude Design 做一些典型的设计工作，例如快速画线框图，或者一次生成十几种流程方案，拿给同事比较和讨论。
他的几个案例很能说明这种工具的特点。
为了做动画，先做一个编辑器
Claude Design 的注册引导动画就是在 Claude Design 里完成的，但过程并不是让模型直接生成一段动画。
因为 Nate 不是动画师，他先让 Claude Design 为自己制作了一个专用视频编辑器，再使用这个编辑器调整并完成动画。AI 在这里生成的不只是结果，还生成了创造结果所需的工具。
把难以描述的参数变成控制器
在一个地铁到站时间应用中，他加入了可调节的动画参数，用控制器反复试验运动效果。
在另一个界面配色实验里，他没有继续用“再亮一点”“更温暖一些”这类模糊语言来回沟通，而是让 Claude 生成类似 Instagram 的滑杆和预设，直接用视觉控件调整配色。
在产品内部重新设计产品
Nate 和两名同事还直接在 Claude Design 里探索 Claude Design 编辑器的新版本。
这些方案不会原样上线，但它们能帮助团队快速看见产品的不同可能。原型在这里不是一张等待评审的静态图，而是团队共同思考的载体。
用好 Claude Design 的 10 条方法
Nate 总结的实践经验，核心并不是“写出一条万能提示词”，而是建立一套适合人机协作的设计流程。
1. 提示之前，先把问题想清楚
模型能快速执行，但不能替你决定真正想解决什么。
开始设计前，先明确目标、使用场景、受众、约束和判断标准。Nate 会提前写提示词，也会在散步时录下语音，之后再把转写内容交给 Claude。关键不在于输入方式，而在于坐到电脑前时，已经对自己想要什么有了清楚认识。
2. 主动指定视觉方向
如果不提供方向，模型很容易回到那些熟悉、常见的 AI 风格。
可以直接指定字体、颜色和排版倾向，也可以上传情绪板和参考图片。还没有明确方向时，可以先让 Claude 生成几组字体与配色组合，再通过对话逐步收敛。
3. 把重复要求沉淀为设计系统
Logo、历史演示文稿、产品截图、字体规范、组件和品牌说明，不应该每次都重新解释。
把这些资料交给 Claude Design，生成一套可复用的设计系统。之后创建的每个项目，都从已有选择出发，而不是从空白画布重新开始。
4. 一次要多个方案，再组合优点
不要把希望押在第一个结果上。
可以先要求十个方向，接受其中多数并不理想，再从少数好方案里挑选元素。例如保留 B 的结构、加入 D 的配色，然后继续生成五个混合版本。AI 的优势不是“一次命中”，而是把发散和重组的成本降得足够低。
5. 说不清时，直接画出来
如果脑中已经有布局，却很难用语言准确描述，可以先在纸上画一张草图，拍照后上传。
对于空间关系，粗糙的图往往比一大段文字更准确。
6. 用指向和语音减少沟通成本
修改某个局部元素时，不必写一段话解释它在哪里。直接选中对象，再通过评论或语音说出修改要求，通常更高效。
这更接近人与设计同事坐在同一块画布前协作的方式。
7. 不需要高保真时，先画线框图
如果当前只想验证信息结构、用户流程和功能布局，就明确要求线框图。
低保真方案生成更快，也能避免模型过早把注意力放在颜色、阴影和装饰上。结构还没有确定之前，精致往往只会增加推翻方案的心理成本。
8. 最后一公里手动完成
移动位置、删除元素、修改文字、调整尺寸和颜色等细节，使用画布里的直接编辑工具通常更合适。
小范围的对齐和尺寸变化依赖视觉判断，手动调整比继续写提示词更快，也不会消耗模型额度。
9. 给 Claude 真实的项目上下文
如果要为现有产品设计新功能，就不要只提供一张孤立截图。
连接 GitHub，让 Claude 读取已有组件和页面；在方案依赖外部资料时，再使用网页搜索或 MCP 连接。上下文越接近真实项目，生成结果越有机会与现有设计保持一致。
10. 不必等 Claude 完成才继续工作
人与模型的协作不应该变成“发送一条消息，然后等待”。
Claude 处理上一项任务时，可以继续补充要求或排入新的工作。把它当成一个持续运行的设计搭档，而不是一次只接一个问题的生成器，整个探索过程会流畅得多。
让设计“活起来”
Nate 在原文结尾提到 Bret Victor 的演讲《Stop Drawing Dead Fish》。它传达的核心观点是：我们创造的东西，默认就应该是活的。
这也解释了 Claude Design 最值得关注的方向。
一份文档可以带有交互模拟，一套幻灯片可以回应观众，一个图表也可以同时是一段动画；设计作品甚至能自带编辑器，让使用者继续调整它。过去，设计师往往需要掌握较多编程能力，才能把这些想法做出来。现在，HTML 作为创作媒介，正因为 AI 而变得更容易使用。
Claude Design 的意义，未必是让每个设计师都更快地生产传统稿件。它更像是在扩大“设计稿”这个词的边界：在真正投入开发前，先让想法运行起来。
这可能也是 AI 时代设计师更重要的能力——不是等待模型替自己完成作品，而是把判断力、品牌理解和工具构建能力组合起来，用更低成本探索更多可能。
本文根据 Anthropic 产品设计师 Nate Parrott 的文章整理与重写。原文发表于 2026 年 7 月 24 日：How the product designer who built Claude Design uses it to explore ideas before building them。
关于
📬 关注我获取更多资讯
