AI导哈

前端开发工具集

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

  • by Panzer-Jack
  • TypeScript
  • 本地部署
  • 37 星标
  • 更新于
在 GitHub 查看 panzer-jack/feuse-mcp

使用说明

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

英语| 中文

📖 文档

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开发者设置.

{
  "feuse-mcp": {
    "command": "npx",
    "args": ["feuse-mcp@latest"],
    "env": {
      "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
    }
  }
}

🔧 对于代码贡献者

设置

# 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开发者设置.

{
  "feuse-mcp": {
    "command": "npx",
    // Configure path
    "args": ["YOUR/PATH/TO/dist/main.cjs"],
    "env": {
      "FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
    }
  }
}

📁 项目结构

feuse-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 提供Figma设计分析功能
  • fastmcp 提供MCP快速开发框架
  • 本项目的所有贡献者和用户

相关 MCP