デザインシステム — ビジュアルシステムの生成とレビュー

ユースケース

• デザインシステムが必要な新規プロジェクトを開始する
• 既存コードベースのビジュアル一貫性をレビューする
• リデザイン前に現状を把握する
• UIが「なんか変」に見えるが原因が特定できない場合
• スタイル変更を含むPRをレビューする

仕組み

パターン1：デザインシステムを生成

コードベースを分析し、統一されたデザインシステムを生成します：

1. CSS/Tailwind/styled-components をスキャンして既存パターンを検出
2. 抽出：色、タイポグラフィ、間隔、ボーダー半径、シャドウ、ブレークポイント
3. 3つの競合他社ウェブサイトを調査してインスピレーションを得る（ブラウザ MCP経由）
4. デザイントークンのセット（JSON + CSS カスタムプロパティ）を提案
5. DESIGN.md を生成し、各決定の理由を説明
6. インタラクティブな HTML プレビューページを作成（自己完結型、依存関係なし）

出力：DESIGN.md + design-tokens.json + design-preview.html

パターン2：ビジュアル監査

10個の観点からインターフェースをスコア化（各項目0-10点）：

1. 色彩一貫性 — 独自のカラーパレットを使用しているか、それともランダムな16進数値か？
2. タイポグラフィ階層 — h1 > h2 > h3 > 本文 > キャプション に明確な階層があるか？
3. 間隔のリズム — 一貫したスケール(4px/8px/16px)か、それともランダムか？
4. コンポーネント一貫性 — 似た要素は似て見えるか？
5. レスポンシブ動作 — ブレークポイントでスムーズか、混乱しているか？
6. ダークモード — 完全に実装されているか、それとも未完成か？
7. アニメーション — 目的があるか、それとも余分か？
8. アクセシビリティ — コントラスト、フォーカス状態、タッチターゲット
9. 情報密度 — ごちゃごちゃしているか、それとも整理されているか？
10. 細部の仕上げ — ホバー状態、トランジション、ローディング状態、空状態

各観点にはスコア、具体的な例、正確なファイル:行番号を含む修正案が付与されます。

パターン3：AI生成コンテンツ検出

一般的なAI生成デザインパターンを識別します：

- グラデーションの過度な使用
- デフォルトの紫青配色
- 無意味な「ガラスモーフィズム」カード
- 不要な角丸
- スクロール時の過度なアニメーション
- 中央揃えテキストとデフォルトグラデーションの汎用ヒーローセクション
- 個性のないサンセリフ体の積み重ね

例

SaaSアプリケーション向けにデザインシステムを生成：

/design-system generate --style minimal --palette earth-tones

既存インターフェースをレビュー：

/design-system audit --url http://localhost:3000 --pages / /pricing /docs

AI生成コンテンツを検出：

/design-system slop-check