Feuse MCP

🚀 前端实用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/设计令牌。

🔧 可用工具集（持续更新）

🚀 快速开始

配置

将以下内容添加到你的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/                   # 构建后的文件

🤝 贡献代码

欢迎贡献代码！请随时提交拉取请求。对于重大更改，请先打开一个问题，讨论你想要进行的更改。

开发指南

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

📝 许可证

本项目采用MIT许可证 - 详情请参阅 LICENSE 文件。

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

🙏 致谢

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