AI导哈

Figma转代码服务

Codigma MCP Server是一个后端服务，能够将Figma设计文件转换为语义化的HTML和CSS代码，支持TailwindCSS输出。

  • by rastmob
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 rastmob/codigma-mcp-server

使用说明

Codigma MCP服务器

欢迎来到 Codigma MCP服务器 仓库！

Codigma MCP服务器 是后台服务吗 Codigma.io 网站 --一个免费的工具，可以帮助您轻松地将任何公共Figma链接转换为干净的语义HTML和CSS。

你只需粘贴你的Figma链接，Codigma.io就会完成剩下的工作！

🔄 你能做什么

  • 获取Figma公共文件数据。
  • 将Figma设计转换为结构化Codigma模型。
  • 生成干净、语义清晰的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节点转换为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 URL到代码输出的完整过程（也支持TailwindCSS）。

📅 示例

发布 /api/figma-to-bundle

请求正文：

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

答复：

  • Codigma模型（结构化）
  • HTML+CSS捆绑包（或TailwindCSS HTML）

🔧 技术

  • Node.js 18+
  • 快递5
  • TypeScript
  • 阿西奥斯
  • Jest（用于测试）
  • ESLint（用于代码质量）

📊 路线图

  • ✅ 获取公共Figma文件
  • ✅ TailwindCSS输出选项
  • ✅ 字体、边框、阴影支持
  • ⬆️ 更好的响应支持
  • ⬆️ 私人文件的OAuth登录
  • ⬆️ 快照和版本控制功能
  • ⬆️ 管理员仪表板

👤 关于作者

穆罕默德·阿尔普
……的创始人 Rast Mobile

📄 许可证

根据ISC许可证获得许可。

📈 贡献

我们欢迎拉取请求！

分叉回购→ 创建分支→ 提交您的更改→ 打开拉取请求→ Done! 📚

🐝 报告Bug

发现bug了吗？请打开一个问题 这里.

感谢您使用 Codigma MCP服务器!
别忘了试试 Codigma.io 网站 免费！

相关 MCP