工具集介绍
feuse-mcp 提供了一套完整的前端开发工具集，专注于 Figma 集成、API 自动化和开发工作流优化。
🔧 可用工具集（持续更新）
| 工具名称 | 类别 | 功能描述 | 输入参数 | 备注 |
|---|---|---|---|---|
| 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 | 开发工具 | 理解后端接口文档，自动生成接口类型、地址常量、Mock数据等 | apiDocs | 支持多种API文档格式，生成完整前端API工具链 |
| initialize-project-standard | 项目管理 | 分析项目结构，生成Copilot和Cursor的全局项目规则配置 | 无参数 | 自动生成智能编程助手的项目上下文和编码规范 |
| Download-Figma-Images | 资源管理 | 根据节点ID批量下载Figma中的SVG和PNG图片资源 | fileKey, nodes[], localPath | 支持imageRef处理，自动创建目录结构（底层工具，供其他MCP调用） |
| download-svg-assets | 资源管理 | 根据图像或图标节点ID，专门下载Figma文件中的SVG矢量资源 | fileKey, nodes[], localPath | 仅处理SVG格式，支持复杂节点结构（底层工具，供其他MCP调用） |
工具分类说明
🎨 Figma集成类
直接与Figma API交互，实现设计到代码的转换。这类工具能够理解Figma的设计语言，并将其转换为可用的前端代码。
🖼️ 资源管理类
处理图片、图标等静态资源的下载和组织。支持智能批量操作，自动维护项目资源结构。
🎯 质量检测类
验证实现效果与设计稿的一致性。通过视觉比较和智能分析，确保开发成果符合设计要求。
🛠️ 开发工具类
提升开发效率的自动化工具。从API文档生成完整的前端开发套件，减少重复性工作。
📁 项目管理类
项目初始化和标准化配置工具。自动分析项目架构，生成适合的开发规范和配置。
使用场景
设计转代码工作流
- 使用
extract-color-vars生成设计令牌 - 使用
Figma-To-Code将获取到Figma设计稿的DSL描述结构 - 自动执行
Download-Figma-Images提取所需的图标资源，到指定目录 - 用
similarity-figma验证实现效果
API 开发工作流
- 使用
api-automation解析后端API文档 - 自动生成 TypeScript 类型定义
- 生成 API 常量和请求函数
- 创建 Mock 数据用于开发测试
项目标准化工作流
- 使用
initialize-project-standard分析项目结构 - 生成 Copilot/Cursor 配置文件
- 建立统一的编码规范
- 优化开发体验和代码质量