frontend-design

このスキルは、ありがちな「AI っぽい」見た目を避けながら、個性あふれる本番品質のフロントエンドインターフェースを作成するためのガイドです。美的な細部や創造的な選択に細心の注意を払い、実際に動作するコードを実装してください。

ユーザーは、構築するコンポーネント、ページ、アプリケーション、インターフェースなどのフロントエンド要件を提示します。目的、対象ユーザー、技術的な制約に関するコンテキストが含まれる場合もあります。

デザインを考える

コーディングの前にコンテキストを理解し、大胆な美的方向性を定めてください。

• 目的：このインターフェースはどんな問題を解決しますか？誰が使いますか？
• トーン：極端な方向性を選んでください。極限までミニマル、マキシマリストな混沌、レトロフューチャー、オーガニック／ナチュラル、ラグジュアリー／洗練、遊び心のあるおもちゃ風、エディトリアル／雑誌風、ブルータリスト／生々しさ、アールデコ／幾何学、柔らかなパステル、インダストリアル／実用本位など、選択肢は数多くあります。これらをインスピレーションとして活用しつつ、選んだ美的方向性に忠実なデザインを作りましょう。
• 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：忘れられないものにする要素は何ですか？見る人の記憶に残るのは何ですか？

重要：明確なコンセプトの方向性を定め、精密に形にしてください。大胆なマキシマリズムも洗練されたミニマリズムも効果的です。大切なのは強さではなく、意図があることです。

次に、以下の要件を満たす、実際に動作するコード（HTML/CSS/JS、React、Vue など）を実装してください。

• 本番品質で、機能する
• 見た目に強い印象を与え、記憶に残る
• 明確な美的視点に基づく、一貫性のあるデザイン
• あらゆる細部まで丁寧に仕上げられている

フロントエンドの美的ガイドライン

以下に注力してください。

• タイポグラフィ：美しく、独自性があり、興味を引くフォントを選びましょう。Arial や Inter のようなありきたりなフォントは避け、フロントエンドの美しさを高める、個性豊かで意外性のあるフォントを選んでください。特徴的なディスプレイフォントと、洗練された本文フォントを組み合わせましょう。
• 色とテーマ：一貫性のある美的方向性を貫いてください。CSS 変数を使って統一感を保ちましょう。控えめで均等に配分されたパレットより、支配的な色に鮮やかなアクセントを効かせた配色のほうが効果的です。
• 動き：アニメーションで演出やマイクロインタラクションを加えましょう。HTML には CSS のみで実現する方法を優先してください。React で利用できる場合は Motion ライブラリを使いましょう。効果の高い場面に注力してください。段階的な表示（animation-delay）を取り入れ、ページ読み込み時に演出を緻密に組み立てるほうが、マイクロインタラクションを散発的に加えるよりも大きな楽しさを生み出します。スクロール時の演出や、意外性のあるホバー状態も活用しましょう。
• 空間構成：意外性のあるレイアウトを採用しましょう。非対称、重なり、斜めの流れ、グリッドをはみ出す要素。広々とした余白でも、緻密に制御された密度でもかまいません。
• 背景と視覚的な細部：単色を安易に使うのではなく、雰囲気と奥行きを作りましょう。全体の美的方向性に合う、文脈に根ざした効果やテクスチャを加えてください。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、透明レイヤー、ドラマチックな影、装飾的な枠線、カスタムカーソル、粒子状のオーバーレイなど、創造的な表現を活用しましょう。

使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）、陳腐な配色（特に白地に紫のグラデーション）、予測しやすいレイアウトやコンポーネントのパターン、文脈に応じた個性に欠ける型どおりのデザインなど、ありがちな AI 生成風の見た目は決して使わないでください。

創造的に解釈し、心からデザインされたと感じられる意外性のある選択をしてください。デザインが同じようなものばかりにならないようにしましょう。明るいテーマや暗いテーマ、異なるフォントや美的方向性を使い分けてください。世代を超えてよくある選択（たとえば Space Grotesk）に収束することは決して避けてください。

重要：実装の複雑さを美的なビジョンに合わせてください。マキシマリストなデザインには、豊富なアニメーションや効果を盛り込んだ複雑なコードが必要です。ミニマルで洗練されたデザインには抑制と精密さが求められ、余白、タイポグラフィ、繊細な細部に注意を払う必要があります。ビジョンを丁寧に形にすることで、エレガンスが生まれます。

優れたエージェントは、驚くほど創造的なものを作り出せます。型にはまらない発想をして、個性豊かなビジョンを貫き、実現できることを余すところなく示してください。