Demo Ai MCP

🚀 Figma上下文模型协调协议（MCP）服务器

Figma MCP服务器是一款强大的工具，它搭建起了Figma设计与人工智能编码助手之间的沟通桥梁。借助实现结构化的通信协议，该服务器可助力设计师与开发者实现任务自动化，减少重复性工作，在将设计转化为代码时实现高精度。对于期望提升API开发和设计工作流程效率的人员而言，集成Figma MCP服务器是个不错的选择。

🚀 快速开始

安装步骤

1. 克隆仓库：

   git clone https://github.com/GLips/Figma-Context-MCP.git
   cd Figma-Context-MCP
   

2. 安装依赖项：

   pnpm install
   

3. 配置环境变量：
   • 复制config/.env.example到config/.env
   • 替换其中的占位符值为实际的Figma API令牌
4. 启动服务器：

   pnpm run dev
   

配置说明

• 环境变量：在.env文件中设置FIGMA_API_TOKEN和可选的PORT（默认端口为3333）。
• 命令行参数：可以直接使用命令行选项，如--figma-api-key和--port，这些参数优先于环境变量。

集成指南

1. 启动服务器并确保其运行：
   • 在终端中运行安装命令以确认服务器状态。
2. 添加MCP服务器到AI工具中：
   • 对于Cursor IDE，请按照以下步骤操作：
     1. 打开应用，导航至“设置 > MCP”部分。
     2. 点击“添加新MCP服务器”，输入一个名称（例如“Figma MCP”）。
     3. 选择“SSE（Server - Sent Events）”选项，并输入服务器URL（通常为http://localhost:3333）。
3. 验证连接状态：
   • 状态指示灯显示绿色表示连接成功，红色则提示需要进行故障排除。
4. 操作Figma设计文件：
   • 在Figma中选择所需设计，并按需分组组件。
   • 使用“复制选定项链接”功能获取设计链接。在Cursor Composer（开启Agent模式）中粘贴该链接以触发AI任务，如生成React代码、创建复用UI组件或优化布局。

✨ 主要特性

• 符合MCP标准：确保与多种LLM应用程序兼容。
• 类型安全实现：使用TypeScript构建，代码结构牢固且易于维护。
• 自定义URI方案：支持自定义URI以方便管理设计资产。
• 错误处理和验证：提供强大的错误处理机制以保障稳定运行。
• 批处理操作：能够高效处理多个设计元素。

📚 详细文档

什么是Figma MCP？

Figma MCP（模型上下文协议）服务器的作用是连接Figma设计文件与支持MCP的人工智能编码工具，例如Cursor IDE。该服务器通过订阅Figma设计事件来实现这一功能，并将这些信息实时传输给AI工具，以促进高效的任务执行。

工作原理

1. 获取Figma设计数据：当Figma中有新的设计或更改时，MCP服务器会订阅这些变化，并捕获相关的JSON数据。
2. 分析和处理数据：服务器会对捕获的设计数据进行解析，并根据需求生成相应的上下文信息。
3. 传输给AI工具：经过处理后的数据会被发送到连接的AI工具（如Cursor），以便执行代码生成、组件创建等任务。

额外提示与特性

• MCP检查工具：

  pnpm inspect
  

  在新终端中运行此命令即可启动MCP Inspector网络界面，用于查看可用工具、触发调用并检验响应。

• 可使用工具：

  • get_file：获取Figma文件的详细信息。
  • get_node：获取Figma文件中特定节点的数据。

🔚 总结

Figma MCP服务器凭借其结构化的通信协议，成功地将Figma设计与人工智能编码助手连接起来。它不仅帮助设计师和开发者自动化工作流程，还大大提升了任务执行的准确性和效率。对于希望优化API开发和设计工作流程的人来说，集成Figma MCP服务器无疑是一个值得考虑的选择。

通过订阅Figma设计事件并实时传输数据至AI工具，该服务器在促进高效代码生成、组件创建等方面发挥了重要作用。无论是用于简单的项目还是复杂的开发任务，Figma MCP服务器都展现了其强大的功能和灵活性，成为连接设计与编码世界的重要桥梁。