/frontend-design スキル
独自性のある、AI臭くないフロントエンドUIを生成します。
使用方法
/frontend-design ログインフォーム
/frontend-design ダッシュボード --style minimal
/frontend-design 商品カード --style bold
AI臭いデザインを避ける原則
❌ 避けるべきパターン
-
グラデーション乱用
- 紫→青→ピンクの派手なグラデーション
- 背景全体にグラデーション
-
過剰な装飾
- 無意味なアイコン配置
- 過剰なシャドウとボーダー
- ネオン風のグロー効果
-
テンプレート感
- Hero + 3カラム + CTA の定型レイアウト
- 「Welcome to...」「Get Started」などの定型文
- ストックフォト風のイラスト配置
-
一貫性のなさ
- 余白のバラつき
- フォントサイズの乱用
- カラーの統一感なし
✅ 採用すべきアプローチ
-
制約のあるカラーパレット
- 最大3色（プライマリ、アクセント、グレースケール）
- 彩度を抑えた落ち着いた色使い
-
意図的な余白
- 8px グリッドシステム
- コンテンツに呼吸を持たせる
-
タイポグラフィの階層
- 明確なサイズ階層（3-4段階）
- ウェイトのコントラスト
-
機能的な装飾のみ
- 意味のあるアイコン
- 状態を示すシャドウ
デザインスタイル
Minimal（ミニマル）
特徴: 余白重視、モノトーン基調、細いボーダー
用途: SaaS、ダッシュボード、管理画面
Bold（ボールド）
特徴: 大きなタイポグラフィ、コントラスト強め、ダークモード
用途: LP、ポートフォリオ、メディアサイト
Soft（ソフト）
特徴: 丸み、パステル調、アニメーション控えめ
用途: ヘルスケア、教育、子供向け
Corporate（コーポレート）
特徴: 信頼感、整列、控えめなアクセント
用途: 企業サイト、B2B、金融
カラーシステム
Minimal パレット
--bg: #fafafa;
--surface: #ffffff;
--text-primary: #18181b;
--text-secondary: #71717a;
--border: #e4e4e7;
--accent: #18181b;
Bold パレット
--bg: #09090b;
--surface: #18181b;
--text-primary: #fafafa;
--text-secondary: #a1a1aa;
--border: #27272a;
--accent: #fafafa;
Soft パレット
--bg: #fef7f0;
--surface: #ffffff;
--text-primary: #44403c;
--text-secondary: #78716c;
--border: #f5f5f4;
--accent: #ea580c;
コンポーネントライブラリ
ボタン
<!-- Primary -->
<button class="px-4 py-2.5 bg-zinc-900 text-white text-sm font-medium rounded-lg hover:bg-zinc-800 transition-colors">
続ける
</button>
<!-- Secondary -->
<button class="px-4 py-2.5 bg-white text-zinc-900 text-sm font-medium rounded-lg border border-zinc-200 hover:bg-zinc-50 transition-colors">
キャンセル
</button>
<!-- Ghost -->
<button class="px-4 py-2.5 text-zinc-600 text-sm font-medium rounded-lg hover:bg-zinc-100 transition-colors">
詳細を見る
</button>
入力フィールド
<div class="space-y-1.5">
<label class="block text-sm font-medium text-zinc-700">メールアドレス</label>
<input type="email"
class="w-full px-3.5 py-2.5 text-sm bg-white border border-zinc-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-zinc-900 focus:ring-offset-1 placeholder:text-zinc-400"
placeholder="you@example.com">
</div>
カード
<div class="bg-white rounded-xl border border-zinc-200 p-5">
<div class="flex items-start justify-between">
<div>
<h3 class="text-sm font-semibold text-zinc-900">プロジェクト名</h3>
<p class="text-sm text-zinc-500 mt-0.5">最終更新: 2時間前</p>
</div>
<span class="px-2 py-1 text-xs font-medium text-emerald-700 bg-emerald-50 rounded-md">
アクティブ
</span>
</div>
</div>
ナビゲーション
<nav class="flex items-center justify-between px-6 py-4 border-b border-zinc-100">
<div class="flex items-center gap-8">
<span class="text-lg font-semibold text-zinc-900">ロゴ</span>
<div class="flex items-center gap-6">
<a href="#" class="text-sm font-medium text-zinc-900">ホーム</a>
<a href="#" class="text-sm text-zinc-500 hover:text-zinc-900">機能</a>
<a href="#" class="text-sm text-zinc-500 hover:text-zinc-900">料金</a>
</div>
</div>
<button class="px-4 py-2 text-sm font-medium text-white bg-zinc-900 rounded-lg">
始める
</button>
</nav>
モックアップ連携
/frontend-design で生成したコードは /mockup でPNG化できます。
> /frontend-design ログイン画面 --style minimal
[HTMLコード生成]
> /mockup ログイン画面
✅ mockups/login.png を作成しました
実装ガイドライン
1. 構造から始める
まずレイアウトとスペーシングを決定。装飾は最後。
2. 本物のコンテンツを使う
「Lorem ipsum」ではなく、実際のコピーライティングを意識。
3. 状態を考慮する
- Empty state
- Loading state
- Error state
- Success state
4. アクセシビリティ
- 十分なコントラスト比
- フォーカス状態の可視化
- セマンティックHTML
出力例
> /frontend-design ユーザープロフィールカード --style minimal
生成中...
✅ コンポーネント生成完了
📁 出力ファイル:
- components/ProfileCard.tsx
- components/ProfileCard.stories.tsx (Storybook)
🎨 スタイル: Minimal
📐 レスポンシブ: sm, md, lg
♿ アクセシビリティ: WCAG 2.1 AA