デザインシステム — ビジュアルシステムの生成と監査
使用するタイミング
- デザインシステムが必要な新規プロジェクトを始めるとき
- 既存コードベースの視覚的一貫性を監査するとき
- リデザイン前の現状把握が必要なとき
- 「なんとなく見た目がおかしい」が特定できないとき
- スタイリングに触れる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の評価軸でUIをスコアリング（各0〜10点）。
1. 色の一貫性 — パレットを使っているか、それともランダムなhex値か？
2. タイポグラフィ階層 — h1 > h2 > h3 > body > captionが明確か？
3. スペーシングリズム — 一貫したスケール（4px/8px/16px）か、それとも任意か？
4. コンポーネントの一貫性 — 似た要素は同じ見た目か？
5. レスポンシブ動作 — ブレークポイントで滑らかか、それとも崩れるか？
6. ダークモード — 完全対応か、中途半端か？
7. アニメーション — 意図的か、無駄か？
8. アクセシビリティ — コントラスト比、フォーカス状態、タッチターゲット
9. 情報密度 — ごちゃごちゃしているか、整理されているか？
10. 磨き込み — ホバー状態、トランジション、ローディング状態、空の状態
各評価軸にスコア、具体例、修正すべきファイル:行数が提示されます。
モード 3: AIスロップ検出
AIにありがちな汎用的なデザインパターンを識別します。
- いたずらに多用されたグラデーション
- 紫から青へのデフォルトカラー
- 目的のない「ガラスモーフィズム」カード
- 丸めるべきでない部分の角丸
- スクロールに合わせた過剰なアニメーション
- ストックグラデーションを背景に中央寄せテキストの汎用ヒーロー
- 個性のないサンセリフフォントスタック
使用例
SaaSアプリ向けに生成:
/design-system generate --style minimal --palette earth-tones
既存UIを監査:
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
AIスロップをチェック:
/design-system slop-check