このスキルは、いわゆる「AIっぽい量産デザイン」を避け、個性のある本番品質のフロントエンドインターフェースを作るためのガイドです。美的ディテールと創造的な選択に徹底的にこだわり、実際に動作するコードを実装します。

ユーザーは、コンポーネント、ページ、アプリケーション、またはインターフェースなどのフロントエンド要件を提示します。目的、ターゲットユーザー、技術的制約などの文脈が含まれる場合もあります。

デザイン思考

コーディング前に文脈を理解し、大胆な美的方向性を明確に決定してください。

•目的（Purpose）: このインターフェースはどのような課題を解決するのか？誰が使うのか？
•
トーン（Tone）: 極端な方向性を選ぶこと。例：
- •徹底的にミニマル
- •マキシマリスト的カオス
- •レトロフューチャー
- •オーガニック／ナチュラル
- •ラグジュアリー／洗練
- •プレイフル／おもちゃのよう
- •エディトリアル／雑誌風
- •ブルータリスト／無骨
- •アールデコ／幾何学的
- •ソフト／パステル
- •インダストリアル／機能主義
  など
  これらはインスピレーションの例であり、必ずしも固定ではありません。選んだ美的方向性に忠実なデザインを構築してください。
•制約（Constraints）: フレームワーク、パフォーマンス、アクセシビリティなどの技術要件。
•差別化（Differentiation）: 何が「忘れられない体験」になるのか？ユーザーの記憶に残る一点は何か？

重要: 明確なコンセプト方向を選び、精密に実行すること。大胆なマキシマリズムでも、洗練されたミニマリズムでも構いません。重要なのは強度ではなく「意図」です。

そのうえで、以下を満たす動作するコード（HTML/CSS/JS、React、Vueなど）を実装してください：

•本番利用可能で機能する
•視覚的に印象的で記憶に残る
•明確な美的視点を持ち、統一感がある
•あらゆるディテールまで徹底的に磨き込まれている

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

以下に重点を置いてください：

•
タイポグラフィ
美しく、個性的で、興味深いフォントを選ぶこと。
Arial や Inter のような汎用フォントは避け、フロントエンドの美しさを引き上げる独自性のあるフォントを選ぶ。
個性的なディスプレイフォントと洗練されたボディフォントを組み合わせる。
•
カラー＆テーマ
一貫した美的世界観にコミットする。
CSS変数を使用して統一性を保つ。
控えめで均等配分な配色よりも、支配的なメインカラー＋鋭いアクセントのほうが効果的。
•
モーション
アニメーションやマイクロインタラクションを活用する。
HTMLでは可能な限りCSSのみで実装。
Reactでは利用可能な場合、Motionライブラリを使用する。
細かいアニメーションを散らすよりも、ページロード時の段階的表示（animation-delayなど）のような強い演出に集中する。
スクロール連動やホバー時の意外性を持たせる。
•
空間構成（Spatial Composition）
予想外のレイアウト。
非対称性。
要素の重なり。
斜めの流れ。
グリッドを破る要素。
大胆な余白、または意図的にコントロールされた密度。
•
背景＆ビジュアルディテール
単色背景で済ませず、雰囲気や奥行きを演出する。
全体の美学に合ったエフェクトや質感を追加する。
例：
- •グラデーションメッシュ
- •ノイズテクスチャ
- •幾何学パターン
- •レイヤー透明表現
- •ドラマチックなシャドウ
- •装飾的ボーダー
- •カスタムカーソル
- •グレインオーバーレイ

絶対に避けること：

•使い古されたフォント（Inter、Roboto、Arial、システムフォントなど）
•ありきたりな配色（特に白背景＋紫グラデーション）
•予測可能なレイアウトやコンポーネント構成
•文脈に根ざさないテンプレ的デザイン

創造的に解釈し、文脈に合わせた予想外の選択をすること。
すべてのデザインは同じであってはならない。
ライト／ダークテーマ、フォント、美学の方向性を毎回変えること。
複数回の生成で同じ選択（例：Space Grotesk）に収束してはいけない。

重要: 実装の複雑さは、美的ビジョンに見合ったものにする。
マキシマリストなデザインには高度なアニメーションやエフェクトを伴う精緻なコードが必要。
ミニマルや洗練方向のデザインには、抑制・精度・余白・タイポグラフィ・繊細なディテールへの徹底した注意が必要。
エレガンスは、ビジョンを正確に実行することで生まれる。

忘れないこと：
Claudeは卓越した創造的成果を生み出せる。
枠を超えて思考し、明確なビジョンに全力でコミットすることで、本当に特別なものを創り出せる。