🚀 前端实用MCP（模型上下文协议）工具
前端实用MCP（模型上下文协议）工具是网页开发者的必备工具，可实现API集成自动化、Figma设计到代码的转换，以及优化开发工作流程。
English | 中文
📖 文档
✨ 主要特性
- 🎨 Figma集成：与 Figma-Context-MCP 深度集成，实现无缝的Figma设计到代码转换以及自动资源提取。
- 📝 API自动化：从API文档生成TypeScript接口类型、API URL常量、模拟数据和请求函数。
- 🖼️ 资源管理：从Figma文件中下载SVG和PNG图像，并以有序的文件结构进行组织。
- 🎯 相似度比较：将生成的代码页面与原始Figma原型进行比较，以验证准确性。
- 🛠️ 项目标准：根据当前项目架构为Copilot和Cursor生成全局规范指导文件。
- 🔧 颜色变量：将Figma颜色变量提取并转换为指定标准（UnoCSS、TailwindCSS或自定义结构）的CSS/设计令牌。
🔧 可用工具集（持续更新）
| 工具名称 | 类别 | 描述 | 输入参数 | 注意事项 |
|---|---|---|---|---|
| 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 | 资源管理 | 根据节点ID从Figma批量下载SVG和PNG图像资源 | fileKey，nodes[]，localPath |
支持图像引用处理，自动创建目录结构（其他MCP的底层工具） |
| download-svg-assets | 资源管理 | 根据图像/图标节点ID从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/ # 构建后的文件
🤝 贡献代码
欢迎贡献代码！请随时提交拉取请求。对于重大更改，请先打开一个问题，讨论你想要进行的更改。
开发指南
- 遵循现有的代码风格。
- 根据需要更新文档。
📝 许可证
本项目采用MIT许可证 - 详情请参阅 LICENSE 文件。
如果你有更多有趣、好玩的想法，请立即在issues中提交！！！
🙏 致谢
- Figma-Context-MCP 提供了Figma设计分析功能。
- fastmcp 提供了MCP快速开发框架。
- 本项目的所有贡献者和用户。