打造 Claude Design 的产品设计师，如何在动手构建前探索想法
发布日期： 2026年7月24日
分类： Claude 官方博客
2025 年秋天，我是 Claude Code for VS Code 唯一的产品设计师，和两位工程师一起重新设想：怎样让 Claude Code 在终端之外拥有更友好的图形界面。我们在 9 月底发布 beta，11 月 Opus 4.5 到来后，Claude Code 团队开始快速、密集地交付。工程师的产出远超以往，而我的交付节奏却没有变化。我需要找到追上团队的方法。
Claude Code 运行在终端中，一切以文本为中心。我的第一次尝试也按这个思路来：把输出复制给 Claude，附上截图，然后说：“我们想加这个功能，你来设计吧。”结果并不理想。之后大约一个月，我把改进 Claude 设计输出的办法当作业余项目不断尝试。
给 Claude 一个 HTML 游乐场
最后我找到了方向：Claude 很擅长 HTML。我们通常把 HTML 当作网页格式，但它也是丰富而可交互的视觉媒介。幻灯片、视频或 PDF 能做到的事，网页同样可以做到。于是我让 Claude 生成 HTML，并提供一个左右分栏的界面：左侧聊天，右侧查看输出。
这已经有用，但产品设计依赖于对产品和品牌的理解。下一步，我花时间把 Anthropic 品牌的要素提炼为 prompts，包括字体、色彩、素材与产品原则。这样，在工具里输入 prompt 后，输出便能符合 Anthropic 的品牌规范。
我把这些能力做成一个小型内部原型并分享给团队。产品设计师马上用它制作交互原型。传统设计工具中的可点击原型，需要手动绘制每个页面的每一种状态，再逐一连线；在这里，你只需把素材交给 Claude，说“让它运行起来”。每个 artifact 都有可分享链接，就像分享文档一样。
Claude Design 如何成为视觉创作媒介
我第一次真正意识到 Claude Design 的吸引力，是在一次 Anthropic Labs 团队线下活动的创意提案环节。几乎每个人都用它快速做出了幻灯片，有些人甚至在会议中、轮到自己发言前才开始制作。那次经历让 Labs 团队决定投入人手，Claude Design 也从一个业余项目成为正式项目。
我们不再把它描述为“产品 mockup 工具”。Claude Design 成为制作各种视觉沟通材料的工具：幻灯片、落地页、可打印成 PDF 的单页、邮件、动画和社交媒体视觉内容。我把它看作处于产品设计上游的一层：你与 Claude 协作产出视觉材料，核心目标是沟通与构思。
模型的视觉能力越强，Claude Design 能完成工作的范围和质量也越高。最新的 Opus 级模型 Claude Opus 5 比此前 Opus 模型更擅长阅读图表、示意图和截图；与 Claude Design 结合后，尤其适合生成可用于展示的 deck 和 memo。
Claude Design 不适合做什么
Claude Design 没有图像模型，也不是为图像生成而设计，因此并不适合 logo 设计，尽管不少人仍会尝试。更好的方式是直接带入已有 logo 和素材。产品其他部分也遵循同样的思路：Claude 提供选项与起点，让你不必面对空白画布；你再挑选其中好的版本，或组合多个版本。
如果你要交付生产软件，仍应使用 Claude Code。Claude Code 用于编码；Claude Design 用于设计工作中的其他部分：早期构思、协作，或在团队承诺投入构建前争取对某个方向的认同。两者可双向协作：可把在 Claude Code 中开始的原型同步到 Claude Design，在画布上迭代和编辑；也可把已经准备构建的 Claude Design 原型交给 Claude Code。随着模型越来越擅长构建生产软件，最重要的工作会更早发生：提出好想法、让团队达成一致，并在想法仍处于早期时收集反馈。
我如何在日常工作中使用 Claude Design
我每天用 Claude Design 做常规设计工作，例如为早期想法画线框图，或一次生成 15 个流程版本以收集同事反馈。近期例子包括：
- Claude Design 的开场动画。 注册 Claude Design 时播放的动画就是在工具内制作的，但不是直接生成：我不是动画师，于是先让 Claude Design 为我构建一个定制视频编辑器，再用这个编辑器制作动画。
- 地铁到站时间应用。 应用带有可调的动画控制，用于细调运动的物理效果。
- 类似 Instagram 的颜色控制。 我让 Claude 用滑块与预设来调整应用配色，而不是让我用文字描述颜色。
- 重新设计 Claude Design 本身。 我和两位同事 Helen、Andrew 在工具中不断尝试新的编辑器设计。它不会原样上线，但这是探索产品未来形态的方式。
使用 Claude Design 的最佳实践
- 先想清楚，再写 prompt。 获得贴合愿景的输出，最高效的方法是在一开始就说清需求。我会在设计前花很多时间写 prompt：有时用 Claude Design 的语音按钮口述，有时坐在沙发上用手机备忘录输入，也会在散步时录下语音，再粘贴转写文本。无论习惯哪种表达方式，先在离开电脑时想清楚需求，坐下来后 Claude 才能准确执行你的设想。
- 明确告诉 Claude 应该呈现什么样子。 没有指导时，Claude 会落入它常用的几种审美风格，你大概见过它们。可指定字体和颜色，提供灵感 moodboard，或要求 Claude 先构思字体与色彩搭配，来回调整至满意为止。
- 把重复工作沉淀为设计系统。 上传品牌文件和重复使用的素材，例如 logo、幻灯片、截图、排版规范。Claude 会分析它们并生成设计系统，让后续 artifact 从你的选择出发，而不是从空白开始。
- 先要十个方案，再混搭。 多数方案不会好，这很正常；一两个会值得保留。接着可以说：“我喜欢 B，也喜欢 D 的一部分。请给我五个把二者融合的变体。”
- 画出无法描述的内容。 脑中有布局却说不清时，画在纸上并上传照片。
- 指着说。 不必写一段话说明你指的是哪个元素。点击元素后直接说话：在设备中启用听写，选择“评论”并点击评论框，语音便会像输入文字一样出现。
- 不需要高保真时先画线框图。 请求 wireframe 更快，也会让 Claude 聚焦设计的高层结构而不是视觉细节，适合快速试验许多想法。
- 最后一公里手动完成。 最后的微调应使用直接编辑工具，例如重排、删除、改文字、调尺寸、换颜色，而不是再写 prompt。直接编辑不消耗 token，尺寸和对齐这类小调整也更适合直接目测。
- 提供真实上下文。 为现有应用或网站设计功能时，可连接 GitHub。Claude 会取回组件和已有页面作为起点，多试几次便能以较高保真度复现现有设计。设计依赖外部信息时，Claude Design 也支持 Web search 与 MCP 连接。
- 与 Claude 并行工作。 不必等 Claude 完成上一轮结果后才提出新改动或新任务。你可以一次排队多条消息，也可以在它仍处理上一轮时继续对话。
让创作“活起来”
每位设计师都值得看一次 Bret Victor 的演讲 Stop Drawing Dead Fish。演讲简介说：“我们画出的每样东西，默认都应该是活的。”
无论使用 Claude Design 还是其他工具，我都鼓励设计师思考怎样让创作具有生命力。我最喜欢的 Claude Design 作品往往不属于既有类别：带交互模拟的文档、会与你对话的幻灯片、同时也是视频的图表、同时又是编辑器本身的设计。代码，尤其是 HTML，是极具创造力的媒介；设计师终于能比较轻松地用它创作。
Claude Design 之所以成为今天的样子，是因为 Anthropic 的同事不断找到我未曾预想到的用法。它现已在 Claude Pro、Max、Team 和 Enterprise 计划中以 beta 形式提供。试用 Claude Design，并带它去我们尚未想到的方向。
本文由 Anthropic 产品设计师 Nate Parrott 撰写，表达其关于 Claude Design 的观点、使用习惯与建议。