用於在實作前盤點現有 UI token/元件，並定義一致性的 token 與元件合約。
此技能旨在協助開發者與 AI 代理在開始實作 UI 之前，先系統性地盤點現有元件、設計標記（token）、字體、間距與互動慣例。它強調「重複使用」勝於「新增平行系統」，以避免設計不一致。技能會引導使用者撰寫標準化的 tokens.json 與元件決策文件（遵循 artifact 合約範本），並強制將語意角色（如表面色、文字色、動作色、狀態色）對應到既有的標記參考。對於缺少對應標記的情況，則需根據方向性文檔（direction.md）定義簡潔的值。技能也涵蓋色彩角色、字體排版、間距、圓角與動態效果的定義，以及焦點與禁用狀態的處理方式。每個受影響的元件都必須在 flows.md 或 direction.md 中記錄其用途、API/變體、狀態、響應式規則與無障礙行為。最後，技能嚴格禁止在未確認現有技術棧與使用者限制前，擅自引入新的 UI 函式庫或字型依賴，以維護品牌選擇的一致性。支援的平台包括 Claude Code、Cursor 與其他遵循開放合約的 AI 代理工具。
npx skills add https://github.com/alty-oss/dev-design/tree/HEAD/skills/design-system首先盤點現有元件、標記（token）、字體、間距與互動慣例。重複使用勝於新增平行系統。
使用 artifact 合約 撰寫 tokens.json 與元件決策。將語意角色對應到現有標記參考（若有）；否則定義與 direction.md 一致的簡潔值。
涵蓋色彩角色、字體排版、間距、圓角與動態效果。定義焦點與禁用狀態的處理方式。區分表面/文字/動作/狀態角色。
對於每個受影響的元件，在 flows.md 或 direction.md 中記錄其用途、API/變體、狀態、響應式規則與無障礙行為。
未確認當前技術棧與使用者限制前，請勿引入新的 UI 函式庫或字型依賴。保留明確的品牌選擇。
This repo contains 4 individual skills — each has its own dedicated page.
Use when reviewing UI keyboard access, focus, accessible names, structure, contrast and motion behavior.
Use when establishing a distinctive visual direction for a new UI or an intentional redesign.
Use when a UI task needs its audience, primary job, content, constraints and success criteria clarified before design.
Use when delivering a UI change with its decisions, verification evidence and remaining limitations.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".