frontend-design-codex

フロントエンドデザイン Codex

概要

このスキルを使うと、ブラウザー上に表示されるプロダクトインターフェースを、意図が伝わり、使いやすく、検証済みのものにできます。新たな抽象化を追加する前に、既存のアプリのフレームワークとデザイン規約を優先してください。

デザインスキルの向上への貢献

このスキルでは、ソースコードだけでなく、レンダリングされた挙動からフロントエンドのデザインを評価する方法を Codex に教えます。レイアウト、階層、余白、コントロール、レスポンシブ状態、アクセシビリティ、スクリーンショットによる根拠を一連のループとして選択することで、テンプレートを使わない作業の質を高めます。

テンプレートなしで作るプロダクト UI は、装飾的になったり、一貫性がなくなったりしやすいため、これは重要です。Codex は、繰り返し使っても、モバイルで折り返されても、実際のブラウザーでレンダリングされても使いやすいインターフェースを作る必要があります。

ワークフロー

1. 既存のアプリ構成、フレームワーク、ルート、コンポーネント、スタイル、デザイン規約を確認します。
2. 主要なユーザーワークフローを特定し、そのワークフローに合わせて最初の画面を最適化します。
3. 繰り返し使うコンポーネントをスタイリングする前に、意味のあるデザイントークンを定義します。背景、サーフェス、テキスト、控えめなテキスト、境界線、アクセント、ステータスカラー、書体、余白、角丸を含めます。コントラストを確認し、パレットをコンパクトに保ちます。
4. 通常時、空の状態、読み込み中、エラー時、狭いビューポートの各状態をカバーする、必要最小限の完全な UI を構築します。
5. なじみのあるコントロールを使います。ツールにはアイコンボタン、二択には切り替えコントロール、数値にはスライダーまたは入力欄、別の表示にはタブ、選択肢にはメニューを使います。
6. 中核となるサーフェス、コントロール、チャート、注釈にビジュアルトークンを一貫して適用します。サーフェスに合わせて書体とレイアウトを調整し、コンパクトなパネル内でヒーロー級の大きなテキストを使うのは避けます。
7. ビジュアル品質を主張する前に、デスクトップとモバイルのスクリーンショットを撮影します。
8. スクリーンショットの根拠がデザイン上の判断を裏付けるまで、トークンとレイアウトを見直します。

共通ビジュアルランタイム

ブラウザー上の根拠には .shared\visual-runtime を使います。

• スクリーンショット、コンソール出力、リクエストの失敗、必要に応じた PDF エクスポートには capture_page.mjs を使います。
• テキストのはみ出し、コントラスト不足、小さすぎるテキスト、画像の代替テキスト不足、コンソールの検出結果には visual_lint.mjs を使います。
• 複数のスクリーンショットを比較する場合は make_contact_sheet.py を使います。
• ビジュアルシステムの作成や監査には references\design-tokens.md を使います。

Office COM は必要ありません。この UI を後で PowerPoint、Word、Excel にエクスポートする場合は、まずブラウザーでの QA を完了し、Office 固有の手順は Office スキルに移してください。

検証

完了する前に、次の項目を確認してください。

• 可能であれば、アプリで通常使うビルド／テスト／lint コマンドを実行します。
• デスクトップとモバイルのスクリーンショットを少なくとも 1 枚ずつ撮影します。
• ビジュアル lint を実行し、重大な問題に対処します。
• レスポンシブ UI、アクセシビリティ、階層、テキストの収まり、コントロール、余白、パレット、書体、トークンの一貫性について、スクリーンショットを確認します。
• スクリーンショットの根拠を保存し、許容したトレードオフを記録します。

よくある間違い

• 使えるアプリを求められているのに、ランディングページを作る。
• 既存アプリと矛盾するビジュアル言語を考案する。
• コンテンツを減らす代わりに、文字を小さくして密度の問題を解決する。
• モバイルのスクリーンショットがないのに、レスポンシブ品質を主張する。