figma-generate-design

figma-generate-design 技能總覽

figma-generate-design 的用途

figma-generate-design 技能可幫助你把真實的 App 畫面、頁面、modal、drawer、sidebar 或其他組合式視圖，直接轉成 Figma，且優先重用既有設計系統，而不是全部手動畫出來。它最適合 Design Implementation 類工作，也就是以程式碼、tokens 與已發布元件為準，追求高還原度的情境。

誰適合使用

如果你需要把已完成的 UI、產品規格，或粗略版面，轉成一個符合既有系統的 Figma 畫面，就適合使用 figma-generate-design skill。這很適合設計師、PM，以及從可直接落地的來源材料出發工作的 agents；但不適合拿來做單次插畫或自由發揮的視覺探索。

為什麼它不一樣

這個技能的重點是先從 Code Connect 與相關 Figma 來源中找出元件、variables、styles 和 library assets，再一段一段地把畫面組起來。當目標本來就受既有設計系統約束時，這會讓 figma-generate-design 比一般 prompt 更可靠。

如何使用 figma-generate-design 技能

安裝並確認技能可用

依照你所在環境使用的 figma-generate-design install 流程安裝，並在開始製作前先確認技能已可使用。大多數工作流程裡，實際上第一步應該先打開 SKILL.md，先理解必要順序與這個技能的邊界。

先讀對的檔案

在進行 figma-generate-design usage 時，先看 SKILL.md，再檢查 README.md、AGENTS.md、metadata.json，以及本機副本中若存在的 rules/、resources/、references/ 或 scripts/ 資料夾。這個技能的 repo 結構很精簡，所以 SKILL.md 通常就是最主要的準據來源。

把模糊需求轉成可用的 prompt

這個技能最有效的使用方式，是先給它具體目標、準據來源，以及範圍邊界。較弱的 prompt 會寫：「把這個 landing page 做到 Figma 裡。」更好的 prompt 會寫：「用 figma-generate-design 依照提供的 code 重建產品定價頁 Figma 版面，保留既有設計系統元件，並且先以桌面版佈局為主。」你對畫面類型、來源材料、還原目標說得越清楚，推測空間就越少。

以分段組裝的方式使用

這套流程的設計目標，是逐步建構組合式視圖，而不是一次把整個設計憑空生出來。先建立 frame 結構，再對應主要區塊，接著放入最接近的系統元件與 tokens，最後才處理像間距、變體或文字層級這類在地調整。這個順序，就是 figma-generate-design guide 在實務場景中特別有用的原因。

figma-generate-design 技能 FAQ

figma-generate-design 只適合整頁嗎？

不是。這個技能也很適合 modal、dialog、drawer、panel、sidebar，以及其他多區塊視圖。關鍵要求是輸出應該由設計系統的積木組成，而不是手繪式的基礎圖形。

什麼情況下不該用它？

如果你要的是概念發想、新的視覺方向，或單純的一次性插畫，就不該優先用 figma-generate-design。如果沒有可重用、且有實質意義的設計系統，通用型 Figma prompt 可能反而比結構化的 implementation workflow 更快。

需要懂程式嗎？

不需要，但你至少要有足夠背景，能把來源畫面描述清楚。初學者只要能指出頁面、元件或實作來源，並說明哪些地方要保留、哪些地方可以調整，也能使用這個技能。

它比一般 prompt 更好嗎？

如果是 Design Implementation，答案是肯定的。一般 prompt 也許能做出一個看起來合理的 mockup，但 figma-generate-design 會先去找對應的元件、styles 與 variables，通常能提高一致性，也能減少後續清理工作。

如何提升 figma-generate-design 技能

提供更好的來源材料

品質提升最大的來源，是更清楚的輸入：目標 route 或 screen 名稱、要對照的 code component 或 page、預期的 viewport，以及任何一定要一致的 UI 狀態。如果你能提供精確 variant、token 來源或 screenshot reference，輸出通常需要的修正會更少。

明確說出哪些部分必須一致

要清楚說明優先順序是 layout fidelity、component fidelity、spacing，還是 text hierarchy。例如：「桌面版外殼與區塊順序要完全一致，但 hero 圖像可以簡化」就比「做得像一點」有用得多。這能幫助 figma-generate-design 選對取捨，而不是把錯的細節過度擬合。

注意常見失敗模式

最常見的問題，是因為 prompt 太粗略而過度泛化，最後漏掉真正的設計系統元件。另一種是要求一個跨多種模式的畫面，卻沒有說明哪些部分要重用、哪些可以調整。如果第一版結果不對，就把 prompt 收緊到區塊結構、元件名稱，以及任何已知限制上。

透過修正準據來源來迭代

第一輪先找出結構上哪裡不對，下一輪就用精準修正來收斂：少了 sidebar、card variant 錯了、間距尺度不對，或 token 對不上。figma-generate-design guide 最適合在每次迭代都縮小你的來源實作與 Figma 輸出之間的落差，而不是重新描述整個頁面。