明明聽說 Trae 的 的模型上下文協(xié)議（MCP） 功能超實(shí)用，卻陷入 “不知從何下手” 的迷茫？別擔(dān)心！我們將開啟 “玩轉(zhuǎn) MCP” 的系列內(nèi)容，手把手教你使用 Trae IDE 借助 MCP 輕松實(shí)現(xiàn)多樣化的開發(fā)需求！

本期，我們將介紹通過使用 MCP Server - Figma AI Bridge，自動(dòng)將你的 Figma 設(shè)計(jì)稿轉(zhuǎn)換為整潔的前端代碼，并生成相應(yīng)的網(wǎng)頁。簡(jiǎn)單高效，無需復(fù)雜配置，跟隨文中的步驟操作，即可體驗(yàn)智能化的設(shè)計(jì)交付。（完整內(nèi)容同步發(fā)布于官方文檔站，想在電腦跟練的小伙伴也可以通過這里訪問呦~，鏈接：https://docs.trae.com.cn/ide/tutorial-mcp-figma），讓我們開始吧！

效果展示

操作步驟

跟隨教程，在項(xiàng)目中集成 MCP Server - Figma AI Bridge，配置智能體，然后使用指令自動(dòng)生成前端頁面。

第一步：安裝 Trae IDE

Trae IDE 與 AI 深度集成，提供智能問答、代碼自動(dòng)補(bǔ)全以及基于 Agent 的 AI 自動(dòng)編程能力。使用 Trae 開發(fā)項(xiàng)目時(shí)，你可以與 AI 靈活協(xié)作，提升開發(fā)效率。前往 Trae CN 官網(wǎng) （鏈接：zjsms.com/ZxQK-D-IaAA/），下載 Trae IDE 的安裝包，然后將其安裝至你的計(jì)算機(jī)。

第二步：配置 MCP Sever 的運(yùn)行環(huán)境

為確保正常啟動(dòng) MCP Server，你需要安裝以下依賴：

• npx：依賴于 Node.js，版本需大于等于 18。
• uvx：命令行工具，用于快速運(yùn)行 Python 腳本。

首先，為便于后續(xù)通過命令行安裝依賴，讓我們?cè)?Trae IDE 中打開終端。步驟如下：

1. 啟動(dòng) Trae IDE。
2. 在頂部菜單欄中，點(diǎn)擊 終端 > 新建終端。

界面底部顯示 終端 面板。

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

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

python3 --version

若安裝成功，終端中會(huì)輸出已安裝的 Python 的版本號(hào)。

 3. 執(zhí)行以下命令，安裝 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. 執(zhí)行 source $HOME/.local/bin/env 命令，加載 uvx 所需的運(yùn)行時(shí)環(huán)境變量和初始化配置。

5. 執(zhí)行以下命令，驗(yàn)證是否安裝成功。

uvx --version

若安裝成功，終端中會(huì)輸出已安裝的 uvx 的版本號(hào)。

uvx 安裝完成后，使用以下步驟安裝 Node.js：

1. 請(qǐng)前往 Node.js 官網(wǎng)，下載并安裝 Node.js 18 或更高版本。
2. 安裝完成后，在終端中運(yùn)行以下命令確認(rèn)是否安裝成功。

node -v
npx -v

若安裝成功，終端中會(huì)輸出已安裝的 Node.js 的版本號(hào)，例如：

v18.19.0
10.2.0

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

第三步：獲取 Figma 的 Access Token

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

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

界面上顯示設(shè)置窗口。

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

你已進(jìn)入安全設(shè)置面板。

4. 移動(dòng)至 Personal access tokens 部分，然后點(diǎn)擊 Generate new token 按鈕。

界面上顯示 Generate new token 彈窗。

5. 配置你的 Figma Personal Access Token：

• 輸入 Token 的名稱。
• 設(shè)置 Token 的有效期。
• 配置 Token 的權(quán)限。直接復(fù)用下表中的配置：

6. 點(diǎn)擊窗口底部的 Generate token 按鈕。

Figma Personal Access Token 已生成，你會(huì)在后續(xù)配置 MCP Server - Figma AI Bridge 時(shí)用到它。

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

1. 打開 Trae IDE。
2. 在 AI 對(duì)話框的右上角，點(diǎn)擊 設(shè)置 圖標(biāo)，然后在菜單中選擇 MCP。

界面上顯示MCP頁簽。

3. 在 MCP 頁簽中，點(diǎn)擊 + 添加 MCP Servers 按鈕。若你已添加過 MCP Server，則點(diǎn)擊右側(cè)區(qū)域的 + 添加 按鈕。

你已進(jìn)入 MCP Server 市場(chǎng)。

4. 找到 Figma AI Bridge，然后點(diǎn)擊右側(cè)的 + 按鈕。

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

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

6. 點(diǎn)擊底部的 確認(rèn) 按鈕。

MCP Server - Fimga AI Bridge 配置完成，并已自動(dòng)添加至內(nèi)置智能體 - Builder with MCP。

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

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

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

1. 在 AI 對(duì)話框的右上角，點(diǎn)擊 設(shè)置 圖標(biāo)，然后在菜單中選擇 智能體。

界面上顯示 智能體 頁簽。

 2. 點(diǎn)擊右側(cè)區(qū)域的 + 創(chuàng)建智能體 按鈕。

智能體配置面板已打開。

3. 配置該智能體：

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

根據(jù)用戶提供的 Figma 鏈接，精準(zhǔn)還原 UI 設(shè)計(jì)，生成響應(yīng)式的 HTML 格式的前端頁面代碼。代碼結(jié)構(gòu)清晰，視覺細(xì)節(jié)與設(shè)計(jì)稿高度一致。禁止擅自修改設(shè)計(jì)內(nèi)容，確保忠實(shí)還原。

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

     文件系統(tǒng)：對(duì)文件進(jìn)行增刪改查。

     終端：在終端運(yùn)行命令，并獲取命令的運(yùn)行狀態(tài)和結(jié)果。

     預(yù)覽：在生成可預(yù)覽的前端結(jié)果后提供預(yù)覽入口。

4. 點(diǎn)擊底部的 創(chuàng)建 按鈕。

配置了 Figma AI Bridge 的智能體創(chuàng)建成功。你可以點(diǎn)擊 立即使用 按鈕，開啟與智能體的對(duì)話。

第六步：開啟對(duì)話，完成設(shè)計(jì)需求

在上一環(huán)節(jié)中，點(diǎn)擊 立即使用 按鈕后，系統(tǒng)會(huì)自動(dòng)跳轉(zhuǎn)至 AI 對(duì)話框，并默認(rèn)選用 Figma 助手 智能體（若未創(chuàng)建自定義智能體，則使用 Builder with MCP）。你可以與該智能體對(duì)話，輸入 Figma 設(shè)計(jì)稿的地址，然后描述你的需求，讓智能體創(chuàng)建相應(yīng)的前端頁面。

注：請(qǐng)確保配置 Access Token 的賬號(hào)擁有設(shè)計(jì)稿的訪問權(quán)限。

1. 在本地新建一個(gè)文件夾，然后在 Trae IDE 中打開它。
2. 在 AI 對(duì)話輸入框右下角，選擇你想使用的模型（本教程使用 DeepSeek-V3- 0324）。
3. 前往 Figma 設(shè)計(jì)稿頁面，選中設(shè)計(jì)稿并右擊，然后在菜單中選擇 Copy/Paste as > Copy link to selection。  已復(fù)制該設(shè)計(jì)稿的鏈接。

 4. 在 AI 對(duì)話輸入框中，粘貼所復(fù)制的設(shè)計(jì)稿的鏈接。

 5. 在設(shè)計(jì)稿鏈接的標(biāo)簽后輸入你的需求并發(fā)送。例如：“請(qǐng)嚴(yán)格按照我提供的 Figma 鏈接內(nèi)容生成 HTML 前端頁面。UI 要嚴(yán)格還原設(shè)計(jì)稿，需要實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)”。

智能體開始調(diào)用 Figma AI Bridge 中的工具和服務(wù)，讀取設(shè)計(jì)稿的內(nèi)容，自動(dòng)生成文件，填入前端代碼，并生成一個(gè) index.html 文件供你預(yù)覽效果。以下輸出過程供參考：

 6. 智能體完成輸出后，雙擊文件夾中的 index.html 文件，在瀏覽器中預(yù)覽效果。

 7. 持續(xù)與智能體對(duì)話，優(yōu)化前端頁面，直至達(dá)到讓你滿意的效果。

參考信息：Figma AI Bridge 支持的能力

Figma AI Bridge 支持的能力如下：

借助  Trae IDE 的的模型上下文協(xié)議（MCP）功能輕松實(shí)現(xiàn)了從設(shè)計(jì)稿到代碼的轉(zhuǎn)化，你是否也躍躍欲試，想用 MCP 實(shí)現(xiàn)創(chuàng)意需求？