creative-design

クリエイティブデザイン

Anthropic の frontend-design スキルをもとにしています

このスキルは、ありきたりな「AI が作ったような」見た目を避け、個性豊かで本番品質のフロントエンドインターフェースを作成するためのガイドです。独創性を発揮する単発の制作物に使用し、標準的なアプリコンポーネントには使用しないでください。

標準的なパターンではなく、こちらを使う場面

creative-design を使う	標準的なパターンを使う
ランディングページ	アプリのダッシュボード
ポートフォリオ作品	CRUD インターフェース
マーケティングサイト	管理パネル
単発のデモ	再利用可能なコンポーネント
「記憶に残るものにする」	「一貫性を持たせる」

shadcn/ui を使った Next.js アプリの場合、明確に独創的なものを求められていない限り、テーマトークンと一貫性のあるパターンを優先してください。

デザインの考え方

コーディングを始める前に、大胆な美的方向性を固めてください。

• 目的：どのような課題を解決しますか？誰が使いますか？
• トーン：極端な方向性を選びます。
  • 徹底的にミニマル
  • 混沌としたマキシマリスト
  • レトロフューチャー
  • オーガニック／ナチュラル
  • ラグジュアリー／洗練
  • 遊び心のある／おもちゃのような
  • エディトリアル／雑誌風
  • ブルータリスト／生々しい
  • アールデコ／幾何学的
  • ソフト／パステル
  • インダストリアル／実用重視
• 差別化：見る人の記憶に残る、たった一つの要素は何ですか？

重要：明確な方向性を選び、精密に表現してください。大胆なマキシマリズムも洗練されたミニマリズムも有効です。大切なのは、意図を持ってデザインすることです。

美的ガイドライン

タイポグラフィ

美しく、個性的で、興味を引くフォントを選んでください。次のフォントは避けてください。

• Arial、Inter、Roboto、システムフォント
• Space Grotesk（AI の出力で使われすぎています）

代わりに、個性のあるディスプレイフォントと洗練された本文フォントを組み合わせてください。無難さよりも個性を重視します。

色とテーマ

• 一貫した美的方向性を貫いてください
• 一貫性を保つため、CSS 変数を使用してください
• 控えめで均等に分散した配色より、支配的な色に鋭いアクセントを組み合わせてください
• 避けること：白地に紫のグラデーション（ありきたりな AI 風の美学）

動き

印象に残る場面に焦点を当ててください。

• 段階的な表示（animation-delay）を取り入れた、よく構成されたページ読み込みアニメーション
• スクロールをきっかけに発生するエフェクト
• 意外性のあるホバー状態

HTML では CSS のみを優先してください。React では、利用できる場合は Motion ライブラリを使用してください。

空間構成

• 意外性のあるレイアウト
• 非対称、重なり、斜めの流れ
• グリッドを崩す要素
• ゆとりある余白、または意図的に制御された密度

背景と質感

単色ではなく、雰囲気を作り出してください。

• グラデーションメッシュ
• ノイズテクスチャ
• 幾何学模様
• 重ね合わせた透明レイヤー
• 印象的な影
• 粒子状のオーバーレイ

アンチパターン

次のようなものは絶対に作らないでください。

• ありきたりなフォントファミリー（Inter、Roboto、Arial）
• 白地に紫のグラデーション
• 予測可能なレイアウト
• 型にはまったコンポーネント
• 同じデザインの使い回し

実装

ビジョンに合わせて複雑さを調整してください。

• マキシマリスト＝凝ったアニメーション、エフェクト、レイヤー
• ミニマリスト＝抑制、精密さ、余白、タイポグラフィ

次の条件を満たす、動作するコード（HTML/CSS/JS、React など）を必ず作成してください。

• 本番品質で、実際に動作する
• 視覚的に印象的で、記憶に残る
• 明確な美的観点を持ち、一貫性がある