frontend-design

フロントエンドデザイン

このスキルは、ありきたりな「AI っぽさ」を避け、独自性のある本番品質のフロントエンドインターフェースを作成するためのものです。美的な細部と創造的な選択に細心の注意を払い、実際に動作するコードを実装してください。

このスキルを使う場面

ユーザーから、Web コンポーネント、ページ、成果物、ポスター、アプリケーションの作成を依頼されたときに使います。例：

• Web サイトやランディングページ
• ダッシュボードやデータビジュアライゼーション
• React コンポーネントや HTML/CSS レイアウト
• Web UI のスタイリングや見栄えの改善

デザイン哲学

コーディングを始める前に、背景を理解し、大胆な美的方向性を定めてください。

目的：このインターフェースはどのような問題を解決しますか？誰が使いますか？

トーン：極端な美的方向性を選びます。

• 徹底したミニマリズム
• マキシマリストなカオス
• レトロフューチャー
• オーガニック／ナチュラル
• ラグジュアリー／洗練
• 遊び心のあるおもちゃのようなデザイン
• エディトリアル／雑誌風
• ブルータリスト／生々しさ
• アールデコ／幾何学的
• ソフト／パステル
• インダストリアル／実用本位

重要なルール

ありきたりな AI 生成風のデザインは絶対に使わないでください。

• ❌ 使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）
• ❌ ありきたりな配色（特に白い背景に紫のグラデーション）
• ❌ 予測可能なレイアウトやコンポーネントのパターン
• ❌ 文脈に即した個性のない、型にはまったデザイン
• ❌ Space Grotesk など、他と似通ったフォントの選択

必ず実践すること：

• ✅ 創造的に解釈し、意外性のある選択をする
• ✅ その文脈のために本当にデザインされたと感じられるものにする
• ✅ ライトテーマとダークテーマを使い分ける
• ✅ プロジェクトごとに異なるフォントを使う
• ✅ 多様な美的表現を採用し、同じデザインを繰り返さない

実装ガイドライン

実装の複雑さを美的ビジョンに合わせる：

• マキシマリストなデザインには、凝ったコードと豊富なアニメーションやエフェクトが必要です
• ミニマリストまたは洗練されたデザインでは、余白、タイポグラフィ、繊細な細部を慎重に扱い、節度と精度を保つ必要があります
• エレガンスは、ビジョンを適切に実現することで生まれます

技術基準：

• 本番品質のコードを書く
• 実際に動作する機能を実装する
• 美的な細部に細心の注意を払う
• 創造的で大胆な選択をする
• レスポンシブデザインにする
• パフォーマンスを最適化する

例

ミニマリストな金融ダッシュボード：

• 等幅フォント（JetBrains Mono）
• アクセントカラーを1色だけ使ったグレースケールの配色
• 精密な余白と配置
• 控えめなマイクロインタラクション

マキシマリストなクリエイティブポートフォリオ：

• 大胆なディスプレイフォント（可変フォント）
• 鮮やかでぶつかり合う配色
• レイヤー化されたアニメーションとパララックス
• 型破りなグリッドレイアウト

ブルータリストな SaaS ランディングページ：

• 思いがけないサイズで使う飾り気のないシステムフォント
• コントラストの強い黒／白／赤
• 非対称のレイアウト
• 鋭いエッジと太い境界線