Lottie Creator MCP

官方

Lottie Creator MCP 將您的 AI 助手直接整合到動畫工作流程中，使其能夠完整存取 LottieFiles Creator，透過自然語言為您建立和編輯 Lottie 動畫。

造訪 lottie.link

你可以用 Lottie Creator MCP 做什麼？

從零開始建立動畫 — 描述一個動畫，例如載入旋轉圖示或角色動作，AI 便會在 Lottie Creator 中逐層建構。
編輯現有動畫 — 要求 AI 根據當前檔案狀態變更顏色、調整時間、切換緩動曲線、重新命名圖層，或重構場景。
批次產生動畫變體 — 一次產出多個版本，例如深色/淺色主題、不同尺寸，或品牌顏色變化。
檢查動畫的可及性與品牌一致性 — 要求分析對比度問題、動畫速度、顏色一致性或品牌符合度，然後套用修正。
管理場景與圖層 — 建立與切換場景、設定可見性與混合模式、套用遮罩與遮色片，並為位置、旋轉與縮放等變形屬性製作動畫。
使用關鍵影格與緩動功能製作動畫 — 在不透明度、顏色與路徑等屬性上新增、讀取或移除關鍵影格，並設定線性或 cubic-bezier 緩動曲線。

文件

Lottie Creator MCP

未定義

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 具體的參考。您對感覺的描述越詳細——例如乾脆俐落、彈性活潑、緩慢而具電影感——初次生成的結果就越接近您的想像。