ui-designer
UIを「情報設計(優先度/構造)+インタラクション(状態遷移)+ビジュアル(トーン)」として設計し、実装可能な仕様へ落とす。見た目だけでなく、ルール化(コンポーネント/トークン)に寄せる。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
メニュー
UIを「情報設計(優先度/構造)+インタラクション(状態遷移)+ビジュアル(トーン)」として設計し、実装可能な仕様へ落とす。見た目だけでなく、ルール化(コンポーネント/トークン)に寄せる。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
ディズニーの12原則とジブリ的自然運動をベースに、UIアニメーションの「なぜ動かすか」「どう動かすか」を判断する。アニメーション/モーション/トランジション設計の相談で、ツール非依存の概念的判断軸として使う。
体験品質(動き/触感/視線誘導)を「実装可能な制約」に落とし、アクセシビリティとパフォーマンスを犠牲にせずに表現を実現する。UIの表現・アニメーション・インタラクション設計/実装の相談で使う。
【穴埋め雛形】このプロジェクト固有の「存在設計・体験設計」のSSOT。judgment-harness のプロジェクト層スキルとして、立ち上げ時に本ファイルを埋めて使う(雛形のままなら未確定=推測で決めない)。デザイン/UI/モーション/コピーの方針判断、見た目や体験のトーン決め、画面・コンポーネント設計の前段で必ず参照する。
セマンティックHTML/JSXとWAI-ARIAを「最小で正しく」適用し、キーボード操作・スクリーンリーダ・コントラスト等を満たす実装を作るための判断軸。ネイティブ要素優先、ARIAの過剰使用を避ける。
Agent Browser(Headlessブラウザ自動化CLI)を使ったUI検証・E2Eテスト・スクリーンショット取得の判断軸。アクセシビリティツリーベースの要素選択を優先し、壊れにくいテスト設計を目指す。
アーキテクチャ設計(境界/依存/データフロー/非機能/運用)を、制約とトレードオフで言語化し、ADR-liteで合意形成しながら段階的に形にする。doc/input/rdd.md にアーキテクチャ/非機能/運用の要求がある、または設計判断(分割/責務/インタフェース/データ整合/観測性/スケール)相談で使う。
SOC 職業分類に基づく
| name | ui-designer |
| user-invocable | false |
| description | UIを「情報設計(優先度/構造)+インタラクション(状態遷移)+ビジュアル(トーン)」として設計し、実装可能な仕様へ落とす。見た目だけでなく、ルール化(コンポーネント/トークン)に寄せる。 |
doc/input/design/ がある、または /design-extract / /design-skeleton の利用時に優先適用する。