figma-generate-design

figma-generate-design 技能概覽

figma-generate-design 的用途

figma-generate-design 技能可把真實的畫面、頁面或多區塊版面轉成 Figma，做法是重用既有設計系統，而不是用通用形狀重新拼出一套 UI。當你希望 Figma 成品能和程式碼或產品頁高度一致，方便編輯、檢視，並且符合應用程式的 tokens 時，這個技能特別有用。

適合哪些人使用

如果你是要從網頁應用、落地頁、儀表板或產品畫面轉進 Figma，而且需要的是設計對齊，而不只是粗略 mockup，就很適合使用 figma-generate-design 技能。它很適合 UI 設計師、產品團隊，以及需要根據程式碼或詳細描述更新既有 Figma 畫面的代理。

它和一般做法有什麼不同

它最大的優勢在於流程紀律：先從已發布的設計系統中找出元件、變數與樣式，再按區塊一步一步組裝畫面。這樣可以減少偏移，避免把顏色與間距寫死，也讓輸出比一次性的 prompt 更容易維護。當來源應用本來就有可重用的 tokens 與元件時，figma-generate-design for UI Design 的價值尤其明顯。

如何使用 figma-generate-design 技能

正確安裝並載入

要進行 figma-generate-design install，先從 curated skills package 加入這個技能，並確認你的工作流程能存取 Figma MCP server。任何 use_figma 呼叫之前，也要先載入 figma-use，因為這個技能依賴它底層的規則來處理色彩、字型載入與 script 行為。如果少了這個搭配，輸出品質和執行穩定度通常都會下降。

用畫面導向的簡報描述需求

最好的 figma-generate-design usage，會從一段 prompt 開始，明確指出一個完整的畫面或頁面、來源情境，以及目標結果。好的輸入應該描述路由、版面區塊、受眾，以及任何已知的設計系統限制。

範例簡報：
Use figma-generate-design to recreate the pricing page from our React app in Figma. Keep the hero, comparison table, testimonials, and CTA sections. Use existing components and tokens from the design system, and match spacing and hierarchy as closely as possible.

避免像「讓這個看起來更好」這種模糊需求，除非你同時提供了精確的畫面、截圖或來源檔案。

先讀這些檔案

先看 SKILL.md 了解必要流程，再檢查 agents/openai.yaml 取得預設 prompt 與工具相依關係。LICENSE.TXT 也很重要，因為這些 Figma skills 受到 Figma Developer Terms 規範。如果你要把這個技能移植到其他 repo，請查看 assets/ 裡的品牌識別字串，以及 maintainers.yml 裡的維護權限脈絡。

以區塊方式逐步處理

figma-generate-design 的實務做法，是把畫面拆成幾段來完成：先辨識結構、找出對應的設計系統元件、匯入元件，然後依順序組裝頁面。這種方式通常比一次嘗試渲染整個介面更穩，特別適合有導覽列、內容卡片、表單或重複模組的頁面。如果設計系統不完整，要及早指出來，並決定是要近似處理，還是直接停止。

figma-generate-design 技能 FAQ

這只適合整頁設計嗎？

大致上是。figma-generate-design 技能是針對建立或更新完整畫面、檢視頁與多區塊頁面而優化的。若只是很小的單點修改，通常不是最佳選擇，除非這些修改依賴設計系統，或會影響整體版面。

一定要有既有設計系統嗎？

如果設計系統已存在，而且在 Figma 中可存取，你會得到最大的效益。若沒有可重用的元件、變數與樣式，這個技能可發現的內容就少了，可能會退回較手動的組裝方式。如果你的 UI 非常客製，或還在未完成階段，直接用一般的 prompt-based Figma generation 可能更簡單。

這和一般 prompt 有什麼差別？

一般 prompt 可以描述版面，但 figma-generate-design 的目的，是強制走可重用的設計系統工作流程。這讓它在版面對齊、一致性與後續修改上更有優勢。它重點不在創意發揮，而在把來源 UI 穩定地轉譯到 Figma。

這適合初學者嗎？

可以，只要你能清楚描述畫面，而且手上有來源設計或程式碼。你不需要懂 Figma 內部機制，但你必須明確指定範圍，並提供足夠的上下文來做元件比對。初學者最常卡關的情況，是想一次處理整個產品區塊，卻沒有點名具體是哪個畫面。

如何改進 figma-generate-design 技能

把目標講得更精準

最大的改進來自把確切畫面、路由與用途講清楚。要說明哪些在範圍內、哪些不在範圍內。例如，「重建結帳確認頁，包含 header、訂單摘要與 upsell card，但不包含 modal 狀態」會比「做 checkout」給技能更清楚的邊界。

提供能減少猜測的來源素材

如果你提供截圖、URL、元件名稱或程式碼參照，figma-generate-design 的效果會最好。若你有像 primary/600 這類 token 名稱、間距 scale，或已知的 Figma component sets，也應該一併提供。這能幫助技能避免近似估算，並讓結果更貼近原本系統。

修正問題時先改結構，不要先修美感

如果第一版不對，先修正區塊順序、元件對應或層級，再來才是視覺細節。最常見的失敗模式，是結構對不上：內容是對的，但放進了錯的容器。很實用的後續指令會像這樣：Keep the same components, but align the hero, card grid, and footer to the source page order.

留意常見的不匹配情境

如果應用程式沒有設計系統、頁面幾乎都是特製插畫，或者你只需要快速概念草圖，這個技能可能就不太適合。當你無法存取底層 Figma assets，或沒有定義 UI tokens 的 repo 脈絡時，它的效果也會比較弱。在這些情況下，應該改用更輕量的 prompt，或先補足更多來源上下文，再重試 figma-generate-design usage 工作流程。