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
• 联系我们获取企业版功能