前端有用的MCP（模型上下文协议）工具-web开发人员自动化API集成、Figma设计到代码转换和开发工作流程优化的基本实用程序。
英语| 中文
📖 文档
✨ 特性
- 🎨 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。对于重大更改，请先打开一个问题来讨论您想要更改的内容。
开发指南
- 遵循现有代码样式
- 根据需要更新文档
📝 许可证
此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。
如果你有更有趣、有趣和酷的想法，请立即以问题的形式提交！ ! !
🙏 致谢
- Figma上下文MCP 提供Figma设计分析功能
- fastmcp 提供MCP快速开发框架
- 本项目的所有贡献者和用户
