UI Design Brain
このスキルは、component.gallery から収集された60以上のUIコンポーネントパターンに、ベストプラクティス、レイアウトガイダンス、使用ルールを加えた厳選された知識ベースを提供します。インターフェースを生成する際に、汎用的な推測を実際のデザインシステムの知識に置き換えます。
UIコードを書く前に、このスキルを参照して適切なコンポーネントを選択し、そのベストプラクティスに従ってください。完全なリファレンスは components.md を参照してください。
使用すべきタイミング
ユーザーが以下の構築、デザイン、生成を依頼した場合に適用します：
- Webページ、ランディングページ、マーケティングサイト
- SaaSダッシュボード、管理パネル、設定ページ
- フォーム、データテーブル、ナビゲーション構造
- モーダル、ドロワー、ポップオーバー、オーバーレイパターン
- あらゆるReact、HTML/CSS、またはTailwind UIコンポーネント
デザイン哲学
生成されるすべてのインターフェースは、テンプレートのようにではなく、モダンで、ミニマルで、プロダクション準備完了 であると感じられるべきです。
核となる原則
- 装飾よりも抑制。 要素は少なく、高度に洗練されている。余白は機能です。
- タイポグラフィが階層を生み出す。 特徴的なディスプレイフォントとクリーンなボディフォントを組み合わせます。見出しとラベルの間のウェイトコントラストを最大化します。
- 一つの強いカラーポイント。 まずはニュートラルパレット（温かみのあるオフホワイト、ほぼ黒、くすんだ中間色）。自信のあるアクセントカラーを1つ導入します。ポスターや本の表紙に載せられそうなら、おそらくタイムレスです。
- スペーシングは構造です。 8 pxグリッドを使用します。狭いギャップは関連要素をグループ化し、広いギャップはヒーローコンテンツを呼吸させます。
- アクセシビリティは譲れません。 WCAG AAのコントラスト最小値。フォーカスインジケーター。セマンティックHTML。キーボードナビゲーション。
- 汎用的なAI美学は避ける。 避けるべきもの：紫と白のグラデーション、Inter/Robotoのデフォルト、等間隔のカードグリッド、画一的なレイアウト。すべてのインターフェースは、特定のコンテキストのためにデザインされていると感じられるべきです。
品質基準
出力は、トップSaaS企業のシニアプロダクトデザイナーから期待されるものに一致する必要があります：
- 意図的な非対称性を伴うクリーンなビジュアルリズム
- 明確なインタラクティブアフォーダンス（ホバー、フォーカス、アクティブ状態）
- 優雅なエッジケース（空の状態、ローディング、エラー）
- ブレークポイントのアーティファクトがないレスポンシブ
ワークフロー
ステップ1 — コンポーネントを特定する
ユーザーのリクエストを読み、どのUIコンポーネントが必要かを判断します。components.md を参照して、各コンポーネントを名前またはエイリアスで見つけます。
一般的なマッピング：
- "ナビゲーション" → Header, Navigation, Breadcrumbs, Tabs
- "フォーム" → Form, Text input, Select, Checkbox, Radio button, Button
- "データ表示" → Table, Card, List, Badge, Avatar
- "フィードバック" → Alert, Toast, Modal, Spinner, Progress bar, Empty state
- "入力" → Text input, Textarea, Select, Combobox, Datepicker, File upload, Slider
- "オーバーレイ" → Modal, Drawer, Popover, Tooltip, Dropdown menu
ステップ2 — ベストプラクティスを適用する
インターフェース内の各コンポーネントについて、リファレンスのベストプラクティスに従います。広く適用される主要なルール：
レイアウト
- シングルカラムのフォーム — スキャンが速い
- 繰り返し行（リスト、テーブル）の一貫した垂直レーン
- アイコンとアクション用の固定幅スロット（空でも）
- カード: media → title → meta → action の階層
インタラクション
- ボタン: 動詞ファーストのラベル（"送信"ではなく"変更を保存"）、セクションごとにプライマリ1つ
- モーダル: 常にX、キャンセル、Escapeを提供；フォーカスをトラップ；閉じる時にフォーカスを戻す
- トースト: 4～6秒で自動消去、手動消去を許可、新しいものを上にスタック
- トグル: 即時効果のみ — 保存が必要なフォームではチェックボックスを使用
タイポグラフィとスペーシング
- 厳格な見出し階層（h1 → h2 → h3）、ページごとに1つのh1
- モバイルでは最低44 pxのタッチターゲット
- ラベルは入力の上（垂直フォーム）または横（水平）
- プレースホルダーテキストは形式のヒントとして、ラベルの代わりにはしない
状態
- 空の状態: イラスト + 役立つ見出し + プライマリCTA
- ローディング: スケルトンスクリーン > スピナー（300 msの遅延後に表示）
- バリデーション: インラインでblur時、キーストロークごとではない
- 無効要素: 視覚的に区別できるが、読みやすいまま
ステップ3 — デザインディレクションを選択する
ユーザーの意図に最も合うスタイルプリセットを選択するか、不明な場合は質問します：
Modern SaaS（デフォルト）
- ニュートラルパレット、一つの強いアクセント
- 8 pxグリッド、十分な余白
- クリーン、プロフェッショナル、ゆったり
Appleレベルのミニマル
- ほぼモノクローム、温かみのあるグレー
- 大きなタイプ階層、ディスプレイテキストのタイトなトラッキング
- 豊富な余白、マイクロインタラクション（150～250 ms イーズアウト）
エンタープライズ / コーポレート
- 情報密度が高く、明確に定義された領域
- コンパクトなスペーシングスケール（4/8/12/16/24 px）
- 堅牢なフォーム処理、完全なキーボードナビゲーション対応
クリエイティブ / ポートフォリオ
- 大胆で表現力豊か、強いビジュアル個性
- 非対称レイアウト、劇的なスケールコントラスト
- エディトリアルなタイポグラフィ、鮮やかなアクセントカラー
データダッシュボード
- データ密度が高く、スキャン容易性に最適化
- 行全体の一貫した垂直方向の整列
- 明確なメトリック階層: KPI → トレンド → 詳細
ステップ4 — コードを生成する
以下のルールに従って、プロダクション準備完了のコードを記述します：
スタック: React + Tailwind CSS（ユーザーが特に指定しない限り）
スペーシング: Tailwindのスペーシングスケール（p-2, gap-4など）、8pxグリッド上
カラー: CSS変数またはTailwind設定でパレットの一貫性を確保
タイポグラフィ: Tailwindのテキストユーティリティ；Google Fontsによる表現力のあるフォントペア
状態: すべてのインタラクティブ要素にhover, focus, active, disabledを実装
レスポンシブ: モバイルファースト；375, 768, 1440 pxでテスト
アクセシビリティ: セマンティックHTML、必要な箇所にARIA、フォーカス管理
コンポーネントクイックリファレンス
以下は最もよく使われる15のコンポーネントです。60以上の完全なコンポーネントリファレンス（ベストプラクティス、エイリアス、レイアウト例を含む）については、components.md を参照してください。
| コンポーネント | 使用するタイミング | 主要ルール |
|---|---|---|
| Button | アクションをトリガーする | 動詞ファーストのラベル；セクションごとにプライマリ1つ |
| Card | エンティティを表現する | media → title → meta → action；シャドウまたは境界線、両方は不可 |
| Modal | フォーカスされた注意を必要とする | フォーカスをトラップ；X + キャンセル + Escapeで閉じる |
| Navigation | ページ/セクションリンク | 最大5～7項目；明確なアクティブ状態 |
| Table | 構造化データ | スティッキーヘッダー；数値は右揃え；ソート可能な列 |
| Tabs | パネルを切り替える | 2～7タブ；アクティブインジケーター；モバイルではアコーディオン |
| Form | 入力を受け取る | シングルカラム；ラベルは上；blur時にインラインバリデーション |
| Toast | 簡単な確認 | 4～6秒で自動消去；破壊的操作には元に戻すアクションを提供 |
| Alert | 重要なステータス | セマンティックカラー + アイコン；最大2文 |
| Drawer | セカンダリパネル | 詳細は右、ナビは左；デスクトップは320～480 px |
| Search input | コンテンツを検索する | Cmd/Ctrl+Kショートカット；200～300 msでデバウンス |
| Empty state | データがない | イラスト + 見出し + CTA；ポジティブな表現 |
| Skeleton | ローディングプレースホルダー | 実際のレイアウト形状に合わせる；きらめくアニメーション |
| Badge | ステータス/メタデータラベル | 1～2語；ステータスはピル形状；限られたカラーパレット |
| Dropdown menu | アクション/ナビゲーションオプション | 7±2項目；破壊的操作は最後に赤色で |
避けるべきアンチパターン
これらは決して生成しないでください — これらは汎用的で低品質なUIを示します：
- レインボーバッジ — すべてのステータスが異なる明るい色で、意味的な意味がない
- モーダルの中のモーダル — 複雑なフローにはページまたはドロワーを使用する
- 説明なしの無効化された送信ボタン — 何が欠けているかを常に示す
- 予測可能なレイアウトへのスピナー — 代わりにスケルトンスクリーンを使用する
- 「ここをクリック」リンク — リンクテキストはリンク先を説明する必要がある
- デスクトップでのハンバーガーメニュー — スペースが許せば、表示ナビゲーションを使用する
- 自動進行カルーセル — ユーザーがナビゲーションを制御できるようにする
- プレースホルダーのみのフォームフィールド — 常に表示ラベルを使用する
- 等しい重みのボタン — プライマリ/セカンダリ/ターシャリの階層を確立する
- 小さすぎるテキスト（< 12 px） — ボディテキストは最低14 px、16 pxを推奨