本文由 Anthropic 产品设计师 Nate Parrott 撰写，分享他如何在产品原型、幻灯片和动画等工作中，使用 Claude Design（测试版）来探索、迭代和分享视觉创意。
- 类别：企业 AI
- 产品：Claude Design
- 日期：2026 年 7 月 24 日
- 阅读时长：5 分钟
- 分享：https://claude.com/blog/how-the-product-designer-who-built-claude-design-uses-it-to-explore-ideas-before-building-them
2025 年秋天，我是 VS Code 版 Claude Code 的唯一产品设计师，和两位工程师一起，重新构想 Claude Code 的所有功能，为终端之外的用户提供一个友好的界面。我们在九月底发布了测试版，Opus 4.5 在十一月上线，Claude Code 团队开始快速而积极地发布更新。工程师们的交付速度远超以往，而我的产出节奏依然如故。我需要找到一种方式来追赶。
Claude Code 运行在终端中，一切基于文本，而我最初的做法也是如此：我将输出复制到 Claude 中，加上截图，然后问："这是我们想添加的一个功能。你来设计一下？"结果不理想。大约一个月里，我把它当作一个副项目，一直在寻找改进 Claude 设计输出质量的方法。
给 Claude 一个 HTML 游乐场
Giving Claude an HTML playground
最终我偶然找到了答案：Claude 非常擅长 HTML。我们通常把 HTML 看作是网站格式，但它也是一种丰富、可交互的视觉媒介：你能在幻灯片、视频文件或 PDF 中做出的任何内容，都能在网页中实现。于是，我让 Claude 生成 HTML，并给它一个分屏界面——左侧聊天，右侧查看输出。
这个办法有用，但产品设计离不开对产品和品牌知识的运用。所以下一步，我花了一些时间，将 Anthropic 品牌的核心要素（我们产品使用的字体、颜色、素材和设计原则）提炼成提示词。这样，当我向工具输入提示时，输出会符合 Anthropic 的品牌指南。
我把这些整合到一个小型内部原型中，并分享给了团队。产品设计师们立刻用它来做交互原型。在传统设计工具里制作可点击的原型，需要为每个屏幕的每个状态制作高保真图，再手工串联起来。而在 Claude Design 里，你只需要把素材交给它，说一句"让它工作起来"。它生成的每个产物都有一个链接，你可以像分享文档一样分享出去。
Claude Design 如何成为视觉工作的媒介
How Claude Design became a medium for visual work
我第一次真切感受到 Claude Design 的魅力，是在 Anthropic Labs 团队的一次外出头脑风暴会上：每个人都在用它快速拼凑幻灯片——常常是在会议中途、轮到他们展示之前。那次会议让 Labs 团队决定正式支持这个项目，Claude Design 从一个副项目变成了真正的产品。
我们不再把它描述成一个产品原型工具。Claude Design 变成了一个用于制作各种视觉沟通内容的工具：幻灯片、落地页、可打印为 PDF 的单页文档、邮件、动画、社交媒体视觉素材。我认为它比产品设计高一个层级：你与 Claude 协作产出视觉内容，其主要任务是沟通和构思。
随着模型在视觉理解能力上的提升，Claude Design 能够处理的工作范围和质量也在增长。我们最新的 Opus 级模型 Claude Opus 5，在读取图表、示意图和截图方面优于之前的 Opus 模型，因此它与 Claude Design 配合使用时，能制作出可供演示的幻灯片和备忘录。
Claude Design 不擅长什么
What Claude Design is not meant to do
Claude Design 没有图像模型，也不是为图像生成而设计的，所以它不太适合 logo 设计——尽管这并没有阻止人们去尝试。更好的做法是，把你已有的 logo 和素材拿进来。产品的其余部分也是如此：Claude 会创建选项和起点，这样你就不用面对空白画布发呆，然后你从中挑选出好的方案，或者组合多个版本。
如果你要发布生产级软件，还是用 Claude Code 吧。Claude Code 负责编码，Claude Design 负责设计工作的其他部分：早期构思、协作，或在任何人投入开发之前，为某个方向争取支持。两者可以来回配合：你可以将在 Claude Code 中开始的原型同步到 Claude Design，在画布上进行迭代和编辑；或者将你在 Claude Design 中准备好的原型交给 Claude Code 去实现。随着模型在构建生产级软件方面越来越强，最重要的工作逐渐前移：在创意还很早期的时候，就提出好想法、让所有人达成共识、收集反馈。
我如何在日常工作中使用 Claude Design
How I use Claude Design in my daily work
我每天都用 Claude Design 做基础设计工作：为早期想法画线框，或者为一个流程生成 15 个版本，用来向同事收集反馈。以下是一些我最近工作中的例子：
- Claude Design 的入门动画：注册 Claude Design 时播放的动画，就是用这个工具本身制作的——但并非直接制作：我不是动画师，所以我先让 Claude Design 为我构建一个定制视频编辑器，然后用那个编辑器做出动画。
- 地铁时刻表应用：带有可调节的动画控制，用来微调运动的物理参数。
- Instagram 风格色彩控制：我让 Claude 允许我通过滑块和预设来调整应用的配色方案，而不是用文字描述颜色。
- Claude Design 本身的重设计：我和两位队友 Helen 和 Andrew，一直在工具内部即兴设计一个新的编辑器。我们不会原样发布它，但这是探索产品可能性的方式。
使用 Claude Design 的最佳实践
Best practices for using Claude Design
- 在写提示前先思考：要获得符合你愿景的输出，最有效的方式是事先告诉 Claude 你需要什么。我在设计前会花很多时间写提示词。有时我会在 Claude Design 里用语音按钮口述，有时我会在沙发上用手机备忘录打字，或者散步时录下语音笔记，回头再把文字粘贴进去。无论你喜欢哪种沟通方式，请在远离电脑时想清楚你想要什么，这样当你坐下来时，Claude 就能精确执行你的想法。
- 告诉 Claude 它应该长什么样：如果不加引导，Claude 会选择它最喜欢的某种美学风格——你大概能认出来。通过指定字体和颜色，或提供一组图片作为情绪板，或让 Claude 头脑风暴字体与颜色的搭配，然后来回调整，直到感觉对了。
- 把重复性工作变成设计系统：上传你的品牌文件和素材，如 logo、幻灯片、截图、字体规范以及你反复使用的任何内容，Claude 会分析它们并生成一个设计系统。这样，之后你生成的每个产物都从你的选择开始，而不是空白。
- 请求十个选项，然后重组：大多数选项不会很好，这没关系；其中一两个会脱颖而出。然后你可以说："我喜欢选项 B，还有一点点选项 D。给我五个把它们揉在一起的变体。"
- 画出你无法用语言描述的东西：如果你脑子里有布局但找不到词，那就画在纸上，拍照上传。
- 指着说话：不用写一段文字来指明你指的是哪个元素，直接点击它并说出你的想法。你需要先在你的设备上启用听写功能，然后选择"评论"，点击评论框，你的话就会出现在评论框里，就像你在打字一样。
- 在 fidelity 不重要时先画线框：要求线框要快得多，而且能让 Claude 专注于设计的高层结构，而不是视觉效果。这是快速尝试多种不同想法的好方法。
- 最后一步手动完成：使用直接编辑工具（重新排列、删除、编辑文本、调整大小、更改颜色）来做最终的润色，而不是通过提示词。直接编辑不消耗 token，而且像尺寸和对齐这样的小调整，用肉眼判断反而更好。
- 给 Claude 提供你的真实上下文：如果你正在为现有的应用或网站设计功能，请连接 GitHub：Claude 会获取你的组件和现有屏幕，并以此作为起点，经过几次尝试，它就能以相当高的保真度重现你现有的设计。网页搜索和 MCP 连接也能在 Claude Design 中使用，只要设计依赖于外部信息。
- 保持与 Claude 的并行协作：你不必等 Claude 输出一个完整结果再提示新的更改或任务。你可以一次性排队多条消息，或者在 Claude 仍在处理上一轮时继续说话。
让设计活起来
Make it alive
有一个 Bret Victor 的演讲，每个设计师都该在某个时候看——叫《停止画死鱼》。简介里说："我们画的一切都默认应该是活的。"
我鼓励设计师们，无论是在 Claude Design 还是其他工具中，都思考如何让自己的创作活起来。我最喜欢的 Claude Design 作品，是那些不适合现有框架的：带有交互模拟的文档、会跟你说话的幻灯片、同时也是视频的图表、同时也是自己编辑器的设计。代码，特别是 HTML，是一种极好的创意媒介，而现在设计师终于可以相对容易地用它来创作了。
Claude Design 之所以成为今天的样子，是因为 Anthropic 的人们不断发现我未曾预料的用途；它现在已在 Claude Pro、Max、Team 和 Enterprise 计划中以测试版形式提供。去试试吧，带它去我们还没想到的地方。
本文由 Anthropic 产品设计师 Nate Parrott 撰写，表达了他个人对 Claude Design 的看法、使用模式和建议。