Figma Web UI 開發規範（Framelink 版） 是做什麼的？
解決使用 Figma 設計稿開發 Web 前端 UI 時還原度差的問題。根本原因是：將 Figma 的「畫布數據」（絕對座標、內聯色值、像素圖層堆疊）當作「實現數據」，直接照抄導致響應式失效、顏色字體不準、資源缺失。
本 skill 面向 Framelink figma-developer-mcp 的兩個工具：
| 工具 | 通道 | 作用 |
|---|---|---|
get_figma_data | 精確通道 | 按 fileKey + nodeId 拉取畫布數據：佈局、內容、視覺、組件資訊 |
download_figma_images | 視覺通道 | 按節點 ID 導出 SVG/PNG/GIF 到本地目錄 |
注意：這是 Framelink 版，不是官方 Figma MCP Server（官方工具為
get_design_context/get_variable_defs/download_assets）。本 skill 的方法論對兩者通用，但工具名按 Framelink 撰寫。若目標是桌面端（Qt Widget / QML / WinUI / Flutter），請使用
figma-ui-desktop而非本 skill。
核心原則
- 雙通道並行，禁止單通道寫碼。精確通道提供確切數值，視覺通道提供整體佈局與文案。只使用其中一種必然導致還原失真——尤其只使用視覺通道（等於看截圖猜），或只使用資料通道（等於盲寫）。
- 使用確切值，不做視覺估算。顏色、字型大小、行高、字重、間距、圓角、邊框、陰影，一律取用設計稿確切值。
- 先索取設計稿，不自行發起寫 UI。
- 實作後必須驗證閉環：截圖對比設計稿 → 發現缺陷自動修復 → 人工挑毛病再迭代。沒有一次到 100% 的魔法，還原到 7~8 成靠流程，剩下的靠驗證循環補齊。
工作流程
階段一：粗讀（理解需求與結構）
設計稿過大時先粗讀，避免一次拉取全量導致上下文過載：
- 使用
get_figma_data拉取頂層結構（depth控制遍歷層級，先從淺層開始），了解有哪些頁面/區塊/組件。 - 使用
download_figma_images導出整體頁面圖，理解佈局與文案。
階段二：精讀（實作前取得精確數據）
針對具體要實作的組件/區塊，同時呼叫：
get_figma_data（帶nodeId，逐節點讀取座標、色值、字型大小、間距、圓角、邊框）download_figma_images（導出該區塊圖，確認組件相對位置關係）
取得後先做結構分析再寫碼：
- 哪些節點是重複模式（卡片、列表項、按鈕）→ 抽成組件
- 哪些絕對定位其實是佈局（橫向排列、居中、兩端對齊）→ 轉為 flex/grid
- 哪些是語義角色（導航/表單/列表）→ 映射至目標框架現有組件庫
- 圖片/圖示節點 → 使用
download_figma_images下載原始檔案落地至 assets，不手繪
階段三：實作
- 顏色/字型大小/間距使用設計稿確切值，不「看起來差不多」
- 優先使用專案既有組件庫，先查組件 props（theme/size/variant），避免重複定義樣式
- 圖示使用專案圖示庫，不使用第三方圖示
- 樣式檔案命名、CSS 類別命名規範、巢狀層級遵循專案約定
階段四：驗證閉環
使用 Playwright MCP 打開本地頁面截圖，與設計稿截圖並排對比，發現明顯缺陷自動修復；人工挑毛病：人識別更細微的問題（間距、字重、顏色微差），主動拋給 AI 精準修復，進入下一輪迭代。
防偷懶鐵律
AI 容易傾向只使用一種通道就寫碼，必須明確要求：
- 「同時呼叫 get_figma_data 和 download_figma_images 閱讀設計稿」
- 「不允許只使用圖片/截圖閱讀設計稿就寫程式碼」
- 「逐行讀取 get_figma_data 的確切值，對比顏色/字型大小/間距，不做視覺估算」
組件規範（依專案替換）
以下是模板，落地到具體專案時替換為該專案約定：
- 優先使用專案組件庫（例如
@notta/components），有疑問主動詢問使用者 - 先查組件庫 props，避免重複定義樣式
- 圖示使用專案圖示庫
- 樣式檔案命名、CSS 類別命名規範、巢狀層級數遵循專案約定
還原度自檢清單
生成後逐項核對（比「整體像不像」可靠）：
- 顏色（是否使用了確切 hex，而非近似值）
- 字型大小 / 行高 / 字重
- 間距 / 邊距 / 內邊距
- 圓角 / 邊框 / 陰影
- 佈局（flex/grid 是否等價於設計稿排列）
- z-index / 層級
- 圖示/圖片是否使用原始檔案，而非手繪
參考來源
方法論借鑒自官方 Figma MCP + Playwright 的 UI 開發流程（見「使用 Figma mcp 和 Playwright mcp 提升 UI 開發與除錯效率」），核心思想是「雙通道 + 驗證閉環 + 防偷懶明確要求」，工具名已適配 Framelink figma-developer-mcp。