Claude 动画：如何使用 Claude 制作动画并将其发送到您的应用程序
如何使用 Claude 制作动画：Claude Design、Claude 运动、工件和 Claude Code，每个输出什么，以及如何将 Claude 制作的动画放入真实的应用程序中。
核心要点
您可以通过三种方式使用 Claude 制作动画：用于视觉输出的 Claude Design 或 Claude Motion，用于 HTML、CSS 和 JavaScript 演示的 Claude 工件，以及通过 MCP 编写动画代码或驱动其他工具的 Claude Code。每一个都会为您提供一个设计、一个视频文件或代码，但仍需要将其放入您的产品中。必须在真实应用程序内运行的动画需要应用程序可以运行的格式，因此大多数 Claude 制作的动作在发布之前都会交给运行时。
关于本指南
ExodeUI 不隶属于 Anthropic。 Claude 是 Anthropic 的商标。本指南根据 Anthropic 自己的文档描述了 Claude 可以生成哪些运动，以及如何将该运动导入到已发布的应用程序中。
使用Claude制作动画的方法
Claude 可以产生几种不同形状的运动，并且它们不可互换。你使用哪一个决定了你能得到什么以及还剩下多少工作。
- Claude Design：与 Claude 聊天以在画布上获取设计和交互式原型。它包含在 Free、Pro、Max、Team 和 Enterprise 计划中，独立网站 claude.ai/design 将于 2026 年 12 月 14 日关闭。
- Claude Motion：将提示和文件转换为短动画，构建为像视频一样播放的代码，并导出为 MP4。它在团队和企业计划中处于测试阶段，并且不使用视频模型，因此它无法制作逼真的镜头或人物。
- Claude 工件：可运行的 HTML、CSS 和 JavaScript，可在对话中预览，这对于动作演示来说速度很快。
- Claude Code：在存储库中编写动画代码，或通过 MCP 编辑工具，包括 ExodeUI MCP 服务器。
产生更好运动的提示技巧
模糊的提示会产生模糊的动作。 Claude 响应运动设计师无论如何都会要求的细节：属性、数量、时间、触发器和状态。说出它们的名字而不是描述一种感觉。
命名缓动和持续时间
说“带有光弹跳的弹簧”或“缓出超过 200 毫秒”而不是“平滑”。模型可以使用的值胜过形容词。
命名触发器
说出它的启动方式：“点击时”、“悬停时”或“列表加载完成时”。具有触发器的运动可以稍后连接到真实事件。
说出各州的名称
列出它们，例如“空闲、按下、加载、成功、错误”，这样您就可以获得一个小型状态机而不是单个动画。
命名平台和限制
说明输出是 React、SwiftUI 还是 Web 演示，以及它不能执行的操作，例如“仅对变换和不透明度进行动画处理”。
为什么演示动画尚未做好制作准备
Claude 可以生成在预览中看起来正确的动画代码，但在发布之前仍需要进行工作。差距不是质量，而是产出的形状。
- 它通常是一个屏幕的一次性代码，而不是可重用的组件
- 它通常具有单一状态，并且没有加载、错误、禁用或中断交互的逻辑
- 它是为一个平台编写的，因此 React 版本如果不重写就无法在 iOS 上运行
- 计时和缓动实时在代码中，因此设计人员无法在没有开发人员的情况下更改它们
- 任何要重用的内容都需要一种应用程序可以运行的文件格式，而不是粘贴到一个组件中的代码片段
使用 ExodeUI 的 MCP 服务器发送 Claude 制作的动画
ExodeUI 是一个用于交互式 UI 和动画的浏览器和桌面工具。动画位于一个打开的 .exode 文件中，其中包含布局、时间轴、状态机、弹簧物理和逻辑。运行时包在 React、Vue、Svelte、Angular、Solid、React Native、SwiftUI 和 Flutter 中播放该文件，因此相同的动画在应用程序内部运行，而不是为每个平台重新构建。 ExodeUI 公开了具有 100 多个工具（构建、动画、添加逻辑和物理、同步到实时编辑器、导出）的 MCP 服务器，因此 Claude Code、Cursor、OpenCode 和其他 MCP 客户端可以根据简单语言提示创建和编辑文件。该设置位于产品中，而不是脚本中，因此无需复制命令：在 ExodeUI 设置中打开 MCP，然后以连接任何 MCP 服务器的方式连接客户端。我们生产 ExodeUI，因此也请检查替代方案。
1、打开ExodeUI中的MCP
在ExodeUI设置中，启用MCP服务器。它发布了人工智能编码客户端用来构建和编辑文件的工具。
2. 连接您的客户端
将 Claude Code、Cursor、OpenCode 或任何 MCP 客户端指向 ExodeUI 服务器，就像将其连接到其他 MCP 服务器一样。
3. 描述动作
要求以通俗易懂的语言提供动画。代理编辑 .exode 文件，更改将显示在 ExodeUI 编辑器中。
4. 发送相同的文件
通过 React、SwiftUI、Flutter 等中的 ExodeUI 运行时渲染 .exode 文件，并从代码驱动其输入和状态。
Claude Design 与 Claude Code + ExodeUI
两条路线都以提示开始，以产品中的动作结束。它们之间发生的情况有所不同：Claude Design 将工作保留在设计画布中，而 Claude Code 加上 ExodeUI 将其保留在运行的文件中。
你得到什么
Claude Design：设计或可点击原型，以及 Claude Code 的切换包。 Claude Code + ExodeUI：作为组件播放的 .exode 文件。
动画运行的地方
Claude Design：在设计画布和共享原型中。 Claude Code + ExodeUI：在应用程序、网络、iOS 和 Android 上，对输入和数据做出反应。
移交后编辑
Claude Design：改变设计，然后再次交接。 Claude Code + ExodeUI：设计人员编辑应用程序运行的同一文件，无需重建。
Claude Design 获胜的地方
探索许多视觉方向，向利益相关者展示，并根据任何计划（包括免费计划）制作静态或原型作品。
ExodeUI 获胜的地方
必须通过状态、物理和输入来传送运动，从单个文件跨平台重复使用。
生产实施片段
import { ExodeUICanvas } from 'exodeui';
// Claude Code builds and edits /fluid_card.bexode through the ExodeUI
// MCP server. Your code passes inputs in and hears events back.
export function FluidCard() {
return (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}要记住的关键 Principle
- Claude Design 和 Claude Motion 生成视觉作品，Claude Code 生成代码，但它们都不是运行时
- 动画只有在具有应用程序可以运行的格式并连接到真实状态和输入后才会发布
- 在提示中命名缓动、触发器和状态，以获得您可以实际使用的动作
- ExodeUI 的 MCP 服务器允许 Claude Code 创建和编辑一个在 React、SwiftUI、Flutter 等中运行的 .exode 文件