frontend-design

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

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

デザインを考える

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

• 目的：このインターフェースはどのような問題を解決しますか？誰が使いますか？
• トーン：極端な方向性を選びましょう。徹底したミニマリズム、カオスなマキシマリズム、レトロフューチャー、有機的・自然な雰囲気、高級感・洗練、遊び心のあるおもちゃのような雰囲気、エディトリアル・雑誌風、ブルータリズム・生々しさ、アールデコ・幾何学的、柔らかくパステル調、インダストリアル・実用本位など、選択肢は豊富にあります。これらをインスピレーションとして参考にしつつ、美的方向性にふさわしいデザインを作りましょう。
• 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：このデザインを忘れられないものにする要素は何ですか？見る人の記憶に残るものは何でしょうか？

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

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

• 本番品質で、きちんと動作する
• 見た目が際立ち、記憶に残る
• 明確な美的な視点を持ち、全体に一貫性がある
• あらゆる細部まで綿密に仕上げられている

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

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

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

使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）、ありきたりな配色（特に白背景の紫グラデーション）、予測可能なレイアウトやコンポーネントのパターン、文脈に即した個性のない量産型デザインなど、一般的な AI 生成風の見た目は絶対に使わないでください。

創造的に解釈し、文脈に根ざした、本当にデザインされたと感じられる意外性のある選択をしてください。デザインは一つひとつ異なるものにしましょう。ライトテーマとダークテーマ、さまざまなフォントや美的方向性を使い分けてください。生成を重ねても、よくある選択肢（たとえば Space Grotesk）に絶対に収束しないでください。

重要：実装の複雑さを美的なビジョンに合わせてください。マキシマリストなデザインには、豊富なアニメーションやエフェクトを盛り込んだ、手の込んだコードが必要です。ミニマリストや洗練されたデザインには、抑制、精度、余白、タイポグラフィへの細やかな配慮が求められます。ビジョンを巧みに形にすることで、エレガンスが生まれます。

Claude には、並外れた創造的な作品を生み出す力があります。思い切って、既成概念にとらわれず、個性あふれるビジョンを最後まで貫いたときに実現できるものを示してください。