用 MCP 和 Figma AI Bridge 生成前端代码

建一个基本目录

代码生成出来以后，最好有一个清楚的落点，不然很快又会乱：

mkdir -p src/components
mkdir -p src/styles
mkdir -p 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();

连接设计稿

在 IDE 里打开项目后，按面板里的流程选设计稿就行：

1. 点击左侧的 MCP Server 图标
2. 选择 'Figma AI Bridge'
3. 输入 Figma 访问令牌
4. 选择要转换的文件和页面

调整生成策略

这一步很重要。默认配置能跑，但不一定最适合你的项目。常见要改的地方有：

• 框架：React、Vue、HTML、Svelte
• 样式：Tailwind CSS、普通 CSS、Styled Components
• 响应式：开或关
• 组件命名：PascalCase、camelCase
• 代码风格：缩进、分号这些细节

生成代码

操作很简单：点一次生成，工具会读设计稿、分析结构，然后把前端代码落到配置好的输出目录里。生成结果通常不是最终版，但作为起点已经够省时间了，尤其是页面结构和基础样式这部分。

集成到项目里

生成完的代码，直接接到现有项目里。比如 React 项目里，通常就是把页面拆成几个组件再引用：

// 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;

功能上有哪些东西

这套工具的价值，主要还是把设计理解和代码起手式做顺了：

• 自动识别组件、布局和样式
• 支持 React、Vue、HTML、Svelte
• 支持 Tailwind CSS、普通 CSS、Styled Components
• 能生成响应式代码
• 会尽量拆成可复用组件
• 可以生成 TypeScript 类型

还有一些偏工程化的能力，比如设计稿变更后的同步、模板扩展、代码优化和多语言注释。它们不是每个项目都用得上，但放在流程里，确实能少补不少手工活。

常用命令

启动服务可以直接用脚本，也可以走 npx：

# 启动 MCP Server
node start-mcp.js
# 或者使用 npx
npx @figma-ai-bridge/mcp-server --config figma-mcp-config.json

查看帮助、换配置文件、指定输出目录、选择页面，也都能通过命令行完成：

# 查看帮助信息
npx @figma-ai-bridge/mcp-server --help
# 指定配置文件
npx @figma-ai-bridge/mcp-server --config custom-config.json
# 指定输出目录
npx @figma-ai-bridge/mcp-server --output ./custom-output
# 选择特定页面
npx @figma-ai-bridge/mcp-server --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"
  }
}

我会留意的几个点

这类自动生成方案，最怕的不是不能用，而是生成得'看起来能跑'，后面维护时才发现结构不顺。实际用的时候我会重点看这几件事：

1. 设计稿本身要清楚，组件命名别太随意
2. 颜色、字体、间距最好有统一规则
3. 页面如果要适配多个屏幕，设计阶段就得先考虑布局变化
4. 组件拆分别贪大，单文件过重后面很难改
5. 生成后的代码一定要过一遍审查，再进主分支

相关资源

• Figma 官方文档：https://www.figma.com/resources/learn-design/
• MCP Server 文档：https://mcp-server-docs.example.com
• React：https://reactjs.org/docs/
• Vue：https://vuejs.org/guide/
• Svelte：https://svelte.dev/docs/
• Tailwind CSS：https://tailwindcss.com/docs/
• Styled Components：https://styled-components.com/docs