将 Figma 设计稿自动转为前端代码：MCP + Figma AI Bridge 上手

这里我选了 React + Vite，输出到 ./src/components，顺便生成 TypeScript 类型，用 Tailwind 做样式，支持响应式。

跑通流程

先建一下目录：

mkdir -p src/components src/styles src/assets

然后写一个启动脚本 start-mcp.js：

// start-mcp.js
const { startServer } = require('@figma-ai-bridge/mcp-server');
const config = require('./figma-mcp-config.json');

async function start() {
  try {
    const server = await startServer(config);
    console.log('MCP Server 已启动在端口:', server.port);
    console.log('访问 http://localhost:', server.port, '查看生成的代码');
  } catch (error) {
    console.error('启动 MCP Server 失败:', error);
  }
}
start();

启动 node start-mcp.js，如果一切顺利，就能在 IDE 的 MCP 面板里看到 Figma AI Bridge 了。连接时输入 Token，选好文件和页面，然后点 Generate Code，代码就落到 outputDir 了。

生成出来的组件大致是这样，你可以直接往项目里集成：

// App.jsx
import React from 'react';
import Header from './components/Header';
import Hero from './components/Hero';
import Features from './components/Features';
import Footer from './components/Footer';
import './App.css';

function App() {
  return (
    <div className="App">
      <Header />
      <Hero />
      <Features />
      <Footer />
    </div>
  );
}

export default App;

更多选项

除了基本配置，你还可以用命令行传参数：

npx @figma-ai-bridge/mcp-server --help
# 指定其他配置文件或输出目录
npx @figma-ai-bridge/mcp-server --config custom-config.json --output ./custom-output --page-id "页面 ID"

高级配置里还能指定分支、版本、自定义模板等，一个完整的高级配置像这样：

{
  "figma": {
    "accessToken": "你的 Figma 访问令牌",
    "fileId": "设计稿文件 ID",
    "pageId": "页面 ID",
    "branchId": "分支 ID（可选）",
    "versionId": "版本 ID（可选）"
  },
  "output": {
    "format": "react",
    "framework": "nextjs",
    "outputDir": "./src/components",
    "componentPrefix": "Figma",
    "useIndexFiles": true
  },
  "options": {
    "generateTypes": true,
    "useTailwind": true,
    "responsive": true,
    "removeComments": false,
    "optimizeImages": true,
    "imageOutputDir": "./public/images"
  },
  "customTemplates": {
    "component": "./templates/component.hbs",
    "style": "./templates/style.hbs"
  }
}

实际感受

Figma AI Bridge 的确能省掉一堆从设计稿扒样式、拼 HTML 的活儿，尤其团队设计系统比较规范的时候，生成的组件命名和结构都还合理。不过，如果设计稿里图层乱七八糟，或者用了很多自动布局嵌套，生成出来的代码可能需要再调调。另外，Access Token 的权限要确保够，不然可能拿不到部分资源。总之，这是一个提效工具，不是魔法按钮。

注意事项

• 设计稿的命名和分组越清晰，生成的代码可读性越高。
• 响应式生成依赖设计稿中有多尺寸 Frame 或约束设置，如果没有，还是得手动补。
• 生成的代码可以作为一个起点，但复杂交互还需要自己实现。

更多细节可参考 Figma 官方文档、前端框架和样式方案文档。