Lottie Creator MCP

官方

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

访问 lottie.link试用此 MCP赞助

你可以用 Lottie Creator MCP 做什么？

从零开始创建动画 — 让您的 AI 直接在 Creator 中逐层构建加载指示器、进度条或角色动画。
编辑现有动画 — 通过 lottiefiles-creator 实时更改颜色、调整时间、替换缓动曲线、重命名图层或重构场景。
批量生成变体 — 一次生成多个动画版本，例如深色/浅色主题、不同尺寸或品牌颜色变体。
可访问性与品牌分析 — 让 AI 检查动画的对比度、运动速度、颜色一致性或品牌契合度，并修复问题。
集成到项目工作流 — 在更广泛的项目中使用 or 和 lottiefiles-creator 时，即时生成动画资产。

文档

Lottie Creator MCP

通过本地 MCP 桥接将 AI 助手连接到 Lottie Creator，使用提示词创建、编辑和制作动画。

[WebMCP](/en/creator/13_ai-tools/lottie-creator-webmcp) 允许兼容的浏览器助手直接使用 Creator，无需此本地桥接。在支持的浏览器中默认开启。如果您想通过本地 Creator MCP 服务器连接，请遵循本指南。

Lottie Creator MCP 将您的 AI 助手直接带入动画工作流程——为其提供工具，通过自然语言在 LottieFiles Creator 中检查、构建和编辑 Lottie 动画。您可以查看下方的安装说明。

MCP 服务器是 AI 代理使用 Model Context Protocol 与数据源交互的标准化接口的一部分。Lottie Creator MCP 通过本地桥接将 Claude、Cursor 和 Windsurf 等 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's Settings and MCP Settings menus showing Enable WebMCP and Enable local 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

功能

Lottie Creator MCP、Motion Copilot 和 Lottie Creator WebMCP 提供相同的 Creator 编辑功能。它们的设置和助手界面有所不同。

领域	您可以要求的内容
场景和图层	检查和创建场景；更改大小、帧率、时长或预览背景；重命名、复制、分组、对齐、重新排序、隐藏或锁定图层。
形状和文本	创建和编辑矩形、椭圆、多边形、星形、路径和文本；更改字体和文本样式；将文本拆分为部分以进行动画。
样式和效果	调整纯色和渐变填充或描边；使用混合模式、阴影、模糊、颜色效果、蒙版和遮罩。
动画和时间	添加、检查、更改、复制或删除关键帧；调整缓动；动画化变换、不透明度和颜色；使用运动路径、交错入场和重新计时。
资产和场景检查	导入 SVG、Lottie 动画和图像；将 PNG 或 JPG 图像图层转换为矢量；检查场景并将播放头移动到特定帧。
主题和可重用运动	创建和链接运动令牌槽，更新其值，并创建或切换主题。从您工作区的 Motion System 中查找和应用已保存的样式和运动预设。
片段和交互性	创建命名动画片段、状态机、状态、过渡和输入；将点击、悬停和状态事件连接到操作。

功能访问遵循您的 Creator 工作区和计划。当动画准备好时，使用 Creator 的导出控件保存结果。

最佳实践

安装动效设计技能以获得更佳质量： 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 难以准确基于你的工作继续构建。
将复杂动画分解为步骤： 不要直接说“给我做一个完整的引导动画”，而是逐场景进行。创建场景 → 添加形状 → 添加关键帧 → 优化时间。较小的步骤能让你拥有更多控制权，也更容易发现和纠正错误。
明确描述时间和感觉： “平滑淡入”过于模糊。“400ms 的淡入并带缓出效果”则能让你的 AI 有据可依。你越具体地描述感觉——干脆利落、有弹性、缓慢而富有电影感——第一次生成的结果就越接近你的想象。