Codigma MCP Server

Codigma MCP Server 是一个后端服务，支持将Figma设计转换为语义化的HTML和CSS代码，可选生成TailwindCSS样式，并提供API接口处理设计到代码的全流程。

开发者工具图像与视频处理 #Figma转换 #代码生成 #HTML/CSS #Tailwind支持 .TypeScript

评分 : 2分

下载量 : 10.4K

更新时间 : 2025-04-28

打开站点

What is Codigma MCP Server?

The backend powering Codigma.io - a free tool that automatically transforms Figma designs into production-ready HTML and CSS code. Just paste your Figma link and get clean, semantic code instantly.

How does it work?

1. You provide a public Figma file URL 2. Our server fetches the design data 3. Converts Figma elements to structured models 4. Generates optimized HTML/CSS or Tailwind code

Perfect for

• Frontend developers who want to speed up workflow • Designers who want to prototype faster • Teams collaborating between design and development

Key Features

Figma Design Import

Directly process any public Figma file URL to extract design data

Smart Design Conversion

Transforms Figma layers into semantic HTML structure with proper nesting

Multi-Format Output

Generate either standard HTML/CSS or TailwindCSS utility classes

Advanced Styling Support

Handles fonts, borders, shadows, gradients and responsive layouts

Advantages

100% free to use with public Figma files

No design quality loss in conversion

Produces clean, maintainable code

Supports modern CSS features

Option for TailwindCSS output

Limitations

Requires public Figma links (private files need OAuth)

Complex interactions need manual implementation

Some advanced Figma features may need adjustment

Getting Started

Get Figma Access Token

Create a personal access token from Figma account settings

Set Up Environment

Clone repository and install dependencies

Configure Server

Add your Figma token to the .env file

Run Server

Start in development or production mode

Example Use Cases

Convert Landing Page Design

Turn a complete Figma landing page into responsive HTML/CSS

Generate Tailwind Components

Create reusable UI components with Tailwind classes

Frequently Asked Questions

Is this service really free?

How accurate is the code conversion?

Can I use private Figma files?

Helpful Resources

Figma Developer API Docs

Official Figma API documentation

Codigma Live Demo

Try the conversion tool directly in your browser

GitHub Repository

Source code and issue tracker

🚀 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

如何获取 Figma Token？

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）。