MCP 实战：利用 Figma 设计稿自动生成前端代码

实施步骤

1. 初始化项目结构

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

2. 启动 MCP Server

创建 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();

3. 连接设计稿

在 IDE 中打开项目后：

1. 点击左侧 MCP Server 图标
2. 选择 'Figma AI Bridge'
3. 输入访问令牌并选择目标文件及页面

4. 配置生成选项

在 MCP Server 面板中调整参数：

• 框架选择：React、Vue、HTML、Svelte 等
• 样式方案：Tailwind CSS、普通 CSS、Styled Components 等
• 响应式设置：启用或禁用
• 组件命名：PascalCase、camelCase 等
• 代码风格：缩进、分号偏好

5. 生成与集成

点击 'Generate Code' 按钮，服务器分析设计稿后自动生成代码至输出目录。随后将其集成到项目中：

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

功能特性

• 智能分析：自动识别组件、布局和样式
• 多框架支持：覆盖主流前端技术栈
• 实时同步：支持设计稿变更后的代码更新
• 类型生成：自动生成 TypeScript 定义
• 性能优化：注重加载速度与代码质量

命令行操作

基本用法

node start-mcp.js
# 或使用 npx
npx @figma-ai-bridge/mcp-server --config figma-mcp-config.json

高级配置

{
  "figma": {
    "accessToken": "你的 Figma 访问令牌",
    "fileId": "设计稿文件 ID",
    "branchId": "分支 ID（可选）"
  },
  "output": {
    "format": "react",
    "framework": "nextjs",
    "componentPrefix": "Figma"
  },
  "options": {
    "optimizeImages": true,
    "imageOutputDir": "./public/images"
  }
}

注意事项

1. 权限管理：确保令牌仅授予必要权限
2. 设计规范：保持设计稿结构清晰，组件命名规范
3. 样式一致：统一颜色、字体系统有助于生成更整洁的代码
4. 响应式考虑：在设计阶段预留不同屏幕尺寸布局
5. 组件拆分：避免生成过大的单一文件
6. 代码审查：生成后建议人工审查并根据需求调整

相关资源

• Figma 官方文档
• React 文档
• Vue 指南
• Tailwind CSS