gpui-kit-design-guides

GPUI Kit デザインガイド

ガイドはreferences/design-guides.mdにあります。 これは参考ではなく、必ず守るべき要件です。UI の作業を始める前に、ガイドファイルそのものを読んでください。このページ、コードベース内の既存画面、または学習データに基づいて回答しないでください。

ファイルがない場合は、https://gpui-kit.com/docs/design-guides.mdを取得してください。 ガイドはそのページをそのまま複製したものなので、./coding-guides.mdへのリンクは、gpui-kitスキル内の Coding Guides（またはhttps://gpui-kit.com/docs/coding-guides.md）を指します。

読み方

新しい画面を作成する場合やデザインを刷新する場合は、ガイド全体を読んでください。範囲の狭い変更では、まず「デザインの理念」と「タスクから始める」を読み、次に変更に該当するセクションを読んでください。セクションの順序は次のとおりです（grep -n '^## ' references/design-guides.md）。

セクション	読むタイミング
デザインの理念	常に
Shadcn から学ぶ	Web コンポーネントライブラリから何を取り入れるか選ぶとき
タスクから始める	常に。タスクの階層、インタラクションの約束、含めない要素について
ビジュアル言語	色、タイポグラフィ、間隔、角丸、境界線、奥行き、密度、アイコンについて
レイアウトパターン	ウィンドウ構成、サイドバー、ツールバー、パネル、フォーム、サイズ変更可能領域について
コンポーネントと構成	コンポーネントの選択、部品の組み合わせ、新しいコンポーネントを作るタイミングについて
インタラクションの状態	ホバー、フォーカス、押下、選択、無効、読み込み、検証、危険状態について
フィードバックとオーバーレイ	ダイアログ、シート、ポップオーバー、メニュー、通知、ツールチップ、閉じる操作、フォーカスについて
モーション	アニメーションやトランジションを使う場合
データ量の多いインターフェースのデザイン	テーブル、リスト、ツリー、ダッシュボード、情報量の多いインスペクターについて
インターフェースの文言	ユーザー向けテキスト全般：ラベル、ボタン、タイトル、エラー、空状態について
国際化とプラットフォームへの適合	多言語の文言、中国語の用語、macOS／Windows の慣習について
AI 生成インターフェース向けのガイダンス	エージェントが UI を生成する場合は常に
アクセシビリティチェックリスト	完了前
デザインレビューチェックリスト	完了前。すべての項目を作業内容に照らして確認してください

必ず守ること

ガイドの代わりではなく、最低限守るべき事項です。

• Web の慣習よりデスクトップを優先します。 キーボード操作、ウィンドウ枠、メニュー、情報量の多いデータ表示、サイズ変更可能領域、常時表示されるナビゲーションを考慮してください。
• ButtonとLinkを使い分けます。 アプリ内のコマンドにはすべてButtonを使用し、控えめに見せる場合はghostまたはoutlineを使用します。Linkは外部 URL とメールアドレスにのみ使用します。
• 値より先にトークンを使います。 生の hex やrgb(...)は使わず、cx.theme()のセマンティックトークンと rem ベースのヘルパーを使用します。ガイドに記載された間隔の数値は現在のデフォルトスケールであり、そのまま繰り返し使う固定値ではありません。
• 状態を視覚的に示します。 ホバー、フォーカス、選択、無効、読み込み、検証、破壊的操作の状態は、それぞれ一貫した方法で明確に表現する必要があります。
• オーバーレイ。 Escape キーで最前面のサーフェスを閉じ、フォーカスをトリガーに戻します。
• 文言。 対象と動作を明記します。Are you sure?とOKではなく、Delete "Roadmap"?とDeleteボタンを使います。

最後に、デザインレビューチェックリストのすべての項目に照らして作業内容を確認してください。