Design Tokens

ui-design-system 是一個用於 Design Systems 的 Claude skill，可協助產生 design tokens、color scales、typography、spacing、responsive rules、component documentation 與 developer handoff assets，並提供參考資料與 Python token generator，可輸出 JSON、CSS、SCSS 或 summary。

使用 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 自動化錯誤。

makepad-2.0-theme 是一個用於套用 theme.* 變數、切換深色與淺色主題，並維持設計 token 風格一致性的 Makepad 2.0 主題技能。這份指南可幫助你了解 makepad-2.0-theme 的安裝與使用方式，適用於正式產品 UI 與設計系統。

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

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

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。