SVGator MCP

SVGator MCP 伺服器 — 說明文件

MCP 伺服器能將您的 AI 助理直接連接到 SVGator，這是一款線上 SVG 動畫工具。 連接後，您的助理就能在您的專案中工作，為您瀏覽、檢查、編輯、建立和匯出專案， 處理範圍從簡單的「根據這個品牌套件編輯顏色」到完整的 「幫我建立一個動畫標誌展示，並將其匯出為純 CSS 檔案」等各種任務。

• 端點： https://mcp.svgator.com/mcp
• 通訊協定： 透過可串流 HTTP 的 模型內容協定
• 驗證： OAuth 2.1（使用您的 SVGator 帳戶登入 — 請參閱 入門指南）

您可以執行的操作

功能	工具	提示範例
瀏覽您的專案	list_projects、get_project、get_profile	「列出我的 SVGator 專案」
檢查專案結構	get_skeleton、read_part	「專案 X 中有哪些元素，哪些有動畫效果？」
逐步編輯專案	edit_part	「將圓形變為紅色，並讓其彈跳動畫永遠循環」
建立或取代整個專案	create_project、replace_project	「幫我建立一個新的動態載入動畫」
複製、移動和重新命名專案	duplicate_project、move_project	「將專案 X 複製到我的『草稿』資料夾」
管理可重複使用的資產	list_assets、get_asset、create_asset、update_asset	「將此圖示儲存為可重複使用的資產」
將專案整理到資料夾中	list_folders、get_folder、create_folder、update_folder	「建立一個『行銷』資料夾，並將此專案歸檔到其中」
查閱製作參考資料	describe_shape	（由助理用來取得精確的 JSON 形狀）
匯出為可交付的格式	export_project、get_render	「將專案 X 匯出為 MP4 影片」
取得動態設計工藝指導	技能資源 + 提示	「對標誌展示進行藝術指導，然後建立它」

伺服器傳回的每個專案都包含一個 editor_url — 這是一個深層連結，可在 SVGator 編輯器中開啟專案，因此您隨時可以從助理中斷的地方手動繼續。

工具

伺服器提供 22 個工具。請參閱工具參考以取得完整的參數和輸出 表格。

專案

• list_projects — 列出已驗證使用者的 SVGator 專案（最新的排在最前面），每列包含一個 editor_url 深層連結，以及用於分頁的總數。
• get_project — 取得單一專案摘要：標題、預覽、資料夾、時間戳記、畫布尺寸、背景顏色、動畫時間軸和已儲存的匯出設定。
• create_project — 從完整的專案 JSON 建立一個新的 SVGator 專案，擁有者為已驗證的使用者。
• replace_project — 使用提供的完整專案 JSON 取代現有專案的整個 JSON（在進行任何變更前會先執行驗證）。
• duplicate_project — 複製現有專案，可選擇複製到不同的資料夾或使用新標題。
• move_project — 將專案移動到不同的資料夾和/或重新命名。

檢查和編輯專案

• get_skeleton — 取得專案的低成本、節省 token 的結構對應（僅包含元素樹及其名稱和關鍵影格數量，絕不包含值）— 編輯迴圈的第 1 步。
• read_part — 讀取以 ID 錨定路徑上的確切值或元素 — 編輯迴圈的第 2 步。
• edit_part — 在路徑上套用一個經過驗證的編輯（更新、插入、移動或刪除）並將其持久化 — 編輯迴圈的第 3 步。
• describe_shape — 在製作前取得一個建構區塊（元素或動畫器）的確切 JSON 形狀，如此一來就無需猜測欄位名稱。

資產

• list_assets — 列出已驗證使用者的可重複使用資產（靜態或動態 SVG 項目），最新的排在最前面。
• get_asset — 取得單一資產，包括其完整的 data（{document, definitions}）酬載。
• create_asset — 從資產文件建立新的可重複使用資產。
• update_asset — 取代現有資產的整個文件。

資料夾

• list_folders — 列出已驗證使用者的資料夾（專案歸檔所用的標籤）。
• get_folder — 透過 ID 取得單一資料夾（ID、標題、時間戳記）。
• create_folder — 建立新資料夾以整理專案。
• update_folder — 重新命名現有資料夾。

匯出和帳戶

• export_project — 將專案匯出為可交付的格式（SVG、Lottie、React Native、Flutter、影片或 GIF），並可選擇針對每次匯出進行覆寫。
• get_render — 輪詢由 export_project 啟動的點陣（影片/GIF）渲染狀態，並在完成時取得已簽章的下载 URL。
• get_profile — 取得已驗證的客戶資料：姓名、電子郵件、方案和團隊。

文件地圖

文件	適用對象	涵蓋內容
入門指南	所有人	從 claude.ai、Claude Desktop、Claude Code 和其他 MCP 用戶端連線；驗證；隱私權
工具參考	整合者 / 有興趣的人	每個工具及其完整的參數和輸出表格
編輯專案	整合者 / 進階使用者	導覽 → 讀取 → 編輯 → 驗證迴圈、路徑定址、製作規則
匯出專案	所有人	格式、交付模式、匯出選項、渲染輪詢
技能和資源	整合者	動態設計工藝技能、MCP 資源和提示
疑難排解	所有人	連線問題、常見錯誤及其含義

需求

• 一個 SVGator 帳戶（註冊）。匯出次數會計入您方案的 限制，與在編輯器中操作的方式完全相同。
• 若要從 claude.ai / Claude Desktop 連線，自訂連接器需要 Claude Pro、Max、 Team 或 Enterprise 方案。Claude Code 和其他 MCP 用戶端則可直接連線到端點。

運作方式（簡述）

伺服器是一個遠端 MCP 伺服器：您的 MCP 用戶端（Claude，或任何使用可串流 HTTP 的用戶端） 會連線到 https://mcp.svgator.com/mcp，並透過 SVGator 的常規 OAuth 登入讓您登入。您的 SVGator 憑證會保持在僅限伺服器端 — AI 模型永遠不會看到您的存取權杖或秘密金鑰；它只會接收工具結果（專案清單、結構對應、已匯出的 檔案）。工具輸入會根據已發布的結構描述進行驗證，無效的請求會傳回 助理可以讀取並修正的描述性錯誤。

⚙️ 功能

MCP 伺服器將 SVGator 轉變為您可以用自然語言驅動的工具。您無需 在編輯器中點擊，只需描述您想要的內容，您的 AI 助理就會執行：調出 一個專案、更改顏色、為標誌製作動畫，或匯出完成的檔案。

它專為希望有助理來處理動畫製作中重複性部分的設計師、 需要即時可用網頁動畫而不必為每個小改動等待設計師的行銷團隊， 以及需要可直接投入產品的生產就緒匯出檔（Lottie、React Native、Flutter 或 SVG）的開發人員而打造。每個專案都會附帶一個直接的編輯器連結，因此您 隨時可以開啟並手動完成，以節省 token。

以下是您的助理在連線後可以執行的操作：

🗂️ 專案和資產

• 列出專案：最新的排在最前面，每個都附帶直接的編輯器連結
• 搜尋和翻閱大型資源庫
• 讀取專案設定：畫布尺寸、背景、時間軸和匯出設定
• 從完整定義建立專案
• 覆寫現有專案
• 複製專案：到相同或另一個資料夾
• 移動或重新命名專案
• 將專案整理到資料夾中
• 管理可重複使用的資產：列出、讀取、建立和更新

🔍 結構和檢查

• 對應專案結構：包含關鍵影格數量的元素樹，沒有大量資料
• 查看哪些部分有動畫效果：每個元素上哪些通道帶有關鍵影格
• 讀取確切的值：任何屬性、關鍵影格或元素
• 查閱製作形狀：任何元素或概念的確切 JSON

🔷 形狀和元素

• 矩形
• 圓形和橢圓形
• 線條、折線和多邊形
• 自訂路徑
• 文字和多行文字
• 圖片
• 重複使用的符號和實例
• 群組
• 遮罩和裁剪路徑

🎨 填色、筆觸和顏色

• 純色填色：靜態或動態
• 漸層填色
• 筆觸：純色或漸層，靜態或動態
• 合成：混合模式和透明度
• 濾鏡效果，例如模糊

🎞️ 動畫和關鍵影格

• 在特定時間點新增關鍵影格及其值
• 在不需要動態效果的地方設定靜態值
• 讀取、檢查和移除關鍵影格
• 為每個關鍵影格設定 easing：立方貝茲曲線
• 為變形製作動畫：位置、旋轉、縮放和傾斜
• 為填色、筆觸、合成和濾鏡通道製作動畫
• 將一個形狀漸變為另一個形狀

📤 匯出和交付

• 匯出動態 SVG：由 JavaScript 或 CSS 驅動
• 設定啟動觸發條件：載入、懸停、點擊、捲動或程式化
• 設定點擊和懸停行為：凍結、重新啟動、反轉或重設
• 匯出為 Lottie
• 匯出為 React Native 或 Flutter 原始碼
• 渲染影片：MP4、MOV、AVI、MKV 或 WebM
• 渲染 GIF、WebP、PNG 序列或 ZIP
• 控制循環：迭代次數、方向、來回播放和速度
• 設定影格速率、解析度和品質
• 處理透明度和背景顏色

✅ 最佳實務

安裝 SVGator 動態設計技能，然後按名稱呼叫它：這是一份工藝指導，能幫助您的助理在時間、 easing 和個性上做出深思熟慮的選擇，而非平淡、通用的動態效果。從 SVGator 技能儲存庫下載它，然後直接在您的提示中觸發，開頭可以像是「使用 SVGator 動態技能為此標誌製作動畫」。您需要手動呼叫它，這是刻意設計的：這樣一來，當您只是要匯出或進行小幅編輯時，該技能就不會佔用您的 token 用量，只有在您確實需要額外的藝術指導時才會載入。

從您自己的圖稿開始，然後製作動畫： 在任何 AI 助理中，從頭開始生成原創形狀是最難做好的事情。為了獲得最佳結果，請先在 SVGator 的編輯器中建立或匯入您的 SVG，然後再要求您的助理為其製作動畫。這能保持您的視覺風格一致，並讓 AI 專注於它最擅長的部分：動態、時間和排序。

在提示之前為您的元素命名： 您的助理會讀取元素名稱來理解專案的結構。清晰的名稱，例如「left_arm」、「bg_circle」或「headline」，能幫助它鎖定正確的元素、避免錯誤，並在複雜的場景中保持條理。通用名稱會增加其工作難度，並可能最終耗費您更多的 token（取決於模型）。

將複雜的動畫分解為步驟： 與其說「幫我建立一個完整的引導動畫」，不如一次處理一個部分：建立元素、新增關鍵影格，然後調整時間。伺服器每次編輯只套用一個經過驗證的變更，因此較小的步驟能讓您更好地控制，並使任何錯誤都易於發現和修正。

具體說明時間和感覺： 「一個平滑的淡入」有點模糊。「一個 400 毫秒、帶有 ease-out 的淡入」則能給您的助理具體的處理依據。您對感覺的描述越多，無論是乾脆、有彈性、緩慢還是微妙，第一次的結果就越接近您心中的想法。

將匯出格式與其使用場合匹配： SVG 是網頁的正確選擇，您可以選擇 JavaScript 或純 CSS（以獲得更好的效能）。Lottie、React Native 和 Flutter 可以乾淨地交接給應用程式和行動專案。影片和 GIF 則適用於社交媒體和電子郵件，在這些地方動態 SVG 無法播放。預先選擇格式可以節省一輪重新匯出的時間。

在進行大型實驗之前先複製專案： 如果您希望 AI 從頭開始重建某個東西，請要求它先複製專案，然後在副本上進行更改。原始版本會保持原樣，因此大膽的實驗永遠不會讓您失去可用的版本。 在編輯器中完成： 每個專案都會附帶一個直接的編輯器連結。當助手幫你完成大部分工作後，打開專案並手動進行最後的潤飾。AI 負責處理繁重的工作，而你則掌控細節。這樣做也能節省 token，因為手動進行微調比讓助手逐一修改更快、更省成本。