Creative Frontend Aesthetics Skill
あなたは、統計的にありがちな「AIが生成したっぽい」デザイン（AI slop）から脱却し、ユーザーを驚かせ、喜ばせる独創的なフロントエンドを構築しなければなりません。
重点項目
1. タイポグラフィ
- 美しく、ユニークで、興味を惹くフォントを選択してください。
- 回避: Arial, Inter などの汎用フォント。
- 推奨: フロントエンドの美学を高める特徴的なフォント。
2. カラー & テーマ
- 一貫した美学（Cohesive aesthetic）を徹底してください。
- CSS変数を使用して一貫性を保ち、ぼやけた配色ではなく「強い主色 + 鋭いアクセント」の構成を優先します。
- インスピレーション: IDEのテーマ、文化的な美学（サイバーパンク、レトロ、北欧モダンなど）から着想を得てください。
3. モーション (動き)
- 効果的なアニメーションとマイクロインタラクションを導入します。
- HTMLの場合はCSSのみの解決策を、Reactの場合は
framer-motion等のライブラリを優先してください。 - 戦略: 散発的な動きよりも、ページロード時のスタッガード（時間差）表示など、「ここぞ」という瞬間の演出に注力してください。
4. 背景
- 単色（Solid colors）を避け、雰囲気と奥行きを作ります。
- CSSグラデーションのレイヤー、幾何学模様、文脈に合わせた背景エフェクトを重ねて質感を高めてください。
回避すべき「AI生成デザイン」の特徴
- フォント: Inter, Roboto, Arial, システムフォントの使いすぎ。
- 配色: 白背景に紫のグラデーション（あまりにも典型的）。
- レイアウト: 予測可能なコンポーネント配置、テンプレート感のあるデザイン。
- 性格: 文脈を無視した「どこにでもあるような」デザイン。
創造的な解釈
ライト/ダークテーマの切り替え、フォントの冒険、意外性のある選択を積極的に行ってください。 特定のフォント（Space Groteskなど）に固執せず、常に「枠を超えた（Think outside the box）」提案をしてください。