Figma MCP Braintrust

Figma MCP Braintrust（可译为“Figma MCP智囊团”或根据具体语境调整为更贴切的表述）

🚀 一个完整的自主流程，利用MCP（模型上下文协议）和OpenAI将Figma设计转换为网站。

概述

这个项目展示了一个端到端的工作流程，该流程：

1. 接受Figma设计URL作为输入
2. 通过Figma MCP服务器提取实际设计上下文
3. 使用OpenAI GPT-4生成可直接投入生产的HTML/CSS代码
4. 自动捕获生成网站的PNG截图
5. 输出代码和可视化结果

主要特点：

• ✅ 真实Figma MCP集成（非模拟数据）
• ✅ OpenAI GPT-4 代码生成
• ✅ 自动化Chrome无头模式截图
• ✅ 无需人工干预
• ✅ 完善的错误处理和回退机制

管道流量

1. 解析Figma URL → 提取 fileKey 和 nodeId
2. Figma MCP 通话 → 获取设计上下文（代码 + 资源）
3. OpenAI 生成（或：OpenAI 的生成技术） → 将设计转换为HTML/CSS
4. 截图创建 → 使用 Puppeteer 捕获最终结果

设置

先决条件

• Node.js（v18+）
• OpenAI API密钥
• Figma MCP 服务器（用于真实集成）

安装

# Clone or navigate to project
cd /Users/jess/Documents/Coding_Projects/Figma_MCP_Braintrust

# Install dependencies
npm install

# Create environment file
cp .env.example .env
# Edit .env and add your OPENAI_API_KEY

用法

快速入门

# Basic usage - generates HTML and PNG screenshot
node index.js "https://figma.com/design/[fileKey]/[fileName]?node-id=[nodeId]" "your prompt here"

# With custom output filename
node index.js "[figma-url]" "[prompt]" --output my_website.png

# Example with real Figma URL
node index.js "https://www.figma.com/design/hbYtV8gJUFhBhExDrOhH2b/IOS-Homescreen?node-id=1-272" "build me a modern iOS-style website" -o ios_design.png

自动截图工具

# Take screenshot of any HTML file
node html-to-png-auto.js input.html output.png

# With custom dimensions
node html-to-png-auto.js input.html output.png 1600 1000 --custom

CLI 选项

Options:
  -o, --output 
    Output screenshot path (default: "website_output.png")
  -h, --help            Display help for command

文件结构

Figma_MCP_Braintrust/
├── index.js                 # Main pipeline with mock MCP
├── index-with-real-mcp.js   # Version with real MCP integration
├── package.json
├── .env.example
├── README.md
└── [Generated Files]
    ├── website_output.png   # Screenshot of generated website
    └── website_output.html  # Generated HTML code

真实MCP集成

这个（或“该”） index-with-real-mcp.js 文件展示了如何与实际的Figma MCP服务器进行集成。要使用它：

1. 确保您的Figma MCP服务器正在运行
2. 替换模拟件 getFigmaDesignContext() 使用实际MCP调用的方法
3. 使用MCP工具： get_design_context

示例MCP调用结构：

const mcpResponse = await callMCPTool('get_design_context', {
  fileKey: fileKey,
  nodeId: nodeId,
  clientLanguages: 'typescript,javascript,html,css',
  clientFrameworks: 'react'
});

示例输出

该管道生成：

• 网站的高质量PNG截图
• 包含内联CSS的完整HTML文件
• 每一步的控制台日志记录

错误处理

• Figma链接的URL验证
• OpenAI API错误处理
• 截图生成后的文件清理
• 优雅地失败，同时提供详细的错误信息

发展

# Run with file watching
npm run dev

# Start normally
npm start

故障排除

1. 缺少OpenAI API密钥确保 .env 文件已存在，且具有有效的API密钥
2. 无效的Figma URL使用格式 https://figma.com/design/:fileKey/:fileName?node-id=:nodeId
3. Puppeteer 问题试着和（某人/某物）一起跑 --no-sandbox 在无头模式下设置标志
4. 截图质量在代码中调整视口和设备缩放因子

下一步行动

• 与真实的Figma MCP服务器集成
• 增加对多个设计系统的支持
• 实现资源下载与优化
• 添加测试和CI/CD流水线
• 支持不同的输出格式（PDF、SVG 等）