Figma 桌面端 UI 開發規範（Framelink MCP 版）
解決用 Figma 設計稿開發桌面端 UI 時還原度差的問題。根因是：把 Figma 的「畫布數據」（絕對座標、內聯色值、像素圖層堆疊）當成了「實現數據」，直接照抄導致佈局僵死、顏色字體不準、資源缺失。
為什麼桌面端用 Framelink 而非官方 Figma MCP Server：官方 MCP 的核心工具
get_design_context默認只產 Web 程式碼（React/Tailwind，可切 Vue/HTML/iOS），不支援 Qt Widget / QML / WinUI / Flutter，且需付費。Framelink 定位「只餵框架無關的 Figma 數據、翻譯交給模型」——這個「短板」在桌面端多框架場景下恰是優勢：模型拿到畫布數據後可翻譯成任意目標框架，而不是被鎖死在 Web。
本 skill 面向 Framelink figma-developer-mcp 的兩個工具：
| 工具 | 通道 | 作用 |
|---|---|---|
get_figma_data | 精確通道 | 按 fileKey + nodeId 拉畫布數據：佈局、內容、視覺、元件資訊 |
download_figma_images | 視覺通道 | 按節點 ID 導出 SVG/PNG/GIF 到本地目錄 |
若目標是 Web 前端（React/Vue/HTML），用
figma-ui-web而非本 skill。
核心原則
- 雙通道並行，禁止單通道寫碼。精確通道給確切數值，視覺通道給整體佈局與文案。只用其一必然還原失真。
- 用確切值，不做視覺估算。顏色、字型大小、字重、間距、圓角、邊框、陰影，一律取設計稿確切值。
- 先索要設計稿，不自發寫 UI。
- 實現後必須驗證閉環：實際執行程式截圖對比設計稿 → 發現缺陷自動修 → 人工挑刺再迭代。
工作流
階段一：粗讀（理解需求與結構）
設計稿過大時先粗讀，避免一次拉全量導致上下文過載：
- 用
get_figma_data拉頂層結構（depth控制遍歷層級，先從淺層開始），搞清有哪些頁面/區塊/控制項。 - 用
download_figma_images導出整體介面圖，理解佈局與文案。
階段二：精讀（實現前拿精確數據）
針對具體要實現的區塊/控制項，同時呼叫：
get_figma_data（帶nodeId，逐節點讀座標、色值、字型大小、間距、圓角、邊框）download_figma_images（導出該區塊圖，確認控制項相對位置關係）
拿到後先做結構分析再寫碼：
- 哪些節點是重複模式（列表項、卡片、按鈕）→ 抽成目標框架的自訂控制項/元件
- 哪些絕對定位其實是佈局（橫向排列、居中、兩端對齊、網格）→ 按下方映射表轉成對應框架的佈局
- 哪些是語義角色（導航/表單/列表）→ 映射目標框架已有控制項庫
- 圖片/圖示節點 → 用
download_figma_images下載原檔案落地到資源目錄，不手繪
階段三：實現（框架無關翻譯）
顏色/字型大小/間距用設計稿確切值。翻譯時查下面的「畫布概念 → 目標框架」映射表，不要臆造控制項——目標框架有標準佈局/控制項就用標準的，絕對座標只在「確實需要精確像素定位」時才保留。
階段四：驗證閉環
桌面端無 Playwright 這類瀏覽器自動化，驗證方式：實際編譯執行程式截圖，與設計稿截圖並排對比，發現明顯缺陷自動修；人工挑刺識別更細問題（間距、字重、顏色微差），主動拋給 AI 精準修復，進入下一輪迭代。
畫布概念 → 目標框架映射表
Figma 畫布是絕對座標 + 像素圖層，實現要翻譯成各框架的佈局語義。翻譯時查此表：
| 畫布/設計概念 | Qt Widget | QML (Qt Quick) | WinUI 3 (XAML) | Flutter |
|---|---|---|---|---|
| 橫向排列 | QHBoxLayout | Row | StackPanel (Orientation=Horizontal) | Row |
| 縱向排列 | QVBoxLayout | Column | StackPanel (Orientation=Vertical) | Column |
| 網格佈局 | QGridLayout | Grid / GridLayout | Grid | GridView / Table |
| 絕對定位 | setGeometry / move | Item + x/y | Canvas + Canvas.Left/Top | Stack + Positioned |
| 層疊/覆蓋 | 子 widget 疊加 / raise() | z 屬性 / Stack | Canvas.ZIndex | Stack |
| 居中 | addStretch / setAlignment | anchors.centerIn | HorizontalAlignment/VerticalAlignment=Center | Center / Align |
| 兩端對齊 | 兩側 addStretch | anchors.left/right + margins | 邊距分配 | MainAxisAlignment.spaceBetween |
| 間距 | QSpacerItem / layout spacing | spacing 屬性 | Margin / Padding | SizedBox / Padding / Spacer |
| 顏色 | QPalette / stylesheet | Theme / 屬性綁定 | 資源字典 ResourceDictionary | ThemeData / ColorScheme |
| 字型大小/字型 | QFont | font.pixelSize | FontSize | TextStyle.fontSize |
| 圓角 | stylesheet border-radius | Rectangle radius | CornerRadius | BorderRadius |
| 陰影 | QGraphicsDropShadowEffect | DropShadow | ThemeShadow / DropShadow | BoxShadow |
| 圖示 | QIcon / 資源 | Image / 圖示字型 | FontIcon / SymbolIcon | Icon |
| 元件複用 | 自訂 QWidget 子類別 | 自訂 QML Component | UserControl / 自訂控制項 | Widget |
| 狀態/變體 | 列舉 + update() | State / 屬性驅動 | VisualStateManager | setState / AnimatedWidget |
防偷懶鐵律
AI 會傾向只用一種通道就寫碼，必須明確要求：
- 「同時呼叫 get_figma_data 和 download_figma_images 閱讀設計稿」
- 「不允許只用圖片/截圖閱讀設計稿就寫程式碼」
- 「逐行讀 get_figma_data 的確切值，對比顏色/字型大小/間距，不做視覺估算」
- 「按映射表翻譯到目標框架的標準佈局/控制項，不臆造」
還原度自檢清單
生成後逐項核對（比「整體像不像」可靠）：
- 顏色（是否用了確切值，而非近似）
- 字型大小 / 字重
- 間距 / 邊距 / 內邊距
- 圓角 / 邊框 / 陰影
- 佈局（是否翻譯成目標框架標準佈局，而非照抄絕對座標）
- 層級 / 層疊順序
- 圖示/圖片是否用原檔案，而非手繪
- 重複模式是否抽成了元件/自訂控制項
參考來源
方法論借鑒自官方 Figma MCP + Playwright 的 UI 開發流程（見「使用 Figma mcp 和 Playwright mcp 提升 UI 開發與調試效率」），核心思想「雙通道 + 驗證閉環 + 防偷懶明確要求」保留，工具名適配 Framelink figma-developer-mcp，映射表擴展覆蓋桌面端多框架。