MCP 实战：将 Figma 设计稿自动转换为前端代码

启动与服务运行

创建一个入口脚本 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
# 或使用 npx 直接运行
npx @figma-ai-bridge/mcp-server --config figma-mcp-config.json

代码生成与集成

在 IDE 中打开项目后，通过 MCP 面板选择 "Figma AI Bridge"，输入令牌并指定要转换的文件。配置好框架（如 React/Vue）、样式方案（Tailwind/CSS）及命名规则后，点击生成按钮。

生成的代码会保存到配置的 outputDir 中。例如，在 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;

高级配置选项

对于复杂场景，可以在配置文件中扩展更多参数，例如指定分支 ID、版本 ID 或自定义模板路径：

{
  "figma": {
    "accessToken": "...",
    "fileId": "...",
    "branchId": "分支 ID（可选）",
    "versionId": "版本 ID（可选）"
  },
  "output": {
    "componentPrefix": "Figma",
    "useIndexFiles": true
  },
  "customTemplates": {
    "component": "./templates/component.hbs",
    "style": "./templates/style.hbs"
  }
}

最佳实践建议

1. 权限管理：确保令牌仅具备必要的最小权限，定期轮换。
2. 设计规范：保持设计稿结构清晰，组件命名规范，有助于提升生成代码质量。
3. 样式系统：在设计阶段建立统一的颜色和字体系统，生成的代码会更整洁。
4. 代码审查：生成后的代码仍需人工审查，特别是交互逻辑和性能优化部分。
5. 响应式设计：在设计稿中预设不同断点，生成的响应式代码会更准确。

官方文档参考

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