Components

figma-code-connect-components 可搭配 Figma Code Connect，將 Figma 設計元件對應到相符的 code component。適合用於設計與實作對齊、variant 與 prop 配對，以及在建立對應前先找出正確的本地元件。最適合 connect、map 或 link-to-code 工作流程，不適合 canvas 撰寫或整頁生成。

使用 wpds 技能來建置或審查搭配 WordPress Design System（WPDS）的 WordPress UI。它會透過 WPDS MCP server，協助你驗證元件、tokens、patterns 與套件是否相符，讓你的 wpds 指南建立在權威文件上，而不是憑空猜測。特別適合用於 Design Systems 相關的 wpds 工作，涵蓋 Gutenberg、WooCommerce、WordPress.com、Jetpack 與相關介面。

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

hig-components-search 是一個 Apple HIG 技能，聚焦 UI 設計中與搜尋欄位、頁面控制項與路徑控制項相關的決策。當你需要釐清 macOS 或 iPadOS 介面中的搜尋行為、搜尋範圍、分頁與階層導覽時，這個技能能提供明確指引。它特別適合處理搜尋 UX、搜尋建議與結構化導覽。

hig-components-menus 是一個針對選單與按鈕驅動命令介面的 Apple HIG 指引技能。當你需要 Apple 專屬的命令放置、分組與行為建議時，請使用 hig-components-menus 技能來做 UI 設計決策，涵蓋選單、內容選單、工具列、選單列及相關控制項。

hig-components-layout 是一個 Apple HIG 導向的導覽與版面技能，用來選擇側邊欄、分割檢視、分頁列、清單、表格、樹狀檢視、欄位、面板、視窗、捲動檢視、方框與裝飾元素。當你需要的是清楚、符合平台慣例的指引，而不是泛用的響應式版面建議時，適合用在 UI 設計與 app 結構決策。

hig-components-dialogs 是 Apple HIG 的呈現元件技能，用來選擇 alerts、action sheets、popovers、sheets 和數字輸入視圖。當你需要符合 Apple 指引、清楚的對話框選擇時，請使用這份 hig-components-dialogs 指南；它特別適合用於確認流程、破壞性操作、非模態內容，以及跨 iOS、iPadOS、macOS、watchOS 和 visionOS 的 UI 設計決策。

component-refactoring skill 可在 Dify 前端中，透過分析器驅動的指引，協助你重構高複雜度的 React 元件。當 `pnpm analyze-component --json` 顯示複雜度高於 50、行數超過 300，或你需要元件拆分、hook 擷取，或比通用重寫更安全的 component-refactoring 指南時，這個 skill 特別適合使用。

figma-generate-library 可協助你從程式碼庫建立或更新 Figma 設計系統，並以有順序的工作流程處理 tokens、元件庫、文件與明暗主題切換。當你需要的是 Design Systems 的實作指南，而不是一次性的 mockup 時，就適合使用 figma-generate-library 技能。它也會與 figma-use 互補，用於 Plugin API 呼叫。

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

figma-use 是在 Figma Plugin API 工作流程中安全呼叫 `use_figma` 的必要技能。在使用 JavaScript 撰寫、更新、檢查或結構化 Figma 檔案之前，先安裝並載入 figma-use 技能。它特別適合設計實作、元件作業、變數、auto layout，以及程式化讀取檔案。

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

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