frontend-designlisted

# /frontend-design スキル 独自性のある、AI臭くないフロントエンドUIを生成します。 ## 使用方法 ``` /frontend-design ログインフォーム /frontend-design ダッシュボード --style minimal /frontend-design 商品カード --style bold ``` ## AI臭いデザインを避ける原則 ### ❌ 避けるべきパターン 1. **グラデーション乱用** - 紫→青→ピンクの派手なグラデーション - 背景全体にグラデーション 2. **過剰な装飾** - 無意味なアイコン配置 - 過剰なシャドウとボーダー - ネオン風のグロー効果 3. **テンプレート感** - Hero + 3カラム + CTA の定型レイアウト - 「Welcome to...」「Get Started」などの定型文 - ストックフォト風のイラスト配置 4. **一貫性のなさ** - 余白のバラつき - フォントサイズの乱用 - カラーの統一感なし ### ✅ 採用すべきアプローチ 1. **制約のあるカラーパレット** - 最大3色（プライマリ、アクセント、グレースケール） - 彩度を抑えた落ち着いた色使い 2. **意図的な余白** - 8px グリッドシステム - コンテンツに呼吸を持たせる 3. **タイポグラフィの階層** - 明確なサイズ階層（3-4段階） - ウェイトのコントラスト 4. **機能的な装飾のみ** - 意味のあるアイコン - 状態を示すシャドウ --- ## デザインスタイル ### Minimal（ミニマル） ``` 特徴: 余白重視、モノトーン基調、細いボーダー 用途: SaaS、ダッシュボード、管理画面 ``` ### Bold（ボールド） ``` 特徴: 大きなタイポグラフィ、コントラスト強め、ダークモード 用途: LP、ポートフォリオ、メディアサイト ``` ### Soft（ソフト） ``` 特徴: 丸み、パステル調、アニメーション控えめ 用途: ヘルスケア、教育、子供向け ``` ### Corporate（コーポレート） ``` 特徴: 信頼感、整列、控えめなアクセント 用途: 企業サイト、B2B、金融 ``` --- ## カラーシステム ### Minimal パレット ```css --bg: #fafafa; --surface: #ffffff; --text-primary: #18181b; --text-secondary: #71717a; --border: #e4e4e7; --accent: #18181b; ``` ### Bold パレット ```css --bg: #09090b; --surface: #18181b; --text-primary: #fafafa; --text-secondary: #a1a1aa; --border: #27272a; --accent: #fafafa; ``` ### Soft パレット ```css --bg: #fef7f0; --surface: #ffffff; --text-primary: #44403c; --text-secondary: #78716c; --border: #f5f5f4