name: design-system-builder
プロジェクトのデザインシステムをゼロから構築し、運用可能な状態まで立ち上げるスキル。
「デザインシステムを作って」「デザイントークンを定義して」「コンポーネントライブラリを構築して」「UIの一貫性を確保したい」
Phase 1: Discovery(現状把握)
Phase 2: Token Definition(トークン定義)
Phase 3: Token Export(CSS/Tailwind/JSON出力)
Phase 4: Component Scaffold(コンポーネント生成)
Phase 5: Storybook Integration(カタログ化)
Phase 6: Documentation(ドキュメント生成)
Phase 7: Governance(変更管理・lint)
ユーザーと対話しながら各フェーズを進める。フェーズはスキップ可能。
プロジェクトの技術スタックと既存のデザイン状態を自動検出する。
以下を自動調査:
package.json → React / Vue / Svelte / Angular / Next.js / Nuxt 等tailwind.config.* → Tailwind CSS バージョン・既存テーマpostcss.config.* → PostCSS プラグインtsconfig.json → TypeScript 有無.storybook/ → Storybook 既存設定src/components/ or components/ → 既存コンポーネント構成検出結果をユーザーに提示:
## プロジェクト分析結果
- **フレームワーク**: Next.js 15 + React 19
- **スタイリング**: Tailwind CSS v4
- **UI ライブラリ**: shadcn/ui (部分導入)
- **TypeScript**: あり
- **Storybook**: 未導入
- **既存カラー**: 12色がハードコード(#3B82F6 が 47箇所で使用)
- **既存spacing**: rem/px 混在(統一されていない)
### 推奨アプローチ
1. 既存ハードコード値をトークン化
2. Tailwind テーマとして統合
3. shadcn/ui のテーマ変数と接続
ユーザーに方針を確認してから次のフェーズへ進む。
Primitive Tokens(生の値)
└→ Semantic Tokens(意味ベース)
└→ Component Tokens(コンポーネント固有)
ユーザーに質問して定義を進める:
カラー:
タイポグラフィ:
スペーシング:
その他:
定義内容を JSON (W3C Design Token Format) で出力:
design-tokens/
primitive/
colors.json # 生の色値
typography.json # フォント・サイズ
spacing.json # スペーシング値
radii.json # 角丸
shadows.json # シャドウ
semantic/
colors.json # brand, surface, text, status
typography.json # heading, body, caption
spacing.json # gap, padding, margin
component/
button.json # ボタン固有トークン
input.json # 入力フィールド固有
card.json # カード固有
検出したスタックに応じて適切なフォーマットで出力。
CSS カスタムプロパティのテンプレート: references/template-css-tokens.css
Primitive → Semantic → dark mode の3層でトークンを CSS 変数として定義する。
Tailwind v3/v4 および shadcn/ui への統合テンプレート: references/template-tailwind-integration.md
@theme ディレクティブを使用tailwind.config.ts の extend を使用ユーザーに必要なコンポーネントを確認。デフォルト推奨セット:
Primitives(基本要素):
Composites(複合要素):
Layout:
各コンポーネントは以下の構成で生成:
components/
ui/
button/
button.tsx # コンポーネント本体
button.variants.ts # cva() によるバリアント定義
button.test.tsx # ユニットテスト
index.ts # re-export
バリアント定義は class-variance-authority (cva) を使用。テンプレート: references/template-button-variants.ts
全コンポーネントに必須:
:focus-visible で制御、:focus は使わない)prefers-reduced-motion 対応未導入の場合:
npx storybook@latest init
各コンポーネントに対応する .stories.tsx を生成。テンプレート: references/template-button-story.tsx
Storybook 内にデザイントークンの可視化ページを生成:
docs/design-system/
README.md # 概要・導入ガイド
tokens.md # トークン一覧・命名規則
components.md # コンポーネントカタログ(使い方・Do/Don't)
patterns.md # UIパターン集(フォーム、ナビゲーション等)
contributing.md # コントリビューションガイド
changelog.md # 変更履歴
各コ