既存のUIトークンやコンポーネントを整理し、実装のための一貫性のあるトークン・コンポーネント契約を定義する際に使用します。
このスキルは、既存のUIトークンやコンポーネントを棚卸しし、実装チームが一貫したデザインシステムを構築するためのものです。まず現状のコンポーネント、トークン、タイポグラフィ、スペーシング、インタラクションの規則を調査し、並行するシステムを追加する前に既存のリソースを再利用することを推奨します。`tokens.json`とコンポーネントの決定事項は[アーティファクト契約](../../templates/workflow.md)に従って記述し、セマンティックロールを既存のトークン参照にマッピングします（利用可能でない場合は`direction.md`のガイドラインに沿ったコンパクトな値を定義します）。カラーロール、タイポグラフィ、スペーシング、角丸、モーションのカバレッジに加え、フォーカス状態や無効状態の処理、サーフェス/テキスト/アクション/ステータスの役割の区別を明確にします。各影響を受けるコンポーネントについて、`flows.md`や`direction.md`に目的、API/バリアント、状態、レスポンシブルール、アクセシブルな動作を記録します。新しいUIライブラリやフォント依存関係を導入する前に、現在のスタックとユーザーの制約を必ず確認し、明示的なブランド選択を保持します。
npx skills add https://github.com/alty-oss/dev-design/tree/HEAD/skills/design-systemPortuguês (Brasil)
最初に現在のコンポーネント、トークン、タイポグラフィ、スペーシング、インタラクションの規則を棚卸しします。並行するシステムを追加する前に、既存のリソースを再利用します。
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".