design-system

デザインシステム

トークンアーキテクチャ、コンポーネント仕様、体系的なデザイン、スライド生成。

使用するタイミング

• デザイントークンの作成
• コンポーネントの状態定義
• CSS 変数システム
• 余白／タイポグラフィのスケール
• デザインからコードへの引き継ぎ
• Tailwind テーマの設定
• スライド／プレゼンテーションの生成

トークンアーキテクチャ

読み込み先：references/token-architecture.md

3 層構造

Primitive (raw values)
       ↓
Semantic (purpose aliases)
       ↓
Component (component-specific)

例：

/* Primitive */
--color-blue-600: #2563EB;

/* Semantic */
--color-primary: var(--color-blue-600);

/* Component */
--button-bg: var(--color-primary);

スクリプトのパス

このスキルとその references/ 内のスクリプトパスは、プロジェクトではなく、この SKILL.md を含むディレクトリを基準とします。scripts/<file> はこのスキル専用の scripts/ フォルダーを指し、../<skill>/scripts/<file> は隣接してインストールされたサブスキルのフォルダーを指します。このディレクトリを基準にフルパスを組み立て、作業ディレクトリはプロジェクトのルートにします（スキルの読み込み時に Claude Code がスキルのベースディレクトリとして報告します）。スクリプトは docs/brand-guidelines.md、assets/design-tokens.json、src/ などのプロジェクトファイルを相対パスで読み書きします。

クイックスタート

トークンの生成：

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

コンポーネント仕様のパターン

プロパティ	デフォルト	ホバー	アクティブ	無効
背景	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-styling との連携： コンポーネントトークン → 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）

# Basic search (auto-detect domain)
python scripts/search-slides.py "investor pitch"

# Domain-specific search
python scripts/search-slides.py "problem agitation" -d copy
python scripts/search-slides.py "revenue growth" -d chart

# Contextual search (Premium System)
python scripts/search-slides.py "problem slide" --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. Parse goal/context
        ↓
2. Search slide-strategies.csv → Get strategy + emotion beats
        ↓
3. For each slide:
   a. Query slide-layout-logic.csv → layout + break_pattern
   b. Query slide-typography.csv → type scale
   c. Query slide-color-logic.csv → color treatment
   d. Query slide-backgrounds.csv → image if needed
   e. Apply animation class from slide-animations.css
        ↓
4. Generate HTML with design tokens
        ↓
5. Validate with slide-token-validator.py

パターンの変化（Duarte スパークライン）

プレミアムなデッキでは、エンゲージメントを高めるために感情を交互に切り替えます。

"What Is" (frustration) ↔ "What Could Be" (hope)

システムは、全体の 1/3 と 2/3 の位置でパターンの変化を計算します。

スライドの要件

すべてのスライドで必須：

1. assets/design-tokens.cssをインポートする――唯一の信頼できる情報源です
2. CSS変数を使用する：var(--color-primary)、var(--slide-bg)など
3. グラフにはChart.jsを使用する（CSSのみの棒グラフは不可）
4. ナビゲーション（キーボードの矢印キー、クリック、プログレスバー）を含める
5. コンテンツを中央揃えにする
6. 説得とコンバージョンに重点を置く

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: ['Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [{
            data: [5, 12, 28, 45],
            borderColor: '#FF6B6B',  // Use brand coral
            backgroundColor: 'rgba(255, 107, 107, 0.1)',
            fill: true,
            tension: 0.4
        }]
    }
});
</script>

トークンへの準拠

/* CORRECT - uses token */
background: var(--slide-bg);
color: var(--color-primary);
font-family: var(--typography-font-heading);

/* WRONG - hardcoded */
background: #0D0D0D;
color: #FF6B6B;
font-family: 'Space Grotesk';

参照実装

すべての機能を備えた動作例：

assets/designs/slides/claudekit-pitch-251223.html

コマンド

/slides:create "10-slide investor pitch for ClaudeKit Marketing"

ベストプラクティス

1. コンポーネントで生の16進数カラーコードは使わず、必ずトークンを参照する
2. セマンティックレイヤーにより、テーマを切り替えられます（ライト／ダーク）
3. コンポーネントトークンにより、コンポーネントごとにカスタマイズできます
4. 透明度の制御にはHSL形式を使用する
5. すべてのトークンの用途を記載する
6. スライドではdesign-tokens.cssをインポートし、var()のみを使用する