elegant-design

洗練されたインターフェースの設計

哲学

世界水準のデザインは、意図的で、アクセシブルで、使う人を楽しませるものです。すべての要素に目的があり、すべての操作が自然に感じられ、さまざまな状況に応じて体験が柔軟に適応します。

基本原則：

• 巧妙さより明快さ - ユーザーが次に何をすればよいか迷わないようにします
• 目新しさより一貫性 - パターンを予測可能な形で繰り返します
• 機能よりパフォーマンス - 視覚的な複雑さより、速く滑らかな操作を優先します
• 常にアクセシビリティを確保 - 最初からすべてのユーザーを対象に設計します
• 段階的な情報開示 - 必要なときにだけ複雑さを明らかにします
• 意図的な摩擦 - 破壊的な操作は難しく、建設的な操作は容易にします

このスキルを使う場面

次のような場合にこのスキルを使います：

• React／Next.js／類似のフレームワークでウェブアプリケーションを構築するとき
• 開発者向けツールや技術的なインターフェースを作成するとき
• チャット、ターミナル、コード表示を含むインターフェースを設計するとき
• リアルタイム機能やストリーミング機能を実装するとき
• アクセシビリティとレスポンシブデザインを確保するとき
• shadcn/ui、daisyUI、HeroUI のデザインシステムを使用するとき

デザインプロセスのワークフロー

最適な結果を得るには、次のワークフローに従ってください。

1. 発見と計画（15～30 分）

ユーザー体験を整理する：

# Create flow diagrams with Graphviz
cat > user-flow.dot << 'EOF'
digraph UserFlow {
  Start -> "Observe State"
  "Observe State" -> "Orient Understanding"
  "Orient Understanding" -> "Decide Action"
  "Decide Action" -> "Act Execute"
  "Act Execute" -> "Observe State" [label="OODA loop"]
}
EOF

dot -Tpng user-flow.dot -o user-flow.png

OODA ループを整理する： 主要なユーザー目標ごとに、次のサイクルを最適化します。

1. 観察 - ユーザーにはどのような情報が必要ですか？
2. 状況判断 - ユーザーはどのように情報を理解しますか？
3. 意思決定 - どのような選択肢がありますか？
4. 実行 - ユーザーはどのように操作しますか？

状態を記録する：

• エントリーポイント（ユーザーがどのようにアクセスするか）
• コアループ（繰り返される操作）
• 成功状態（目標の達成）
• 失敗状態（エラーと復旧経路）
• エッジケース（空、読み込み中、エラー、極端なデータ）

アフォーダンスを列挙する： 必要な UI 要素をすべて洗い出します。

• ナビゲーション（セクション間の移動）
• アクション（ボタン、リンク、コントロール）
• 入力（フォーム、エディター、ピッカー）
• フィードバック（成功、エラー、読み込み中）
• コンテンツ（テキスト、画像、データ）
• 道案内（パンくずリスト、進捗状況）

カスタムコンポーネントを構築する前に：

1. まず shadcn/ui を検索します（https://ui.shadcn.com）
2. daisyUI を確認します（https://daisyui.com）
3. HeroUI を調べます（https://heroui.com）
4. 必要な場合にのみカスタムコンポーネントを構築します

2. デザインの基盤（20～40 分）

ビジュアルシステムを確立する：

基盤に関する詳細ガイドを読みます。

• foundation/typography.md - フォントの選択（Geist、JetBrains Mono）、スケール、読み込み
• foundation/colors-and-spacing.md - カラーパレット、スペーシングシステム、ダークモード
• foundation/layout-patterns.md - グリッド、コンテナー、余白、レスポンシブのブレークポイント

クイックリファレンス：

• タイポグラフィ：UI には Geist、コードには JetBrains Mono（最小 14px）
• スペーシング：8px を基準とするシステム（0.5rem、1rem、1.5rem、2rem、3rem、4rem、6rem、8rem）
• カラー：セマンティックトークン（--color-background、--color-primary、--color-error など）
• レイアウト：モバイルファースト、12 カラムグリッド、ゆとりのある余白

3. インタラクティブ要素（30～60 分）

高度なインタラクティブ機能については、専門ガイドを参照してください。

チャットとメッセージング：

• 会話型インターフェースを構築する際は、interactive/chat-and-messaging.md を読みます
• メッセージの状態、ストリーミング、自動スクロール、Markdown のレンダリングを扱います

ターミナルとコード表示：

• ターミナルエミュレーター、構文のハイライト、セマンティックハイライトについては、interactive/terminals-and-code.md を読みます
• ANSI カラー、Shiki の統合、コピー用ボタン、行のハイライトを扱います

ストリーミングと読み込み：

• 段階的な読み込み、テキストのストリーミング、楽観的な更新については、interactive/streaming-and-loading.md を読みます
• スケルトン画面、進捗インジケーター、読み込みの階層を扱います

差分とログ：

• バージョン管理 UI、ログビューアーについては、interactive/diffs-and-logs.md を読みます
• 分割／統合差分、文字単位の変更、仮想スクロールを扱います

4. 実装（1～3 時間）

コンポーネントを構築する：

• コンポーネントのアーキテクチャと WCAG への準拠については、implementation/components-and-accessibility.md を読んでください
• アトミックデザインを使用します：アトム → モレキュール → オーガニズム → テンプレート → ページ
• キーボード操作とスクリーンリーダーへの対応を確保してください

パフォーマンスを最適化する：

• Core Web Vitals の最適化については、implementation/performance.md を読んでください
• 遅延読み込み、コード分割、画像の最適化を行い、Lighthouse で測定します

テストと改善を行う：

• 包括的なテスト方法については、implementation/testing-and-qa.md を読んでください
• 複数のデバイスや画面サイズでテストし、アクセシビリティツールも使用してください

5. 検証と改善

リリース前のチェックリスト：

• ユーザーフローをテストし、OODA ループを最適化した
• すべての状態に対応した（空、読み込み中、エラー、成功）
• モバイルに対応した（実機でテスト済み）
• アクセシビリティに準拠した（WCAG AA）
• パフォーマンスを測定した（Lighthouse スコア > 90）
• UI には Geist、コードには JetBrains Mono を使用した
• 可能な限りデザインシステムのコンポーネントを使用した
• 余白とタイポグラフィに一貫性がある
• ライトモードとダークモードの両方が機能する
• キーボード操作にすべて対応した
• インタラクティブ要素を洗練させた（インタラクティブガイドを参照）

クイック判断ツリー

基本を理解したい場合 → まず foundation/ のファイルを読んでください

チャットやメッセージ機能を構築する場合 → interactive/chat-and-messaging.md を読んでください

ターミナルやコードエディターを構築する場合 → interactive/terminals-and-code.md を読んでください

ストリーミングや読み込み状態が必要な場合 → interactive/streaming-and-loading.md を読んでください

差分やログのビューアーを構築する場合 → interactive/diffs-and-logs.md を読んでください

実装を始める場合 → implementation/ のファイルを読んでください

ツールが必要な場合や、ミスを避けたい場合 → reference/ のファイルを読んでください

デザインシステムの優先順位

1. shadcn/ui (https://ui.shadcn.com) - 第一候補

   • アクセシビリティに優れたデフォルト設定
   • Radix UI のプリミティブ
   • Tailwind ベースでカスタマイズ可能
   • プロジェクトにコピーして貼り付け可能

2. daisyUI (https://daisyui.com)

   • セマンティックなコンポーネント名
   • Tailwind プラグイン
   • 迅速なプロトタイピング

3. HeroUI (https://heroui.com)

   • モダンで洗練されたデザイン
   • 強いデザイン言語
   • プロダクトインターフェース向け

詳しい比較と使用パターンについては、reference/design-systems.md を参照してください。

タイポグラフィの基準

次のフォントのみを使用してください：

• Geist (https://vercel.com/font) - すべてのインターフェーステキストに使用

  • UI ラベル、本文、見出し
  • タイポグラフィの 95%

• JetBrains Mono (https://jetbrains.com/mono) - すべてのコード／技術コンテンツに使用

  • コードブロック、ターミナル、ログ、差分
  • 最小サイズは 14px
  • リガチャを有効にする

複数のサンセリフフォントや複数の等幅フォントを混在させないでください。

詳しいガイドラインについては、foundation/typography.md を参照してください。

インスピレーションを得るためのサイト

デザインパターンを学ぶために、次のサイトを参考にしてください：

• Vercel (https://vercel.com) - ゆとりのある余白、明快なタイポグラフィ
• Hex (https://hex.tech) - データ量が多くても整理された構成
• Baseten (https://docs.baseten.co) - 明快なドキュメント構成
• Weather Underground (https://wunderground.com) - 複雑なデータをすっきりと表示
• Ghostty (https://ghostty.org) - モダンなターミナル、洗練されたデザイン

よくあるアンチパターン

次のようなミスを避けてください：

• ❌ デザインシステムにあるのに、カスタムコンポーネントを構築する
• ❌ レイアウトに絶対配置を使用する
• ❌ 負荷の高いプロパティ（width、height）をアニメーションさせる
• ❌ モバイルでのテストを省略する
• ❌ アクセシビリティを無視する
• ❌ 何にでも <div> を使用する
• ❌ 複数の等幅フォントを混在させる
• ❌ ユーザーが読んでいる最中に自動スクロールする
• ❌ ターミナルで生の ANSI コードを表示する
• ❌ 空、読み込み中、エラーの状態への対応を忘れる

説明付きの完全な一覧については、reference/anti-patterns.md を参照してください。

反復的な開発

シンプルなインターフェースの場合（単一ページ、コンポーネントが少ない）：

1. 基盤から始めます（基盤ファイルを読みます）
2. デザインシステムのコンポーネントを使用します
3. テストして改善します

複雑なインターフェースの場合（複数の機能、インタラクティブな要素）：

1. フローを整理し、図を作成します
2. 基盤を整えます（基盤ファイルを読みます）
3. 機能を一つずつ構築します（関連するインタラクティブファイルを読みます）
4. 次に進む前に各機能をテストします
5. 最適化して仕上げます（実装ファイルを読みます）

開発者向けツールや技術系インターフェースの場合：

1. OODA ループを慎重に整理します
2. インタラクティブファイルをすべて読みます（チャット、ターミナル、コード、ストリーミング、差分、ログ）
3. キーボード操作とパフォーマンスを重視します
4. 実際の技術コンテンツでテストします

ヘルプを得る

どこから始めればよいかわからない場合：

1. 上記の設計理念のセクションを読みます
2. デザインプロセスのワークフローに従います
3. 必要に応じて具体的なガイドを参照します

デザインがしっくりこない場合：

1. 原則（明確さ、一貫性、パフォーマンス）に照らして確認します
2. アンチパターンの一覧を見直します
3. インスピレーションを得られるサイトを調べます
4. 実際のユーザーでテストします

実装に時間がかかる場合：

1. まずデザインシステムのコンポーネントを使います
2. すでにあるものを作り直さないようにします
3. 一度に一つの機能に集中します
4. 早い段階から頻繁にテストします

ファイル構成

elegant-design/
├── SKILL.md (you are here)
├── foundation/
│   ├── typography.md (fonts, scales, loading)
│   ├── colors-and-spacing.md (palettes, spacing system, dark mode)
│   └── layout-patterns.md (grids, containers, responsive)
├── interactive/
│   ├── chat-and-messaging.md (chat UIs, streaming messages)
│   ├── terminals-and-code.md (terminals, syntax highlighting)
│   ├── streaming-and-loading.md (progressive loading, skeletons)
│   └── diffs-and-logs.md (version control UI, log viewers)
├── implementation/
│   ├── components-and-accessibility.md (architecture, WCAG)
│   ├── performance.md (Core Web Vitals, optimization)
│   └── testing-and-qa.md (testing checklist, tools)
└── reference/
    ├── design-systems.md (shadcn, daisyUI, HeroUI details)
    ├── tools-and-libraries.md (complete tool list)
    └── anti-patterns.md (what not to do, with explanations)

覚えておくこと

一流のデザインは目立ちません。 ユーザーは巧みな解決策に気づく必要はありません。目標を無理なく達成し、その過程で少し笑顔になれるだけで十分です。

シンプルに始め、実際の利用状況に基づいて改善します。 すべてを一度に作るのではなく、必要なものを作り、テストして改善してから、次の機能に進みます。

アクセシビリティは必須です。 最初からキーボード操作、スクリーンリーダー、十分なコントラストを考慮して設計します。後から対応するのははるかに困難です。

パフォーマンスは重要です。 美しくても遅いインターフェースは、良いインターフェースとは言えません。早い段階から頻繁にパフォーマンスを測定します。