L5-05：主题工厂 —— 像换衣服一样给你的产品换皮肤

🎯 学什么：给你的网页或应用设计一套「换肤系统」——今天穿商务装（深蓝白配色），明天穿运动装（橙色活力风），后天换节日装（红金春节主题），一键切换不重写代码。核心洞察：主题系统的三层架构（Design Tokens → Semantic Tokens → Component Styles）的关键价值在于「一次修改、全局更新」——改一个原子色值，所有引用它的语义令牌和组件自动刷新，不需要手动修改 50+ 个地方的硬编码。 💡 难易度：⭐⭐⭐ | ⏱️ 预计时间：35 分钟

---

1. 课程概览

💡 白话小课堂：你有没有玩过那种换装游戏（比如芭比娃娃）？同一个娃娃，换不同的衣服就变成完全不同的风格——公主裙、运动服、宇航装。theme-factory 就是给你的产品做「衣服系统」——同一套代码，换一套配色和字体就变成完全不同的品牌感觉。

来源：Anthropic 官方 Skills 仓库

---

2. 三层令牌架构

2.1 为什么需要分层

不分层的做法（硬编码）：
  .button { background: #3B82F6; }
  .card { border-color: #3B82F6; }
  .link { color: #3B82F6; }
  → 品牌色要换 → 手动修改 50+ 个地方 → 漏一个就出 Bug

三层架构的做法（一次修改、全局更新）：
  Layer 1: --color-blue-500: #3B82F6;           （原子值）
  Layer 2: --color-primary: var(--color-blue-500); （语义名）
  Layer 3: .button { background: var(--color-primary); } （使用）
  → 改品牌色 → 只改 Layer 1 → 所有组件自动更新

2.2 三层详解

Layer 1：Design Tokens（设计令牌）——原材料
  这是最底层的原子变量，不附带任何语义：
    → --color-blue-500: #3B82F6;
    → --color-gray-100: #F3F4F6;
    → --spacing-unit: 8px;
    → --font-size-base: 16px;
    → --border-radius-sm: 4px;
  特点：纯粹的值，不表达「这个颜色用在哪儿」

Layer 2：Semantic Tokens（语义令牌）——赋予含义
  将 Design Token 赋予语义含义：
    → --color-primary: var(--color-blue-500);
    → --color-text-primary: var(--color-gray-900);
    → --color-surface: var(--color-gray-100);
    → --space-md: calc(var(--spacing-unit) * 2);
    → --font-size-h1: calc(var(--font-size-base) * 2.5);
  特点：表达「这个值的用途」，但不指定具体哪个组件用

Layer 3：Component Styles（组件样式）——具体使用
  组件引用语义令牌：
    → .button-primary { background: var(--color-primary); border-radius: var(--border-radius-sm); }
    → .card { background: var(--color-surface); padding: var(--space-md); }
    → h1 { font-size: var(--font-size-h1); color: var(--color-text-primary); }
  特点：具体的 CSS 规则，但所有值都引用 Token 而非硬编码

2.3 变化的传导链

改变一个 Design Token 的连锁反应：

修改 --color-blue-500: #3B82F6 → #2563EB
  ↓ Layer 2 自动更新
  --color-primary: var(--color-blue-500) → 自动变成 #2563EB
  --color-link: var(--color-blue-500) → 自动变成 #2563EB
  ↓ Layer 3 自动更新
  .button-primary → 新颜色
  .card-header → 新颜色
  .nav-bar-active → 新颜色
  .link → 新颜色
  .badge → 新颜色
  ...所有引用了 --color-primary 的 50+ 个组件全部自动更新

这就是三层架构的核心价值：
  → 不是「改了主色需要更新 50 个文件」
  → 而是「改了主色，50 个文件自动更新」

---

3. 六步主题生成工作流

3.1 完整流程

theme-factory 的 AI 主题生成流程：

Step 1：需求理解
  → 用户描述想要的风格：「春天感觉的、给鲜花品牌用的」
  → AI 提取关键词：春天、鲜花、柔和、温暖、女性化

Step 2：美学方向选择
  → 从 10 套预设主题中选择最接近的作为起点
  → 或根据关键词创建全新方向
  → 如：「植物园」主题作为基础 + 自定义调整

Step 3：生成 Design Tokens
  → 根据美学方向生成原子变量
  → 主色 #E8D5C4（杏色）、辅助色 #8B5E3C（棕色）、强调色 #D4A574（金色）
  → 间距单位、字号基准、圆角大小

Step 4：生成 Semantic Tokens
  → 将 Design Tokens 赋语义含义
  → --color-surface: 浅色变量
  → --color-text-primary: 深色变量（确保对比度）
  → 一套完整的语义令牌覆盖所有组件需求

Step 5：验证
  → 可访问性检查：文字与背景对比度 ≥ 4.5:1（WCAG AA）
  → 色盲模拟：红绿色盲/蓝黄色盲用户能否区分功能色
  → 如果不通过 → 回到 Step 3 调整调色板

Step 6：输出
  → 完整 CSS 变量文件
  → 组件预览页面
  → 主题切换 demo

3.2 为什么验证在第 5 步而非第 6 步

如果先输出再验证：
  → 用户已经把有问题的主题应用到产品中
  → 发现问题后需要回滚所有已使用的页面
  → 修复成本高、影响范围大

正确的循环：
  生成 → 验证 → 不通过 → 调整令牌 → 重新验证 → 通过 → 输出
  → 确保交付出去的主题已经通过了所有检查

3.3 可访问性检查的具体标准

WCAG AA 标准：
  → 正文与背景对比度 ≥ 4.5:1
  → 大标题（≥ 18px Bold 或 ≥ 24px）与背景对比度 ≥ 3:1
  → 功能色之间可区分（不只是靠颜色区分——错误提示应同时有图标）

10 套预设主题全部通过了 WCAG AA 检查——
这是 theme-factory 的设计原则：好看 + 可用 + 无障碍。

---

4. 10 套预设主题

theme-factory 提供 10 套专业预设主题作为起点，每套都包含完整的配色和字体搭配：

1. 海洋深处（Ocean Depths）
   → 深蓝 + 青色 + 沙色点缀

2. 日落大道（Sunset Boulevard）
   → 温暖的橙/粉/紫渐变

3. 森林华盖（Forest Canopy）
   → 深绿 + 浅绿 + 大地色

4. 现代极简（Modern Minimal）
   → 黑白灰 + 单强调色

5. 黄金时刻（Golden Hour）
   → 暖金 + 奶油色 + 深棕

6. 北极冰霜（Arctic Frost）
   → 冰蓝 + 白色 + 淡灰

7. 沙漠玫瑰（Desert Rose）
   → 陶土色 + 玫瑰色 + 沙色

8. 科技创新（Tech Innovation）
   → 深紫 + 电光蓝 + 深灰

9. 植物园（Botanical Garden）
   → 鼠尾草绿 + 花瓣粉 + 泥土棕

10. 午夜星河（Midnight Galaxy）
    → 深空黑 + 星光银 + 紫色点缀

🔑 设计要点：预设主题不是限制——它们是「起点」。用户可以基于任何预设主题进行调整（「用极简的布局但换上海洋的配色」），也可以完全自定义（「给我一个蒸汽波风格的配色方案」）。

---

5. 结构拆解：主题系统型 Skill 模板

---

6. 电商案例：天猫店铺季节性主题换肤

某母婴品牌天猫旗舰店（主营婴儿推车和安全座椅）每年需要在 4 个节点更换首页主题——春节红金、618 品牌蓝、双 11 深色战斗风、圣诞暖金——但每换一次主题，运营需要手动调整首页模块的 12 个组件颜色（导航条、轮播图边框、产品卡片背景、价格标签、优惠券模块、倒计时条、弹窗、按钮、角标、分类图标、页脚、悬浮客服按钮）。传统方式前端修改 12 处硬编码 CSS，每次耗时 2-3 天。

用 theme-factory 改造：

第一步：建立基础 Design Tokens（Layer 1）

:root {
  --spacing-unit: 8px;
  --font-size-base: 14px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
}

第二步：为每个节日建立 Semantic Tokens（Layer 2）

/* spring-festival.css —— 春节 */
[data-theme="spring-festival"] {
  --color-primary: #C41E3A;       /* 中国红——主按钮、价格标签 */
  --color-primary-hover: #A01830; /* 悬停态 */
  --color-accent: #D4AF37;        /* 金色——角标、倒计时 */
  --color-surface: #FFF8F0;       /* 暖白——卡片底色 */
  --color-bg: #FFFBF5;            /* 页面背景 */
  --color-text-primary: #2C1810;  /* 深棕——标题 */
  --font-heading: 'Noto Serif SC', serif;
}

/* mid-year.css —— 618 */
[data-theme="mid-year"] {
  --color-primary: #1E40AF;       /* 品牌蓝 */
  --color-primary-hover: #1E3A8A;
  --color-accent: #F59E0B;        /* 琥珀金——强调 */
  --color-surface: #F0F4FF;       /* 淡蓝白 */
  --color-bg: #F8FAFC;
  --color-text-primary: #1E293B;
  --font-heading: 'DM Sans', sans-serif;
}

/* double-11.css —— 双11 */
[data-theme="double-11"] {
  --color-primary: #DC2626;       /* 战斗红 */
  --color-primary-hover: #B91C1C;
  --color-accent: #FCD34D;        /* 亮金 */
  --color-surface: #1E1E1E;       /* 深色卡片 */
  --color-bg: #0F0F0F;            /* 深色背景 */
  --color-text-primary: #F5F5F5;  /* 浅色文字 */
  --font-heading: 'Bebas Neue', sans-serif;  /* 粗体压缩标题 */
}

/* christmas.css —— 圣诞 */
[data-theme="christmas"] {
  --color-primary: #B91C1C;       /* 圣诞红 */
  --color-primary-hover: #991B1B;
  --color-accent: #D4AF37;        /* 暖金 */
  --color-surface: #FFFDF7;       /* 暖白 */
  --color-bg: #FFFBEB;
  --color-text-primary: #3D2B1F;
  --font-heading: 'Playfair Display', serif;
}

第三步：组件层（Layer 3）统一引用 Semantic Tokens

/* 所有 12 个组件统一使用变量——不出现任何硬编码颜色 */
.nav-bar { background: var(--color-primary); }
.product-card { background: var(--color-surface); border-radius: var(--border-radius-md); }
.price-tag { color: var(--color-primary); font-weight: 700; }
.coupon-badge { background: var(--color-accent); color: #fff; }
.cta-button { background: var(--color-primary); }
.cta-button:hover { background: var(--color-primary-hover); }
.countdown-bar { border: 2px solid var(--color-accent); }
/* ... 其余 6 个组件同理 */

第四步：主题切换

<html data-theme="spring-festival">  <!-- 春节：一键切 -->
<html data-theme="mid-year">         <!-- 618：一键切 -->
<html data-theme="double-11">        <!-- 双11：一键切 -->
<html data-theme="christmas">        <!-- 圣诞：一键切 -->

效果：

• 主题切换耗时：从 2-3 天降至 30 分钟（只定义一套新 Semantic Tokens，12 个组件零改动）
• 可访问性检查：每套主题发布前自动跑对比度脚本——春节主题的红色按钮与白色文字对比度 6.2:1（WCAG AA 达标），圣诞主题的暖白背景与深棕文字对比度 10.5:1
• 一次改造后，全年 4 个节点累计节省前端工时约 10 天

🔑 启示：三层架构的电商价值不仅仅是「快」——它让运营团队能独立完成主题切换而不需要前端开发参与。过去「运营提需求→排期→前端改→测试→上线」的 5 步流程变成「运营提需求→30 分钟 Token 配置→上线」——人力依赖从开发资源变为运营自主可控。

---

7. 掌握检验

Q1：主题系统三个层次的正确顺序（从底层到顶层）是什么？

• A) 组件样式 → 语义令牌 → 设计令牌
• B) 设计令牌 → 语义令牌 → 组件样式
• C) 语义令牌 → 设计令牌 → 组件样式
• D) 设计令牌 → 组件样式 → 语义令牌

Q2：以下哪个关于 Design Tokens 和 Semantic Tokens 的描述是正确的？

• A) Design Tokens 是有意义名字的变量，Semantic Tokens 是原始值
• B) Design Tokens 是原始原子变量（如 --color-blue-500: #3B82F6），Semantic Tokens 是有语义含义的变量（如 --color-primary: var(--color-blue-500)）
• C) 两者完全相同，只是名字不同
• D) Design Tokens 只用于字体，Semantic Tokens 只用于颜色

Q3：为什么主题需要做可访问性检查？如果不做检查，在什么具体场景下会导致问题？

Q4：theme-factory 的生成流程中，为什么「验证」放在「输出」之前？如果先输出再验证会有什么问题？

Q5：你经营一家面向年轻女性的鲜花订阅品牌。请为「春日出游」主题定义 3 个关键语义令牌（颜色层面），并说明每个令牌的设计逻辑。

Q6：以下哪项是检验主题系统是否统一的最佳方法？

• A) 自己反复检查所有颜色值
• B) 截一张包含所有控件的图，问陌生人「这些看起来像同一个产品吗？」
• C) 运行 contrast checker 工具
• D) 让 AI 写一份主题分析报告

Q7：请解释为什么改变一个 Design Token（如主色）会影响到 50+ 个组件——这个「变化的传导链」是如何通过三层结构实现的？

---

8. 答案

点击查看答案

Q1：B — Layer 1（底层）：Design Tokens，最原子的变量（如 --color-blue-500: #3B82F6）；Layer 2（中间层）：Semantic Tokens，有语义含义（如 --color-primary: var(--color-blue-500)）；Layer 3（顶层）：Component Styles，组件引用语义令牌（如 .button { background: var(--color-primary) }）。

Q2：B — Design Tokens 是原材料级别，Semantic Tokens 赋予它们语义含义。修改 Design Token（换一种蓝），所有引用它的 Semantic Token 自动更新。

Q3：参考答案 — 不做检查的具体问题场景：(1) 视力较弱或色盲用户无法区分关键信息颜色（如红色错误提示和绿色成功提示看起来一样）；(2) 文字与背景对比度不足时，老年人或低视力用户在手机/低亮度屏幕上完全看不清文字。WCAG 标准要求正文对比度至少 4.5:1。

Q4：参考答案 — 如果先输出再验证，用户可能已经把有问题的主题应用到产品中，修复成本高。正确循环是：生成 → 验证 → 不通过 → 调整调色板 → 重新验证 → 通过 → 输出。

Q5：参考答案 — (1) --color-surface-primary: #FFF5F5（温暖的浅粉色背景，模拟樱花氛围）；(2) --color-text-primary: #4A2040（深紫褐色的正文，与浅粉背景对比度约 7.8:1）；(3) --color-accent: #E8618C（明亮的樱花粉作为按钮和强调色）。

Q6：B — 「陌生人测试」之所以有效，是因为你作为设计者已经对主题产生了「认知惯性」——你知道这些控件是一家的，所以看不到差异。而陌生人在没有任何上下文的情况下，纯粹凭视觉判断。

Q7：参考答案 — 传导链：Design Token 改变（如 --color-blue-500 从 #3B82F6 变为 #2563EB）→ Semantic Token 自动更新（--color-primary 引用了 --color-blue-500，自动变成新颜色）→ 所有引用了 --color-primary 的组件样式自动更新（.button、.card-header、.nav-bar、.link、.badge 等 50+ 个组件全部自动刷新）。这种「一次修改、全局更新」的能力是三层结构设计的核心价值。

（5/7 通过）

---

9. 延伸阅读

• [[L5-04-代码生成艺术|上一课：代码生成艺术]] —— 色彩算法用于主题的动态生成
• [[L5-06-Web构件生成|下一课：Web组件构建器]] —— 搭积木一样搭建复杂网页功能