このスキルは、一般的な「AIスロップ」の美学を避け、差別化されたプロダクショングレードのフロントエンドインターフェースを作成するためのガイドとなります。美的ディテールとクリエイティブな選択に卓越した注意を払い、実際に動作するコードを実装してください。
ユーザーはフロントエンドの要件（コンポーネント、ページ、アプリケーション、またはインターフェースの構築）を提供します。目的、対象ユーザー、技術的な制約に関するコンテキストを含む場合があります。
デザイン思考
コードを書く前に、コンテキストを理解し、大胆な美的方向性を決定します：
- 目的：このインターフェースはどのような問題を解決しますか？誰が使いますか？
- トーン：極端なものを選びます：徹底的なミニマリズム、マキシマリズムのカオス、レトロフューチャー、オーガニック/ナチュラル、ラグジュアリー/洗練、遊び心/おもちゃのよう、エディトリアル/雑誌風、ブルータリズム/生々しい、アールデコ/幾何学的、ソフト/パステル、産業的/実用的など。選択肢は豊富にあります。これらをインスピレーションとして使用しますが、美的方向性に忠実なものをデザインしてください。
- 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
- 差別化：これを忘れられないものにするものは何ですか？誰かが覚えているであろう、その一つのことは何ですか？
重要：明確な概念的方向性を選び、それを正確に実行します。大胆なマキシマリズムと洗練されたミニマリズムはどちらも効果的です。鍵となるのは強度ではなく、意図性です。
その後、以下の要件を満たす動作するコード（HTML/CSS/JS、React、Vueなど）を実装します：
- プロダクショングレードで機能的であること
- 視覚的に印象的で記憶に残ること
- 明確な美的観点でまとまりがあること
- あらゆる細部が細心に洗練されていること
フロントエンド美学ガイドライン
以下に焦点を当てます：
- タイポグラフィ：美しく、ユニークで、興味深いフォントを選びます。ArialやInterのような一般的なフォントは避け、代わりにフロントエンドの美観を高める特徴的な選択をします。予想外で、個性のあるフォントの選択をしてください。特徴的なディスプレイフォントと洗練されたボディフォントを組み合わせます。
- 色とテーマ：まとまりのある美学にコミットします。一貫性のためにCSS変数を使用します。支配的な色とシャープなアクセントが、控えめで均等に分布したパレットよりも優れています。
- モーション：エフェクトやマイクロインタラクションにアニメーションを使用します。HTMLではCSSのみのソリューションを優先します。Reactでは利用可能な場合にMotionライブラリを使用します。インパクトの高い瞬間に焦点を当てます：散在するマイクロインタラクションよりも、スタガー表示（animation-delay）を伴う1つのよく調整されたページロードの方が、より大きな喜びを生み出します。驚きを与えるスクロールトリガーとホバーステートを使用します。
- 空間構成：予想外のレイアウト。非対称性。オーバーラップ。対角線の流れ。グリッドを破る要素。寛大なネガティブスペース、または制御された密度。
- 背景とビジュアルディテール：無地の色にデフォルト設定するのではなく、雰囲気と奥行きを生み出します。全体的な美学にマッチするコンテキストエフェクトとテクスチャを追加します。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重ねられた透過、劇的な影、装飾的なボーダー、カスタムカーソル、グレインオーバーレイなどのクリエイティブな形式を適用します。
絶対に、以下のようなありきたりなAI生成の美学を使用しないでください：使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）、決まりきったカラースキーム（特に白背景に紫のグラデーション）、予測可能なレイアウトとコンポーネントパターン、コンテキスト固有の個性を欠いた既成のデザイン。
創造的に解釈し、コンテキストに合わせて真にデザインされたと感じられる予想外の選択をしてください。同じデザインがあってはなりません。ライトテーマとダークテーマ、異なるフォント、異なる美学を変化させてください。決して一般的な選択（例えばSpace Grotesk）に収束しないでください。
重要：実装の複雑さを美的ビジョンに一致させてください。マキシマリストなデザインには、広範なアニメーションとエフェクトを備えた精巧なコードが必要です。ミニマリストまたは洗練されたデザインには、抑制、精度、そしてスペーシング、タイポグラフィ、微妙なディテールへの慎重な注意が必要です。優雅さはビジョンをうまく実行することから生まれます。
覚えておいてください：Claudeは並外れたクリエイティブな作業が可能です。遠慮せず、型にはまらない考え方と特徴的なビジョンに完全にコミットすることで、本当に何が創造できるかを示してください。