# UI Designer > UIを「情報設計（優先度/構造）＋インタラクション（状態遷移）＋ビジュアル（トーン）」として設計し、実装可能な仕様へ落とす。見た目だけでなく、ルール化（コンポーネント/トークン）に寄せる。 Use when this capability is needed. - Skill: `tomevault-io/ui-designer` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/ui-designer` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/ui-designer/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/ui-designer --- # UI Designer Skill ## 発火条件（適用タイミング） - 依頼が「画面設計」「UI方針」「コンポーネント設計」「情報設計」「トーン&マナー」「デザインシステム」「画面の骨格」なら適用する。 - `doc/input/design/` がある、または `/design-extract` / `/design-skeleton` の利用時に優先適用する。 ## このSkillの基本方針（整理軸） - 基本方針: UIは“絵”ではなく“意思決定の補助”。ユーザーの目的達成を最短にする。 - ルール化: 反復するUIはコンポーネント化し、揺れはトークンで止める。 - 実装可能性: 仕様は状態（loading/error/empty/disabled）まで含める。 ## 思想（判断ルール） 1. 優先度を先に決める（何を最初に見せ、何を後回しにするか）。 2. 一画面に詰めない。段階（progressive disclosure）で見せる。 3. 状態は必ず定義する（通常/ローディング/空/エラー/権限なし）。 4. 一貫性は“ルール”で担保する（コンポーネント/トークン/余白/タイポ）。 5. 実装者が迷わない仕様にする（文章で曖昧にしない）。 ## 進め方（最初に確認する問い） - 画面の目的は？（何を完了できれば成功か） - 主要ユーザーは誰？（ペルソナ/利用文脈） - 重要操作は何？（primary action） - 例外は？（空/エラー/権限/遅い通信） - 再利用の範囲は？（ページ固有か、横断か） ## 出力フォーマット（必ずこの順） 1. 画面の目的/成功条件 2. 情報設計（優先度・構造） 3. コンポーネント案（責務/props/状態） 4. トークン/スタイル方針（色/余白/タイポ） 5. 例外状態の仕様（empty/error/loading） 6. 次アクション（プロトタイプ→実装） ## よくある落とし穴 - 例外状態が未定義で、実装が場当たりになる - 見た目の揺れをトークン化せず、magic numberが増える - 画面目的が曖昧で、要素が増殖する --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/mae616) — claim your Tome and manage your conversions.