Lottie Creator MCP

官方

Lottie Creator MCP 将你的AI助手直接融入动画工作流程，使其能够完全访问LottieFiles Creator，通过自然语言为你构建和编辑Lottie动画。

访问 lottie.link

你可以用 Lottie Creator MCP 做什么？

Create animations from scratch — describe an animation like a loading spinner or character motion and the AI builds it in Lottie Creator layer by layer.
Edit existing animations — ask the AI to change colors, adjust timing, swap easing curves, rename layers, or refactor a scene using the current file state.
Batch generate animation variants — produce multiple versions at once, such as dark/light themes, different sizes, or brand color variations.
Inspect animations for accessibility and brand — request analysis for contrast issues, motion speed, color consistency, or brand alignment, then apply fixes.
Manage scenes and layers — create and switch scenes, set visibility and blend modes, apply masks and mattes, and animate transforms like position, rotation, and scale.
Animate with keyframes and easing — add, read, or remove keyframes on properties such as opacity, color, and path, and set linear or cubic-bezier easing.

文档

Lottie Creator MCP

undefined

Lottie Creator MCP

Lottie Creator MCP 将你的 AI 助手直接带入你的动画工作流程——让它能够完全访问 LottieFiles Creator，从而通过自然语言代你构建和编辑 Lottie 动画。你可以在下方查看安装方法。

MCP 服务器是 AI 代理使用 Model Context Protocol 与数据源交互的标准化接口的一部分。Lottie Creator MCP 通过本地桥接将 Claude、Cursor 和 Windsurf 等 AI 助手连接到 Creator API——这意味着你的 AI 能获得与你相同的 Creator 完全访问权限。

启用 MCP 后，你可以：

✦ 从零开始创建动画

描述你想要的内容——一个加载动画、一个进度条、一个角色动画——你的 AI 将直接在 Creator 中逐层构建。

✦ 编辑和修改现有动画

更改颜色、调整时间、替换缓动曲线、重命名图层或重构整个场景。你的 AI 会读取文件的当前状态并实时编辑。

✦ 批量生成动画变体

一次性自动生成动画的多个版本——深色和浅色主题、不同尺寸、品牌颜色变体。

✦ 分析动画的可访问性和品牌一致性

要求你的 AI 检查动画的对比度问题、运动速度、颜色一致性或与品牌指南的对齐情况——并修复发现的问题。

✦ 集成到你的项目工作流程中

在进行更广泛的项目时，随时生成动画素材。

要使用 MCP，请在你的 AI 客户端中安装它并在 LottieFiles Creator 中启用。以下部分将逐步介绍每个步骤。

前提条件

在安装之前，请确保你已设置好以下内容：

✅ 📦 Node.js 18+： 通过 npx 运行 MCP 包所必需。下载 Node.js →

✅ 🎬 LottieFiles Creator： 在浏览器中打开 creator.lottiefiles.com 并保持此标签页打开。

✅ 🤖 兼容 MCP 的 AI： Claude、Cursor、Windsurf、VS Code Copilot 或任何其他支持 MCP 的助手。

首先，前往 Creator MCP README 文件，你可以在那里访问 MCP 字符串和命令。

安装 MCP

对于你所有的 AI 工具，你可以使用以下配置：

{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}

本文档涵盖了我们支持的一些 MCP 客户端的安装步骤。有关支持的 MCP 客户端安装指南列表，请参阅以下列表：

支持的 MCP 客户端

按照你特定客户端的说明安装并连接 Lottie Creator MCP。一些客户端还支持技能，这些技能添加了运动设计知识，使你的 AI 能够生成更有意图、更精致的动画。🖇️ 这是 LottieFiles 的运动设计技能。

按照你的 MCP 客户端的步骤操作：

**1. 打开 Claude Desktop 设置**

导航到 **设置 → 开发者** 并点击 **"编辑配置"**。这会在你的计算机上打开一个 JSON 配置文件，你可以在 VS Code、Cursor 或任何文本编辑器中编辑它。

<Image src="https://assets.docs.lottiefiles.com/static/cbcf2779e6-640.webp" alt="Claude Desktop Settings → Developer, Edit Config" caption="Claude Desktop Settings" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/cbcf2779e6-640.webp 640w, https://assets.docs.lottiefiles.com/static/cbcf2779e6-1024.webp 1024w" width="1490" height="1070" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAIAAABxZ0isAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAXklEQVR4nGWNSwqAMAxEc/8DiXgXF4rgp41pTNNWuxGpFEGYxcCbDwgjO5tPVaEUJZ9aBLtdinNkhFGFhPEBhOuVfA0G79DML6gL49B3bSOMMRxQin+B3Sb1+L0t4AYM8YjEckZSmwAAAABJRU5ErkJggg==" />

**2. 添加 MCP 配置**

将以下内容粘贴到配置文件中的 `mcpServers` 对象内。你可能需要添加或删除括号/逗号以保持 JSON 有效。

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

以下是粘贴上述配置后配置文件可能的样子：

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  },
  "preferences": {
    "quickEntryShortcut": "off",
    "coworkScheduledTasksEnabled": false,
    "ccdScheduledTasksEnabled": false,
    "sidebarMode": "chat",
    "coworkWebSearchEnabled": true,
    "floatingAtollActive": true
  }
}
```

**3. 验证连接**

在聊天中点击 **"+"** 按钮，导航到 **连接器**，并确认 `lottiefiles-creator` 开关已打开。

<Image src="https://assets.docs.lottiefiles.com/static/661d017685-640.webp" alt="Claude Desktop Connectors with lottiefiles-creator enabled" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/661d017685-640.webp 640w, https://assets.docs.lottiefiles.com/static/661d017685-1024.webp 1024w" width="1470" height="840" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAXUlEQVR4nE1NQQ7AIAjz/1/14CZGBJEu6JaMpGkobUmqioC7IybYfWGtgCEREUQEYzCuu6J1xZxnNzOkUgrMJoJzzhCdYO5QldNQiXZdJJh5i+eFvYYW4hH+h8/wAH2hnMwEoNxAAAAAAElFTkSuQmCC" />

**1. 在你的终端中运行以下命令**

就这样。Claude Code 将自动安装并注册 MCP。

```
claude mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```

#### **为 Cursor 使用 Lottie Creator MCP**

1. 按下 `Cmd + Shift + P`（Mac）或 `Ctrl + Shift + P`（Windows/Linux）→ 搜索 **"Cursor 设置"**
2. 在侧边栏中前往 **工具与 MCP**
3. 点击 **"添加自定义 MCP"**

<Image src="https://assets.docs.lottiefiles.com/static/1d779c5bf1-640.webp" alt="Cursor Settings → Tools & MCP, Add custom MCP" caption="Cursor Settings" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/1d779c5bf1-640.webp 640w, https://assets.docs.lottiefiles.com/static/1d779c5bf1-1024.webp 1024w" width="1724" height="1122" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAYElEQVR4nD2OWQpFMQhDXUVnh1JKu/8N5qKPvg8hJPEoqSqYGbVWlFKQUkLO+T8kIhGOMXDvhZnFgpqGR27MOdF7j8JaC04VFbDyr/AoHuy9cc4JUmsN5BgXft9L75enP/5xNWNuTqnuAAAAAElFTkSuQmCC" />

4. 粘贴：

```jsx
{
  "mcpServers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

保存并 **完全重启 Cursor**（退出并重新打开 - 不仅仅是重新加载）

重启后，前往 **设置 → 工具与 MCP**，你应该会看到 `lottiefiles-creator` 旁边有一个绿点，确认已连接。

<Image src="https://assets.docs.lottiefiles.com/static/d5e4c14c2c-640.webp" alt="Cursor Settings → Tools & MCP, lottiefiles-creator connected" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/d5e4c14c2c-640.webp 640w, https://assets.docs.lottiefiles.com/static/d5e4c14c2c-1024.webp 1024w" width="1724" height="1118" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAYUlEQVR4nD2NSw7AIAhEOYVfBHSlsfe/3jTY2MUEeDAMqSpEBKUUpJQQQkCM8Rf5MucMZsacE713tNagZoeRmR3ow1oLY4xzICoQU5BHOKhcsZ/9fWCGG5sKyJ033+vtr14GGTV0KRWZBgAAAABJRU5ErkJggg==" />

**选项 A：深度链接安装**

1. 点击 [LottieFiles MCP 服务器深度链接。](https://vscode.dev/redirect/mcp/install?name=%40lottiefiles%2Fcreator-mcp\&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40lottiefiles%2Fcreator-mcp%22%5D%7D) 这将在 VS Code 中打开 MCP 配置。
2. 按下 **安装** 按钮。

<Image src="https://assets.docs.lottiefiles.com/static/215df2a202-640.webp" alt="VS Code Install MCP Server prompt for Lottie Creator" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/215df2a202-640.webp 640w, https://assets.docs.lottiefiles.com/static/215df2a202-1024.webp 1024w" width="1720" height="736" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADCAIAAAAhqtkfAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAANUlEQVR4nGNQ19TW0NFX0tCSlVcQk5AUFBaFIAYJKRlxSSlhUXG4EFRCSkZOUlpWXFIKTQIAGEcGwVfSfA0AAAAASUVORK5CYII=" />

**选项 B：CLI 或配置文件**

或通过 CLI：

终端

```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```

或添加到你的 `.vscode/mcp.json`：

JSON — .vscode/mcp.json

```
{
  "servers": {
    "lottiefiles-creator": {
      "command": "npx",
      "args": ["-y", "@lottiefiles/creator-mcp@latest"]
    }
  }
}
```

ℹ️ 你需要在你的账户上启用 [GitHub Copilot](https://github.com/features/copilot) 才能在 VS Code 中使用 MCP 工具。

``` amp mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` 遵循 Antigravity 的 MCP 设置文档并使用上述配置。遵循 Cline 的 MCP 设置文档并使用上述配置。遵循[配置 MCP 指南](https://github.com/openai/codex/blob/main/docs/config.md)使用：

```
[mcp_servers.lottiefiles-creator]
command = "npx"
args = ["-y", "@lottiefiles/creator-mcp@latest"]
```

或通过 CLI 添加：

```
codex mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest
```

1. 启动 `copilot` 2. 运行 `/mcp add` 3. 配置： - 服务器名称：`lottiefiles-creator` - 服务器类型：`Local` - 命令：`npx -y @lottiefiles/creator-mcp@latest` 遵循 VS Code MCP 设置文档并使用上述配置。或通过 CLI：

```
code --add-mcp '{"name":"lottiefiles-creator","command":"npx","args":["-y","@lottiefiles/creator-mcp@latest"]}'
```

``` gh copilot mcp add lottiefiles-creator -- npx -y @lottiefiles/creator-mcp@latest ``` ``` droid mcp add lottiefiles-creator "npx -y @lottiefiles/creator-mcp@latest" ``` ``` gemini mcp add lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest gemini mcp add -s user lottiefiles-creator npx -y @lottiefiles/creator-mcp@latest ``` 遵循 Gemini Code Assist MCP 设置文档并使用上述配置。遵循 JetBrains MCP 设置文档并使用上述配置。遵循 Kiro MCP 设置文档并使用上述配置。遵循 Qoder MCP 设置文档并使用上述配置。添加一个本地 MCP 服务器：

- 名称：`lottiefiles-creator`
- 命令：`npx`
- 参数：`y @lottiefiles/creator-mcp@latest`

遵循 Warp MCP 设置文档并使用上述配置。遵循 Windsurf MCP 设置文档并使用上述配置。

连接到 Lottie Creator

打开 Lottie Creator

在浏览器中导航到 creator.lottiefiles.com 并在整个会话期间保持此标签页打开。MCP 通过此浏览器标签页与 Creator 通信。

在 Creator 中启用 MCP

在 Creator 中，前往 设置 → MCP 设置 → 启用 MCP。

Lottie Creator Settings → MCP Settings with Enable MCP

确认连接

你应该会在 Creator 中看到通知：本地 MCP 桥接已连接

Lottie Creator notification: Local MCP bridge connected

如果你看到这个，就表示一切就绪，可以开始提示了！请记住，动画质量在很大程度上取决于你使用的模型，因此请务必使用你可用的最佳模型。

Lottie Creator top bar with a blue MCP connection indicator next to the file name

关于技能

技能为代理如何处理动画任务提供指导——结合使用 MCP 工具调用和作为可重用指令内置的深度运动设计知识。

虽然 Lottie Creator MCP 公开了单独的工具（创建图层、设置关键帧、调整填充），但技能帮助你的 AI 理解如何很好地使用它们。比如知道哪种缓动曲线适合弹跳与淡入淡出，如何排序多元素入场，或者如何构建时间以使动画感觉有意图而不是机械。

技能不会取代 MCP 连接或添加新工具。它们通过将运动设计专业知识打包成你的 AI 在处理动画时自动利用的指令来减少猜测。

安装运动设计技能

在你的终端中运行此命令一次。它适用于 40 多个代理，包括 Claude Code、Cursor、Codex 和 GitHub Copilot。

终端

npx skills add LottieFiles/motion-design-skill

✨ 强烈推荐。 一个产生僵硬、机械动画的 AI 与一个产生精致、有意图动作的 AI 之间的区别几乎完全取决于它是否拥有此上下文。安装一次，它适用于每个动画会话。

在 GitHub 上查看完整技能 → LottieFiles/motion-design-skill

功能

MCP 让你的 AI 完全访问 Creator API。以下是它可以做的所有事情：

🎬 场景管理

创建场景 — 设置名称、尺寸、帧率、持续时间
在场景之间切换
设置背景颜色（仅预览，不导出）
读取场景属性 — 图层、尺寸、帧率
将场景导出为 Lottie JSON
导入 Lottie JSON、dotLottie、SVG 或图像

🗂 图层管理

设置可见性、锁定状态和焦点
控制时间 — 开始帧、结束帧、偏移
设置混合模式（16 种模式，包括正片叠底、滤色、叠加）
应用和动画化蒙版和遮罩
对齐和翻转图层
动画化变换 — 位置、旋转、缩放、倾斜

🔷 形状创建

矩形 — 位置、尺寸、圆角
椭圆 — 位置、尺寸
多边形 — 点数、半径、圆度
星形 — 内/外半径、点数
路径 — 具有完全切线控制的自定义贝塞尔曲线
组 — 将现有形状组合在一起

🎨 填充与描边

纯色填充 — 静态或动画 RGB
线性渐变填充 — 自定义起点/终点
径向渐变填充 — 高光角度和长度
纯色和渐变描边 — 具有可动画化的宽度
修剪路径 — 动画绘制（开始 %、结束 %、偏移）

⏱️ 动画与关键帧

在特定帧添加具有值的关键帧
设置静态值（无动画）
读取、检查和移除关键帧
设置缓动 — 线性或三次贝塞尔（x1, y1, x2, y2）
动画化：位置、旋转、缩放、不透明度、颜色、路径等

🖼 素材与播放

列出、克隆和移除素材（场景和图像）
读取图像属性 — 宽度、高度、base64 URI
播放、暂停和跳转到特定帧
读取当前帧和播放状态
读取选定的节点和关键帧

即将推出：状态机和运动令牌

最佳实践

安装动态设计技能以获得更佳质量： MCP 为您的 AI 提供工具。动态设计技能则赋予其善用这些工具的判断力——缓动曲线、时间节奏原则、编排设计。一条命令，显著提升输出效果。动态设计技能可在此处找到。
从您自己的 SVG 开始，再进行动画制作： AI 从零生成插图形状时可能难以预测。为获得最佳效果，请先将您现有的 SVG 素材导入 Creator，再让 AI 为其制作动画。这能保持您的视觉风格一致，并让 AI 专注于其最擅长的部分——动态、时间节奏和序列编排。
- 试用以下混音链接
  - 奖牌：https://lottie.link/metal
  - 天气：https://lottie.link/weather
  - 图表：https://lottie.link/graph
  - 邮箱：https://lottie.link/mailbox1
始终使用您可用的最佳模型： 动画质量与模型直接相关。如果您能使用 Claude Sonnet 或 Opus，请优先选择它们而非较小的模型——在处理时间节奏、序列编排和空间推理方面，其差异显而易见。
在提示前为图层命名： AI 会读取您的图层名称以理解动画结构。命名清晰的图层，如 left_arm、right_leg、bg_circle 和 text_headline，有助于其准确定位元素、避免错误，并在复杂场景中保持条理。而像 Shape 1 或 Group 4 这样的通用名称，会让 AI 难以在您的工作基础上准确构建。
将复杂动画分解为步骤： 不要直接要求“为我构建一个完整的引导动画”，而应逐场景进行。创建场景 → 添加形状 → 添加关键帧 → 优化时间节奏。更小的步骤能让您更好地控制，并更容易发现和纠正错误。
明确指定时间节奏和感觉： “平滑淡入”是模糊的。“400 毫秒的淡入，使用缓出效果”则为 AI 提供了可操作的信息。您对感觉的描述越具体——干脆、弹跳、缓慢且富有电影感——初次生成的结果就越接近您的想象。