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