🚀 F2C MCP 服务器

F2C MCP 服务器是一款模型上下文协议（Model Context Protocol）服务器，它能让 AI 编码助手访问 Figma 设计数据，并将这些数据转化为 HTML/CSS 代码。其价值在于为 AI 编码提供设计上下文，提升编码效率和准确性。

🚀 快速开始

1. 在 .env 文件中设置你的 Figma API 密钥：

FIGMA_API_KEY=your_api_key_here

2. 安装依赖项：

npm install

3. 启动开发服务器：

npm run dev

✨ 主要特性

• 将 Figma 设计节点转换为高保真的 HTML/CSS 标记，处于行业领先地位。
• 向 Cursor 等 AI 编码工具提供 Figma 设计上下文。
• 支持带有 fileKey 和 nodeId 参数的 Figma 文件 URL。
• 使用 Figma API 获取设计元数据。
• 实现 JSON-RPC 2.0 协议进行通信。

📦 安装指南

添加 MCP 服务

{
  "mcpServers": {
    "f2c-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@f2c/mcp"
      ],
      "env": {
        "personalToken": ""
      }
    }
  }
}

添加 MCP 服务（Windows）

{
  "mcpServers": {
    "f2c-mcp": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@f2c/mcp"],
      "env": {
        "personalToken": ""
      }
    }
  }
}

📚 详细文档

常见问题

错误：spawn npx ENOENT

解决方案：在 mcpServer 中添加 PATH 环境变量

{
  "env": {
    "PATH": "/Users/xxx/.nvm/versions/node/v20.10.0/bin:/bin"
  }
}