frontend-design

汎用的な「AI っぽい寄せ集め」の美学を避け、独自性のある本番品質のフロントエンドインターフェースを作成するためのスキルです。美的な細部や創造的な選択に細心の注意を払い、実際に動作するコードを実装してください。

ユーザーは、作成するコンポーネント、ページ、アプリケーション、またはインターフェースのフロントエンド要件を提示します。目的、対象ユーザー、技術的な制約に関する背景情報が含まれることもあります。

デザイン思考

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

• 目的: このインターフェースはどのような問題を解決しますか？誰が使いますか？
• トーン: 極端な方向性を選びます。徹底したミニマリズム、マキシマリストな混沌、レトロフューチャー、オーガニック／ナチュラル、ラグジュアリー／洗練、遊び心のあるおもちゃ風、エディトリアル／雑誌風、ブルータリスト／無骨、アールデコ／幾何学的、ソフト／パステル、インダストリアル／実用本位など、選択肢は数多くあります。これらを発想のヒントにしつつ、その美的方向性にふさわしいデザインを作り上げてください。
• 制約: 技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化: 何が忘れられない印象を残しますか？相手の記憶に残る、たった一つの要素は何ですか？

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

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

• 本番品質で、機能すること
• 視覚的に印象的で、記憶に残ること
• 明確な美的視点で統一されていること
• 細部まで丁寧に磨き上げられていること

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

重視する点：

• タイポグラフィ：美しく、個性的で、興味を引くフォントを選びます。Arial や Inter のような汎用的なフォントは避け、フロントエンドの美しさを高める、個性豊かで意外性のあるフォントを選びます。特徴的なディスプレイフォントと洗練された本文用フォントを組み合わせます。
• 色とテーマ：統一感のある美的スタイルを貫きます。一貫性を保つために CSS 変数を使います。控えめで均等に配色されたパレットよりも、支配的な色に鮮やかなアクセントを加えるほうが効果的です。
• モーション：エフェクトやマイクロインタラクションにアニメーションを使います。HTML では CSS のみで実現できる方法を優先します。利用可能な場合は、React で Motion ライブラリを使います（アニメーションには anime.js を使います：./references/animejs.md）。効果の大きい場面に注力します。段階的に表示する（animation-delay）ページ読み込みをひとつ丁寧に演出するほうが、散発的なマイクロインタラクションよりも大きな喜びを生み出します。スクロールをきっかけにした演出や、意外性のあるホバー状態を取り入れます。
• 空間構成：意外性のあるレイアウトを取り入れます。非対称性、重なり、斜めの流れ、グリッドを崩す要素を活用します。余白を贅沢に取るか、密度を意図的にコントロールします。
• 背景とビジュアルの細部：単色に頼るのではなく、雰囲気と奥行きを生み出します。全体の美的スタイルに合う、文脈に沿ったエフェクトやテクスチャを加えます。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重ねた透明レイヤー、ドラマチックな影、装飾的な境界線、カスタムカーソル、粒子のオーバーレイなど、創造的な表現を取り入れます。

使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）、ありきたりな配色（特に白い背景に紫のグラデーション）、予測可能なレイアウトやコンポーネントのパターン、文脈に固有の個性に欠ける型にはまったデザインなど、汎用的な AI 生成風の美的スタイルは決して使わないでください。

創造的に解釈し、文脈にふさわしい、本当にデザインされたと感じられる意外性のある選択をしてください。すべてのデザインを異なるものにしてください。明るいテーマと暗いテーマ、さまざまなフォントや美的スタイルを使い分けます。生成するたびに一般的な選択肢（たとえば Space Grotesk）へ収束することは決して避けてください。

重要：実装の複雑さを美的なビジョンに合わせてください。マキシマリストなデザインには、豊富なアニメーションやエフェクトを備えた複雑なコードが必要です。ミニマリストまたは洗練されたデザインには、抑制、正確さ、余白やタイポグラフィ、繊細な細部への細やかな配慮が必要です。ビジョンを巧みに実現することで、優雅さが生まれます。

忘れないでください。Claude は並外れた創造的な仕事を実現できます。枠にとらわれず、独自のビジョンを徹底して追求したときに何が生み出せるのか、遠慮せずに示してください。