デザインシステム — ビジュアルシステムの生成と監査
使用タイミング
- デザインシステムが必要な新規プロジェクトの開始時
- 既存コードベースの視覚的一貫性を監査する場合
- リデザイン前の現状把握
- UIが「おかしい」が原因が特定できない場合
- スタイルリングに触れるPRのレビュー時
動作の仕組み
モード1: デザインシステムの生成
コードベースを分析し、一貫性のあるデザインシステムを生成します：
1. 既存のパターンをCSS/Tailwind/styled-componentsからスキャン
2. 抽出：カラー、タイポグラフィ、スペーシング、ボーダー半径、シャドウ、ブレークポイント
3. ブラウザMCP経由で競合サイト3つを調査
4. デザイントークンセット（JSON + CSSカスタムプロパティ）を提案
5. 各決定の根拠を記載したDESIGN.mdを生成
6. インタラクティブなHTMLプレビューページを作成（自己完結型、依存関係なし）
出力：DESIGN.md + design-tokens.json + design-preview.html
モード2: ビジュアル監査
UIを10次元（各0〜10点）でスコアリングします：
1. カラーの一貫性 — パレットを使用しているか、ランダムな16進数値を使っていないか？
2. タイポグラフィの階層 — h1 > h2 > h3 > body > captionが明確か？
3. スペーシングのリズム — 一貫したスケール（4px/8px/16px）か、それとも任意か？
4. コンポーネントの一貫性 — 類似要素が類似して見えるか？
5. レスポンシブ動作 — ブレークポイントで流動的か、壊れているか？
6. ダークモード — 完全実装か、中途半端か？
7. アニメーション — 目的があるか、過剰か？
8. アクセシビリティ — コントラスト比、フォーカス状態、タッチターゲット
9. 情報密度 — ごちゃごちゃしているか、すっきりしているか？
10. 洗練度 — ホバー状態、トランジション、ローディング状態、空の状態
各次元にスコア、具体的な例、およびファイル:行を指定した修正案が含まれます。
モード3: AI Slop検出
一般的なAI生成デザインパターンを特定します：
- すべてに対する過剰なグラデーション
- パープルからブルーへのデフォルト
- 目的のない「ガラスモーフィズム」カード
- 丸くすべきでないものの角丸
- スクロール時の過剰なアニメーション
- ストックグラデーション上の中央テキストによる汎用的なヒーロー
- 個性のないサンセリフフォントスタック
使用例
SaaSアプリ用に生成：
/design-system generate --style minimal --palette earth-tones
既存UIの監査：
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
AI Slopのチェック：
/design-system slop-check