Claude Design 中文实测教程：5 个案例看 AI 设计工具怎么用

视频作者 Peter Yang 用 16 分钟直播演示了 Anthropic 推出的 Claude Design。——这不是写文案或聊天，而是一个直接生成视频、幻灯片、网页和移动端界面的 AI 设计工具。作者快速过了五个真实案例：动画宣传片、动态幻灯片、营销着陆页、健身 App 和一套设计系统。如果你是产品经理、独立开发者，或是想用 AI 快速做出可交互原型的非设计师，这期视频能帮你看清 Claude Design 现在能做什么、不能做什么，以及怎么让它先帮你跑完那 90%。

核心步骤与演示要点

1. 生成动画视频

作者的做法很直接：把 Anthropic 官宣 Claude Design 的整篇博客文章复制进输入框，用一句“Make an animated video for Claude Design featuring this content.”起手。工具没有直接出片，而是弹出一系列澄清问题：时长选 30 秒，语气选 playful and warm，视觉效果选了一个作者没细说的选项，并标注“for social media”，动效要“subtle typographic elegant transitions”。这两个“decide for me”的选项说明 Claude Design 在需要专业判断时可以让 AI 自行决定。

生成耗时约四五分钟，最终得到一段基于 HTML/CSS/JS 的代码化视频，从“introducing Claude design at the speed of thought”切入，六项功能依次滚动，每个价值主张的插图都是动态的。关键缺陷：演示中发现界面里没有导出视频的按钮，作者只能靠屏幕录制来保存成片。如果你需要直接下载 mp4，这一点目前掉链子。

2. 幻灯片——先做视频再转，效果更好

作者的实操是先把幻灯片文案迭代定稿（用常规 Claude 写了一篇教程感十足的大纲，反复修改文案），然后把所有幻灯片文案粘贴进 Claude Design，说“make a slide deck based on this copy”。出的第一版是静态幻灯片，作者评价“ok but boring”。

他的实干技巧：再开一个新项目，粘贴同一套文案，但要求“make an animated video”，出一段视频版幻灯。接着复制该项目，再加一句“convert this video into an animated slide deck that I can manually toggle through”，把视频转成可手动翻页的动画幻灯片。结果比静态版“way more engaging”。这中间还体现了手动微调：作者在编辑模式下删掉了不想要的文字“behind the craft episode 47”，又在 tweaks 面板把暖色调一键换成 ink 或 clay 调色板。

3. 重做营销着陆页 + 玩梗复刻

作者给了一个相当随便的提示“recreate the Claude Cowork marketing page”，甚至没贴链接。工具自己找到了页面，还原出约 80% 的视觉效果，但缺少视频模块，一些细节也不对。接着他继续整活：要求“update this website to a tongue-in-cheek version of Anthropic taking over all knowledge work”。出来的页面文案变成了“Anthropic's pleased to assume responsibility for all knowledge tasks. Please remain seated.” “We'll take it from here.” “We took all of it.” “Locate the nearest hammock.” 用正经的品牌风格讲机器接管全部知识工作的段子，作者觉得挺好笑，并说可能一年后 Anthropic 就该成真了。

4. 搭一个健身 App

提示“create a beautiful mobile fitness app”，随后在澄清问题里选了 strength training，身份是“busy professional”，视觉风格“energy”，要求展示一次家庭训练进度。几分钟后生成一个带暖色调界面的 App：展示 push day 主页面，有点“begin session”，进去后是 bench press，可以调重量、记努力程度、锁定组数。作者指出有文字重叠问题，但 Claude Design 在后端自行截图检查、自动修正部分 bug，无需用户提醒——作者认为 Anthropic 把 playtesting 直接做进了设计流。

5. 设计系统——费 token 但能跑通

作者自称 PM 而非专业设计师，他上传了一份 Apple Liquid Glass 的 Figma UI kit，说“create the Apple Liquid Glass design system”。生成过程约 10 分钟，而且“pretty much going to use up all of your tokens”。出来的设计系统包含 typography、color、spacing、iconography、motion easing curves、radii、shadows 等，作者一路点“Looks good”确认完，就算系统就绪。随后他用这套系统重做了一遍健身 App，结果玻璃质感确实在，但版面混乱、重叠问题比纯生成的版本更严重。作者坦承可能因为自己给的设计系统质量不够，但就效果而言，系统挂载的 App 反而更差。

其他玩法的关键提示词

• 3D 旋转地球：“Design interactive dark theme graphic showing how culture flows between cities, and then make a rotating globe.”
• 带粒子特效的大文本框：“create a very large editable text box. And for certain words like fire, smoke, metal, and wind, render visual and particle effects that match the word.” 输入 fire 出火焰，输 smoke 出烟雾效果，electric 带闪电，ice 和 stars 也有对应动效。

作者的几点判断

1. AI 负责前 90%，人做后 10%
   视频中反复出现“90% by AI, 10% manual”。所有项目都需要手动 tweaks、编辑、改调色板，AI 偏不了一次搞定。

2. Claude Design 是 Anthropic 知识工作栈的一环
   作者认为 Anthropic 在用 Claude Code（开发）、Claude Design（设计）、Claude Co-work（文档）组合拳，直接对标 Figma、Google Workspace、Microsoft Office 以及 Replit、Lovable、Gamma 这些 AI 原生工具。传统工具针对人工逐像素设计，新一波工具的默认路径则是 AI 先生成，人再收尾。

3. 对独立构建者极其友好，但早期版本还很“buggy”
   作者觉得现在正是 solo builder 的好时代，AI 能充当入门级设计师和工程师。但 Claude Design 仍有很多问题，比如文本重叠、无法导出视频，产品间（Design、Co-work、Code）怎么整合也还不清楚。

核对补充

视频中演示的是 Claude Design 图形界面产品，而当前官方文档（docs.claude.com/en/docs/welcome）侧重 Claude 模型、API 调用、消息结构等开发者向内容，未包含 Claude Design 的具体参数、限制或版本说明。文内涉及的具体操作步骤均来源于视频演示；官方 API 文档可作为理解底层模型能力的背景，但与设计工具体验无直接对应。

国内访问

Claude Design 及 claude.ai 系列产品在国内无法直接访问，需要稳定的境外网络环境。若仅测试 API，需注意 Anthropic 对服务区域存在限制。

国产替代

视频中的动画 / 幻灯片 / 界面生成，国内可横向参考：即梦（视频生成 / 动画）、稿定 AI 设计（营销页面与幻灯片）、MasterGo AI 或 即时设计（UI 与设计系统），以及 Cursor / 通义灵码 搭配前端框架的编码式生成。

内容来源

• 视频：https://www.youtube.com/watch?v=WMnk1LFBMqA（频道：Peter Yang）
• 官方文档：https://docs.claude.com/en/docs/welcome