github.com/Panzer-Jack/feuse-mcp @v0.1.6

<img src="https://github.com/user-attachments/assets/6f5a6011-9c4a-450d-8ebd-60b954dbc05f" alt="feuse-mcp" width="300px">

前端实用 MCP（模型上下文协议）工具 - 为 Web 开发者提供的自动化 API 集成、Figma 设计转代码和开发工作流优化的基础工具集。

<img src="https://img.shields.io/badge/node-%5E22.0.0-brightgreen" alt="license">
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="license">

English | 中文

📖 文档

feuse-mcp 官方文档

✨ 特性

• 🎨 Figma 集成: 内部集成了Figma-Context-MCP 无缝将 Figma 设计转换为代码，自动提取资源
• 📝 API 自动化: 从 API 文档生成 TypeScript 接口类型、接口URL常量、Mock数据和请求函数
• 🖼️ 资源管理: 从 Figma 文件下载 SVG 和 PNG 图片，并组织文件结构
• 🎯 相似性比较: 将生成的代码页面与原始 Figma 原型进行准确性验证对比
• 🛠️ 项目标准: 生成针对当前项目规范架构生成 copilot & cursor 的全局规范指导文件
• 🔧 颜色变量: 提取并转换 Figma 颜色变量为 CSS/设计令牌 到指定的规范中（如UnoCSS、TailwindCSS 或者 自定义结构中）

🔧 现有工具集（持续更新ing）

🚀 快速开始

配置

添加到您的 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/                   # 构建文件

🤝 贡献

欢迎贡献！请随时提交 Pull Request。对于重大更改，请先打开一个 issue 来讨论您想要更改的内容。

如果你有更多有意思的、好玩的、很酷的想法，请立刻在 issue 中提出来 ! ! !

开发指南

1. 遵循现有的代码风格
2. 根据需要更新文档

📝 许可证

此项目根据 MIT 许可证授权 - 有关详细信息，请参阅 LICENSE 文件。

🙏 致谢

• Figma-Context-MCP 提供分析Figma设计稿的能力
• fastmcp 提供MCP快速开发框架
• 所有此项目的贡献者和用户