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 設定**

導覽至 **Settings → Developer**，然後點擊 **"Edit Config"**。這會在您的電腦上開啟一個 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. 確認已連接**

在聊天中點擊 **"+"** 按鈕，導覽至 **Connectors**，並確認 `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 Settings"**
2. 在側邊欄中前往 **Tools & MCPs**
3. 點擊 **"Add custom 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**（結束並重新開啟——不只是重新載入）

重新啟動後，前往 **Settings → Tools & 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. 按下 **Install** 按鈕。

<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 中，前往 Settings → MCP Settings → Enable local MCP。

Lottie Creator's Settings and MCP Settings menus showing Enable WebMCP and Enable local MCP

確認連接

您應該會在 Creator 中看到通知：Local MCP bridge connected

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 更難準確地建立在您的工作之上。
將複雜動畫分解為步驟： 與其「為我建立一個完整的入場動畫」，不如逐場景進行。建立場景 → 添加形狀 → 添加關鍵影格 → 調整時間。較小的步驟能給您更多控制，並使錯誤更容易發現和修正。
具體描述時間和感覺： 「平滑淡入」過於模糊。「一個 400 毫秒的淡入並帶有 ease-out」則能讓您的 AI 有依據可循。您描述的感覺越具體——俐落、彈跳、緩慢而電影感——第一個結果就越接近您所想像的。