frontend-design

汎用的な「AI スロップ」風の見た目を避け、個性あふれるプロダクション品質のフロントエンドインターフェースを作成するためのスキルです。美的な細部や創造的な選択に細心の注意を払い、実際に動作するコードを実装してください。

ユーザーから、作成するコンポーネント、ページ、アプリケーション、インターフェースの要件が提示されます。目的、対象ユーザー、技術的な制約などの背景情報が含まれる場合もあります。

デザインを考える

コーディングを始める前に、背景を把握し、大胆な美的方向性を定めてください。

• 目的：このインターフェースはどのような問題を解決しますか？誰が使いますか？
• トーン：極端な方向性を選びます。徹底的にミニマル、マキシマリストなカオス、レトロフューチャー、オーガニック／ナチュラル、ラグジュアリー／洗練、遊び心のあるおもちゃ風、エディトリアル／雑誌風、ブルータリスト／粗削り、アールデコ／幾何学的、柔らかなパステル、インダストリアル／実用本位などです。
• 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：このインターフェースを忘れられないものにする要素は何ですか？使う人の記憶に残るポイントは何ですか？

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

そのうえで、以下を満たす実用的なコード（HTML/CSS/JS、React、Vue など）を実装してください。

• プロダクション品質で、きちんと動作する
• 視覚的に印象的で、記憶に残る
• 明確な美的視点と一貫性がある
• 細部まで丁寧に仕上げられている

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

次の点に注目してください。

• タイポグラフィ：美しく、独自性があり、魅力的なフォントを選びます。Arial や Inter のようなありふれたフォントは避け、フロントエンドの美しさを引き立てる個性的なものを選んでください。
• 色とテーマ：一貫性のある美的方向性を貫きます。一貫性を保つために CSS 変数を使いましょう。控えめで均等に配色するより、主役となる色に鋭いアクセントを加えるほうが効果的です。
• モーション：アニメーションを使って演出やマイクロインタラクションを取り入れます。効果の高い場面に注力しましょう。段階的に表示される、巧みに演出されたページ読み込みを一度作るほうが、細かなマイクロインタラクションを散りばめるよりも、ユーザーに喜びをもたらします。
• 空間構成：意外性のあるレイアウトを取り入れます。非対称、重なり、斜めの流れ、グリッドを崩す要素、広々とした余白、あるいは意図的に密度を高めた構成を活用してください。
• 背景とビジュアルの細部：単色を既定で使うのではなく、雰囲気や奥行きを生み出してください。

使い古されたフォントファミリー（Inter、Roboto、Arial）、ありがちな配色（白地に紫のグラデーション）、予測可能なレイアウトやコンポーネントパターンなど、汎用的な AI 生成風のデザインは絶対に使わないでください。

創造的に解釈し、その場面にふさわしく、心からデザインされたと感じられる意外性のある選択をしてください。