figma-generate-library

figma-generate-library 技能概覽

figma-generate-library 的功能

figma-generate-library 是一個用來把程式碼庫轉成 Figma 結構化 library 的 Figma 設計系統編排技能。它特別適合需要讓 tokens、variables、component sets、theming 和文件，和正式產品程式碼保持一致，而不是從零手工重建的團隊。

適合哪些人使用

如果你正在為產品設計、前端工程或設計營運建立或更新 design system，建議使用 figma-generate-library skill。它最適合的情境，是你想根據既有原始碼模式建立可重複使用的 Figma library，而不是用來畫一次性的單頁畫面。

它的不同之處

這個技能對順序與依賴關係的要求很明確：它是用來引導多步驟的 library 建置流程，而不是一次性回覆一個提示詞。這點對 Design Systems 工作很重要，因為 tokens、variables、components 和文件常常會因為生成順序錯誤，或缺少驗證檢查點而失敗。

如何使用 figma-generate-library 技能

安裝並載入正確的搭配技能

在進行 figma-generate-library install 時，請透過 OpenAI skills package 加入這個技能，並在任何 Figma tool 呼叫之前先一併載入 figma-use。這個技能負責決定要建什麼、按什麼順序建；figma-use 則提供執行每個 use_figma 步驟所需的 Plugin API 呼叫規則。

先從控制流程的 repo 檔案開始讀起

先讀 SKILL.md，再查看 references/discovery-phase.md、references/token-creation.md、references/component-creation.md 和 references/documentation-creation.md。如果你的 repo 有特殊命名或復原需求，也要再檢查 references/naming-conventions.md 與 references/error-recovery.md。這些檔案很重要，因為這個技能是圍繞分階段執行、驗證與清理來設計的，不是單一平鋪直敘的腳本。

把模糊需求轉成可用的提示詞

最好的 figma-generate-library usage 會從有範圍的需求開始，例如：「根據 src/ui 建立一套 light/dark token system，以及 Button、Input、Card 元件，並對齊我們現有的 spacing 與 color scale。」避免像「把我們的 design system 做好一點」這種模糊提示。當你提供 framework、目標畫面、theme 範圍，以及你要的是生成、對齊還是清理時，這個技能的表現會更好。

採用分階段流程，不要一次做完

實務上，figma-generate-library guide 最好的做法是先要求 discovery，再做 token mapping，接著建立 component，然後補文件，最後做 validation。這樣的順序符合 repo 結構，也能在 code 與 Figma 不一致時減少返工。如果你跳過 discovery，後面通常會把時間浪費在修命名、調整 variable 範圍或處理 component 依賴上。

figma-generate-library 技能 FAQ

figma-generate-library 只適合 Design Systems 嗎？

是的，這是它的主要適用場景。figma-generate-library 用在 Design Systems 時最強，尤其是你需要 library 架構：semantic tokens、variables、已發佈的 components，以及支援交接的說明文件。它不適合快速 mockup 或單獨的 marketing frame。

我需要先很懂 Figma 嗎？

不需要，但你需要相當了解原始碼與設計意圖，才足以回答具體問題。初學者也能使用 figma-generate-library skill，但他們應該預期要審核命名、variant 結構和 theming 的決策，而不是完全接受自動化建置結果。

這和一般提示詞有什麼不同？

一般提示詞通常是在要一個結果；figma-generate-library 比較像一個建置流程：它預期分階段工作、驗證與修正。這讓它在建立 library 時更可靠，特別是當 codebase 很大，或 design system 具有多種模式與依賴關係時。

什麼情況下不該用它？

如果你只需要幾個臨時 frame、程式碼庫裡沒有穩定的 UI 模式，或者你無法審查並核准多步驟變更，就不要用它。在這些情況下，更簡單的提示詞或更小型的 Figma 任務會更快，也比較不容易出錯。

如何提升 figma-generate-library 技能

一開始就提供更強的素材

當你提供它可以直接對應的實際設計輸入時，figma-generate-library skill 的結果會更好：component 原始碼路徑、token 檔案、theme 名稱，以及任何既有命名規則。像是「使用 src/tokens、Button.tsx 和 Card.tsx；保留 light 與 dark modes；維持 ds- 前綴」這類需求，比起籠統的 library 更新請求更有行動性。

明確說出哪些地方最重要

告訴技能什麼樣的結果才算對你的團隊可用：是否要對齊 code 名稱、降低 variant 爆炸、支援 code connect，或是把基礎規範文件寫好以便交接。這能幫助它排定取捨優先順序，而不是只追求視覺上的完整度。

留意常見失敗模式

最大的風險是做得過頭、跳過依賴順序，以及把 semantic tokens 和 component 層級細節混在一起。如果第一輪結果看起來範圍太大，請它縮小範圍、把 foundations 和 components 分開，或在繼續生成更多 nodes 前重新做 discovery。

用驗證來迭代，不要重來一遍

在第一次輸出後，請求有針對性的修改，例如「重新命名以符合我們的 token convention」、「合併重複的 variants」，或「補上 spacing 與 color semantics 的文件」。這通常比整個重做更有效，因為這個技能本來就被設計成能保留狀態，並沿用前一次的決策繼續前進。