明明聽說 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 中打開終端。步驟如下：

1. 啟動 Trae IDE。
2. 在頂部菜單欄中，點擊 終端 > 新建終端。

界面底部顯示 終端 面板。

打開終端后，使用以下步驟安裝 uvx：

1. 前往  Python 官網（鏈接：https://www.python.org/downloads/），下載并安裝 Python 3.8 或更高版本。
2. 安裝完成后，在終端中執行以下命令確認是否安裝成功。

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：

1. 請前往 Node.js 官網，下載并安裝 Node.js 18 或更高版本。
2. 安裝完成后，在終端中運行以下命令確認是否安裝成功。

node -v
npx -v

若安裝成功，終端中會輸出已安裝的 Node.js 的版本號，例如：

v18.19.0
10.2.0

3. 重啟 Trae IDE 以使 Node.js 生效。

第三步：獲取 Figma 的 Access Token

配置 Figma AI Bridge 時，需要填入你的 Figma Personal Acccess Token。你可以在 Figma 安全設置中心獲取它。步驟如下：

1. 登錄 Figma。
2. 點擊頁面左上角的用戶頭像，然后在菜單中選擇 Settings。

界面上顯示設置窗口。

3. 在窗口的頂部菜單中，選擇 Security。

你已進入安全設置面板。

4. 移動至 Personal access tokens 部分，然后點擊 Generate new token 按鈕。

界面上顯示 Generate new token 彈窗。

5. 配置你的 Figma Personal Access Token：

• 輸入 Token 的名稱。
• 設置 Token 的有效期。
• 配置 Token 的權限。直接復用下表中的配置：

6. 點擊窗口底部的 Generate token 按鈕。

Figma Personal Access Token 已生成，你會在后續配置 MCP Server - Figma AI Bridge 時用到它。

第四步：添加 MCP Server - Figma AI Bridge

1. 打開 Trae IDE。
2. 在 AI 對話框的右上角，點擊 設置 圖標，然后在菜單中選擇 MCP。

界面上顯示MCP頁簽。

3. 在 MCP 頁簽中，點擊 + 添加 MCP Servers 按鈕。若你已添加過 MCP Server，則點擊右側區域的 + 添加 按鈕。

你已進入 MCP Server 市場。

4. 找到 Figma AI Bridge，然后點擊右側的 + 按鈕。

界面上顯示 添加 MCP Server彈窗。

5. 在 Figma 頁面上復制先前創建的 Figma Personal Access Token，然后粘貼至輸入框中。

6. 點擊底部的 確認 按鈕。

MCP Server - Fimga AI Bridge 配置完成，并已自動添加至內置智能體 - Builder with MCP。

你可以直接使用 Builder with MCP 來體驗 Figma AI Bridge（參考“第六步”）。若你希望創建一個自定義智能體，通過配置提示詞和工具來使其更好地處理你的需求，請繼續往下操作。

第五步：創建自定義智能體并為其配置 Figma AI Bridge

智能體（Agent）是你面向不同開發場景的編程助手。你可以創建自定義智能體，通過靈活配置提示詞和工具集，使其更高效地幫你完成復雜任務。

1. 在 AI 對話框的右上角，點擊 設置 圖標，然后在菜單中選擇 智能體。

界面上顯示 智能體 頁簽。

 2. 點擊右側區域的 + 創建智能體 按鈕。

智能體配置面板已打開。

3. 配置該智能體：

• (可選) 上傳智能體的頭像。
• 輸入智能體的名稱（例如：Figma 助手）。
• (可選) 配置智能體的提示詞。參考提示詞如下，你可以直接使用或根據需求制訂提示詞。

根據用戶提供的 Figma 鏈接，精準還原 UI 設計，生成響應式的 HTML 格式的前端頁面代碼。代碼結構清晰，視覺細節與設計稿高度一致。禁止擅自修改設計內容，確保忠實還原。

• 在 工具-MCP 部分，僅勾選 Figma AI Bridge。
• 在 工具-內置 部分，勾選 文件系統（File System）、終端（Terminal）、預覽（預覽）。三個內置工具的作用如下：
  配置完成后的面板如下：

     文件系統：對文件進行增刪改查。

     終端：在終端運行命令，并獲取命令的運行狀態和結果。

     預覽：在生成可預覽的前端結果后提供預覽入口。

4. 點擊底部的 創建 按鈕。

配置了 Figma AI Bridge 的智能體創建成功。你可以點擊 立即使用 按鈕，開啟與智能體的對話。

第六步：開啟對話，完成設計需求

在上一環節中，點擊 立即使用 按鈕后，系統會自動跳轉至 AI 對話框，并默認選用 Figma 助手 智能體（若未創建自定義智能體，則使用 Builder with MCP）。你可以與該智能體對話，輸入 Figma 設計稿的地址，然后描述你的需求，讓智能體創建相應的前端頁面。

注：請確保配置 Access Token 的賬號擁有設計稿的訪問權限。

1. 在本地新建一個文件夾，然后在 Trae IDE 中打開它。
2. 在 AI 對話輸入框右下角，選擇你想使用的模型（本教程使用 DeepSeek-V3- 0324）。
3. 前往 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 支持的能力如下：

借助  Trae IDE 的的模型上下文協議（MCP）功能輕松實現了從設計稿到代碼的轉化，你是否也躍躍欲試，想用 MCP 實現創意需求？