F2c MCP

🚀 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"
  }
}