JinDaGe - feuse-mcp MCP Details

article

README

🚀 前端实用MCP（模型上下文协议）工具

前端实用MCP（模型上下文协议）工具是网页开发者的必备工具，可实现API集成自动化、Figma设计到代码的转换，以及优化开发工作流程。

English | 中文

📖 文档

feuse-mcp 官方文档

✨ 主要特性

🎨 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快速开发框架。
本项目的所有贡献者和用户。

feuse-mcp