项目介绍
技术文档摘要
<div align="center"> <p align="center"> <img src="https://gips0.baidu.com/it/u=3559345584,1660471330&fm=3081&app=3081&f=PNG?w=1024&h=1024" alt="feuse-mcp" width="300px"> </p>前端有用的MCP（模型上下文协议）工具 - 网络开发人员用于自动API集成、Figma设计转代码转换以及开发工作流程优化的重要工具。
<div align="center"> <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"> </div> </div>English | 中文
📖 文档
✨ 特性
- 🎨 Figma 集成: 内置与 Figma-Context-MCP 的集成，实现无缝的Figma设计转代码转换和自动资源提取
- 📝 API 自动化: 根据API文档生成TypeScript接口类型、API URL常量、模拟数据及请求函数
- 🖼️ 资源管理: 从Figma文件下载SVG和PNG图像，并组织文件结构
- 🎯 相似度比较: 对比生成的代码页面与原始Figma原型以验证准确性
- 🛠️ 项目标准: 根据当前项目架构生成Copilot & Cursor全局规范指导文件
- 🔧 颜色变量: 提取并转换Figma颜色变量到CSS/设计令牌中，支持指定标准（如UnoCSS、TailwindCSS或自定义结构）
🔧 可用工具集（持续更新）
| 工具名称 | 类别 | 描述 | 输入参数 | 备注 |
|---|---|---|---|---|
| Figma-To-Code | Figma 集成 | 基于Figma样式信息生成前端代码，使用PNG辅助 | fileKey, nodeId(可选) | 自适应本地配置（如ESLint等），支持响应式布局 |
| extract-svg-assets | 资源分析 | 分析Figma DSL结构并自动提取SVG资源 | fileKey, nodeId(可选) | 智能Figma文件分析，批量提取SVG图标/矢量图 |
| extract-color-vars | 设计令牌 | 从Figma DSL中提取颜色变量到CSS框架配置 | fileKey, nodeId(可选) | 支持UnoCSS、TailwindCSS或自定义文件格式输出 |
| similarity-figma | 质量控制 | 对比Figma原型与项目页面截图 | url, fileKey, nodeId(可选) | 视觉对比，智能相似度评分及详细分析 |
| api-automation | 开发工具 | 解析后端API文档并生成类型、常量、模拟数据 | apiDocs | 支持多种API文档格式，生成完整的前端API工具包 |
| initialize-project-standard | 项目管理 | 分析项目结构并生成Copilot/Cursor全局规则 | 无参数 | 自动生成智能编码助手项目上下文及标准 |
| Download-Figma-Images | 资源管理 | 批量下载Figma中的SVG和PNG图像资源 | fileKey, nodes[], localPath | 支持imageRef处理，自动创建目录结构（适用于其他MCP的低级工具） |
| download-svg-assets | 资源管理 | 下载Figma中的SVG矢量资源 | fileKey, nodes[], localPath | 仅支持SVG格式，支持复杂节点结构（适用于其他MCP的低级工具） |
🚀 快速开始
配置
添加到您的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进行讨论。
开发指南
- 遵循现有的代码风格
- 根据需要更新文档
📝 许可证
本项目采用MIT许可证 - 查看LICENSE文件了解详情。
如果您有更多有趣、好玩且酷的想法，请立即在Issues中提交！
🙏 致谢
- Figma-Context-MCP 提供了Figma设计分析能力
- fastmcp 提供了MCP快速开发框架
- 本项目的所有贡献者和用户