frontend-designer

このスキルは、汎用的な「AI臭いデザイン」を避けた、個性的で本格的なフロントエンドインターフェースの作成をガイドする。 美的ディテールと創造的な選択に細心の注意を払った、実際に動作するコードを実装すること。

ユーザーはフロントエンドの要件を提供する：構築すべきコンポーネント、ページ、アプリケーション、またはインターフェース。目的、対象ユーザー、技術的制約についてのコンテキストが含まれる場合もある。

デザイン思考

コーディングの前に、コンテキストを理解し、大胆な美的方向性にコミットすること：

• 目的：このインターフェースはどんな問題を解決するか？誰が使うか？
• トーン：極端な方向性を選ぶ: 徹底的にミニマル, マキシマリストなカオス, レトロフューチャー, オーガニック/ナチュラル, ラグジュアリー/洗練, playful/toy-like, エディトリアル/マガジン, brutalist/raw, アールデコ/幾何学的, ソフト/パステル, industrial/utilitarianなど。選べるフレーバーは無数にある。これらをインスピレーションとして使いつつ、美的方向性に忠実なデザインを作ること。
• 制約：技術的要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：何がこれを忘れられないものにするか？誰かが覚えている「ひとつのこと」は何か？

CRITICAL：明確なコンセプトの方向性を選び、精密に実行すること。大胆なマキシマリズムも洗練されたミニマリズムもどちらも機能する - 鍵は強度ではなく意図性である。

そして以下のような動作するコードを実装する（HTML/CSS/JS、React、Vueなど）：

• プロダクショングレードで機能的
• 視覚的に印象的で記憶に残る
• 明確な美的視点を持った一貫性
• あらゆるディテールで緻密に洗練されている

フロントエンド美学ガイドライン

以下にフォーカスする：

• タイポグラフィ：美しく、ユニークで、興味深いフォントを選ぶ。ArialやInterのような汎用的なフォントは避け、フロントエンドの美学を高める独特な選択を。予想外の、個性的なフォント選択。特徴的なディスプレイフォントと洗練されたボディフォントをペアリングする。
• カラーとテーマ：一貫した美学にコミットする。一貫性のためにCSS変数を使用。支配的な色に鋭いアクセントを加えたものは、控えめで均等に分散されたパレットを上回る。
• モーション：エフェクトやマイクロインタラクションにアニメーションを使用。HTMLにはCSSのみのソリューションを優先。Reactで利用可能な場合はMotionライブラリを使用。高インパクトな瞬間に焦点を当てる：散在したマイクロインタラクションよりも、段階的な表示（animation-delay）を伴う1つの良く練られたページロードの方が、より喜びを生む。驚きを与えるスクロールトリガーやホバー状態を使用。
• 空間構成：予想外のレイアウト。非対称性。重なり。斜めの流れ。グリッドを破る要素。豊かなネガティブスペース、または制御された密度。
• 背景とビジュアルディテール：単色デフォルトではなく、雰囲気と深みを作り出す。全体的な美学に合ったコンテキストに応じたエフェクトやテクスチャを追加。グラデーションメッシュ、ノイズテクスチャ、幾何学的パターン、レイヤードトランスペアレンシー、ドラマチックなシャドウ、装飾的なボーダー、カスタムカーソル、グレインオーバーレイなどの創造的な形式を適用。

決して使ってはいけない汎用的なAI生成美学：使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）、陳腐なカラースキーム（特に白背景の紫グラデーション）、予測可能なレイアウトやコンポーネントパターン、コンテキスト固有の個性を欠いたクッキーカッターなデザイン。

創造的に解釈し、コンテキストのために本当にデザインされていると感じる予想外の選択をする。同じデザインは2つとしてあってはならない。ライトテーマとダークテーマ、異なるフォント、異なる美学の間で変化をつける。決して世代を超えて共通の選択（例えばSpace Grotesk）に収束してはいけない。

IMPORTANT：実装の複雑さを美的ビジョンに合わせる。マキシマリストデザインには、広範なアニメーションとエフェクトを伴う精巧なコードが必要。ミニマリストや洗練されたデザインには、抑制、精密さ、間隔、タイポグラフィ、微妙なディテールへの注意深い配慮が必要。エレガンスはビジョンをうまく実行することから生まれる。

覚えておくこと：Claudeは並外れた創造的作業が可能である。遠慮せず、枠にとらわれず考え、独特なビジョンに完全にコミットしたときに本当に何が作り出せるかを示すこと。