⚙

前端开发工具集

Frontend Useful MCP Tools 是一个为Web开发者提供的工具集，用于自动化API集成、Figma设计到代码的转换以及开发工作流优化。

作者 By Panzer-Jack

本地部署 Figma集成 API自动化

feuse-mcp

前端有用的MCP（模型上下文协议）工具-web开发人员自动化API集成、Figma设计到代码转换和开发工作流程优化的基本实用程序。

![license](https://img.shields.io/badge/node-%5E22.0.0-brightgreen)
![license](https://img.shields.io/badge/license-MIT-blue.svg)

英语| 中文

📖 文档

feuse mcp官方文件

✨ 特性

🎨 Figma集成：内置集成 Figma上下文MCP 用于无缝的Figma设计到代码转换和自动资产提取
📝 API自动化：从API文档生成TypeScript接口类型、API URL常量、模拟数据和请求函数
🖼️ 资产管理：从具有有序文件结构的Figma文件下载SVG和PNG图像
🎯 相似性比较：将生成的代码页与原始Figma原型进行比较，以进行准确性验证
🛠️ 项目标准：根据当前项目架构为Copilot和Cursor生成全球规范指导文件
🔧 颜色变量：提取Figma颜色变量并将其转换为指定标准（UnoCSS、TailwindCSS或自定义结构）中的CSS/设计标记

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

工具名称	类别	描述	输入参数	注释
Figma到代码	Figma集成	在PNG的帮助下基于Figma样式信息生成前端代码	`fileKey`, `nodeId`（可选）	自动适应本地配置（ESLint等），支持响应式布局
提取svg资产	资产分析	分析Figma DSL结构并自动提取SVG资源	`fileKey`, `nodeId`（可选）	智能Figma文件分析，批量提取SVG图标/矢量
提取颜色变量	设计令牌	从Figma DSL中提取颜色变量到CSS框架配置	`fileKey`, `nodeId`（可选）	支持UnoCSS、TailwindCSS或自定义文件格式输出
相似性图	质量控制	将Figma原型与项目页面截图进行比较	`url`, `fileKey`, `nodeId`（可选）	视觉比较与智能相似性评分和详细分析
api自动化	开发工具	分析后端API文档并生成类型、常量、模拟数据	`apiDocs`	支持多种API单据格式，生成完整的前端API工具包
初始化项目标准	项目管理	分析项目结构并生成Copilot/Cursor全局规则	无参数	自动生成智能编码助手项目上下文和标准
下载Figma图片	资产管理	按节点ID从Figma批量下载SVG和PNG图像资源	`fileKey`, `nodes[]`, `localPath`	支持imageRef处理，自动创建目录结构（其他MCP的低级工具）
下载svg资源	资产管理	按图像/图标节点ID从Figma下载SVG矢量资源	`fileKey`, `nodes[]`, `localPath`	仅支持SVG格式，支持复杂的节点结构（其他MCP的低级工具）

🚀 快速开始

配置

添加到MCP客户端配置中：

从获取Figma API密钥 Figma开发者设置.

JSON``` 1 2 3 4 5 6 7 8 9{ “feuse-mcp”: { “command”: “npx”, “args”: [“feuse-mcp@latest”], “env”: { “FIGMA_API_KEY”: “YOUR_FIGMA_API_KEY” } } }


## 🔧 对于代码贡献者


### 设置


BASH```
1
2
3
4
5
6
7# Clone the repository
git clone https://github.com/your-username/feuse-mcp.git
cd feuse-mcp
# Install dependencies
pnpm install
# Build
pnpm build

添加到MCP客户端配置中：

从获取Figma API密钥 Figma开发者设置.

JSON``` 1 2 3 4 5 6 7 8 9 10{ “feuse-mcp”: { “command”: “npx”, // Configure path “args”: [“YOUR/PATH/TO/dist/main.cjs”], “env”: { “FIGMA_API_KEY”: “YOUR_FIGMA_API_KEY” } } }


## 📁 项目结构

1 2 3 4 5 6 7 8 9 10 11feuse-mcp/ ├── src/ │ ├── main.ts # Main entry point │ ├── services/ # Core services │ │ ├── figma/ # Figma integration │ │ ├── similarity/ # Visual comparison │ │ └── utility/ # Utility toolset │ ├── types/ # TypeScript definitions │ └── utils/ # Helper functions ├── docs/ # Documentation └── dist/ # Built files


## 🤝 贡献


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


### 开发指南


1. 遵循现有代码样式
2. 根据需要更新文档


## 📝 许可证


此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。


**如果你有更有趣、有趣和酷的想法，请立即以问题的形式提交！ ! !**


## 🙏 致谢


- [Figma上下文MCP](https://github.com/GLips/Figma-Context-MCP/discussions) 提供Figma设计分析功能
- [fastmcp](https://github.com/punkpeye/fastmcp) 提供MCP快速开发框架
- 本项目的所有贡献者和用户