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