前端开发里，从 Figma 设计稿到页面代码这一步重复劳动很多——切图、手写样式、调布局。Figma AI Bridge 这个 MCP Server 能把这事自动化：直接读取 Figma 文件，输出整洁的 HTML/CSS/JS，一键预览。下面是我实际跑通的一次记录。
我的运行环境
- Trae IDE 0.5.5
- macOS 14.7
- Node.js 20.19.1
- npx 10.9.2
- Python 3.13.3
- uvx 0.6.16
先把环境搭好
Trae IDE 深度集成了 AI 能力，安装去官网下载就行。启动后你会看到欢迎页和快速入门。
MCP Server 需要 Node.js（带 npx）和 Python（带 uvx），所以在 Trae 内置终端里跑一些命令。打开终端：顶部菜单 终端 > 新建终端。
Node.js 和 npx：去 Node.js 官网装 18+ 版本。装完后在终端验证：
node -v
npx -v
出现版本号就说明 OK。如果有问题，重启一下 Trae IDE。
Python 和 uvx：Python 3.8+ 同样去官网装。然后装 uv 工具集（包含 uvx）。
macOS / Linux：
curl -LsSf https://astral.sh/uv/install.sh | sh
source $HOME/.local/bin/env
Windows (PowerShell)：
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
装完检查：
python3 --version
uvx --version
拿 Figma 的 Access Token
Figma AI Bridge 需要你的 Personal Access Token。登录 Figma，点左上角头像 → Settings → Security，往下滑到 'Personal access tokens'，点 Generate new token。给 token 起个名、选有效期，生成后复制下来。
在 Trae IDE 里配置 MCP Server
打开 Trae IDE，右上角 AI 对话框的设置图标 → MCP。点 + 添加 MCP Servers，在列表里找到 Figma AI Bridge，右边点 +。把刚才复制的 token 粘贴进去，确认。
这样 MCP Server 就加好了，并且会自动关联到 'Builder with MCP' 智能体。
建一个自己的智能体
如果你想更灵活，可以创建一个专用智能体。在设置 → 智能体 里点 + 创建智能体：
- 名称：比如 'Figma 助手'
- 工具-MCP：只勾选 Figma AI Bridge
- 工具-内置：勾选 文件系统 (File System)、终端 (Terminal)、联网搜索 (Web Search)
提示词可以这样写：
根据用户提供的 Figma 链接，精准还原 UI 设计，生成响应式 HTML 前端页面代码。结构清晰，视觉细节与设计稿高度一致，禁止擅自修改设计内容。
