明明听说 Trae 的 的模型上下文协议（MCP） 功能超实用，却陷入 “不知从何下手” 的迷茫？别担心！我们将开启 “玩转 MCP” 的系列内容，手把手教你使用 Trae IDE 借助 MCP 轻松实现多样化的开发需求！
本期，我们将介绍通过使用 MCP Server - Figma AI Bridge，自动将你的 Figma 设计稿转换为整洁的前端代码，并生成相应的网页。简单高效，无需复杂配置，跟随文中的步骤操作，即可体验智能化的设计交付。（完整内容同步发布于官方文档站，想在电脑跟练的小伙伴也可以通过这里访问呦~，链接：https://docs.trae.com.cn/ide/tutorial-mcp-figma），让我们开始吧！
效果展示
操作步骤
跟随教程，在项目中集成 MCP Server - Figma AI Bridge，配置智能体，然后使用指令自动生成前端页面。
第一步：安装 Trae IDE
Trae IDE 与 AI 深度集成，提供智能问答、代码自动补全以及基于 Agent 的 AI 自动编程能力。使用 Trae 开发项目时，你可以与 AI 灵活协作，提升开发效率。前往 Trae CN 官网 （链接：zjsms.com/ZxQK-D-IaAA/），下载 Trae IDE 的安装包，然后将其安装至你的计算机。
第二步：配置 MCP Sever 的运行环境
为确保正常启动 MCP Server，你需要安装以下依赖：
-
npx：依赖于 Node.js，版本需大于等于 18。
-
uvx：命令行工具，用于快速运行 Python 脚本。
首先，为便于后续通过命令行安装依赖，让我们在 Trae IDE 中打开终端。步骤如下：
-
启动 Trae IDE。
-
在顶部菜单栏中，点击 终端 > 新建终端。
界面底部显示 终端 面板。
打开终端后，使用以下步骤安装 uvx：
-
前往 Python 官网（链接：https://www.python.org/downloads/），下载并安装 Python 3.8 或更高版本。
-
安装完成后，在终端中执行以下命令确认是否安装成功。
python3 --version若安装成功，终端中会输出已安装的 Python 的版本号。
3. 执行以下命令，安装 uv（包含 uvx）。
-
macOS / Linux 安装命令：
curl -LsSf https://astral.sh/uv/install.sh | sh-
Windows 安装命令（PowerShell）：
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"4. 执行 source $HOME/.local/bin/env 命令，加载 uvx 所需的运行时环境变量和初始化配置。
5. 执行以下命令，验证是否安装成功。
uvx --version若安装成功，终端中会输出已安装的 uvx 的版本号。
uvx 安装完成后，使用以下步骤安装 Node.js：
-
请前往 Node.js 官网，下载并安装 Node.js 18 或更高版本。
-
安装完成后，在终端中运行以下命令确认是否安装成功。
node -vnpx -v若安装成功，终端中会输出已安装的 Node.js 的版本号，例如：
v18.19.010.2.0
第三步：获取 Figma 的 Access Token
配置 Figma AI Bridge 时，需要填入你的 Figma Personal Acccess Token。你可以在 Figma 安全设置中心获取它。步骤如下：
-
登录 Figma。
-
点击页面左上角的用户头像，然后在菜单中选择 Settings。
界面上显示设置窗口。
你已进入安全设置面板。
界面上显示 Generate new token 弹窗。
-
输入 Token 的名称。
-
设置 Token 的有效期。
-
配置 Token 的权限。直接复用下表中的配置：
|
权限类型 |
权限范围 |
|---|---|
|
Code Connect |
Write |
|
Comments |
Read and write |
|
Current user |
Read-only |
|
Dev resources |
Write |
|
File content |
Read-only |
|
File versions |
Read-only |
|
Library analytics |
Read-only |
|
Library assets |
Read-only |
|
Library content |
Read-only |
|
Projects |
Read-only |
|
Team library content |
Read-only |
|
Variables |
Read and write |
|
Webhooks |
Read and write |
Figma Personal Access Token 已生成，你会在后续配置 MCP Server - Figma AI Bridge 时用到它。
第四步：添加 MCP Server - Figma AI Bridge
-
打开 Trae IDE。
-
在 AI 对话框的右上角，点击 设置 图标，然后在菜单中选择 MCP。
界面上显示MCP页签。
你已进入 MCP Server 市场。
界面上显示 添加 MCP Server弹窗。
MCP Server - Fimga AI Bridge 配置完成，并已自动添加至内置智能体 - Builder with MCP。
你可以直接使用 Builder with MCP 来体验 Figma AI Bridge（参考“第六步”）。若你希望创建一个自定义智能体，通过配置提示词和工具来使其更好地处理你的需求，请继续往下操作。
第五步：创建自定义智能体并为其配置 Figma AI Bridge
智能体（Agent）是你面向不同开发场景的编程助手。你可以创建自定义智能体，通过灵活配置提示词和工具集，使其更高效地帮你完成复杂任务。
-
在 AI 对话框的右上角，点击 设置 图标，然后在菜单中选择 智能体。
界面上显示 智能体 页签。
智能体配置面板已打开。
-
(可选) 上传智能体的头像。
-
输入智能体的名称（例如：Figma 助手）。
-
(可选) 配置智能体的提示词。参考提示词如下，你可以直接使用或根据需求制订提示词。
根据用户提供的 Figma 链接，精准还原 UI 设计，生成响应式的 HTML 格式的前端页面代码。代码结构清晰，视觉细节与设计稿高度一致。禁止擅自修改设计内容，确保忠实还原。-
在 工具-MCP 部分，仅勾选 Figma AI Bridge。
-
在 工具-内置 部分，勾选 文件系统（File System）、终端（Terminal）、预览（预览）。三个内置工具的作用如下：
配置完成后的面板如下：
-
文件系统：对文件进行增删改查。 -
终端：在终端运行命令，并获取命令的运行状态和结果。 -
预览：在生成可预览的前端结果后提供预览入口。
配置了 Figma AI Bridge 的智能体创建成功。你可以点击 立即使用 按钮，开启与智能体的对话。
第六步：开启对话，完成设计需求
在上一环节中，点击 立即使用 按钮后，系统会自动跳转至 AI 对话框，并默认选用 Figma 助手 智能体（若未创建自定义智能体，则使用 Builder with MCP）。你可以与该智能体对话，输入 Figma 设计稿的地址，然后描述你的需求，让智能体创建相应的前端页面。
注：请确保配置 Access Token 的账号拥有设计稿的访问权限。
-
在本地新建一个文件夹，然后在 Trae IDE 中打开它。
-
在 AI 对话输入框右下角，选择你想使用的模型（本教程使用 DeepSeek-V3- 0324）。
-
前往 Figma 设计稿页面，选中设计稿并右击，然后在菜单中选择 Copy/Paste as > Copy link to selection。 已复制该设计稿的链接。
4. 在 AI 对话输入框中，粘贴所复制的设计稿的链接。
5. 在设计稿链接的标签后输入你的需求并发送。例如：“请严格按照我提供的 Figma 链接内容生成 HTML 前端页面。UI 要严格还原设计稿，需要实现响应式设计”。
智能体开始调用 Figma AI Bridge 中的工具和服务，读取设计稿的内容，自动生成文件，填入前端代码，并生成一个 index.html 文件供你预览效果。以下输出过程供参考：
6. 智能体完成输出后，双击文件夹中的 index.html 文件，在浏览器中预览效果。
7. 持续与智能体对话，优化前端页面，直至达到让你满意的效果。
参考信息：Figma AI Bridge 支持的能力
Figma AI Bridge 支持的能力如下：
|
|
|
|---|---|
|
|
nodeId 时，获取整个 Figma 设计稿的布局信息。 |
|
|
|
借助 Trae IDE 的的模型上下文协议（MCP）功能轻松实现了从设计稿到代码的转化，你是否也跃跃欲试，想用 MCP 实现创意需求？快点击「阅读原文」，直达下载链接，即刻体验！后续 “玩转 MCP” 系列还将带来更多实用案例，记得持续关注我们，一起解锁 MCP 的更多可能！
原文始发于微信公众号（字节跳动技术团队）：玩转MCP第一弹｜手把手教你将 Figma 设计稿转化为前端代码
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论