# Figma AI Bridge 配置指南 ## 1. 环境准备 ### 1.1 安装 nvm ### 1.2 安装 Node.js 20 版本 ```bash nvm install 20 ``` ### 1.3 切换到 Node.js 20 版本 ```bash nvm use 20 ``` ### 1.4 安装 TRAE IDE 前往 [TRAE CN 官网](https://www.trae.com.cn/?utm_source=content&utm_medium=doc_mcp&utm_campaign=figma)，下载 TRAE IDE 的安装包并安装到你的计算机。 ## 2. 获取 Figma 的 Access Token 配置 Figma AI Bridge 时，需要填入你的 Figma Personal Access Token。你可以在 Figma 安全设置中心获取它，步骤如下： 1. 登录 [Figma](https://www.figma.com/)。 2. 点击页面左上角的用户头像，然后在菜单中选择 **Settings**。  界面上会显示设置窗口。 3. 在窗口的顶部菜单中，选择 **Security**。  你将进入安全设置面板。 4. 移动至 **Personal access tokens** 部分，然后点击 **Generate new token** 按钮。  界面上会显示 **Generate new token** 弹窗。  5. 配置你的 Figma Personal Access Token： 1. 输入 Token 的名称。 2. 设置 Token 的有效期。 3. 勾选所有权限。 4. 点击窗口底部的 **Generate token** 按钮。 ## 3. 添加 MCP Server - Figma AI Bridge 1. 打开 TRAE IDE。 2. 进入设置中心： - 在 IDE 模式界面中，点击界面右上角的 **设置** 图标。 - 或在 SOLO 模式界面中，点击对话面板右上角的 **设置** 图标。 3. 在左侧导航栏中，选择 **MCP**，打开 **MCP** 窗口。 4. 在 **MCP** 窗口的右上角，点击 **添加** > **从市场添加**。若你是首次添加 MCP Server，还可以直接点击窗口中部的 **从市场添加** 按钮。 你将进入 MCP 市场。  5. 在 MCP 市场中找到 Figma AI Bridge。 6. 点击右侧的 **+** 按钮。 7. 在弹窗中，输入先前在 Figma 页面上创建的 Figma Personal Access Token。 8. 点击 **确认** 按钮。 MCP Server - Figma AI Bridge 配置完成，并已自动添加至内置智能体 - Builder with MCP。 ## 4. 创建自定义智能体并为其配置 Figma AI Bridge 智能体（Agent）是你面向不同开发场景的编程助手。你可以创建自定义智能体，通过灵活配置提示词和工具集，使其更高效地帮你完成复杂任务。 1. 在 AI 对话输入框中输入 **@**，然后点击浮起面板底部的 **创建智能体** 按钮。 你将进入 **创建智能体** 面板。  2. 配置该智能体： 1. (可选) 上传智能体的头像。 2. 输入智能体的名称（例如：Figma 助手）。 3. (可选) 配置智能体的提示词。参考提示词如下，你可以直接使用或根据需求定制： ```text 根据用户提供的 Figma 链接，精准还原 UI 设计，生成响应式的 HTML 格式的前端页面代码。代码结构清晰，视觉细节与设计稿高度一致。禁止擅自修改设计内容，确保忠实还原。 ``` 4. 在 **工具-MCP** 部分，仅勾选 **Figma AI Bridge**。 5. 在 **工具-内置** 部分，勾选 **阅读**、**编辑**、**终端**、**预览**、**联网搜索**。 6. 点击底部的 **创建** 按钮。 配置了 Figma AI Bridge 的智能体创建成功。你可以点击 **立即使用** 按钮，开启与智能体的对话。