基于 MCP Server - Figma AI Bridge 自动生成前端代码

在现代前端开发中，从设计稿到可用页面的交付往往需要大量重复劳动：切图、手写样式、布局调整……而借助 MCP Server - Figma AI Bridge，我们可以将 Figma 设计稿自动转换成整洁的 HTML/CSS/JS 代码，并立即生成可预览的网页。一键化、傻瓜式操作，让设计交付效率跃升。

本文测试使用的系统环境如下：

• Trae IDE 版本：2.4.5
• macOS 版本：14.7
• Node.js 版本：24.6.0
• npx 版本：11.5.2
• Python 版本：3.13.3
• uvx 版本：0.6.16

一、安装并启动 Trae IDE

Trae IDE 与 AI 深度集成，提供智能问答、代码自动补全及基于 Agent 的 AI 自动编程能力。首次使用时，前往官网下载并安装：

1. 访问官网下载页面并选择对应平台的安装包。
2. 双击运行安装程序，按提示完成安装。
3. 启动 Trae IDE，初次打开会看到欢迎页及快速入门指南。

二、配置 MCP Server 运行环境

为了让 MCP Server 正常工作，需要安装 Node.js、npx、Python 及 uvx 工具。

1．打开 Trae IDE 终端

• 启动 Trae IDE。
• 在顶部菜单栏依次点击 终端 > 新建终端，打开内置命令行。

1. 安装 Python 与 uvx

前往 Python 官网 下载并安装 Python 3.8+。安装完成后在终端验证安装：

python3 --version 

安装 uv 工具集（包含 uvx）：

//macOS / Linux curl -LsSf https://astral.sh/uv/install.sh | sh
//Windows powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

执行环境初始化：

source $HOME/.local/bin/env 

验证 uvx 安装：

uvx --version 

1. 安装 Node.js 与 npx

前往 Node.js 官网 下载并安装 Node.js 18+。在终端验证安装：

node -v
npx -v

若看到类似 v22.x.x、11.x.x 的版本号，则说明安装成功；重启 Trae IDE 以使新安装生效。

三、获取 Figma Access Token

配置 Figma AI Bridge 时需要填写你的 Figma Personal Access Token，具体获取流程如下：

1. 登录 Figma，在左上角点击用户头像，选择 Settings。

1. 在顶部菜单中选择 Security。

1. 下滑至 Personal access tokens 区域，点击 Generate new token。在弹窗中输入 Token 名称、选择有效期并配置权限，以下是一些参考：

1. 点击 Generate token，复制生成的 Token 字符串备用。

四、在 Trae IDE 中添加 MCP Server - Figma AI Bridge

1. 打开 Trae IDE，点击 AI 对话框右上角的 设置 图标，选择 MCP。

1. 在 MCP 面板点击 + 添加 MCP Servers（或已添加时右侧的 + 添加）。在列表中找到 Figma AI Bridge，点击右侧 + 按钮。

1. 将之前复制的 Figma Personal Access Token 粘贴到输入框，点击 确认。

此时，MCP Server - Figma AI Bridge 已成功配置，并已自动添加到 'Builder with MCP' 智能体中。

五、创建自定义智能体并绑定 Figma AI Bridge

智能体（Agent）是你在不同场景下的 AI 助手。自定义智能体后，你可以灵活配置提示词和工具集，快速完成复杂任务。

在 AI 对话框右上角点击 设置，选择 智能体。点击 + 创建智能体。

在配置面板中：

• （可选）上传智能体头像。
• 输入智能体名称，例如：'Figma 助手'。

（可选）填写提示词，示例：

'根据用户提供的 Figma 链接，精准还原 UI 设计，生成响应式 HTML 前端页面代码。结构清晰，视觉细节与设计稿高度一致，禁止擅自修改设计内容。'

在 工具-MCP 部分仅勾选 Figma AI Bridge。

• 在 工具 - 内置 部分勾选：
  • 文件系统（File System）
  • 终端（Terminal）
  • 联网搜索（Web Search）
  • 预览（Preview）

配置完成后示例：

点击 创建，完成后应用自定义智能体。

六、一键生成前端页面

1. 在本地新建一个空文件夹，在 Trae IDE 中打开该文件夹。
2. 在 AI 对话框右下角选择模型（本文以 DeepSeek-V3-0324 为例）。
3. 打开 Figma 设计稿页面，选中目标画板，右键 → Copy/Paste as > Copy link to selection，复制链接。

在 Trae IDE AI 对话输入框中粘贴链接，并附上需求说明，例如：

'请严格按照我提供的 Figma 链接内容生成 HTML 前端页面，UI 要严格还原设计稿，需要实现响应式设计。'

智能体开始调用 Figma AI Bridge，读取设计稿并自动生成前端项目文件夹和 index.html。以下为生成过程示例：

生成完成后，双击输出的 index.html，在浏览器中预览最终效果。若需调整，可在 AI 对话框继续与智能体互动，优化样式或交互，直至满意为止。