Figma Use

figma-use 是每次呼叫 `use_figma` 前都應先安裝的技能，讓 JavaScript 能在 Figma 檔案情境中安全執行。它支援設計實作工作，例如建立與編輯節點、連結變數與樣式、製作元件與變體，以及以程式方式檢視檔案結構。這個 repo 也包含使用指引、常見陷阱與各種模式，協助降低常見的 Figma 自動化錯誤。

figma-generate-design 可運用已發布的設計系統，把已寫好的頁面、modal、drawer、sidebar、panel，以及其他多區塊視圖轉成 Figma。它會從 Code Connect 與相關來源找出元件、變數、樣式和素材，再依照區塊逐段組裝畫面，供 Design Implementation 使用，而不是手動重畫整個版面。當你需要盡量貼近程式碼與 tokens 的一致性時，適合使用 figma-generate-design guide。

figma-create-new-file 可在草稿中建立全新的空白 Figma 或 FigJam 檔案，並預設編輯器類型與檔名。這個 figma-create-new-file 技能適合用於設計落地、快速原型製作，以及在使用 use_figma 之前先開啟全新的畫布。必要時，它也會透過 whoami 進行 planKey 解析。

figma-implement-design 可將 Figma 畫面轉成可直接投入生產環境的程式碼，並盡量貼近版面配置、狀態、token 與響應式行為。適合用於 Figma-to-code 實作，不適用於 Figma 編輯、code connect 對應，或生成全新設計。內容包含安裝指引、使用說明，以及 Design Implementation 工作流程的邊界規則。

figma-generate-library 可將程式碼庫轉成具備 tokens、variables、components、theming 與文件的 Figma 設計系統 library。當你需要一套分階段的 Design Systems 工作流程時，就適合使用 figma-generate-library 技能，涵蓋安裝、設定、探索、建立、驗證，以及與程式碼對齊與修正。

figma-generate-design 可將真實畫面、頁面或多區塊版面轉成 Figma，且會優先重用已發布的設計系統，而不是套用通用圖形。它很適合用來對齊程式碼或產品頁面，追求高一致性、可編輯的結構，以及以 token 為基礎的一致表現。適合用於整頁 UI 設計更新，不適合拿來做粗略 mockup。