creative-frontend-aesthetics

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）」提案をしてください。