Feuse MCP

🚀 前端實用MCP（模型上下文協議）工具

前端實用MCP（模型上下文協議）工具是網頁開發者的必備工具集，可實現API集成自動化、Figma設計到代碼的轉換，以及優化開發工作流程。

English | 中文

📚 詳細文檔

feuse-mcp 官方文檔

✨ 主要特性

• 🎨 Figma集成：內置與 Figma-Context-MCP 的集成，實現無縫的Figma設計到代碼的轉換和自動資產提取。
• 📝 API自動化：從API文檔生成TypeScript接口類型、API URL常量、模擬數據和請求函數。
• 🖼️ 資產管理：從Figma文件中下載SVG和PNG圖像，並組織好文件結構。
• 🎯 相似度比較：將生成的代碼頁面與原始Figma原型進行比較，以驗證準確性。
• 🛠️ 項目標準：根據當前項目架構為Copilot和Cursor生成全局規範指導文件。
• 🔧 顏色變量：將Figma顏色變量提取並轉換為指定標準（UnoCSS、TailwindCSS或自定義結構）的CSS/設計令牌。

🔧 可用工具集（持續更新）

🚀 快速開始

配置

將以下內容添加到您的MCP客戶端配置中：

從 Figma開發者設置 獲取您的Figma API密鑰。

{
  "feuse-mcp": {
    "command": "npx",
    "args": ["feuse-mcp@latest"],
    "env": {
      "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
    }
  }
}

🔧 代碼貢獻者指南

環境搭建

# 克隆倉庫
git clone https://github.com/your-username/feuse-mcp.git
cd feuse-mcp

# 安裝依賴
pnpm install

# 構建項目
pnpm build

將以下內容添加到您的MCP客戶端配置中：

從 Figma開發者設置 獲取您的Figma API密鑰。

{
  "feuse-mcp": {
    "command": "npx",
    // 配置路徑
    "args": ["YOUR/PATH/TO/dist/main.cjs"],
    "env": {
      "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
    }
  }
}

📁 項目結構

feuse-mcp/
├── src/
│   ├── main.ts              # 主入口文件
│   ├── services/            # 核心服務
│   │   ├── figma/          # Figma集成
│   │   ├── similarity/     # 可視化比較
│   │   └── utility/        # 實用工具集
│   ├── types/              # TypeScript定義
│   └── utils/              # 輔助函數
├── docs/                   # 文檔
└── dist/                   # 構建後的文件

🤝 貢獻代碼

歡迎貢獻代碼！您可以隨時提交拉取請求。對於重大更改，請先打開一個問題討論您想要更改的內容。

開發指南

1. 遵循現有的代碼風格。
2. 根據需要更新文檔。

📝 許可證

本項目採用MIT許可證 - 詳情請參閱 LICENSE 文件。

如果您有更多有趣、好玩和酷炫的想法，請立即在issues中提交！！！

🙏 致謝

• Figma-Context-MCP 提供了Figma設計分析能力。
• fastmcp 提供了MCP快速開發框架。
• 本項目的所有貢獻者和用戶。