frontend-design

このスキルは、ありきたりな「AI っぽさ」を避けた、個性豊かで本番環境にふさわしいフロントエンドインターフェースの作成を支援します。美的な細部や創造的な工夫に徹底してこだわり、実際に動作するコードを実装してください。

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

デザイン思考

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

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

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

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

• 本番環境にふさわしく、機能すること
• 見た目に強い印象があり、記憶に残ること
• 明確な美的視点のもと、全体に一貫性があること
• あらゆる細部まで丁寧に仕上げること

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

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

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

使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）、ありきたりな配色（特に白背景に紫のグラデーション）、予測どおりのレイアウトやコンポーネントパターン、コンテキストに即した個性がない型どおりのデザインなど、一般的な AI 生成風の美的表現は絶対に避けてください。

自由な発想で解釈し、コンテキストに合った、本当にデザインされたと感じられる意外性のある選択をしてください。どのデザインも同じものにしてはいけません。ライトテーマとダークテーマ、異なるフォントや美的表現を使い分けてください。生成を重ねるうちに、よくある選択肢（たとえば Space Grotesk）へ収束することは絶対に避けてください。

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

Claude は、驚くほど創造的な作品を生み出せます。遠慮せず、枠にとらわれず、個性豊かなビジョンを徹底して追求したときに何が生まれるのか、存分に示してください。