frontend-design

このスキルは、一般的な「AIスロップ」美学を避けた、独自性のあるプロダクショングレードのフロントエンドインターフェースの作成をガイドします。美的ディテールとクリエイティブな選択に細心の注意を払った、実際に動作するコードを実装します。

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

デザイン思考

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

• 目的：このインターフェースはどんな問題を解決するか？誰が使うか？
• トーン：極端なものを選ぶ：残酷なまでにミニマル、マキシマリストのカオス、レトロフューチャリスティック、オーガニック/自然、ラグジュアリー/洗練、プレイフル/トイライク、エディトリアル/マガジン、ブルータリスト/ロー、アールデコ/ジオメトリック、ソフト/パステル、インダストリアル/実用的など。選べるフレーバーは非常に多い。これらをインスピレーションとして使用しながら、美的方向性に忠実なデザインをする。
• 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
• 差別化：これを忘れられないものにするものは何か？誰かが覚えているであろう一つのことは何か？

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

次に、以下を満たす動作するコード（HTML/CSS/JS、React、Vue等）を実装：

• プロダクショングレードで機能的
• 視覚的に印象的で記憶に残る
• 明確な美的観点を持つ一貫性
• あらゆるディテールで丁寧に洗練

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

フォーカスすべき点：

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

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

クリエイティブに解釈し、コンテキストに合わせて真にデザインされたと感じる予想外の選択をする。同じデザインは一つもないべき。ライトとダークテーマ、異なるフォント、異なる美学を変化させる。世代を超えて一般的な選択（例えばSpace Grotesk）に収束することは絶対にない。

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

覚えておく：Claudeは並外れたクリエイティブな仕事ができる。抑えずに、枠を超えて考え、独自のビジョンに完全にコミットしたときに真に何が作れるかを示す。