使用 MCP 服务器自动化 Figma React.js 代码生成

Source: Dev.to

构建更快的 UI 流水线，使用 AI 辅助的设计‑到‑代码工作流

现代产品团队希望 UI 开发能够跟上设计的速度。Figma 设计师与 React 开发者之间的交接仍是主要瓶颈——手动转译、像素级推敲、样式不一致以及返工。

模型上下文协议（Model Context Protocol，MCP）开启了一种全新的桥接方式：一个由服务器驱动、AI 提供动力的流水线，能够读取 Figma 设计元数据并自动生成干净、可直接投产的 React 组件。

在本文中我们将逐步讲解：

• MCP 服务器的架构是什么样的
• 自定义 Figma MCP 服务器如何提取设计 token、画框、节点
• React.js 代码是如何生成的（包括 Tailwind、styled‑components 或 CSS Modules）
• 使用 MCP 客户端和 LLM 的真实示例
• 为什么这种模式是设计‑工程自动化的未来

什么是 MCP？

模型上下文协议（Model Context Protocol，MCP）是 Anthropic 创建的开放协议，允许工具、数据源和应用通过标准化的“服务器”向 AI 模型暴露能力。

可以把 MCP 看作外部系统（例如 Figma）与 AI 模型之间的桥梁，使结构化、带上下文的转换成为可能——比如设计 → 代码。

一个 MCP 服务器可以暴露：

• 资源 – 文件、模式、节点、设计 token
• 工具 – 如 getFrame(id)、exportComponent() 等命令
• 事件 – 设计更新、token 变更

这使得 MCP 十分适合自动化设计‑到‑代码的工作流。

架构：Figma → MCP 服务器 → LLM → React 代码

[Figma 文件]
   ↓ (API)
[Figma MCP 服务器]
   ↓ 结构化 JSON
[LLM / 代码生成器]
   ↓ React 输出
[React UI 组件库]

MCP 服务器充当归一化器——提取精确的 Figma 元数据，并为 LLM 提供正确的上下文，从而生成准确的 JSX。

构建 Figma MCP 服务器

一个最小化的服务器会暴露如下工具：

{
  "tools": [
    { "name": "getNode", "description": "通过 ID 获取 Figma 节点" },
    { "name": "getDesignTokens", "description": "提取全局颜色/文字/间距 token" },
    { "name": "exportFrameAsReact", "description": "将画框转换为 JSX 组件" }
  ]
}

示例 MCP 服务器（Node.js）

import { Server } from "@modelcontextprotocol/sdk/server";
import { getFigmaNode, extractTokens, generateReact } from "./figma-utils.js";

const server = new Server();

server.tool("getNode", async ({ id }) => {
  return await getFigmaNode(id);
});

server.tool("getDesignTokens", async () => {
  return await extractTokens();
});

server.tool("exportFrameAsReact", async ({ frameId }) => {
  const frame = await getFigmaNode(frameId);
  return generateReact(frame);
});

server.start();

该服务器现在向任何支持 MCP 的 LLM 客户端提供结构化的 Figma 数据。

React 代码是如何生成的

当 MCP 服务器返回设计 JSON 时，LLM 将其转换为：

1. 组件结构 – 从 Figma 画框映射到 React 函数组件。
2. 样式 – 基于所选的样式方案：
   • Tailwind CSS
   • CSS Modules
   • Styled Components
3. 自动提取的 token – 颜色、字体、间距等会成为可复用的常量。

示例 输入 → 输出

Figma MCP 服务器输出（简化版）

{
  "type": "FRAME",
  "name": "ButtonPrimary",
  "width": 120,
  "height": 40,
  "fills": [{ "color": "#0A66C2" }],
  "cornerRadius": 8,
  "children": [
    {
      "type": "TEXT",
      "characters": "Sign In",
      "fontSize": 16,
      "color": "#FFFFFF"
    }
  ]
}

生成的 React 组件

export default function ButtonPrimary() {
  return (
    <button className="bg-[#0A66C2] rounded-[8px] text-white text-[16px] w-[120px] h-[40px]">
      Sign In
    </button>
  );
}

更大的 UI（卡片、仪表盘、模态框）也遵循同样的方式。

MCP + AI 的优势

• 确定性的上下文 – MCP 服务器提供结构化 JSON，而不是截图或非结构化描述。
• 可重复的代码风格 – 可以锁定文件夹结构、命名约定、组件模板、样式库以及属性模式。
• 自动化更新 – 当设计师修改属性（例如按钮圆角从 8 px 改为 6 px）时，MCP 事件会触发 LLM 重新生成代码，甚至自动创建 PR。
• 全团队一致性 – 所有组件共享相同的设计 token 与基础模式。

从 MCP 客户端调用服务器

const response = await client.callTool("exportFrameAsReact", {
  frameId: "12345"
});

console.log(response.output);

调用返回生成文件的路径，例如 /src/components/ButtonPrimary.jsx。此后可以进一步自动打开 PR 或同步到 Storybook。

为什么这会改变设计‑到‑代码的工作流

这就是 UI 工程的“工厂模型”——可预测、可审计且自动化。

接下来怎么办？

你可以在 Figma MCP 服务器上继续扩展：

• 自动生成 Storybook stories
• 可访问性检查（ARIA）
• 变体 → React props 映射
• 来自 AutoLayout 的响应式断点
• AI 辅助的布局修正