2025年秋，我是Claude Code for VS Code项目中唯一的产品设计师，和两位工程师一起重新构想Claude Code在终端外的友好界面。我们于9月底发布了测试版，11月迎来了Opus 4.5版本，Claude Code团队开始快速高效地迭代。工程师们的交付速度大幅提升，而我仍保持着原有节奏，迫切需要找到赶上的方法。
Claude Code运行在终端，完全基于文本，我最初的尝试也是如此：将输出复制到Claude，附上截图，问它“这是我们想添加的功能，你来设计吧”。结果并不理想。大约一个月的时间里，我作为副项目不断探索如何提升Claude的设计输出质量。
给Claude一个HTML游乐场
最终我发现答案：Claude对HTML非常擅长。我们通常把HTML看作网站的格式，但它其实是一个丰富且交互性强的视觉媒介——你能在幻灯片、视频或PDF中做的东西，都能用网页实现。于是我让Claude生成HTML，并设计了一个分屏界面，左侧聊天，右侧显示输出。
这很有用，但产品设计需要结合对产品和品牌的理解。接下来，我花时间将Anthropic品牌的精髓（字体、颜色、素材和设计原则）提炼成提示词。这样，当我输入提示时，输出就符合Anthropic的品牌指南。
我将这些整合成一个小型内部原型并分享给团队。产品设计师们立刻用它制作交互原型。在传统设计工具中，制作点击原型需要手工模拟每个界面状态并连接它们，而这里你只需给Claude素材，说“让它动起来”。每个产出都有分享链接，像分享文档一样方便。
Claude Design成为视觉创作的新媒介
我第一次意识到Claude Design的魅力是在Anthropic Labs团队线下会议的创意提案环节：每个人都用它快速制作幻灯片，甚至在轮到自己发言前临时完成。这次经历促使Labs团队正式投入资源，Claude Design从副项目变成了正式项目。
我们不再把它仅仅看作产品原型工具，而是任何视觉沟通的工具：幻灯片、落地页、单页PDF、邮件、动画、社交媒体视觉内容。我认为它比产品设计更进一步：你和Claude协作，创作以沟通和构思为主的视觉作品。
随着模型在视觉理解上的提升，Claude Design能完成的工作种类和质量也在提升。我们最新的Opus级模型Claude Opus 5比之前更擅长读取图表、示意图和截图，搭配Claude Design制作演示文稿和备忘录更加强大。
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做基础设计工作：绘制线框图、生成多版本流程供同事反馈。最近的几个例子：
- Claude Design介绍动画：注册时播放的动画是在工具内制作的，但我先让Claude Design帮我做了一个定制视频编辑器，再用它制作动画，因为我不是动画师。
- 地铁时刻应用：带有可调动画控制，精准调节运动物理效果。
- Instagram风格的颜色控制：我让Claude用滑块和预设调整应用配色，而不是用文字描述颜色。
- Claude Design自身的重新设计：我和两位同事在工具内反复试验编辑器的新设计，虽然不会直接发布，但这是探索产品未来可能性的方式。
使用Claude Design的最佳实践
- 先思考再提示：最有效的输出来自于提前明确需求。我经常花大量时间写提示，有时用语音输入，有时在手机备忘录打字，或录音后转录。无论哪种方式，离开电脑时先理清思路，回到电脑时Claude能精准执行。
- 告诉Claude外观要求：不加指令时，Claude会选它喜欢的风格。你可以指定字体、颜色，提供灵感图板，或让它反复尝试字体配色，直到满意。
- 建立设计系统：上传品牌文件和素材（logo、幻灯片、截图、排版规范等），Claude会分析并生成设计系统，后续作品都基于你的品牌风格。
- 请求十个选项再混合：大多数选项可能不理想，但总有一两个不错。然后告诉Claude“我喜欢B和D的结合，给我五个混合版本”。
- 画出难以描述的布局：如果脑中有布局但难以用词表达，画在纸上拍照上传。
- 指点并语音说明：不用写长段落，只需点击元素并说话，开启设备的语音输入，评论框会自动转录你的话。
- 先做线框图：当不需要高保真时，线框图更快，能让Claude专注于设计结构。
- 最后一步手动调整：用直接编辑工具（调整、删除、改文字、改大小、改颜色）做收尾，避免用提示完成细节，节省token且更精准。
- 提供真实上下文：设计已有应用功能时，连接GitHub，Claude会抓取组件和界面作为起点，多次尝试后能高保真还原现有设计。网页搜索和MCP连接也支持外部信息。
- 持续与Claude协作：不必等Claude完成结果再发新指令，可以同时排队多个消息，或边聊边改。
让设计“活”起来
每位设计师都应看一场Bret Victor的演讲《停止画死鱼》，核心观点是“我们画的每样东西都应默认是活的”。
我鼓励设计师，无论用Claude Design还是其他工具，都思考如何让作品活起来。我最喜欢的Claude Design作品是不拘泥于传统框架的：带交互模拟的文档、会说话的幻灯片、既是视频又是图表的设计，甚至设计本身就是编辑器。代码，尤其是HTML，是极具创造力的媒介，现在设计师也能较容易地使用它。
Claude Design之所以成形，是因为Anthropic内部不断有人发现我未曾预料的用法；它现已在Claude Pro、Max、Team和Enterprise计划中以测试版形式提供。欢迎尝试并带它去我们未曾想到的方向。
本文作者为Anthropic产品设计师Nate Parrott，表达其对Claude Design的使用经验和建议。
