前言¶

很多團隊已經習慣「設計稿 → 代碼」這條鏈路：從 Figma 選中 Frame，藉助 MCP 或 Code Connect 把組件映射到真實代碼。反過來卻常常卡住——產品或工程側先改了頁面結構，設計文件還停在舊版；或者落地頁已經上線，卻要重新在 Figma 裏用矩形和色值手工搭一遍。結果是設計系統與代碼各說各話，評審時只能對着截圖猜間距。

figma-generate-design 要解決的就是這條反向路徑：在已連接 Figma MCP、且目標文件裏有（或能訪問）已發佈設計系統的前提下，把應用頁面、視圖或多區塊佈局，按設計系統組件實例與 Token 組裝成可維護的 Figma 稿，而不是一堆寫死 hex 的色塊。

這是什麼¶

figma-generate-design 是一套遵循通用 SKILL.md 格式的 Agent Skill，收錄在 OpenAI 的 openai/skills 倉庫的 .curated 目錄中；Figma 也在 MCP 相關文檔與 figma/mcp-server-guide 中提供同名能力說明與安裝入口。它面向「把整屏/多區塊視圖寫進 Figma」這類任務，必須與 figma-use 一起使用：後者約束 use_figma 的 Plugin API 寫法（顏色 0–1、字體加載、增量調用等），本 Skill 則規定「發現設計系統 → 按區塊組裝 → 截圖校驗」的工作流。

一句話定位：從代碼或描述出發，複用已發佈設計系統，在 Figma 中創建或更新完整頁面（以及模態、抽屜等多區塊容器），而不是手動畫原始圖形。

官方邊界也很清楚，避免和相鄰 Skill 混用：

• 交付物是「由設計系統組件實例組成的 Figma 視圖」時，用本 Skill。
• 要從 Figma 生成代碼時，應改用 figma-implement-design。
• 要新建可複用組件/變體時，直接用 figma-use。
• 要寫 Code Connect 映射時，改用 figma-code-connect（或 openai/skills 中對應的 figma-code-connect-components）。

核心功能與亮點¶

結合官方 SKILL.md（openai/skills 與 Figma 側文檔交叉一致的部分），能力可以概括爲下面幾塊。

1、先找設計系統，再動手畫
通過已有屏幕上的 INSTANCE 巡檢、search_design_system（組件 / 變量 / 樣式），以及 Figma 版流程中強調的 Code Connect 文件解析，拿到組件 key、顏色與間距變量、文字與效果樣式。優先 importComponentSetByKeyAsync、importVariableByKeyAsync、importStyleByKeyAsync，用綁定 Token 代替硬編碼色值和像素間距。

2、按區塊增量組裝
先創建頁面外層 Frame（如豎直 Auto Layout 的 wrapper），再在每一次 use_figma 調用裏只建一個主要區塊（Header、Hero、內容區、頁腳等），並把節點掛到 wrapper 上。官方明確禁止「先在頁面根上散建再 appendChild 遷入」——跨調用搬遷會靜默失敗，留下孤兒 Frame。

3、與 generate_figma_design 並行（僅 Web）
對可在瀏覽器渲染的 Web 應用，推薦（有圖片時甚至是必須）並行跑兩條線：本 Skill 用設計系統實例搭結構；generate_figma_design 抓像素級截圖作視覺參照。對齊後再刪掉截圖產物。非 Web（iOS/Android）或只做局部更新時，走標準流程即可。

4、可更新已有屏幕
用 get_metadata 看結構，定位要改的區塊，做變體替換、文案/setProperties 覆蓋、增刪區塊，再用 get_screenshot 分段驗收，避免整頁低分辨率截圖掩蓋裁切字、佔位文案未改等問題。

5、錯誤可恢復
沿用 figma-use 約定：use_figma 失敗是原子的，不會留下半成品；停下來讀錯誤、必要時用 get_metadata / get_screenshot 看現狀，修好腳本再重試。

安裝與啓用¶

使用前有兩個硬前提（官方 Prerequisites）：

• 已連接 Figma MCP（遠程服務器地址一般爲 https://mcp.figma.com/mcp）。
• 目標 Figma 文件裏有已發佈設計系統組件，或能訪問團隊庫；並提供文件 URL / fileKey，以及要還原的源碼或描述。若還沒有文件，需先創建（例如 /figma-create-new-file 或 create_new_file），再把返回的 fileKey 用於後續寫入與截圖。

推薦：用 Figma 插件一併帶上 Skills¶

Figma 文檔建議在支持的 Agent 裏裝官方插件，同時配置 MCP 與常見工作流 Skills（其中包含本 Skill 一類能力）。

Cursor（在 Agent 對話中）：

/add-plugin figma

Claude Code：

claude plugin install figma@claude-plugins-official

安裝後按客戶端提示完成 Figma OAuth，用 /mcp（Claude Code）等命令確認已連接。

Codex：可在 Codex App 的 Plugins 中安裝 Figma 插件並授權；或用 CLI：

codex mcp add figma --url https://mcp.figma.com/mcp

單獨安裝該 Skill¶

若工具已接好 MCP、只需補 Skill 目錄，skills.sh 給出的安裝方式爲：

npx skills add https://github.com/openai/skills --skill figma-generate-design

也可按需一併安裝依賴的 figma-use。openai/skills 倉庫對 Codex 還曾提供 $skill-installer 按名安裝 curated Skill 的方式；該倉庫 README 已提示整體遷移方向，新環境更建議以 Figma 官方插件/文檔爲準，Skill 原文仍可從上述 GitHub 路徑閱讀。

通用 SKILL.md 格式下，Cursor、Codex CLI、Claude Code 等只要支持 Agent Skills，都能發現並加載；各工具的插件目錄與啓用命令以各自文檔爲準，未覈實的路徑不要硬套。

典型用法示例¶

觸發話術在 Skill 描述裏寫得很直白，例如：「把這個頁面寫進 Figma」「按代碼更新 Figma 屏幕」「用設計系統搭一個落地頁」。下面按官方 Required Workflow 壓縮成可復現的步驟。

1、先理解屏幕再碰畫布
讀頁面源碼，列出大區塊（Header、Hero、內容、FAQ、Footer 等）及用到的按鈕、卡片、導航等組件；若來自代碼，注意組件默認 props（例如未寫 variant 時默認是 primary）。

2、發現組件 / 變量 / 樣式
優先掃已有屏幕上的 INSTANCE，得到權威的組件 map；沒有現成屏幕再用 search_design_system，關鍵詞要廣（button、nav、card、accordion 等）。變量搜索注意：僅靠 figma.variables.getLocalVariableCollectionsAsync() 爲空，不能斷定沒有變量——遠程庫變量要用 search_design_system 且 includeVariables: true。

3、先建 wrapper，再按區塊寫入
單獨一次 use_figma 建外層 Frame，返回 wrapperId。之後每次調用開頭用 ID 取回 wrapper，在內部建區塊並 appendChild，layoutSizingHorizontal = "FILL" 等要在掛到父級之後再設。調用時帶上日誌參數，例如：

// 調用 use_figma 時傳入（僅用於日誌，不影響執行）
// skillNames: "figma-generate-design"
// 若經 MCP resource 加載，需寫成 "resource:figma-generate-design"

區塊內導入組件集、綁定變量、用 setProperties 覆蓋實例文案（比直接改 characters 更穩），每建完一塊就 get_screenshot 看裁切與重疊。

4、Web 場景可並行截圖校準
同一 fileKey 上並行 generate_figma_design，用像素稿校正間距與視覺，確認後刪除截圖層。源碼含圖片時，Figma 側文檔強調：use_figma 不能直接拉外鏈圖，需從截圖節點複製 imageHash。

5、更新已有稿
對指定按鈕實例 swapComponent 到新變體、改文案、增刪區塊，局部修而非整頁重做。

一個最小的「用戶側」提示詞示例：

請加載 figma-use 與 figma-generate-design。
目標文件：https://www.figma.com/design/<fileKey>/...
把倉庫裏 pages/Home 的落地頁按現有設計系統組件寫到 Figma：
先建 Homepage wrapper，再按 Header / Hero / Pricing / Footer 分段寫入，
每段截圖校驗；若本地能跑起頁面，並行用 generate_figma_design 作視覺參照。

適用場景與注意事項¶

適合：

• 設計系統已在 Figma 發佈，代碼側組件大體對齊，需要把新頁面或改版結果同步回設計文件。
• 產品/前端先出可運行頁面，設計要基於真實組件實例做評審，而不是看靜態截圖。
• 維護同一文件裏的多屏，要求命名、尺寸、佈局習慣與已有屏幕一致。

注意：

• 沒有設計系統（或無法訪問團隊庫）時，本 Skill 的價值會大打折扣——它刻意反對用硬編碼色值「畫」一屏。
• 必須同時遵守 figma-use 規則；跳過會在顏色範圍、字體、FILL 順序等問題上反覆踩坑。
• 一次 use_figma 只做一個大區塊；貪多最容易出佈局與孤兒節點問題。
• 全頁縮小截圖不可靠，要對各 section 按節點 ID 截圖。
• openai/skills 與 Figma mcp-server-guide 中的文案會略有迭代（例如 Figma 版更強調 Code Connect、圖片並行捕獲）；以你實際加載到的那份 SKILL.md 爲準。

小結¶

figma-generate-design 把「代碼/描述 → Figma」收成可重複的 Agent 工作流：連接 MCP、複用設計系統、按區塊寫入並用截圖閉環。對已經喫過「設計稿和線上頁對不上」的團隊，它補的是和 figma-implement-design 相反的那半邊。

官方地址：
https://github.com/openai/skills/tree/main/skills/.curated/figma-generate-design

Figma MCP 與安裝說明可參考：
https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
https://github.com/figma/mcp-server-guide