デザインシステム
トークンアーキテクチャ、コンポーネント仕様、体系的なデザイン、スライド生成。
使用するタイミング
- デザイントークンの作成
- コンポーネントの状態定義
- CSS変数システム
- スペーシング/タイポグラフィスケール
- デザインからコードへの引き渡し
- Tailwindテーマ設定
- スライド/プレゼンテーション生成
トークンアーキテクチャ
読み込み: references/token-architecture.md
3層構造
プリミティブ (生の値)
↓
セマンティック (目的エイリアス)
↓
コンポーネント (コンポーネント固有)
例:
/* プリミティブ */
--color-blue-600: #2563EB;
/* セマンティック */
--color-primary: var(--color-blue-600);
/* コンポーネント */
--button-bg: var(--color-primary);
クイックスタート
トークンの生成:
node scripts/generate-tokens.cjs --config tokens.json -o tokens.css
使用状況の検証:
node scripts/validate-tokens.cjs --dir src/
リファレンス
| トピック | ファイル |
|---|---|
| トークンアーキテクチャ | references/token-architecture.md |
| プリミティブトークン | references/primitive-tokens.md |
| セマンティックトークン | references/semantic-tokens.md |
| コンポーネントトークン | references/component-tokens.md |
| コンポーネント仕様 | references/component-specs.md |
| 状態とバリアント | references/states-and-variants.md |
| Tailwind統合 | references/tailwind-integration.md |
コンポーネント仕様パターン
| プロパティ | デフォルト | Hover | Active | Disabled |
|---|---|---|---|---|
| 背景 | primary | primary-dark | primary-darker | muted |
| テキスト | white | white | white | muted-fg |
| 境界線 | none | none | none | muted-border |
| 影 | sm | md | none | none |
スクリプト
| スクリプト | 目的 |
|---|---|
generate-tokens.cjs | JSONトークン設定からCSSを生成 |
validate-tokens.cjs | コード内のハードコード値をチェック |
search-slides.py | BM25検索 + コンテキスト推奨 |
slide-token-validator.py | スライドHTMLのトークン準拠を検証 |
fetch-background.py | Pexels/Unsplashから画像を取得 |
テンプレート
| テンプレート | 目的 |
|---|---|
design-tokens-starter.json | 3層構造のスターターJSON |
統合
ブランドと: ブランドカラー/タイポグラフィからプリミティブを抽出 UIスタイリングと: コンポーネントトークン → Tailwind設定
スキル依存関係: brand, ui-styling 主なエージェント: ui-ux-designer, frontend-developer
スライドシステム
デザイントークン + Chart.js + コンテキスト意思決定システムを使用したブランド準拠のプレゼンテーション。
信頼できる情報源
| ファイル | 目的 |
|---|---|
docs/brand-guidelines.md | ブランドアイデンティティ、トーン、カラー |
assets/design-tokens.json | トークン定義（プリミティブ→セマンティック→コンポーネント） |
assets/design-tokens.css | CSS変数（スライドにインポート） |
assets/css/slide-animations.css | CSSアニメーションライブラリ |
スライド検索 (BM25)
# 基本検索（ドメイン自動検出）
python scripts/search-slides.py "投資家向けピッチ"
# ドメイン指定検索
python scripts/search-slides.py "問題のあおり" -d copy
python scripts/search-slides.py "収益成長" -d chart
# コンテキスト検索（プレミアムシステム）
python scripts/search-slides.py "問題スライド" --context --position 2 --total 9
python scripts/search-slides.py "CTA" --context --position 9 --prev-emotion frustration
意思決定システムCSV
| ファイル | 目的 |
|---|---|
data/slide-strategies.csv | 15のデッキ構造 + 感情アーク + スパークラインビート |
data/slide-layouts.csv | 25のレイアウト + コンポーネントバリアント + アニメーション |
data/slide-layout-logic.csv | ゴール → レイアウト + break_patternフラグ |
data/slide-typography.csv | コンテンツタイプ → タイポグラフィスケール |
data/slide-color-logic.csv | 感情 → 色の処理 |
data/slide-backgrounds.csv | スライドタイプ → 画像カテゴリ (Pexels/Unsplash) |
data/slide-copy.csv | 25のコピーライティング公式 (PAS, AIDA, FAB) |
data/slide-charts.csv | Chart.js設定付き25のチャートタイプ |
コンテキスト意思決定フロー
1. 目標/コンテキストを解析
↓
2. slide-strategies.csvを検索 → 戦略 + 感情ビートを取得
↓
3. 各スライドに対して:
a. slide-layout-logic.csvをクエリ → レイアウト + break_pattern
b. slide-typography.csvをクエリ → タイプスケール
c. slide-color-logic.csvをクエリ → 色の処理
d. slide-backgrounds.csvをクエリ → 必要な場合画像
e. slide-animations.cssからアニメーションクラスを適用
↓
4. デザイントークンでHTMLを生成
↓
5. slide-token-validator.pyで検証
パターンブレイク (Duarte Sparkline)
プレミアムデッキはエンゲージメントのために感情を交互に配置:
"現状" (フラストレーション) ↔ "未来像" (希望)
システムは1/3と2/3の位置でパターンブレイクを計算します。
スライド要件
すべてのスライドは以下を必須:
assets/design-tokens.cssをインポート - 単一の情報源- CSS変数を使用:
var(--color-primary),var(--slide-bg)など - チャートにはChart.jsを使用（CSSのみの棒グラフは不可）
- ナビゲーションを含める（キーボード矢印、クリック、進行状況バー）
- コンテンツを中央揃え
- 説得/コンバージョンに焦点を当てる
Chart.js統合
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<canvas id="revenueChart"></canvas>
<script>
new Chart(document.getElementById('revenueChart'), {
type: 'line',
data: {
labels: ['9月', '10月', '11月', '12月'],
datasets: [{
data: [5, 12, 28, 45],
borderColor: '#FF6B6B', // ブランドコーラルを使用
backgroundColor: 'rgba(255, 107, 107, 0.1)',
fill: true,
tension: 0.4
}]
}
});
</script>
トークン準拠
/* 正しい - トークンを使用 */
background: var(--slide-bg);
color: var(--color-primary);
font-family: var(--typography-font-heading);
/* 間違い - ハードコード */
background: #0D0D0D;
color: #FF6B6B;
font-family: 'Space Grotesk';
リファレンス実装
すべての機能を備えた動作例:
assets/designs/slides/claudekit-pitch-251223.html
コマンド
/slides:create "ClaudeKitマーケティング向け10スライドの投資家ピッチ"
ベストプラクティス
- コンポーネントで生の16進数を使用しない - 常にトークンを参照
- セマンティックレイヤーによりテーマ切り替え（ライト/ダーク）が可能
- コンポーネントトークンによりコンポーネントごとのカスタマイズが可能
- 不透明度制御にはHSL形式を使用
- すべてのトークンの目的を文書化
- スライドはdesign-tokens.cssをインポートし、var()のみを使用すること