NextEdu/docs/superpowers/specs/2026-07-04-design-tokens-refactor-design.md

设计令牌专项重构 · 设计文档

创建日期:2026-07-04 状态:Draft(待用户审查) 执行方式:大爆炸式(单 PR) 关联规则:docs/architecture/004_architecture_impact_map.md、.trae/rules/project_rules.md

---

1. 背景与目标

1.1 现状摘要

项目当前令牌散落在 src/app/globals.css(477 行)与 tailwind.config.ts(极简,无 theme.extend)。已有 5 类令牌:

1. shadcn 标准令牌(HSL 格式,完整暗色)
2. chart-1~5 数据可视化令牌(HSL,完整暗色)
3. sidebar 令牌(HSL,完整暗色)
4. --lp-* 备课编辑器令牌(HEX 格式,无暗色,未在 @theme inline 中暴露,无法 bg-lp-paper)
5. Material Design 3 Surface 映射令牌(在 @theme inline 中,经扫描零使用,属死代码)

1.2 关键技术债

扫描结果:

问题类型	出现次数	文件数
硬编码颜色 #xxx	91 处	15 文件
硬编码字体 'Inter'/'Fraunces'/'JetBrains Mono'	8 处	2 文件
硬编码 font-size: Npx	15 处	3 文件
Tailwind 任意值 w-[Npx]/h-[Npx]/p-[Npx]/...	98 处	40 文件
缺失:font/spacing/shadow/text-size 尺度令牌	—	—
--lp-* 无暗色 / 未暴露为 Tailwind 类	—	—
M3 Surface 令牌零使用(死代码)	—	—

项目规则(.trae/rules/project_rules.md)明确禁止"任意值"和"动态拼接类名",但实际任意值已散落到 40 个文件,需要专项治理。

1.3 重构目标

• 核心目标:全量体系化重建设计令牌,建立完整令牌契约,清理全部硬编码与任意值
• 命名体系:双层架构(Primitive + Semantic)+ shadcn 语义扩展
• 覆盖范围:font/size/leading/weight/radius/shadow/spacing/duration/ease/z-index 全阶梯
• 暗色覆盖:明暗双色全面覆盖(所有令牌都有 :root 与 .dark 双份)
• 强制约束:ESLint 规则 + 注释豁免,防止技术债复发

---

2. 令牌架构

2.1 双层架构

┌──────────────────────────────────────────────────────────────────┐
│  Layer 1: Primitive (Raw Tokens) — 原始色板/字号/间距/阴影         │
│  ─────────────────────────────────────────────────────────────  │
│  命名: --color-zinc-50 ~ 950                                      │
│        --color-stone-50 ~ 950                                     │
│        --color-indigo-500/600                                     │
│        --font-size-1 ~ --font-size-9                              │
│        --space-0 ~ --space-32                                     │
│        --shadow-1 ~ --shadow-6                                    │
│        --font-family-sans/serif/mono                              │
│  特征: 不直接使用,只被 Semantic 层引用                            │
│  主题: 无主题差异(色板层不区分明暗)                               │
└──────────────────────────────────────────────────────────────────┘
                                ▲ 引用
                                │
┌──────────────────────────────────────────────────────────────────┐
│  Layer 2: Semantic (Component/Context Tokens) — 语义层            │
│  ─────────────────────────────────────────────────────────────  │
│  shadcn 兼容: --background / --foreground / --primary / ...      │
│  扩展层级:   --background-elevated / --text-secondary / ...      │
│  模块命名空间: --lp-* (lesson-preparation)                       │
│  chart/sidebar: --chart-1~5 / --sidebar-*                         │
│  特征: 业务代码唯一引用入口,Tailwind 通过 @theme inline 暴露      │
│  主题: :root 与 .dark 双份定义,所有令牌都有暗色                  │
└──────────────────────────────────────────────────────────────────┘
                                ▲ 引用
                                │
┌──────────────────────────────────────────────────────────────────┐
│  Layer 3: Tailwind 类 (via @theme inline)                         │
│  ─────────────────────────────────────────────────────────────  │
│  bg-background / text-foreground / bg-primary / ...              │
│  bg-lp-paper / text-lp-inline-node-meta / ...                    │
│  font-sans / font-serif / font-mono                               │
│  text-size-2 / leading-snug / weight-semibold                    │
│  radius-md / shadow-2 / space-4 / duration-fast / z-modal        │
└──────────────────────────────────────────────────────────────────┘

2.2 核心原则

• 业务代码 只引用 Semantic 层(直接 var(--background) 或 Tailwind 类 bg-background),禁止引用 Primitive 层
• Primitive 层只为 Semantic 层提供"原材料",便于未来多主题切换(只改 Semantic 层映射,不动 Primitive)
• shadcn 命名严格保留(--background/--foreground/--primary 等),shared/components/ui/* 零改动
• --lp-* 保留命名空间(已有 9 文件使用,改名风险大),但补全暗色与 Tailwind 暴露

2.3 文件分布

当前 globals.css 477 行,补全令牌后估算 1200+ 行,超过项目规则硬性上限 1000 行。拆分为令牌专题目录:

src/app/
├─ globals.css                      # 仅保留 @import、base layer、组件硬编码样式清理后的样式
└─ styles/
   └─ tokens/
      ├─ primitive.css              # Layer 1: 原始色板/字号/间距/阴影阶梯
      ├─ semantic-light.css         # Layer 2: :root 语义令牌(明色)
      ├─ semantic-dark.css          # Layer 2: .dark 语义令牌(暗色)
      ├─ lesson-preparation.css     # --lp-* 令牌(明暗双份)
      ├─ tailwind-theme.css         # @theme inline 暴露规则
      └─ index.css                  # 汇总 @import 入口

globals.css 顶部改为:

@import "tailwindcss";
@import "./styles/tokens/index.css";
@plugin "tailwindcss-animate";
@plugin "@tailwindcss/typography";
@custom-variant dark (&:where(.dark, .dark *));

2.4 Tailwind v4 集成

tailwind.config.ts 保持极简(只 content + plugins),所有令牌通过 @theme inline 在 tailwind-theme.css 中暴露。

---

3. Primitive 层(原始阶梯)

3.1 色板(以 Zinc 为基准中性色,与现有 shadcn 一致)

/* primitive.css */
:root {
  /* Zinc 中性色板(shadcn 默认) */
  --color-zinc-50: 0 0% 99%;
  --color-zinc-100: 240 4.8% 95.9%;
  --color-zinc-200: 240 5.9% 90%;
  --color-zinc-300: 240 4.8% 83.9%;
  --color-zinc-400: 240 5% 64.9%;
  --color-zinc-500: 240 3.8% 46.1%;
  --color-zinc-600: 240 5.2% 33.9%;
  --color-zinc-700: 240 5.3% 26.1%;
  --color-zinc-800: 240 5.9% 10%;
  --color-zinc-900: 240 5.9% 3.9%;
  --color-zinc-950: 240 10% 3.9%;

  /* Stone 暖灰(用于 lp-* 纸感,与现有 --lp-paper-edge #f8f8f7 对齐) */
  --color-stone-50: 60 4.8% 95.9%;
  --color-stone-100: 60 5.1% 90%;
  --color-stone-200: 20 5.9% 90%;
  --color-stone-300: 24 5.7% 82.9%;
  --color-stone-400: 24 5.4% 63.9%;
  --color-stone-500: 25 5.1% 44.7%;
  --color-stone-600: 33 5% 39.8%;
  --color-stone-700: 30 5.2% 32.7%;
  --color-stone-800: 12 6.5% 31.4%;
  --color-stone-900: 24 10% 10%;
  --color-stone-950: 20 14.3% 4.1%;

  /* Indigo 强调色(lp-interaction 用) */
  --color-indigo-500: 238.7 83.5% 66.7%;
  --color-indigo-600: 238.6 84.5% 59.8%;
}

说明: 仅记录 Primitive 原料,业务代码不直接引用。

3.2 字号阶梯(替代硬编码 13.5px/14px/12.5px 等)

Token	值	用途
--font-size-1	12px	元信息/角色标签
--font-size-2	13px	inline-node body
--font-size-3	13.5px	inline-node 主文(备课纸感)
--font-size-4	14px	标题/按钮
--font-size-5	16px	正文(Fraunces 16px)
--font-size-6	18px	H2
--font-size-7	20px	H1
--font-size-8	24px	区块标题
--font-size-9	32px	页面标题

3.3 间距阶梯(覆盖 98 处任意值)

Token	值	替代示例
--space-0	0
--space-0_5	0.125rem (2px)	p-[2px]
--space-1	0.25rem (4px)	p-[4px]
--space-1_5	0.375rem (6px)	gap-[6px]
--space-2	0.5rem (8px)
--space-2_5	0.625rem (10px)	p-[10px]
--space-3	0.75rem (12px)
--space-3_5	0.875rem (14px)	p-[14px]
--space-4	1rem (16px)
--space-5	1.25rem (20px)	m-[20px]
--space-6	1.5rem (24px)
--space-7	1.75rem (28px)	w-[28px] (lp-tb-btn)
--space-8	2rem (32px)
--space-10	2.5rem (40px)
--space-12	3rem (48px)
--space-16	4rem (64px)
--space-18	4.5rem (72px)	px-[72px] (lp-paper-toolbar)

3.4 阴影阶梯(替代硬编码 box-shadow)

Token	值	替代
--shadow-1	0 1px 2px rgba(15,15,15,0.04)	shadow-xs
--shadow-2	0 1px 3px rgba(15,15,15,0.06), 0 1px 2px rgba(15,15,15,0.04)	shadow-sm
--shadow-3	0 4px 6px rgba(15,15,15,0.05), 0 2px 4px rgba(15,15,15,0.04)	shadow-md
--shadow-4	0 1px 2px rgba(15,15,15,0.04), 0 8px 24px rgba(15,15,15,0.04)	lp-paper-shadow
--shadow-5	0 1px 2px rgba(15,15,15,0.06), 0 12px 36px rgba(15,15,15,0.08)	lp-paper-shadow-active
--shadow-6	0 10px 15px rgba(15,15,15,0.1), 0 4px 6px rgba(15,15,15,0.05)	shadow-xl

3.5 字体家族(替代 8 处硬编码)

Token	值	用途
--font-family-sans	'Inter', system-ui, sans-serif	UI 元素
--font-family-serif	'Fraunces', Georgia, serif	主文/备课纸感
--font-family-mono	'JetBrains Mono', monospace	角色标签

---

4. Semantic 层(shadcn 扩展 + lp-* 升级 + M3 清理)

4.1 shadcn 标准令牌(零改动,确保 ui/ 兼容)

--background/--foreground/--card/--popover/--primary/--secondary/--muted/--accent/--destructive/--border/--input/--ring/--radius 全部保留现有 HSL 值,:root 与 .dark 双份定义不变。

4.2 语义层扩展(新增层级)

Token	明色 HSL	暗色 HSL	用途
--background-elevated	0 0% 100%	240 6% 10%	浮层/card-on-card
--background-sunken	240 4.8% 95.9%	240 6% 8%	凹陷区/inset
--text-primary	= --foreground	= --foreground	主文
--text-secondary	240 3.8% 46.1%	240 5% 64.9%	副文(= muted-foreground)
--text-tertiary	240 4% 65%	240 5% 50%	占位/元信息
--border-strong	240 5.9% 70%	240 5% 40%	强调边框
--border-subtle	240 5.9% 95%	240 5% 18%	弱边框

说明: --text-secondary 等是 --muted-foreground 的语义别名,业务代码优先用语义名。

4.3 chart-1~5 / sidebar 令牌(零改动)

保留现有 HSL 值,:root 与 .dark 双份定义不变。

4.4 --lp-* 令牌升级(HEX→HSL + 暗色 + Tailwind 暴露)

明色(:root):

Token	旧 HEX	新 HSL	说明
--lp-paper	#fefefe	0 0% 99.6%	纸面
--lp-paper-edge	#f8f8f7	60 9% 97%	纸边(对齐 stone-100)
--lp-paper-shadow	(box-shadow)	= --shadow-4 引用	阴影令牌化
--lp-paper-shadow-active	(box-shadow)	= --shadow-5 引用	阴影令牌化
--lp-anchor-range	rgba(28,25,23,0.08)	20 14.3% 4.1% / 0.08	引用 stone-950
--lp-anchor-range-active	rgba(28,25,23,0.16)	20 14.3% 4.1% / 0.16
--lp-anchor-point	#1c1917	20 14.3% 4.1%	= stone-950
--lp-inline-node-border	#d6d3d1	30 5.7% 82.9%	= stone-300
--lp-inline-node-text	#44403c	24 5.4% 26.9%	≈ stone-700 微调
--lp-inline-node-meta	#a8a29e	30 5% 64.9%	= stone-400
--lp-interaction	#6366f1	238.6 84.5% 59.8%	= indigo-600

12 个 --lp-dot- 节点色点*: 全部映射到 zinc/stone 色板对应值,统一为 HSL。

暗色(.dark): 全部补齐。例如:

• --lp-paper: 240 6% 10%(暗背景纸面)
• --lp-paper-edge: 240 6% 8%
• --lp-anchor-point: 0 0% 98%(反相)
• --lp-interaction: 238.7 83.5% 66.7%(= indigo-500,暗色微亮)

4.5 M3 Surface 映射令牌清理

globals.css:185-198 中的 M3 令牌零使用(已扫描确认),全部删除:

• --color-surface / --color-on-surface / --color-on-surface-variant
• --color-surface-container-lowest/low/high/highest
• --color-outline-variant / --color-outline
• --color-error / --color-tertiary / --color-tertiary-container

4.6 globals.css 硬编码样式令牌化

硬编码	令牌化后
.lp-tb-btn { width: 28px; ... font-family: 'Inter'; font-size: 13px; color: var(--foreground) }	width: var(--space-7); font-family: var(--font-family-sans); font-size: var(--font-size-2); color: hsl(var(--foreground))
.lp-inline-node { font-family: 'Inter'; font-size: 13.5px; ... border-left: 2px solid var(--lp-inline-node-border); color: var(--lp-inline-node-text) }	全部用令牌引用
.lp-qa-role.teacher { color: #1c1917 }	color: hsl(var(--lp-anchor-point))
.lp-qa-role.student { color: #6b7280 }	color: hsl(var(--color-zinc-500))
.lp-inline-node-title { color: #1a1a1a }	color: hsl(var(--lp-anchor-point))
.lp-inline-node-body { color: #404040 }	color: hsl(var(--lp-inline-node-text))
.lp-qa-content { color: #404040 }	同上
.lp-qa-prompt { color: #525252 }	color: hsl(var(--color-zinc-600))
.range-anchor { background-color: var(--node-color, #1976d2) }	fallback 改为 hsl(var(--lp-interaction))

---

5. 尺度令牌补齐清单

5.1 圆角阶梯

Token	值	Tailwind 类
--radius-sm	calc(var(--radius) - 4px)	rounded-sm
--radius-md	calc(var(--radius) - 2px)	rounded-md
--radius-lg	var(--radius) = 0.5rem	rounded-lg
--radius-xl	calc(var(--radius) + 4px)	rounded-xl
--radius-2xl	calc(var(--radius) + 8px)	rounded-2xl
--radius-full	9999px	rounded-full

5.2 行高与字重

Token	值
--leading-tight	1.2
--leading-snug	1.35
--leading-normal	1.5
--leading-relaxed	1.65
--leading-loose	1.8
--weight-regular	400
--weight-medium	500
--weight-semibold	600
--weight-bold	700

5.3 动效与 z-index

Token	值	Tailwind 类
--duration-fast	150ms	duration-fast
--duration-normal	200ms	duration-normal
--duration-slow	300ms	duration-slow
--ease-in	cubic-bezier(0.4, 0, 1, 1)	ease-in
--ease-out	cubic-bezier(0, 0, 0.2, 1)	ease-out
--ease-in-out	cubic-bezier(0.4, 0, 0.2, 1)	ease-in-out
--z-dropdown	1000	z-dropdown
--z-sticky	1100	z-sticky
--z-modal	1300	z-modal
--z-popover	1400	z-popover
--z-toast	1500	z-toast

---

6. 硬编码清理映射表(分级)

6.1 91 处 #hex 颜色 — 按文件分类

文件	处数	清理策略
app/globals.css	32	全部令牌化(见 4.6 节)
app/manifest.ts	2	保留(theme_color 元数据,需字面量),加注释 // arbitrary-value: PWA manifest requires literal hex
app/layout.tsx	2	检查后令牌化或注释
shared/components/ui/chart.tsx	5	令牌化(用 --chart-1~5)
modules/notifications/channels/email-channel.ts	7	保留(邮件 HTML 内联样式需字面量),加注释
modules/textbooks/components/knowledge-graph.tsx	10	令牌化(用 --chart-* 或新增 --graph-node-*)
modules/textbooks/components/force-graph.tsx	17	同上
modules/lesson-preparation/components/paper-editor/*	~6	令牌化(用 --lp-*)
modules/attendance/components/attendance-grade-correlation-card.tsx	3	令牌化(用 --chart-*)
modules/classes/components/my-classes-grid.tsx	2	令牌化
modules/lesson-preparation/components/version-diff-view.tsx	1	令牌化(用 --lp-* 或新增 --diff-add/--diff-remove)

新增语义令牌:

• --diff-add / --diff-add-bg(版本对比新增)
• --diff-remove / --diff-remove-bg(版本对比删除)
• --graph-node-1 ~ --graph-node-6(知识图谱节点色)

6.2 8 处硬编码 font-family — 全部令牌化

文件	处数	令牌化
app/globals.css	7	var(--font-family-sans) / var(--font-family-serif) / var(--font-family-mono)
modules/lesson-preparation/components/paper-editor/textbook-tiptap-editor.tsx	1	同上

6.3 15 处硬编码 font-size — 全部令牌化

文件	处数	令牌化
app/globals.css	13	var(--font-size-N)
modules/notifications/channels/email-channel.ts	1	保留(邮件 HTML),加注释
modules/lesson-preparation/components/paper-editor/textbook-tiptap-editor.tsx	1	var(--font-size-N)

6.4 98 处 Tailwind 任意值 — 分级清理

Tier 1 — 直接映射 Tailwind 默认阶梯(约 40 处):

• w-[28px] → w-7(28px ≈ 1.75rem,但 w-7 = 1.75rem ✓)
• gap-[6px] → gap-1.5(6px = 0.375rem,gap-1.5 ✓)
• p-[10px] → 需新增 --space-2_5(10px = 0.625rem)
• text-[13px] → text-size-2(13px = --font-size-2)

Tier 2 — 新增间距令牌后引用(约 30 处):

• w-[72px] → w-space-18(--space-18 = 4.5rem)
• h-[16px] → h-space-4(--space-4 = 1rem)
• p-[20px] → p-space-5(--space-5 = 1.25rem)

Tier 3 — 注释豁免(约 28 处):

• 图表 SVG 尺寸(如 w-[400px] 在 chart 容器)→ 加注释 // arbitrary-value: chart canvas fixed size
• 邮件 HTML 内联样式
• loading.tsx 占位骨架特殊尺寸

ESLint 规则: tailwindcss/no-arbitrary-value: error,允许通过 // eslint-disable-next-line + 注释理由豁免。

---

7. 强制约束机制

7.1 ESLint 规则新增

新增依赖: eslint-plugin-tailwindcss(需验证与 Tailwind v4 兼容性,若不兼容则自定义规则)

eslint.config.mjs 新增规则:

{
  // 禁止 Tailwind 任意值(允许 eslint-disable + 注释豁免)
  'tailwindcss/no-arbitrary-value': 'error',
  // 禁止 TSX/CSS 中硬编码颜色字面量(白名单:globals.css primitive 定义、email-channel.ts、manifest.ts)
  'no-restricted-syntax': [
    'error',
    {
      selector: "Literal[value=/#[0-9a-fA-F]{3,8}/]",
      message: '禁止硬编码 hex 颜色,使用设计令牌 var(--*) 或 Tailwind 类 bg-*',
    },
  ],
}

自定义规则文件: eslint-rules/no-hardcoded-design-tokens.js

• 检测 TSX/TS 中 'Inter'/'Fraunces'/'JetBrains Mono' 字面量
• 检测 font-family: CSS 属性中的字面量字体名
• 检测 font-size: Npx 硬编码
• 白名单:globals.css、styles/tokens/*.css、email-channel.ts、manifest.ts

7.2 项目规则更新

.trae/rules/project_rules.md "Tailwind 规范"章节新增:

### 设计令牌规范(强制)

- **禁止硬编码颜色**: TSX/TS/CSS 中不得出现 `#hex` 颜色字面量,统一使用 `var(--*)` 或 Tailwind 类
- **禁止硬编码字体**: 不得出现 `'Inter'`/`'Fraunces'`/`'JetBrains Mono'` 字面量,使用 `var(--font-family-sans/serif/mono)`
- **禁止硬编码字号**: 不得出现 `font-size: Npx`,使用 `var(--font-size-1~9)`
- **禁止 Tailwind 任意值**: 不得使用 `w-[Npx]`/`h-[Npx]`/`p-[Npx]` 等,映射到 `--space-*` 或 Tailwind 默认阶梯
- **豁免场景**(需 `// arbitrary-value: <reason>` 注释):
  - PWA manifest(`app/manifest.ts`)
  - 邮件 HTML 内联样式(`email-channel.ts`)
  - 图表 SVG 固定画布尺寸
  - loading.tsx 占位骨架
- **令牌文件分布**: `src/app/styles/tokens/`(primitive/semantic-light/semantic-dark/lesson-preparation/tailwind-theme)
- **改令牌必同步图**: 修改令牌定义后,同步更新 `docs/architecture/004` 与 `005`

7.3 Lint 命令不变

npm run lint 与 npx tsc --noEmit 保持零错误零警告。

---

8. 验证策略与架构图同步

8.1 验证清单

验证项	命令/方法	通过标准
TypeScript	npx tsc --noEmit	零错误
ESLint	npm run lint	零错误零警告
视觉回归	npm run test:visual	快照无差异(或更新后人工确认)
备课编辑器视觉	手动检查 teacher/lesson-plans/[id]/edit	纸感、inline-node、师生对话样式无变化
暗色模式	切换暗色主题	所有页面可读,无对比度问题
shadcn ui 组件	抽查 button/card/dialog/table	零回归

8.2 架构图同步(项目规则强制)

修改完成后,同步更新:

文档	同步内容
docs/architecture/004_architecture_impact_map.md	新增"设计令牌体系"章节(双层架构图、文件分布、令牌分类)
docs/architecture/005_architecture_data.json	modules.shared.exports 新增 design-tokens 节点;dependencyMatrix 新增令牌依赖关系
docs/troubleshooting/known-issues.md	新增"设计令牌"问题分类,记录 Tailwind v4 + ESLint 兼容性、HEX→HSL 转换、任意值豁免规则

8.3 大爆炸式执行顺序(单 PR 内)

1. 创建 src/app/styles/tokens/ 6 个文件(primitive/semantic-light/semantic-dark/lesson-preparation/tailwind-theme/index)
2. globals.css 改为 @import 引入,删除已迁移内容
3. globals.css 中剩余硬编码样式令牌化(lp-tb-btn/lp-inline-node/lp-qa-*)
4. 全局扫描替换:91 处 #hex → 令牌引用(按 6.1 表)
5. 全局扫描替换:8 处 font-family + 15 处 font-size → 令牌引用(按 6.2/6.3 表)
6. 全局扫描替换:98 处任意值 → Tier 1/2/3 分级处理(按 6.4 表)
7. ESLint 规则新增 + 自定义规则文件
8. 项目规则文档更新
9. 架构图同步(004/005)
10. docs/troubleshooting/known-issues.md 更新
11. npm run lint + npx tsc --noEmit + npm run test:visual 验证
12. 单次 commit:refactor(design-tokens): 全量体系化重建设计令牌

---

9. 风险与缓解

风险	缓解
Tailwind v4 + eslint-plugin-tailwindcss 兼容性未知	实施时先验证,不兼容则自定义 AST 规则
大爆炸式改动 50+ 文件,review 困难	严格按 8.3 执行顺序,每步独立验证;视觉回归测试保障
--lp-* HEX→HSL 转换可能有色差	视觉回归测试 + 手动备课编辑器检查
98 处任意值分级清理可能遗漏	Tier 3 注释豁免需明确理由,ESLint 规则锁定
暗色补全可能对比度不足	暗色模式手动抽查所有页面
shadcn ui 组件理论零改动但需验证	抽查 button/card/dialog/table 4 个核心组件

---

10. 范围与非目标

10.1 范围内

• 令牌底座重建(Primitive + Semantic 双层)
• 尺度令牌补齐(font/size/leading/weight/radius/shadow/spacing/duration/ease/z-index)
• --lp-* 升级(HEX→HSL + 暗色 + Tailwind 暴露)
• M3 Surface 死代码清理
• 91 处硬编码颜色清理
• 8 处硬编码 font-family 清理
• 15 处硬编码 font-size 清理
• 98 处 Tailwind 任意值清理
• ESLint 强制约束规则
• 项目规则文档更新
• 架构图同步(004/005)
• known-issues.md 更新

10.2 范围外(非目标)

• 第三主题(如 high-contrast、paper 纸感)预留 — YAGNI
• shared/components/ui/* shadcn 组件内部样式改动 — 理论零改动,仅验证
• cn() 工具函数修改 — 不变
• tailwind.config.ts 内容扩展 — 保持极简
• 设计令牌文档站(Storybook 等)— 不在本期范围
• 多主题切换架构 — 仅明暗双色