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