Codigma MCP Server

Codigma MCP Server 是一個後端服務，支持將Figma設計轉換為語義化的HTML和CSS代碼，可選生成TailwindCSS樣式，並提供API接口處理設計到代碼的全流程。

開發者工具圖像與視頻處理 #Figma轉換 #代碼生成 #HTML/CSS #Tailwind支持 .TypeScript

評分 : 2分

下載量 : 18

更新時間 : 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 ImportDirectly process any public Figma file URL to extract design data

Smart Design ConversionTransforms Figma layers into semantic HTML structure with proper nesting

Multi-Format OutputGenerate either standard HTML/CSS or TailwindCSS utility classes

Advanced Styling SupportHandles fonts, borders, shadows, gradients and responsive layouts

Pros and Cons

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 DesignTurn a complete Figma landing page into responsive HTML/CSS

Generate Tailwind ComponentsCreate 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。
支持響應式設計、字體、邊框、陰影和漸變。

📦 安裝指南

上述快速開始部分已涵蓋詳細的安裝步驟。

💻 使用示例

基礎用法

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