設計系統
代幣架構、元件規格、系統化設計、簡報生成。
使用時機
- 設計代幣建立
- 元件狀態定義
- CSS 變數系統
- 間距/排版比例
- 設計轉程式碼交接
- Tailwind 主題配置
- 簡報/演示文稿生成
代幣架構
載入：references/token-architecture.md
三層結構
基礎（原始數值）
↓
語意（用途別名）
↓
元件（元件專用）
範例：
/* 基礎 */
--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 |
元件規格模式
| 屬性 | 預設 | 懸停 | 啟用 | 停用 |
|---|---|---|---|---|
| 背景色 | 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 | 含三層結構的入門 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 "行動呼籲" --context --position 9 --prev-emotion frustration
決策系統 CSV
| 檔案 | 用途 |
|---|---|
data/slide-strategies.csv | 15 種簡報結構 + 情感弧線 + 微亮點節奏 |
data/slide-layouts.csv | 25 種版面 + 元件變體 + 動畫 |
data/slide-layout-logic.csv | 目標 → 版面 + 打破模式標記 |
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 | 25 種圖表類型及 Chart.js 配置 |
上下文決策流程
1. 解析目標/上下文
↓
2. 查詢 slide-strategies.csv → 取得策略 + 情感節奏
↓
3. 針對每張投影片：
a. 查詢 slide-layout-logic.csv → 版面 + 打破模式
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 微亮點）
高級簡報在情緒之間交替以保持參與度：
「現狀」（挫折）↔「可能願景」（希望）
系統會在 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: ['九月', '十月', '十一月', '十二月'],
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 頁投資者簡報"
最佳實踐
- 絕不在元件中使用原始十六進位值 - 一律參考代幣
- 語意層支援主題切換（淺色/深色）
- 元件代幣支援每個元件的自訂
- 使用 HSL 格式以控制透明度
- 記錄每個代幣的用途
- 簡報必須匯入 design-tokens.css 並僅使用 var()