ns-code-frontend-design

フロントエンドデザイン

個性があり、本番環境にふさわしい UI を提供します。どこにでもあるテンプレートのような見た目にはしません。

ハーネスの確認

../ns-harness/references/harness-discovery.md を参照してください。{harness_root}/rules/architecture-rules.md と、存在する場合はレイヤー固有のフロントエンドルールを確認してください。

読み込むコンテキスト

ファイル	タイミング
docs/context/design-brief.md	必ず最初に確認します。トークン、タイポグラフィ、モーションが記載されています
docs/context/stack-confirmed.md	フレームワークと CSS の方針
{harness_root}/rules/*frontend*	プロジェクトの規約

design-brief.md がない場合は、アーキテクチャルールからスタックを推測し、大規模な UI 作業に着手する前にブランドの方向性について焦点を絞った質問を 1 つしてください。

使用する場面

• 新しいページ、レイアウト、コンポーネントライブラリの作成
• 既存画面のビジュアル刷新
• デザインブリーフとの整合、またはトークンの適用
• 「汎用的な AI UI」（紫色のグラデーション、似通ったカードグリッド）の削減

ワークフロー

1. 監査 — コードベース内の既存 UI パターンをスクリーンショットで確認するか、コードを読みます。フレームワーク（React、Vue、Blade など）を記録します。
2. 方向性の設定 — design-brief.md を適用するか、最小限の方針（文字サイズの段階、間隔、アクセント、モーションのレベル）を定めます。
3. デザイン — 構成、階層、状態（ホバー、フォーカス、空、エラー）、レスポンシブのブレークポイントを設計します。
4. 実装 — 差分を最小限に抑え、プロジェクトのファイル構成と命名規則に合わせます。
5. 検証 — キーボードフォーカス、コントラスト、視差効果を抑える設定への対応を確認します。

references/anti-slop.md と references/checklist.md を参照してください。

原則

• 画面ごとに強いビジュアルアイデアを 1 つ採用します。流行を一度に詰め込みません。
• 階層はタイポグラフィで表現します。色だけに頼りません。
• モーションには目的を持たせます。装飾的なループではなく、フィードバックのためのマイクロインタラクションにします。
• デフォルトでアクセシブルにします。セマンティック HTML、ラベル、フォーカスリングを使用します。

ns-spec-driven との連携

SDD のフェイススキルから呼び出された場合は、UI タスクの範囲内に留め、要件やタスクの生成にまで広げないでください。

禁止事項

• バックエンド API の設計やデータベーススキーマの設計
• MR のゲートで ns-code-reviewer の代わりを務めること
• プロジェクトに CSS／コンポーネントの規約がある場合に、それを無視すること