🚀 Codigma MCP 服务器
Codigma MCP Server 是 Codigma.io 后端服务的核心，它是一款免费工具，能够轻松地将任何公共 Figma 链接转换为干净、语义化的 HTML 和 CSS。你只需粘贴 Figma 链接，剩下的工作交给 Codigma.io 就好！
🚀 快速开始
1. 克隆仓库
git clone https://github.com/rastmob/codigma-mcp-server.git
cd codigma-mcp-server
2. 安装依赖项
npm install
3. 添加 Figma API 令牌
创建一个 .env 文件：
FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token_here
4. 运行服务器
开发模式
npm run dev
生产模式
npm run build
npm start
✨ 主要特性
- 获取 Figma 公共文件数据。
- 将 Figma 设计转换为结构化的 Codigma 模型。
- 生成干净、语义化的 HTML 和 CSS 代码。
- 可选生成基于 TailwindCSS 的 HTML。
- 支持响应式设计、字体、边框、阴影和渐变。
📦 安装指南
上述“快速开始”部分已详细介绍了安装步骤，包括克隆仓库、安装依赖、添加 API 令牌以及运行服务器的开发和生产模式操作。
💻 使用示例
基础用法
POST /api/figma-to-bundle
请求体：
{
"figmaUrl": "https://www.figma.com/file/abcd1234/Design-System?node-id=123%3A456",
"outputType": "plain" // 或 "tailwind"
}
响应：
- Codigma 模型（结构化）
- HTML + CSS 代码包（或 TailwindCSS HTML）
📚 详细文档
🌐 主要 API 端点
| 端点 | 方法 | 描述 |
|---|---|---|
/api/fetch-figma-data |
POST | 获取 Figma 公共文件 JSON 数据。 |
/api/map-figma-node |
POST | 将 Figma 节点转换为 Codigma 模型。 |
/api/generate-html |
POST | 从 Codigma 模型生成 HTML。 |
/api/generate-css |
POST | 从 Codigma 模型生成 CSS。 |
/api/generate-bundle |
POST | 生成完整的代码包（HTML + CSS）。 |
/api/figma-to-bundle |
POST | 从 Figma 链接直接输出代码（支持 TailwindCSS）。 |
🔧 技术细节
本项目使用的技术栈如下：
- Node.js 18+
- Express 5
- TypeScript
- Axios
- Jest（用于测试）
- ESLint（用于代码质量）
📅 路线图
- ✅ 获取 Figma 公共文件
- ✅ 支持 TailwindCSS 输出选项
- ✅ 字体、边框、阴影支持
- ⬆️ 更好的响应式设计支持
- ⬆️ OAuth 登录支持私有文件
- ⬆️ 快照和版本控制功能
- ⬆️ 管理员控制台
👤 作者信息
Mehmet Alp
Codigma.io 的创始人
- GitHub: @rastmob
- 邮箱: mehmet.alp@rastmobile.com
📄 许可证
根据 ISC License 分发。
📈 贡献指南
我们欢迎任意贡献！
叉乘仓库 -> 提交修改 -> 发起拉取请求
通过你的贡献，可以帮助项目更好发展。