MCP Server Guide

🚀 Anima MCP服務器指南

Anima MCP服務器可將您的AI編碼助手直接連接到Anima Playground、Figma設計和團隊的設計系統，彌合產品經理原型與生產代碼之間的差距。

如需獲取完整的Anima MCP服務器文檔，請參閱我們的幫助文檔。

✨ 主要特性

• 將Anima Playground項目交付給編碼代理 可將任何Anima Playground中的代碼拉取到本地環境。AI會下載項目、讀取相關文件、理解設計模式，並在您的代碼庫中實現適配版本。
• Figma設計轉代碼 通過AI編碼代理將Figma設計高保真地直接轉換為代碼。您的代理會使用Anima MCP獲取設計並生成可用於生產的代碼。
• 設計系統訪問（企業版） 在實現功能時可直接引用團隊的設計系統。AI會提取設計系統文檔，並使用團隊已有的組件和模式進行開發。

🚀 快速開始：Claude Code插件

/plugin install anima@claude-plugins-official

此命令將安裝Anima插件，它會自動配置MCP服務器並添加Anima技能。按照提示進行身份驗證即可。

如需在其他編輯器（VS Code、Cursor）中使用，請參閱下面的手動設置步驟。

📦 安裝指南

要求

• 支持MCP的AI編碼工具：Claude Code、Cursor、VS Code或其他支持模型上下文協議（Model Context Protocol）的工具。
• Anima賬戶：您需要有權限訪問Anima Playground，以便共享和下載項目。

步驟1：設置MCP客戶端

不同的MCP客戶端設置略有不同，請根據您使用的客戶端按照以下說明進行操作。

Claude Code

1. 打開終端（非Claude Code內部）並運行以下命令：

claude mcp add --transport http anima https://public-api.animaapp.com/v1/mcp

2. 重啟Claude Code。
3. 輸入/mcp打開MCP菜單。
4. 選擇Anima並進行身份驗證，這將打開一個瀏覽器窗口，使用您的Anima賬戶登錄。
5. （可選）在身份驗證期間連接您的Figma賬戶，以啟用Figma URL流程。

使用以下命令管理服務器：

• 列出所有已配置的服務器：claude mcp list
• 獲取特定服務器的詳細信息：claude mcp get anima
• 刪除服務器：claude mcp remove anima

更多信息請參閱Anthropic官方文檔。

OpenAI Codex

1. 打開終端並運行以下命令：

codex mcp add anima --url https://public-api.animaapp.com/v1/mcp

或者直接在~/.codex/config.toml文件中添加以下內容：

[mcp_servers.anima]
url = "https://public-api.animaapp.com/v1/mcp"

2. 重啟Codex。
3. 按照提示進行身份驗證。

建議安裝Anima技能，運行以下命令：

codex skill install AnimaApp/mcp-server-guide/skills/anima

更多信息請參閱OpenAI的Codex MCP文檔。

VS Code

1. 使用快捷鍵Cmd Shift P（Mac）或Ctrl Shift P（Windows）搜索MCP:Add Server。
2. 選擇HTTP。
3. 粘貼服務器URL：https://public-api.animaapp.com/v1/mcp。
4. 當提示輸入服務器ID時，輸入anima。
5. 選擇是全局添加此服務器還是僅為當前工作區添加。

您的mcp.json文件將如下所示：

{
  "servers": {
    "anima": {
      "type": "http",
      "url": "https://public-api.animaapp.com/v1/mcp"
    }
  }
}

⚠️ 重要提示 要在VS Code中使用MCP，您的賬戶必須啟用GitHub Copilot。 更多信息請參閱VS Code官方文檔。

Cursor

1. 打開Cursor > Settings > Cursor Settings。
2. 轉到MCP選項卡。
3. 點擊**+ Add new global MCP server**。
4. 輸入以下配置並保存：

{
  "mcpServers": {
    "anima": {
      "url": "https://public-api.animaapp.com/v1/mcp"
    }
  }
}

5. 保存後，您將看到“anima”出現在“Installed MCP Servers”下，顯示“Needs authentication”。
6. 點擊Connect進行身份驗證，這將打開一個瀏覽器窗口，使用您的Anima賬戶登錄。
7. （可選）在身份驗證期間連接您的Figma賬戶，以啟用Figma URL流程。

更多信息請參閱Cursor官方文檔。

其他編輯器

其他支持流式HTTP通信的代碼編輯器和工具也可以連接到Anima MCP服務器。

如果您使用的是其他編輯器或工具，請檢查其文檔以確認是否支持基於流式HTTP的通信。如果支持，您可以使用以下配置手動添加Anima MCP服務器：

{
  "mcpServers": {
    "anima": {
      "url": "https://public-api.animaapp.com/v1/mcp"
    }
  }
}

步驟2：身份驗證

添加MCP服務器後，使用您的Anima賬戶進行身份驗證：

1. MCP客戶端會提示您進行身份驗證。
2. 打開一個瀏覽器窗口，使用您的Anima賬戶登錄。
3. （可選）在身份驗證期間連接您的Figma賬戶，以啟用Figma URL流程。

💻 使用示例

從Anima Playground交付項目

複製Anima Playground的鏈接並向您的代理發出以下提示：

"Implement the welcome screen from this playground: https://dev.animaapp.com/chat/xyz"

具體操作流程：

1. AI下載Playground項目。
2. AI讀取相關文件並理解設計模式。
3. AI在您的代碼庫中實現適配版本。

💡 使用建議 明確指出您需要的功能。這樣AI會找到相關文件並調整代碼以適應您項目的模式。

Figma設計轉代碼

複製Figma設計鏈接並向您的代理發出以下提示：

"Implement this Figma design using Anima MCP: https://figma.com/design/..."

您的AI代理將使用Anima MCP獲取設計，並在您的代碼庫中生成可用於生產的代碼。

設計系統訪問（企業版）

在實現功能時直接引用團隊的設計系統：

"Implement a login form following our design system, use Anima MCP and figma url: ..."

AI會提取設計系統文檔，並使用團隊已有的組件和模式進行開發。

開始使用： 設計系統的設置需要與我們的團隊協作完成。聯繫我們進行配置。

📚 詳細文檔

故障排除

無法訪問Playground

確保您有權限訪問該Playground。私有Playground需要團隊成員身份或直接共享權限。

MCP未被識別

驗證Anima MCP是否已在您的AI編碼工具中正確安裝和配置。檢查Anima身份驗證是否設置正確。

身份驗證問題

1. 嘗試刪除並重新添加MCP服務器。
2. 清除瀏覽器中animaapp.com的Cookie。
3. 重啟MCP客戶端。

最佳實踐

明確提示內容

不要只說："Implement this playground" 可以嘗試："Implement the login form component from this playground, using my existing Button and Input components"

引用現有模式

從Anima實現功能時，告知AI您代碼庫的模式：

"Implement this design using our existing components from src/components/ui and follow our Tailwind styling patterns"

拆分大型設計

對於複雜的Playground或Figma文件，請求實現特定部分：

1. "First, implement just the header component"
2. "Now implement the card grid layout"
3. "Finally, add the footer"

這樣可以使實現過程更加聚焦和準確。

其他資源

• Anima MCP文檔
• Anima Playground
• 聯繫我們獲取企業版功能