Codigma MCP Server

Codigma MCP Server

欢迎使用 Codigma MCP Server 仓库！

Codigma MCP Server 是 Codigma.io 背后的后端服务。Codigma.io 是一款免费工具，可帮助你轻松将任何公开的 Figma 链接转换为简洁、语义化的 HTML 和 CSS。

只需粘贴 Figma 链接，剩下的就交给 Codigma.io！

---

🔄 你可以做什么

• 获取 Figma 公开文件数据。
• 将 Figma 设计转换为结构化的 Codigma Models。
• 生成简洁、语义化的 HTML 和 CSS 代码。
• 可选生成基于 TailwindCSS 类的 HTML。
• 支持响应式设计、字体、边框、阴影和渐变。

---

📚 快速开始

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

如何获取 Figma 令牌？

4. 运行服务

开发模式

npm run dev

生产模式

npm run build
npm start

---

🌐 主要 API 端点

端点	方法	描述
/api/fetch-figma-data	POST	获取 Figma 公开文件的 JSON 数据。
/api/map-figma-node	POST	将 Figma Node 转换为 Codigma Model。
/api/generate-html	POST	根据 Codigma Model 创建 HTML。
/api/generate-css	POST	根据 Codigma Model 创建 CSS。
/api/generate-bundle	POST	创建完整的代码包（HTML + CSS）。
/api/figma-to-bundle	POST	从 Figma URL 到代码输出的完整流程（也支持 TailwindCSS）。

---

📅 示例

POST /api/figma-to-bundle

请求正文：

{
  "figmaUrl": "https://www.figma.com/file/abcd1234/Design-System?node-id=123%3A456",
  "outputType": "plain" // or "tailwind"
}

响应：

• Codigma Model（结构化）
• HTML + CSS 代码包（或 TailwindCSS HTML）

---

🔧 技术栈

• Node.js 18+
• Express 5
• TypeScript
• Axios
• Jest（用于测试）
• ESLint（用于代码质量）

---

📊 路线图

• ✅ 获取 Figma 公开文件
• ✅ TailwindCSS 输出选项
• ✅ 支持字体、边框和阴影
• ⬆️ 改进响应式支持
• ⬆️ 为私有文件提供 OAuth 登录
• ⬆️ 快照和版本管理功能
• ⬆️ 管理员控制面板

---

👤 关于作者

Mehmet Alp
Rast Mobile 创始人

• GitHub： @rastmob
• Email：[email protected]

---

📄 许可证

采用 ISC License 授权。

---

📈 参与贡献

欢迎提交拉取请求！

Fork 仓库 → 创建分支 → 提交更改 → 发起拉取请求 → 完成！📚

---

🐝 报告 Bug

发现 Bug？请在此处提交 Issue。

感谢使用 Codigma MCP Server！
别忘了免费试用 Codigma.io！