| name | frontend-design |
| description | 高い設計品質を持つ、個性的でプロダクショングレードのフロントエンドインタフェースを作成します。ユーザーが web コンポーネント、ページ、またはアプリケーションの構築を要求し、視覚的な方向性がコード品質と同じくらい重要な場合に使用します。 |
| origin | ECC |
Frontend Design
タスクが単に「動作させる」ではなく「デザインされたように見せる」ことである場合に使用します。
このスキルは、汎用的な AI っぽい UI ではなく、明確な視点を必要とするプロダクトページ、ダッシュボード、アプリシェル、コンポーネント、または視覚システム向けです。
使用タイミング
- ランディングページ、ダッシュボード、またはアプリサーフェスをゼロから構築
- 退屈なインタフェースを意図的で記憶に残るものにアップグレード
- 製品コンセプトを具体的な視覚的方向性に翻訳
- タイポグラフィ、コンポジション、モーションが重要なフロントエンドを実装
コア原則
方向性を選んでコミットします。
安全で平均的な UI は、強く、首尾一貫した美学といくつかの大胆な選択を持つ UI よりも通常悪いものです。
デザインワークフロー
1. まずインタフェースをフレーミングする
コーディング前に以下を確定:
- 目的
- 対象読者
- 感情的なトーン
- 視覚的方向性
- ユーザーが覚えるべき 1 つのこと
可能な方向性:
- 残酷に最小
- エディトリアル
- 産業的
- 高級
- 遊び心
- 幾何学的
- レトロ・フューチャリスト
- 柔らかくオーガニック
- マキシマリスト
方向性をカジュアルに混ぜないでください。1 つを選んでクリーンに実行します。
2. 視覚システムを構築する
以下を定義:
- タイプ階層
- カラー変数
- スペーシングリズム
- レイアウトロジック
- モーションルール
- サーフェス / border / shadow の扱い
CSS 変数またはプロジェクトのトークンシステムを使用して、インタフェースが成長しても首尾一貫した状態を保ちます。
3. 意図を持って構成する
優先:
- 階層をシャープにする場合の非対称
- 深さを生み出す場合の重なり
- フォーカスを明確にする場合の強い whitespace
- 製品が密度の恩恵を受ける場合のみの密なレイアウト
明らかに適切でない限り、対称的なカードグリッドへのデフォルトを避けます。
4. モーションに意味を持たせる
アニメーションを以下に使用:
- 階層を明らかに
- 情報をステージング
- ユーザーアクションを強化
- 1 つか 2 つの記憶に残る瞬間を作る
汎用的なマイクロインタラクションをあちこちに散りばめないでください。1 つのよく演出されたロードシーケンスは、通常 20 のランダムなホバーエフェクトより強いです。
強いデフォルト
タイポグラフィ
- 個性のあるフォントを選ぶ
- 適切な場合、個性的な display face と読みやすい body face を組み合わせる
- ページがデザイン主導の場合、汎用的なデフォルトを避ける
カラー
- 明確なパレットにコミット
- 1 つの支配的なフィールドと選択的なアクセントは、通常均等に重み付けされた虹パレットよりもうまく機能する
- 製品が本当に要求しない限り、白地に紫グラデーションのクリシェを避ける
背景
雰囲気を使用:
- グラデーション
- メッシュ
- テクスチャ
- 微妙なノイズ
- パターン
- レイヤードトランスパレンシー
プロダクト向けページではフラットな空の背景がベストアンサーであることはまれです。
レイアウト
- コンポジションが恩恵を受ける場合はグリッドを破る
- 対角線、オフセット、グルーピングを意図的に使用
- レイアウトが非伝統的でも読み flow を明白に保つ
アンチパターン
以下にデフォルトしない:
- 交換可能な SaaS のヒーローセクション
- 階層のない汎用カードの山
- システムのないランダムなアクセントカラー
- プレースホルダーっぽいタイポグラフィ
- アニメーションが簡単だからという理由だけで存在するモーション
実行ルール
- 既存プロダクト内で作業する場合、確立されたデザインシステムを保持
- 技術的複雑さを視覚的アイデアに合わせる
- アクセシビリティとレスポンシブネスを無傷に保つ
- フロントエンドはデスクトップとモバイルで意図的に感じるべき
品質ゲート
納品前に:
- インタフェースに明確な視覚的視点がある
- タイポグラフィとスペーシングが意図的に感じる
- カラーとモーションがランダムに装飾するのではなく製品をサポートしている
- 結果が汎用 AI UI のように読めない
- 実装が視覚的に興味深いだけでなく、プロダクショングレード
