@xulthekl/team-flow 0.22.4

package/skills/design-system/references/creation-flow.md

@@ -0,0 +1,170 @@
+# 交互创建流程（Creation Flow）
+
+设计系统创建的 6 步详细规程。**用户主导**：LLM 预填推荐值 + 报告选择原因，用户原样确认或调整。
+**确定性**：相同的 5 维输入永远派生出相同的 token 体系（rule-based，非随机）。
+
+> Token 四层模型（A1-identity / A1-structure / A2-derived / B-slot）+ C-extension 名单制，
+> 与 prototype skill 的 `design-token-guard.mjs` 共享同一完整性约束。
+
+---
+
+## Step 1: 需求收集（5 维封闭词汇）
+
+用 **AskUserQuestion** 一次性收集 5 个维度。每个问题预填 LLM 推荐默认值，并附「为什么推荐这个」。
+用户可原样确认，也可改成封闭词汇内的其它值。**封闭词汇外的自由输入 → 追问澄清，不猜测。**
+
+### 维度 1：品牌调性（mood）— 决定调色板方向
+
+| 值 | 含义 | 适配场景 |
+|----|------|---------|
+| `professional_minimal` | 专业克制 | B 端 SaaS、企业后台、金融/数据平台（**默认**） |
+| `warm_approachable` | 温暖亲和 | C 端生活/教育/健康、社区产品 |
+| `technical_dense` | 技术密集 | 开发者工具、监控/运维、IDE 类 |
+| `editorial` | 编辑排版 | 内容/媒体/阅读类、品牌官网 |
+| `brutalist` | 粗野主义 | 实验性/艺术/独立产品、强个性品牌 |
+
+### 维度 2：品牌主色（brand_color）
+
+- 用户给具体 `#RRGGBB` → 直接采用为 `--accent`。
+- 用户答「帮我选」/未给 → 按 mood 取映射表的 accent（见 Step 2 表），并记入透明报告。
+- 非法 hex（非 6 位、非 hex 字符）→ 追问「你是指 #RRGGBB 格式吗？」。
+
+### 维度 3：展示字体（display_font）— 决定 `--font-display`
+
+| 值 | font-display 栈 | 默认配 mood |
+|----|----------------|------------|
+| `serif_display` | `'Iowan Old Style', Charter, Georgia, serif` | editorial |
+| `sans_display` | `-apple-system, 'Segoe UI', system-ui, sans-serif` | professional_minimal / warm_approachable / brutalist（**全局默认**） |
+| `mono_accent` | `'SF Mono', 'JetBrains Mono', ui-monospace, monospace` | technical_dense |
+
+> `--font-body` 恒定 `-apple-system, 'Segoe UI', system-ui, sans-serif`（A1-identity 必选）；
+> `--font-mono` 属 A2-derived，按代码场景派生。零外部依赖：只用系统字体栈，不引 webfont。
+
+### 维度 4：信息密度（density）— 决定 spacing/typography 变体
+
+| 值 | 基准间距 `--space-4` | 行高 | 字号基准 | 默认配 |
+|----|---------------------|------|---------|--------|
+| `compact` | 12px | 1.4 | 14px | technical_dense |
+| `balanced` | 16px | 1.5 | 16px | professional_minimal（**全局默认**） |
+| `spacious` | 20px | 1.65 | 17px | warm_approachable / editorial |
+
+### 维度 5：目标端（target）— 决定产出几个变体文件
+
+| 值 | 产出 |
+|----|------|
+| `b_end` | base.md + b-end.md |
+| `c_end` | base.md + c-end.md |
+| `both` | base.md + b-end.md + c-end.md（**默认**，覆盖最广） |
+
+---
+
+## Step 2: 确定性 Token 派生
+
+### Mood → 调色板映射表（确定性，同 mood 同色）
+
+| mood | accent（品牌主色 `--accent`） | neutral 锚点（ink `--fg` 基调） |
+|------|------------------------------|--------------------------------|
+| `professional_minimal` | `#3B82F6`（blue） | `#64748B`（slate） |
+| `warm_approachable` | `#C96442`（terracotta） | `#D97706`（amber） |
+| `technical_dense` | `#0891B2`（cyan） | `#059669`（emerald） |
+| `editorial` | `#1A1916`（ink） | `#6B6964`（stone） |
+| `brutalist` | `#DC2626`（red） | `#000000`（black） |
+
+- 用户给了 brand_color → 覆盖表中 accent，neutral 锚点仍按 mood 取。
+- 派生顺序：**palette first** → A1-identity → A2-derived → B-slot。
+- 5 方向调色板（neutral / primary / success / warning / danger）各派生 50–900 阶梯；
+  primary 阶梯以 accent 为 500 锚点向两端推。具体公式见 `token-derivation.md`。
+
+### A1-identity（8 必选，缺 = guard 失败）
+`--bg` `--surface` `--fg` `--muted` `--border` `--accent` `--font-display` `--font-body`
+
+### A2-derived（color-mix 公式派生，不手写固定 hex）
+```
+--accent-hover:  color-mix(in oklab, var(--accent), black 8%)
+--accent-active: color-mix(in oklab, var(--accent), black 14%)
+--focus-ring:    color-mix(in oklab, var(--accent), transparent 70%)
+--elev-raised:   color-mix(in oklab, var(--fg), transparent 92%)
+```
+另含 `--success` `--warn` `--danger` `--font-mono` `--space-1~12` `--radius-sm/md/lg/pill`
+`--motion-fast/base` `--ease-standard`。
+
+### B-slot（4 别名，组件引用永远可解析）
+`--fg-2 → var(--fg)` / `--meta → var(--muted)` / `--border-soft → var(--border)` / `--surface-warm → var(--surface)`
+
+---
+
+## Step 3-4: 草稿 + 预览
+- 按 target 生成 base.md + 变体（schema 见 `variant-schema.md`）。
+- 用 `preview-template.html` 填 token 值 → 自包含 `preview.html`（色板/排版/间距/组件/明暗切换）。
+
+## Step 5: 用户评审 + 确认
+呈现三件套：① token 摘要表 ② preview.html 路径 ③ **默认值透明报告**。
+AskUserQuestion 三选项：**确认落盘 / 调整某项（回到 Step 1 对应维度）/ 重新来（清空重来）**。
+
+## Step 6: 落盘 + guard
+两阶段写入由子代理执行（confirmed:false 草案 → 人工确认 → confirmed:true 写正式路径）。
+落盘后运行 `node scripts/guard/design-token-guard.mjs`，校验 A1+A2+B-slot 完整性。
+
+---
+
+## 默认解析规则（Default Resolution）
+
+| 触发条件 | 应用的默认 | 理由 |
+|---------|-----------|------|
+| mood 未给 | `professional_minimal` | 最通用，B 端覆盖面最大，风险最低 |
+| brand_color 未给/「帮我选」 | mood 表 accent | 保持调性与色彩一致 |
+| display_font 未给 | `sans_display` | 系统栈零依赖，跨端最稳 |
+| density 未给 | `balanced` | 16px 基准，适配多数信息场景 |
+| target 未给 | `both` | 一次产出双端，避免后续补做 |
+| mood 与某维度冲突（如 technical_dense + spacious） | 保留用户显式选择，仅在透明报告标注「非常规组合」 | 用户显式输入优先于推荐 |
+
+**优先级**：用户显式输入 > mood 联动推荐 > 全局默认。冲突时不静默改写，标注后由 Step 5 确认。
+
+---
+
+## 默认值透明报告模板（Transparency Report）
+
+每次创建/迭代都必须随 Step 5 呈现，逐项列出「用了什么默认 + 为什么」：
+
+```markdown
+## 默认值透明报告
+| 维度 | 最终值 | 来源 | 选择原因 |
+|------|--------|------|---------|
+| 品牌调性 | professional_minimal | 默认 | 未指定，取最通用 B 端调性 |
+| 品牌主色 | #3B82F6 | mood 推荐 | 未给主色，按 professional_minimal 取 blue |
+| 展示字体 | sans_display | 默认 | 未指定，系统字体栈零外部依赖 |
+| 信息密度 | balanced | 默认 | 未指定，16px 基准适配多数场景 |
+| 目标端 | both | 默认 | 未指定，一次覆盖 B/C 双端 |
+
+### 非常规组合提示
+- （若有）technical_dense + spacious：保留你的显式选择，已按此派生。
+
+### 假设（Assumptions）
+- 无品牌输入，采用调性默认调色板；如需精确品牌色请提供 #RRGGBB。
+```
+
+---
+
+## AskUserQuestion 格式示例
+
+预填推荐 + 封闭选项，用户原样确认或改选：
+
+```
+Q1 品牌调性？（推荐：professional_minimal — 最通用 B 端调性）
+   [ professional_minimal | warm_approachable | technical_dense | editorial | brutalist ]
+
+Q2 品牌主色？（推荐：#3B82F6 — 按 professional_minimal 推荐）
+   [ 用推荐 #3B82F6 | 我来填 hex… ]
+
+Q3 展示字体？（推荐：sans_display — 系统栈零依赖）
+   [ serif_display | sans_display | mono_accent ]
+
+Q4 信息密度？（推荐：balanced — 16px 基准）
+   [ compact | balanced | spacious ]
+
+Q5 目标端？（推荐：both — 一次覆盖双端）
+   [ b_end | c_end | both ]
+```
+
+**封闭词汇校验**：用户答「极简」→ 追问「你是指 professional_minimal 吗？」；
+答「蓝绿色」→ 追问具体 hex，不自行映射。澄清前不进入 Step 2。

package/skills/design-system/references/preview-template.html

@@ -0,0 +1,319 @@
+<!-- design-system 预览画廊（v0.19.0）：由 design-system skill 生成，token 值已填充。零外部依赖。 -->
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="light" data-density="balanced">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Design System 预览画廊</title>
+<style>
+/* ===== TOKEN 定义（由 skill 从派生规则填充） ===== */
+:root {
+  /* A1-identity */
+  --bg: #FAFAF9;
+  --surface: #FFFFFF;
+  --fg: #1A1916;
+  --muted: #6B6964;
+  --border: #E8E5DF;
+  --accent: #3B82F6;
+  --font-display: Georgia, serif;
+  --font-body: -apple-system, system-ui, sans-serif;
+
+  /* A2-derived */
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+  --accent-soft: color-mix(in oklab, var(--accent), transparent 86%);
+  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
+  --elev-raised: 0 2px 8px color-mix(in oklab, var(--fg), transparent 92%);
+  --success: #16A34A;
+  --warn: #EAB308;
+  --danger: #DC2626;
+  --font-mono: ui-monospace, 'JetBrains Mono', monospace;
+  --space-1: 4px; --space-2: 8px; --space-3: 12px;
+  --space-4: 16px; --space-5: 20px; --space-6: 24px;
+  --space-7: 32px; --space-8: 40px; --space-9: 48px;
+  --space-10: 64px; --space-11: 80px; --space-12: 96px;
+  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 9999px;
+  --motion-fast: 150ms; --motion-base: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* B-slot 别名 */
+  --fg-2: var(--fg);
+  --meta: var(--muted);
+  --border-soft: var(--border);
+  --surface-warm: var(--surface);
+
+  /* 5 方向调色板 — primary */
+  --primary-50: color-mix(in oklab, var(--accent), white 95%);
+  --primary-100: color-mix(in oklab, var(--accent), white 90%);
+  --primary-200: color-mix(in oklab, var(--accent), white 75%);
+  --primary-300: color-mix(in oklab, var(--accent), white 55%);
+  --primary-400: color-mix(in oklab, var(--accent), white 30%);
+  --primary-500: var(--accent);
+  --primary-600: color-mix(in oklab, var(--accent), black 10%);
+  --primary-700: color-mix(in oklab, var(--accent), black 22%);
+  --primary-800: color-mix(in oklab, var(--accent), black 35%);
+  --primary-900: color-mix(in oklab, var(--accent), black 48%);
+
+  /* 密度修正（balanced 默认） */
+  --text-base: 16px;
+  --container: 1120px;
+}
+
+/* Dark 模式覆盖 */
+[data-theme="dark"] {
+  --bg: #1A1916;
+  --surface: #26251F;
+  --fg: #F5F5F4;
+  --muted: #A8A29E;
+  --border: #44403C;
+}
+
+/* Density: compact */
+[data-density="compact"] { --text-base: 14px; --container: 1280px; }
+/* Density: spacious */
+[data-density="spacious"] { --text-base: 18px; --container: 960px; }
+
+/* ===== 基础样式 ===== */
+* { box-sizing: border-box; margin: 0; }
+body {
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  background: var(--bg);
+  color: var(--fg);
+  line-height: 1.6;
+  padding: var(--space-6);
+  transition: background var(--motion-base) var(--ease-standard),
+              color var(--motion-base) var(--ease-standard);
+}
+.container { max-width: var(--container); margin: 0 auto; }
+h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; }
+section { margin-bottom: var(--space-9); }
+section > h2 { margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-soft); padding-bottom: var(--space-2); }
+
+/* ===== 控制面板 ===== */
+.tweaks {
+  display: flex; gap: var(--space-3); align-items: center;
+  padding: var(--space-3) var(--space-4);
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius-md); margin-bottom: var(--space-7);
+}
+.tweaks button {
+  padding: var(--space-1) var(--space-3);
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  background: var(--surface); color: var(--fg); cursor: pointer;
+  font-size: 0.85em; transition: all var(--motion-fast) var(--ease-standard);
+}
+.tweaks button:hover { background: var(--accent-soft); }
+
+/* ===== 色板区 ===== */
+.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-3); }
+.swatch {
+  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
+  overflow: hidden; text-align: center; font-size: 0.75em;
+}
+.swatch .block { height: 64px; }
+.swatch .label { padding: var(--space-1) var(--space-2); color: var(--meta); }
+.palette-row { display: flex; gap: 2px; margin-bottom: var(--space-2); }
+.palette-row .cell { flex: 1; height: 40px; display: flex; align-items: flex-end; justify-content: center; font-size: 0.6em; padding: 2px; }
+
+/* ===== 排版区 ===== */
+.type-specimen { margin-bottom: var(--space-3); }
+.type-specimen .px-label { font-size: 0.7em; color: var(--meta); font-family: var(--font-mono); }
+
+/* ===== 间距区 ===== */
+.space-ruler { display: flex; flex-direction: column; gap: var(--space-2); }
+.space-bar { display: flex; align-items: center; gap: var(--space-2); }
+.space-bar .bar { height: 16px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 2px; }
+.space-bar .lbl { font-size: 0.75em; color: var(--meta); font-family: var(--font-mono); white-space: nowrap; }
+
+/* ===== 组件区 ===== */
+.component-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-4); }
+.btn {
+  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
+  font-size: 0.9em; cursor: pointer; border: 1px solid transparent;
+  transition: all var(--motion-fast) var(--ease-standard);
+}
+.btn-primary { background: var(--accent); color: #fff; }
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-primary:active { background: var(--accent-active); }
+.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); }
+.btn-secondary:hover { background: var(--accent-soft); }
+.btn-ghost { background: transparent; color: var(--accent); }
+.btn-ghost:hover { background: var(--accent-soft); }
+.input-field {
+  padding: var(--space-2) var(--space-3); border: 1px solid var(--border);
+  border-radius: var(--radius-sm); font-size: 0.9em; background: var(--surface); color: var(--fg);
+  width: 240px;
+}
+.input-field:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
+.card {
+  background: var(--surface); border: 1px solid var(--border-soft);
+  border-radius: var(--radius-md); padding: var(--space-5);
+  box-shadow: var(--elev-raised); max-width: 280px;
+}
+.card h4 { margin-bottom: var(--space-2); }
+.card p { font-size: 0.85em; color: var(--meta); }
+.demo-table { border-collapse: collapse; font-size: 0.85em; }
+.demo-table th, .demo-table td {
+  padding: var(--space-2) var(--space-3); border: 1px solid var(--border); text-align: left;
+}
+.demo-table th { background: var(--accent-soft); font-weight: 600; }
+.badge {
+  display: inline-block; padding: 2px var(--space-2);
+  border-radius: var(--radius-pill); font-size: 0.75em; font-weight: 500;
+}
+.badge-success { background: color-mix(in oklab, var(--success), transparent 85%); color: var(--success); }
+.badge-warn { background: color-mix(in oklab, var(--warn), transparent 85%); color: #92610A; }
+.badge-danger { background: color-mix(in oklab, var(--danger), transparent 85%); color: var(--danger); }
+
+/* ===== 派生色区 ===== */
+.state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); }
+.state-chip {
+  padding: var(--space-3); border-radius: var(--radius-sm);
+  text-align: center; font-size: 0.8em; border: 1px solid var(--border-soft);
+}
+.focus-demo { padding: var(--space-3); box-shadow: var(--focus-ring); border-radius: var(--radius-sm); text-align: center; font-size: 0.8em; }
+</style>
+</head>
+<body>
+<div class="container">
+
+  <!-- 控制面板 -->
+  <div class="tweaks">
+    <button id="themeToggle">🌙 切换暗色</button>
+    <button id="densityCompact">紧凑</button>
+    <button id="densityBalanced">均衡</button>
+    <button id="densitySpacious">宽松</button>
+  </div>
+
+  <!-- 1. 色板区 -->
+  <section>
+    <h2>色板区 Color Palette</h2>
+    <div class="swatch-grid">
+      <div class="swatch"><div class="block" style="background:var(--bg)"></div><div class="label">--bg</div></div>
+      <div class="swatch"><div class="block" style="background:var(--surface)"></div><div class="label">--surface</div></div>
+      <div class="swatch"><div class="block" style="background:var(--fg)"></div><div class="label">--fg</div></div>
+      <div class="swatch"><div class="block" style="background:var(--muted)"></div><div class="label">--muted</div></div>
+      <div class="swatch"><div class="block" style="background:var(--border)"></div><div class="label">--border</div></div>
+      <div class="swatch"><div class="block" style="background:var(--accent)"></div><div class="label">--accent</div></div>
+    </div>
+    <h3 style="margin:var(--space-4) 0 var(--space-2)">Primary 50–900</h3>
+    <div class="palette-row">
+      <div class="cell" style="background:var(--primary-50)">50</div>
+      <div class="cell" style="background:var(--primary-100)">100</div>
+      <div class="cell" style="background:var(--primary-200)">200</div>
+      <div class="cell" style="background:var(--primary-300)">300</div>
+      <div class="cell" style="background:var(--primary-400)">400</div>
+      <div class="cell" style="background:var(--primary-500);color:#fff">500</div>
+      <div class="cell" style="background:var(--primary-600);color:#fff">600</div>
+      <div class="cell" style="background:var(--primary-700);color:#fff">700</div>
+      <div class="cell" style="background:var(--primary-800);color:#fff">800</div>
+      <div class="cell" style="background:var(--primary-900);color:#fff">900</div>
+    </div>
+  </section>
+
+  <!-- 2. 排版区 -->
+  <section>
+    <h2>排版区 Typography</h2>
+    <div class="type-specimen"><span class="px-label">32px / font-display</span><h1>Heading 1 标题一</h1></div>
+    <div class="type-specimen"><span class="px-label">26px / font-display</span><h2 style="border:none;padding:0">Heading 2 标题二</h2></div>
+    <div class="type-specimen"><span class="px-label">22px / font-display</span><h3>Heading 3 标题三</h3></div>
+    <div class="type-specimen"><span class="px-label">18px / font-display</span><h4>Heading 4 标题四</h4></div>
+    <div class="type-specimen"><span class="px-label">16px / font-body</span><p>正文段落。设计系统确保跨页面的视觉一致性，所有颜色与间距均来自 token 变量。</p></div>
+    <div class="type-specimen"><span class="px-label">14px / font-body small</span><p style="font-size:0.875em;color:var(--meta)">辅助文字 / 说明信息。</p></div>
+    <div class="type-specimen"><span class="px-label">14px / font-mono</span><code style="font-family:var(--font-mono);font-size:0.875em;background:var(--accent-soft);padding:2px 6px;border-radius:4px">const token = "deterministic";</code></div>
+  </section>
+
+  <!-- 3. 间距区 -->
+  <section>
+    <h2>间距区 Spacing</h2>
+    <div class="space-ruler">
+      <div class="space-bar"><div class="bar" style="width:var(--space-1)"></div><div class="lbl">space-1: 4px</div></div>
+      <div class="space-bar"><div class="bar" style="width:var(--space-2)"></div><div class="lbl">space-2: 8px</div></div>
+      <div class="space-bar"><div class="bar" style="width:var(--space-3)"></div><div class="lbl">space-3: 12px</div></div>
+      <div class="space-bar"><div class="bar" style="width:var(--space-4)"></div><div class="lbl">space-4: 16px</div></div>
+      <div class="space-bar"><div class="bar" style="width:var(--space-5)"></div><div class="lbl">space-5: 20px</div></div>
+      <div class="space-bar"><div class="bar" style="width:var(--space-6)"></div><div class="lbl">space-6: 24px</div></div>
+      <div class="space-bar"><div class="bar" style="width:var(--space-7)"></div><div class="lbl">space-7: 32px</div></div>
+      <div class="space-bar"><div class="bar" style="width:var(--space-8)"></div><div class="lbl">space-8: 40px</div></div>
+      <div class="space-bar"><div class="bar" style="width:var(--space-9)"></div><div class="lbl">space-9: 48px</div></div>
+      <div class="space-bar"><div class="bar" style="width:var(--space-10)"></div><div class="lbl">space-10: 64px</div></div>
+      <div class="space-bar"><div class="bar" style="width:var(--space-11)"></div><div class="lbl">space-11: 80px</div></div>
+      <div class="space-bar"><div class="bar" style="width:var(--space-12)"></div><div class="lbl">space-12: 96px</div></div>
+    </div>
+  </section>
+
+  <!-- 4. 组件区 -->
+  <section>
+    <h2>组件区 Components</h2>
+    <div class="component-row">
+      <button class="btn btn-primary">主按钮</button>
+      <button class="btn btn-secondary">次按钮</button>
+      <button class="btn btn-ghost">幽灵按钮</button>
+    </div>
+    <div class="component-row">
+      <input class="input-field" type="text" placeholder="输入框示例…">
+      <span class="badge badge-success">成功</span>
+      <span class="badge badge-warn">警告</span>
+      <span class="badge badge-danger">危险</span>
+    </div>
+    <div class="component-row">
+      <div class="card">
+        <h4>卡片标题</h4>
+        <p>卡片内容示例。所有样式均来自 token 变量，零硬编码色值。</p>
+      </div>
+      <table class="demo-table">
+        <thead><tr><th>列 A</th><th>列 B</th><th>状态</th></tr></thead>
+        <tbody>
+          <tr><td>数据 1</td><td>值 X</td><td><span class="badge badge-success">通过</span></td></tr>
+          <tr><td>数据 2</td><td>值 Y</td><td><span class="badge badge-warn">待定</span></td></tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <!-- 5. 派生色区 -->
+  <section>
+    <h2>派生色区 Derived States</h2>
+    <div class="state-grid">
+      <div class="state-chip" style="background:var(--accent);color:#fff">accent</div>
+      <div class="state-chip" style="background:var(--accent-hover);color:#fff">accent-hover</div>
+      <div class="state-chip" style="background:var(--accent-active);color:#fff">accent-active</div>
+      <div class="state-chip" style="background:var(--accent-soft)">accent-soft</div>
+      <div class="focus-demo">focus-ring 演示</div>
+    </div>
+  </section>
+
+</div>
+
+<script>
+(function() {
+  var html = document.documentElement;
+  // 恢复 localStorage 偏好
+  var savedTheme = localStorage.getItem('ds-theme');
+  var savedDensity = localStorage.getItem('ds-density');
+  if (savedTheme) html.setAttribute('data-theme', savedTheme);
+  if (savedDensity) html.setAttribute('data-density', savedDensity);
+  updateLabels();
+
+  document.getElementById('themeToggle').addEventListener('click', function() {
+    var next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+    html.setAttribute('data-theme', next);
+    localStorage.setItem('ds-theme', next);
+    updateLabels();
+  });
+  ['compact','balanced','spacious'].forEach(function(d) {
+    document.getElementById('density' + d.charAt(0).toUpperCase() + d.slice(1))
+      .addEventListener('click', function() {
+        html.setAttribute('data-density', d);
+        localStorage.setItem('ds-density', d);
+      });
+  });
+  function updateLabels() {
+    document.getElementById('themeToggle').textContent =
+      html.getAttribute('data-theme') === 'dark' ? '☀️ 切换亮色' : '🌙 切换暗色';
+  }
+})();
+</script>
+</body>
+</html>

package/skills/design-system/references/token-derivation.md

@@ -0,0 +1,115 @@
+# 确定性 Token 派生规则（v0.19.0）
+
+> **原则**: 同输入 = 同输出。不即兴发挥。每个 token 值由映射表确定性决定。
+
+---
+
+## A1-identity（8 必选 token）
+
+| Token | Source | Example (professional_minimal) |
+|-------|--------|-------------------------------|
+| `--bg` | mood→bg mapping | `#FAFAF9` |
+| `--surface` | mood→surface | `#FFFFFF` |
+| `--fg` | mood→fg | `#1A1916` |
+| `--muted` | fg lightened 40% | `#6B6964` |
+| `--border` | fg lightened 80% | `#E8E5DF` |
+| `--accent` | mood→accent mapping (or user hex) | `#3B82F6` |
+| `--font-display` | font preference→stack | `Georgia, serif` (serif_display) |
+| `--font-body` | always system sans | `-apple-system, system-ui, sans-serif` |
+
+---
+
+## Mood → 色彩映射表（5 moods × 6 colors = 确定性）
+
+| Mood | bg | surface | fg | muted | border | accent |
+|------|-----|---------|-----|-------|--------|--------|
+| professional_minimal | #FAFAF9 | #FFFFFF | #1A1916 | #6B6964 | #E8E5DF | #3B82F6 |
+| warm_approachable | #FDF8F4 | #FFFFFF | #292524 | #78716C | #E7E5E4 | #C96442 |
+| technical_dense | #F8FAFC | #FFFFFF | #0F172A | #64748B | #E2E8F0 | #0891B2 |
+| editorial | #FAFAF7 | #FFFFFF | #1A1916 | #6B6964 | #E8E5DF | #1A1916 |
+| brutalist | #FFFFFF | #F5F5F5 | #000000 | #525252 | #D4D4D4 | #DC2626 |
+
+---
+
+## A2-derived（color-mix 公式，mood 无关）
+
+```css
+/* 交互状态色 */
+--accent-hover:  color-mix(in oklab, var(--accent), black 8%);
+--accent-active: color-mix(in oklab, var(--accent), black 14%);
+--accent-soft:   color-mix(in oklab, var(--accent), transparent 86%);
+--focus-ring:    0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
+--elev-raised:   0 2px 8px color-mix(in oklab, var(--fg), transparent 92%);
+
+/* 语义色（固定） */
+--success: #16A34A;
+--warn:    #EAB308;
+--danger:  #DC2626;
+
+/* 字体 */
+--font-mono: ui-monospace, 'JetBrains Mono', monospace;
+
+/* 间距（4px base scale） */
+--space-1: 4px;   --space-2: 8px;   --space-3: 12px;
+--space-4: 16px;  --space-5: 20px;  --space-6: 24px;
+--space-7: 32px;  --space-8: 40px;  --space-9: 48px;
+--space-10: 64px; --space-11: 80px; --space-12: 96px;
+
+/* 圆角 */
+--radius-sm: 8px;
+--radius-md: 12px;
+--radius-lg: 16px;
+--radius-pill: 9999px;
+
+/* 动效 */
+--motion-fast: 150ms;
+--motion-base: 200ms;
+--ease-standard: cubic-bezier(0.2, 0, 0, 1);
+```
+
+---
+
+## B-slot 别名（4 项）
+
+```css
+--fg-2:        var(--fg);
+--meta:        var(--muted);
+--border-soft: var(--border);
+--surface-warm: var(--surface);
+```
+
+组件始终引用 B-slot 别名 → 永远可解析，与底层 A1 解耦。
+
+---
+
+## 5 方向调色板派生规则
+
+从 accent hex 生成 primary 方向 50–900 阶梯：
+
+| Step | 派生公式 |
+|------|---------|
+| 50 | color-mix(in oklab, accent, white 95%) |
+| 100 | color-mix(in oklab, accent, white 90%) |
+| 200 | color-mix(in oklab, accent, white 75%) |
+| 300 | color-mix(in oklab, accent, white 55%) |
+| 400 | color-mix(in oklab, accent, white 30%) |
+| 500 | accent（基准色） |
+| 600 | color-mix(in oklab, accent, black 10%) |
+| 700 | color-mix(in oklab, accent, black 22%) |
+| 800 | color-mix(in oklab, accent, black 35%) |
+| 900 | color-mix(in oklab, accent, black 48%) |
+
+- **neutral** 方向：从 fg 同理派生（白/黑混合）。
+- **success / warning / danger**：固定语义色（#16A34A / #EAB308 / #DC2626），各派生同结构阶梯。
+
+---
+
+## Density → 间距/排版修正
+
+| Density | base font | space unit | container |
+|---------|-----------|------------|-----------|
+| compact | 14px | 4px | 1280px |
+| balanced | 16px | 4px | 1120px |
+| spacious | 18px | 8px | 960px |
+
+density 只影响数值倍率，不影响 token 名称或色彩。

package/skills/design-system/references/variant-schema.md

@@ -0,0 +1,60 @@
+# Base / Variant 拆分 Schema（variant-schema）
+
+设计系统拆为 **base 品牌共享层** + **端变体层**。base 管「品牌是什么」，变体管「在该端怎么排布」。
+变体读 base 取色与品牌，覆写排版/间距/布局/组件/动效。合并后 = 一份完整 token 集（喂给 design-tokens.css）。
+
+```
+.team-flow/design-system/
+├── base.md      # 品牌共享层（color/brand/voice/anti-patterns/extensions）
+├── b-end.md     # B 端变体（typography/spacing/layout/components/motion）
+├── c-end.md     # C 端变体（同结构，按 C 端密度/字号覆写）
+└── preview.html
+```
+
+---
+
+## base.md 段落（品牌共享，端无关）
+
+| 段 | 内容 | Token 归属 |
+|----|------|-----------|
+| `color` | A1-identity 8 必选（`--bg/--surface/--fg/--muted/--border/--accent/--font-display/--font-body`）+ 5 方向调色板（neutral/primary/success/warning/danger，各 50–900 阶梯） | A1-identity + palette |
+| `brand` | logo 规范 + 品牌主色（accent 的品牌语境用法、留白、最小尺寸） | brand |
+| `voice` | 文案语气（专业/简洁/温度等级），跨端统一 | voice |
+| `anti-patterns` | 禁止内联样式漂移 / 禁止非 token 颜色 / 禁止跨端私改品牌色（**必含前两条**） | anti-patterns |
+| `extensions` | C-token 名单制清单：品牌专有 token + 提升路径标注（C→B→A2） | C-extension |
+
+> base 不含排版/间距/布局——这些随端变化，归变体。base 的 A1+A2+B-slot 必须完整可过 guard。
+
+## 变体 .md 段落（b-end.md / c-end.md，端特定）
+
+| 段 | 内容 | Token 归属 |
+|----|------|-----------|
+| `typography` | font-display/body/mono 引用 + type scale（`--text-xs~4xl`，1.25 比例）+ weights + line-height（按 density） | A1-structure |
+| `spacing` | `--space-1~12` 阶梯（基于 density 基准：compact 12 / balanced 16 / spacious 20） | A2-derived |
+| `layout` | 栅格 12 列 / 断点 sm/md/lg / 容器 max-width（B 端宽容器、C 端窄容器） | A1-structure |
+| `components` | button / input / card / table 规范（**最少这 4 类**），全部 token-bound，引用 B-slot | components |
+| `motion` | duration（`--motion-fast/base`，150–300ms）+ `--ease-standard` | A2-derived |
+
+> B 端 vs C 端差异示例：B 端 compact + 14px + 宽表格容器；C 端 spacious + 17px + 窄卡片容器。
+> 两端共享 base 的 color/brand/voice，绝不各自重定义品牌色。
+
+---
+
+## 继承规则（Inheritance）
+
+1. 变体**只读** base 的 `color` / `brand` / `voice` / `anti-patterns` / `extensions`——不复制、不覆写品牌色。
+2. 变体**覆写** `typography` / `spacing` / `layout` / `components` / `motion`——这是端差异的合法表达。
+3. 变体新增 token 必须引用 base 已有 token（如 `--card-bg: var(--surface)`），禁止孤立 token、禁止硬编码 hex。
+4. 变体需要的品牌专有 token → 先列入 base 的 `extensions`（C-token 名单制），达晋升条件再升级。
+
+## Token 合并规则（Merge → design-tokens.css）
+
+```
+完整 token 集 = base(A1-identity + A1-structure 颜色/字体部分 + A2-derived + B-slot + palette)
+              + 变体(A1-structure 排版/布局 + spacing + components + motion)
+```
+
+- 渲染某端时：把 base `:root` + 该端变体 `:root` 合并进**单个 `<style>`**（无全局级联）。
+- 缺任何一个 A1/A2/B-slot token → 规则悄悄失效 → `design-token-guard.mjs` 失败。
+- 同 token 名 base 与变体冲突时：**变体优先**（仅限排版/间距/布局/动效类）；颜色/品牌类冲突 = 错误，guard 报错。
+- 迭代（iterate）走 MERGE 不 OVERWRITE：新组件进变体 `components`，新共享色进 base `color`，并记变更履历。