Trae IDE評測體驗：通過 MCP Server - Figma AI Bridge 一鍵將 Figma 轉為前端代碼
在現代前端開發中，從設計稿到可用頁面的交付往往需要大量重復勞動：切圖、手寫樣式、布局調整……而借助 MCP Server - Figma AI Bridge，我們可以將 Figma 設計稿自動轉換成整潔的 HTML/CSS/JS 代碼，并立即生成可預覽的網頁。一鍵化、傻瓜式操作，讓設計交付效率躍升。
先下載 Trae IDE，讓我們一起開始吧！
[立即免費獲取 Trae]：https://trae.ai
演示環境
本文測試使用的系統環境如下：
- 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
Trae IDE 與 AI 深度集成，提供智能問答、代碼自動補全及基于 Agent 的 AI 自動編程能力。首次使用時，前往官網下載并安裝：
- 訪問官網下載頁面并選擇對應平臺的安裝包。
- 雙擊運行安裝程序，按提示完成安裝。
- 啟動 Trae IDE，初次打開會看到歡迎頁及快速入門指南。
二、配置 MCP Server 運行環境
為了讓 MCP Server 正常工作，需要安裝 Node.js、npx、Python 及 uvx 工具。
1. 打開 Trae IDE 終端
- 啟動 Trae IDE。
- 在頂部菜單欄依次點擊 終端 > 新建終端，打開內置命令行。
2. 安裝 Python 與 uvx
-
前往 Python 官網 下載并安裝 Python 3.8+。
-
在終端驗證安裝：
python3 --version -
安裝 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"
-
-
執行環境初始化：
source $HOME/.local/bin/env -
驗證 uvx 安裝：
uvx --version
3. 安裝 Node.js 與 npx
-
前往 Node.js 官網 下載并安裝 Node.js 18+。
-
在終端驗證安裝：
node -v npx -v -
若看到類似
v18.x.x、10.x.x的版本號，則說明安裝成功；重啟 Trae IDE 以使新安裝生效。
三、獲取 Figma Access Token
配置 Figma AI Bridge 時需要填寫你的 Figma Personal Access Token，具體獲取流程如下：
- 登錄 Figma，在左上角點擊用戶頭像，選擇 Settings。
- 在頂部菜單中選擇 Security。
- 下滑至 Personal access tokens 區域，點擊 Generate new token。
- 在彈窗中輸入 Token 名稱、選擇有效期并配置權限（可參考下表）：
- 點擊 Generate token，復制生成的 Token 字符串備用。
四、在 Trae IDE 中添加 MCP Server - Figma AI Bridge
- 打開 Trae IDE，點擊 AI 對話框右上角的 設置 圖標，選擇 MCP。
- 在 MCP 面板點擊 + 添加 MCP Servers（或已添加時右側的 + 添加）。
- 在列表中找到 Figma AI Bridge，點擊右側 + 按鈕。
- 將之前復制的 Figma Personal Access Token 粘貼到輸入框，點擊 確認。
此時，MCP Server - Figma AI Bridge 已成功配置，并已自動添加到 “Builder with MCP” 智能體中。
五、創建自定義智能體并綁定 Figma AI Bridge
智能體（Agent）是你在不同場景下的 AI 助手。自定義智能體后，你可以靈活配置提示詞和工具集，快速完成復雜任務。
-
在 AI 對話框右上角點擊 設置，選擇 智能體。
-
點擊 + 創建智能體。
-
在配置面板中：
-
（可選）上傳智能體頭像。
-
輸入智能體名稱，例如：“Figma 助手”。
-
（可選）填寫提示詞，示例：
“根據用戶提供的 Figma 鏈接，精準還原 UI 設計，生成響應式 HTML 前端頁面代碼。結構清晰，視覺細節與設計稿高度一致，禁止擅自修改設計內容。”
-
在 工具-MCP 部分僅勾選 Figma AI Bridge。
-
在 工具-內置 部分勾選：
- 文件系統（File System）
- 終端（Terminal）
- 聯網搜索（Web Search）
- 預覽（Preview）
配置完成后示例：
-
-
點擊 創建，完成自定義智能體的創建。
六、一鍵生成前端頁面
-
在本地新建一個空文件夾，在 Trae IDE 中打開該文件夾。
-
在 AI 對話框右下角選擇模型（本文以 DeepSeek-V3-0324 為例）。
-
打開 Figma 設計稿頁面，選中目標畫板，右鍵 → Copy/Paste as > Copy link to selection，復制鏈接。
-
在 Trae IDE AI 對話輸入框中粘貼鏈接，并附上需求說明，例如：
“請嚴格按照我提供的 Figma 鏈接內容生成 HTML 前端頁面，UI 要嚴格還原設計稿，需要實現響應式設計。”
-
智能體開始調用 Figma AI Bridge，讀取設計稿并自動生成前端項目文件夾和
index.html。以下為生成過程示例：
-
生成完成后，雙擊輸出的
index.html，在瀏覽器中預覽最終效果。 -
若需調整，可在 AI 對話框繼續與智能體互動，優化樣式或交互，直至滿意為止。
附：Figma AI Bridge 支持能力
MCP Server - Figma AI Bridge 提供以下核心功能：
- 設計結構化解析：自動識別畫板、組件、布局層級。
- 樣式映射：將 Figma 中的顏色、字體、間距等屬性轉成 CSS。
- 響應式布局：根據設置自動生成媒體查詢，支持多端適配。
- 資源導出：自動導出切圖、SVG、字體等靜態資源。
- 交互還原：根據原型中的交互描述生成簡單的 JavaScript 邏輯。
結語
通過 Trae IDE 與 MCP Server - Figma AI Bridge 的結合，設計稿到代碼的流程實現了高度自動化。無需手動切圖、編寫樣式、配置打包，一行命令即可完成初版頁面交付。無論是快速打樣，還是持續迭代，都能極大提升前端開發效率。試試看，將你的下一個 Figma 項目交給 AI 助手完成吧！
