Feuse Mcp

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 文档并生成类型、常量、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 使用的底层工具)

🚀 快速开始

配置

添加到你的 MCP 客户端配置中：

从 Figma Developer Settings 获取你的 Figma API 密钥。

{
  "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 Developer Settings 获取你的 Figma API 密钥。

{
  "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。对于重大更改，请先打开 issue 讨论你想要更改的内容。

开发指南

1. 遵循现有的代码风格
2. 根据需要更新文档

📝 许可证

本项目基于 MIT 许可证授权 - 详情请参阅 LICENSE 文件。

如果你有更多有趣、好玩、酷炫的想法，请立即在 issues 中提交！ ！ ！

🙏 致谢

• Figma-Context-MCP 提供 Figma 设计分析能力
• fastmcp 提供 MCP 快速开发框架
• 本项目的所有贡献者和用户