Anthropic 上线 的Claude Design，定位为"对话驱动"的 AI 视觉设计工具，覆盖原型、交互页面、幻灯片、一页纸、营销物料等场景，基于刚发布的 Claude Opus 4.7 视觉模型，面向 Pro、Max、Team、Enterprise 订阅者开放研究预览版（Enterprise 默认关闭）。入口为 claude.ai/design，不额外收费但计入订阅的 token 额度。消息公布当天 Figma 股价下跌约 7%，过去 12 个月累计跌幅已近 50%——市场对"AI 原生设计工具正面挑战 Figma/Adobe/Canva"这件事给出了明确反应。 本篇以产品经理 Peter Yang 的五场 Live Demo（视频、幻灯片、落地页 + 交互效果、移动 App、设计系统）为主线，穿插可复用的 prompt 模板、踩坑点和竞品对比，提供一份可以照着跑的 Claude Design 上手教程。
产品定位与核心能力：代码即通用媒介
理解 Claude Design 最关键的一句话：视频、幻灯片、网页、App、动画——在 Claude Design 里全都是代码。底层是 HTML/CSS/JavaScript（小部分场景用更重的前端框架），AI 把自然语言转成这些代码，再渲染成"看起来像设计稿"的产物。这个判断直接决定了它的能力边界：凡是能通过代码表达的视觉形态它都能做；凡是依赖专门图形引擎（比如时间轴剪辑、像素级图像合成）的能力它暂时做不了。
官方主推的几项核心能力：一是设计系统自动继承，Onboarding 时 Claude 会读团队的 codebase 和设计文件，自动生成品牌色、字号、组件库，后续每个项目默认继承，且支持维护多套系统；二是多源导入，支持文本 prompt、DOCX/PPTX/XLSX 文档、图片、codebase、以及 Web Capture 工具直接抓取线上网站的元素；三是细粒度编辑，inline 评论定位元素、直接改文字、自动生成微调滑杆（间距、色彩、布局）、并可将局部改动"扩散"应用到整份设计；四是多格式导出，PDF、PPTX、独立 HTML 文件，并可一键发送到 Canva 继续编辑协作，或交给 Claude Code 继续写成可上线产品。 Anthropic 公布的标杆案例：在线教育公司 Brilliant 过去需要 20+ 个 prompts 才能在其它工具里复刻的复杂交互页面，在 Claude Design 里只需 2 个 prompt；Datadog 产品团队把原本一周的"brief → mockup → review"循环压缩成了一次对话。这两个案例是理解 Claude Design 价值上限的最佳参照。
场景一：动画视频——4 分钟生成 30 秒动画，但导出仍是痛点
实操流程：新建 project，粘贴素材内容（如一篇博客），直接写 prompt："make an animated video for Claude Design featuring this content"。Claude 的一个"工程化"细节延续自 Claude Code——自动追问澄清式问题：视频时长、语调、覆盖内容、视觉方向、使用场景（社媒/官网）、过渡风格、是否包含产品 UI Mock、结尾形式。你可以选"decide for me"把决策权交给它。
实测结果：30 秒动画视频在 4-5 分钟内完成，包含标题 hero、六个使用场景、三条价值主张、CTA 结尾，每个版块配有独立的动画插画。成品作为"社媒宣发物料"完全可用。
两个关键踩坑点：第一，视频本质是代码，因此 Tweak 面板可以实时改色板、加装饰——这是常规视频工具做不到的灵活度；第二，目前无法直接导出为 mp4，只能靠录屏保存，这是当前研究预览版最显著的功能缺口。
对比 Gamma、Pika、Runway 等 AI 视频工具：Claude Design 的优势在"文字/UI 动画 + 品牌一致性"，劣势在"无真实视频素材生成 + 无导出通路"。如果目标是实拍风格的 AI 视频，这不是它的战场。 场景二：幻灯片——先做视频再转 Deck 是最佳 Hack
直觉做法是"把大纲交给 Claude Design，生成幻灯片"。但 Peter 的实测显示：直接生成的 static deck 相当无聊，远不如视频版本有吸引力。
更值得推广的 Pro Tip——两步法：
- 第一步用 Claude.ai（非 Design）迭代文案：让 Claude 先写一版教程型文稿，再逐页打磨每张幻灯片的文字（标题 + 正文）。这一步目的是把"信息"和"设计"解耦。
- 第二步切到 Claude Design：粘贴打磨好的逐页文案，先 prompt 生成 animated video，拿到满意的动画版本后，再点 Share → Duplicate Project，在新项目里仅用一句话 prompt："convert this video into an animated slide deck that I can manually toggle through"。
这样生成的 Deck 会继承视频的动画元素，每张幻灯片在切换时仍有运镜和过渡，比 static 版本的观感强一个量级。
收尾 10% 仍需手动：AI 负责前 90%，剩下 10% 是精修。进入 Edit 模式可直接删文字、调顺序、切配色（如把 warm 切换成 ink 或 clay），也可以再 prompt "swap video into the first slot and slides into the second"来做结构级调整。
对比 Gamma（当前 AI 幻灯片市场占有率最高的工具）：Gamma 的优势是幻灯片专用模板丰富、协作和发布链路成熟；Claude Design 的差异化在于"每页都是代码级可编辑"+ 设计系统一致性 + 与 Canva 无缝衔接。Gamma 更适合做纯内容演示 Deck，Claude Design 更适合做需要"产品截图动画 + 品牌感"的对外 Pitch Deck。
场景三：落地页 + 交互效果——模仿达到 80%，加点脑洞体验更有趣
Prompt 示例（懒人版）："recreate the Claude Cowork page"。Claude Design 会自己找到页面、抓取结构、复刻视觉。实测还原度约 80%：插画和大部分视觉还原度高，但视频嵌入、部分细节区块未能完整还原。
真正有趣的是二次创作能力：接着 prompt "update this website to a tongue-in-cheek version of Anthropic taking over all knowledge work"，Claude Design 直接在保留原风格的前提下把整站文案改写成自嘲风："We'll take it from here. We took all of it. You don't have to do anything anymore. Just go relax somewhere."——整个改写保持了视觉连贯性，说明它理解"风格不变、文案换骨"这件事。
交互式脑洞 Demo：
- 3D 地球：prompt "Design interactive dark theme graphic showing how culture flows between cities, then make a rotating globe"。成品会自带一组 toggle（发光强度、标签显示等），地球是旋转的、可交互的——这已经是 D3/Three.js 级别的交互能力，而不是静态插画。
- 粒子效果文本框：prompt "create a very large editable text box. For certain words like fire, smoke, metal, and wind, render visual and particle effects that match the word"。在文本框打"fire"会冒火，打"ice"会结霜，"electric"触发闪电——这种"语义响应式视觉"过去需要前端工程师手写。
这类 Demo 最适合用在产品 Landing Page 的 hero 动画、交互式 blog post、节日活动页等场景。
场景四：移动 App——4 分钟出可点击原型，已内置截图自检
实操 prompt："create a beautiful mobile fitness app"。Claude 同样用澄清式问题收窄需求：训练类型（力量 / 跑步）、用户画像（严肃运动员 / 忙碌职场人）、视觉风格（能量 / 冷静 / 极简）、首屏场景（家庭训练 / 健身房）、视觉变体数量、交互程度（可点击导航 / 完全交互 / 你决定）。
耗时约 4 分钟，产出一整个可点击的健身 App 原型：首页（下一个训练日 + 数据看板）、Begin Session 页（卧推调整重量和 effort 值、Log Set）、完整跳转逻辑。
一个被低估的细节：Claude Design 内置了 playtesting 机制——生成过程中它会自主对自己的设计进行截图、审查、发现问题后自动修复，比如文本重叠、对齐错位。这解决了过去 AI 生成 UI 最大的痛点之一（生成完看起来对，用起来各种视觉 Bug），开发者不需要手动触发 Review 流程。
对比 v0.dev（Vercel）、Lovable、Bolt.new：这三家是最接近 Claude Design 的 AI 原型/代码工具，但都偏"生成即可上线 React 应用"；Claude Design 的差异化是设计先行、代码后出——先给你"像设计稿一样可调"的对象，导出时再选择 HTML / PPTX / Canva / Claude Code 接管。这让非开发人员（PM、Marketing）也能在不碰代码的前提下主导全流程。 场景五：设计系统——10 分钟烧掉半周 token，谨慎使用
Peter 的做法：上传一份 Apple Liquid Glass 的 Figma UI Kit，prompt "create the Apple Liquid Glass design system"。Claude Design 会逐项生成 Typography、Color、Spacing、Iconography、Motion Easing、Radii、Shadows，每完成一类都让用户确认。整个过程耗时约 10 分钟。
最重要的一条风险提示：生成设计系统会几乎耗尽一周的 token 额度。TheNewStack 记者实测——搭建一个设计系统 + 一个新闻网站原型 + 少量 tweak + 一个解说视频，已经用掉周配额的 50% 以上。Peter 的建议：只在你真的需要沉淀一套复用的设计系统时做，且尽量先在日常工作中搭好再导入，而不是每次从头生成。
生成的设计系统挂载到 App 项目后，产出的界面会"看起来像 liquid glass"，但会有叠加、对齐等问题——原因不是 Claude Design 不行，而是输入的设计系统本身信息不够完整（单纯一个 UI Kit 缺少组件规则、交互规范）。这反过来印证了官方对标杆用户的定位：对有成熟设计系统的团队价值最大，而不是从零起步的个人开发者。
竞品格局与定价：Anthropic 在蚕食谁的生意
Claude Design 发布后的市场反应比产品本身更值得玩味：Figma 股价跌 7%（此前 12 个月已累跌近 50%），Adobe 下跌约 1.5%；Anthropic CPO Mike Krieger 在发布前三天（4 月 14 日）从 Figma 董事会辞职；Anthropic 二级市场最新估值约 8000 亿美元，相比两个月前的 3800 亿翻了一倍多。
业内分析认为，Anthropic 正在形成一个"AI 原生知识工作栈"：Claude Code（开发）、Claude Design（设计）、Claude Cowork（文档）、Claude for Excel/PowerPoint/Word、Claude for Chrome。所有知识工作类 SaaS 公司都正在成为 Anthropic 的竞争对手——向下看是 Figma、Adobe、Canva、Google Workspace、Microsoft Office；横向看是 Gamma、Lovable、Replit、Bolt、v0 这些 AI 原生创业公司。 与这些玩家各自的错位：
- Figma：专业设计师的主战场，Claude Design 目前还无法取代 Auto Layout、原型交互细节、多人实时协作的深度。但 Figma 已经失去了"原型快速探索"这一前端市场。
- Canva：Anthropic 明确把 Canva 定位为合作伙伴而非对手，Claude Design 一键导出到 Canva 是官方特性。实际效果——把"从 0 到 1"留给 Claude Design，把"精修和发布"留给 Canva。Canva CEO Melanie Perkins 亲自站台。
- Gamma：AI 幻灯片专用，产品深度更高；Claude Design 的幻灯片是"顺带"能力但胜在动画自由度。
- Lovable / v0 / Bolt：三者更偏向"生成即上线的 Web App"，Claude Design 更偏向"设计先行、可多格式输出"，与 Claude Code 联动形成闭环是其独家资产。
定价与额度：对 Pro/Max/Team 用户是无额外费用，但 Claude Design 的生成非常耗 token——视频和设计系统尤其明显。Anthropic 提供"extra usage"付费通道用于突破周限额。Enterprise 默认关闭，需要 IT 管理员开启。
局限与已知问题
研究预览版阶段有几处已知短板，踩坑前值得知道：
一是视频无法导出 mp4，只能录屏，这是目前所有用例里最显著的功能空缺；二是 Inline Comment 可能在 Claude 读取前消失，官方 workaround 是把评论内容直接粘贴到 chat；三是 Compact View（紧凑布局模式）偶尔触发保存错误，需切换回 Full View 重试；四是 大型 codebase 链接可能卡顿，建议链接具体子目录而非整个 monorepo；五是输出质量强依赖输入的设计系统完整度——如果只丢一份 UI Kit，生成的 App 会有视觉 Bug。
更宏观的局限：AI 仍然只能做前 90%，最后 10% 必须人工精修。Peter 在视频里反复强调的这一点，几乎是目前所有 AI 生成式工具的共性结论。所以"完全替代设计师"的说法言过其实；更准确的定位是"让 PM、创始人、独立开发者获得一个入门级设计师"。
选型建议：谁该立刻用、谁可以观望
立刻上车：
- 有 Claude Pro 订阅的 PM、创始人、独立开发者——只需要用现有额度就能产出"能见人"的 Pitch Deck 和交互原型；
- 已有成熟设计系统的产品团队——Claude Design 的价值在此放大最多倍，看 Brilliant 和 Datadog 的使用数据即可；
- 需要对外宣发动画视频/登陆页/社媒物料的内容团队——4 分钟出动画 Deck 在任何成本结构下都是碾压级效率。
可以观望：
- 重度依赖 Figma Dev Mode、Design Token 规范化流程的成熟设计组织——研究预览版的稳定性和协作深度还不够；
- 目标是"AI 一键生成可上线产品"的场景——更应该直接用 v0/Lovable/Bolt 或 Claude Code；
- 对 token 消耗敏感的个人用户——生成一次设计系统即用掉周配额一半，值不值得取决于复用频次。
务必避开：
- 真实视频内容制作——Claude Design 生成的是"代码做的动画"，不是视频本体；
- 完全没有视觉参考/设计系统的从零项目——结果会明显像模板，品牌差异度低。
Claude Design 是 Anthropic "用一个大模型吃掉整个知识工作栈"战略拼图里最新的一块，且位置关键：它是 Claude Code（偏工程）和 Claude Cowork（偏文档）之间的桥梁，让一个 prompt 可以贯穿"想法 → 设计 → 代码 → 文档 → 发布"。对习惯用 AI 驱动工作流的从业者，这是近期最值得花一个下午认真玩一遍的工具——它让"独立一人做完一家公司所有对外物料"这件事，第一次变得真的可能。
AI 速览
