Claude Design 的产品设计师如何在构建之前用它探索创意¶
原文发布于 2026 年 7 月 24 日，作者 Nate Parrott（Anthropic 产品设计师）
起源¶
当工程师借助 AI 交付量暴增而设计师还在原地踏步时，用 HTML 作为视觉媒介的想法诞生了 Claude Design。 2025 年秋天，我是 Claude Code for VS Code 唯一的产品设计师，和两位工程师一起重新构想终端之外的 Claude Code 界面。我们在 9 月底发布了 beta，11 月 Opus 4.5 发布，Claude Code 团队开始快速激进地迭代。工程师的交付量远超从前，而我还是原来的节奏。我需要找到赶上的方法。
Claude Code 运行在终端中，一切基于文本。我的第一次尝试就这样处理：复制输出到 Claude，附上截图，问"这是我们要加的功能，你来设计吧？"结果不好。作为副项目，我花了大约一个月寻找改善 Claude 设计输出的方法。
给 Claude 一个 HTML 游乐场¶
HTML 不仅是网页格式——它是一个丰富的交互式视觉媒介，幻灯片、视频、PDF 能做的它都能做。 最终我找到了答案：Claude 擅长 HTML。我让 Claude 生成 HTML，给它一个分屏界面——左边聊天，右边看输出。
这很有用，但产品设计靠的是应用对产品和品牌的理解。下一步我花时间将 Anthropic 品牌精髓（字体、颜色、资产、原则）提炼成 prompt，这样工具输出就符合品牌指南。
我把这些做进一个小型内部原型分享给团队。产品设计师立即用于交互式原型——在传统设计工具中做点击原型意味着模拟每个状态的每个屏幕并手动连线；现在只需把资产交给 Claude 说：让它跑起来。每个 artifact 都有可分享的链接。
Claude Design 如何成为视觉工作的媒介¶
Claude Design 从产品原型工具变成了任何视觉沟通的创作工具：幻灯片、落地页、PDF 单页、邮件、动画、社交媒体视觉内容。 我第一次意识到 Claude Design 有多令人信服，是在一次 Anthropic Labs 团队 offsite 的创意提案会上：每个人都用它拼凑幻灯片，往往在轮到自己演讲前的会议中间完成。
我们不再把它描述为产品原型工具。我把它看作"产品设计上面一层"的工具：你与 Claude 协作创建主要用于沟通和创意探索的视觉内容。
随着模型视觉能力增强，Claude Design 的范围和质量也在提升。最新的 Claude Opus 5 在阅读图表、图解和截图方面优于之前的 Opus 模型，与 Claude Design 配合创建演示级别的幻灯片和备忘录非常强大。
Claude Design 不做什么¶
Claude Design 没有图像模型，不适合 Logo 设计；要做生产软件用 Claude Code。 但它与 Claude Code 可双向同步——你可以将 Claude Code 中的原型同步到 Claude Design 进行画布迭代，也可以将 Claude Design 中的原型交给 Claude Code 构建。
| 工具 | 用途 |
|---|---|
| Claude Code | 编写生产代码 |
| Claude Design | 早期创意探索、协作、在构建前获取认同 |
随着模型越来越擅长构建生产软件，最重要的工作向流程更早处移动：产生好创意、让所有人对齐、在创意还处于早期时收集反馈。
我日常如何使用 Claude Design¶
我每天用 Claude Design 做"基础设计工作"：为早期创意画线框图，或生成 15 个版本的流程来收集同事反馈。近期案例：
- Claude Design 入场动画 — 注册时播放的动画是在工具本身中制作的：我先让 Claude Design 为我构建了一个定制视频编辑器，然后用该编辑器制作动画
- 地铁时刻 App — 带可调动画控件来调节运动物理参数
- Instagram 风格颜色控件 — 让 Claude 用滑块和预设调整应用配色方案，而非用文字描述颜色
- Claude Design 本身的重新设计 — 两位同事 Helen 和 Andrew 与我一直在工具内部对编辑器的新设计进行头脑风暴。我们不会原样发布，但这是我们探索产品未来可能性的方式
使用 Claude Design 的最佳实践¶
| 实践 | 说明 |
|---|---|
| 先想清楚再 prompt | 在离开电脑时想好你要什么，坐下来时让 Claude 执行你的精确构想。可以用语音按钮口述，也可以在手机备忘录中输入 |
| 告诉 Claude 它应该长什么样 | 不加引导时 Claude 会选它偏爱的审美——你大概认得出来。指定字体和颜色，或提供情绪板图片，或让 Claude 头脑风暴字体-颜色搭配 |
| 将重复工作变成设计系统 | 上传品牌文件和资产，Claude 会分析并生成设计系统 |
| 要求十个选项，然后混搭 | 大多数不会好，没关系；说"我喜欢选项 B 和一点 D，给我五个把它们揉在一起的变体" |
| 画出你描述不了的东西 | 脑中有布局但找不到词？画在纸上拍照上传 |
| 指着说（Point and talk） | 点击元素后口述，而非写一段话描述你指的是哪个元素。你需要在设备上启用听写功能，然后选择"comment"并点击评论框，你的话会像打字一样出现在评论框中 |
| 先画线框图 | 保真度不重要时要求线框图更快，让 Claude 聚焦于设计的高层结构而非视觉细节 |
| 最后一步手动做 | 用直接编辑工具（重排、删除、编辑文本、调整大小、改颜色）做最终修饰——不消耗 token，且微调对齐靠目测更好 |
| 给 Claude 你的真实上下文 | 连接 GitHub：Claude 会获取你的组件和现有界面作为起点。Web 搜索和 MCP 连接也可在 Claude Design 中使用 |
| 继续与 Claude 并行工作 | 不必等 Claude 完成上一轮就可以排队发送多条消息或持续对话 |
让它活起来¶
有一个每位设计师都应该看的 Bret Victor 演讲：Stop Drawing Dead Fish。"我们画的一切默认都应该是活的。"
我鼓励设计师思考如何让创作活起来。我最喜欢的 Claude Design 作品是那些不属于现有框框的：带交互式模拟的文档、能与你对话的幻灯片、同时也是视频的图表、同时也是自身编辑器的设计。
代码，特别是 HTML，是一种令人惊叹的创意媒介——对设计师来说终于变得相对容易了。
Claude Design 现已在 Claude Pro、Max、Team 和 Enterprise 计划中以 beta 形式提供。试试它，把它带到我们还没想到的地方。
本文作者 Nate Parrott，Anthropic 产品设计师。