course-style

用途

Course style 是 AI Engineering from Scratch 课程外观与语气的参考层。其他工艺技能会指向这里获取精确取值：blueprint-figure、motion-figure、isometric-explainer 和 write-manual。它可以配合 Claude、Cursor、Codex、OpenClaw、Hermes 或任何能读取 SKILL.md 的智能体使用。该技能本身不包含绘图方法，只规定应使用哪种颜色、字体、标签、间距和措辞，以及如何逐项检查。

何时使用

• 为课程撰写或审阅页面、卡片、图表或手册。
• 需要浅色或深色模式的令牌值。
• 需要图表、子图表或组件的标签格式。
• 需要对照纯技术英语规则检查文字。
• 添加动效并需要时长、缓动和减少动效行为。

何时不使用

• 绘制静态 SVG 图表时，使用 blueprint-figure，它会引用本技能。
• 构建动画或滑块图表时，使用 motion-figure。
• 构建等距机器说明图时，使用 isometric-explainer。
• 撰写完整手册时，使用 write-manual 处理结构与审计。
• 页面属于其他品牌的产品时。

方法

1. 设置主题。将浅色令牌放在 :root，深色令牌放在 [data-theme="dark"]。从 references/tokens.md 复制。
2. 选择令牌集。页面使用站点令牌。手册图表使用 --m- 令牌。
3. 使用 references/typography.md 中的精确链接加载三种字体。按给定字体栈使用。
4. 按 references/labels-and-layout.md 中的格式为每个图表添加标签。
5. 按 references/labels-and-layout.md 中的尺寸构建卡片与图框。
6. 仅使用动效令牌添加动效。添加 references/accessibility.md 中的减少动效代码块。
7. 撰写文字。然后对照 references/plain-english.md 检查每一行。
8. 运行下方检查清单。完成前修复每一项失败。

规则

颜色

• 每页使用一种强调色：--blueprint（浅色 #3553ff，深色 #6b8eff）。状态令牌和手册图表色相是仅有的其他颜色。
• 每种颜色都写成 CSS 变量。十六进制值只允许作为 var() 内的默认值。
• 每个令牌都要在两种主题中定义。没有深色值的令牌属于缺陷。
• 正文只能使用 --ink 或 --ink-soft。
• 不要将 --ink-mute 或 --warn 用于正文。它们在纸面上的对比度低于 4.5:1。
• 保持四种固定图表色相：rose 表示失败，grey 表示外部，amber 表示生命周期，teal 表示持久状态。
• 除纸张点阵和虚线规则外不使用渐变。卡片或图框不使用圆角。

字体

• 标题使用展示字体，字重 400，大写，字距 0.02em，颜色 --blueprint。
• 正文使用衬线字体，18px，行高 1.62。
• 标签、元信息行和代码使用等宽字体，标签大写，字距 0.06em 至 0.16em。
• 图表文字在 640 单位宽度下至少为 11 单位。

标签

• 课程图表编号为 FIG_ 加三位数字，例如 FIG_005。编号不得重复使用。
• 子图表添加一个点和一个大写字母：FIG_005.A。
• 标签各部分用中点分隔，两侧各一个空格：FIG_001 · FORWARD PASS。
• 手册图表为 Fig. <part>.<n>，例如 Fig. 4.1。其 id 为 fig-4-1。

文字

• 句子最多 25 个词。指令最多 20 个词并使用祈使句。
• 段落只有一个主题，最多六句话。
• 不使用长破折号、短破折号、分号和缩略形式。
• 永远不要写 "may"。写 "can"，或说明条件。
• 不使用 references/plain-english.md 中的禁用词。
• 代码片段、围栏代码、引文和引用不受此限。

动效与无障碍

• 只使用四种时长：160、180、220 和 250 ms。
• 页面显现从 8px 外、不透明度 0 开始，使用 --ease-out。模态框从低 14px、缩放 0.985 开始。
• 按下按钮缩放至 0.97。
• 在 prefers-reduced-motion: reduce 下，移除过渡和动画并显示最终状态。
• 每个可聚焦控件显示 2px 实线 --blueprint 轮廓，偏移 2px。
• 菜单和图表控件中的触摸目标高度至少 44px。

完成前检查

• 每种颜色都是 var(--token)，且每个令牌都有浅色和深色值。
• 页面使用一种强调色。
• 没有正文使用 --ink-mute 或 --warn。
• 字体从同一个 Google Fonts 链接加载，字体栈与 references/typography.md 匹配。
• 每个图表都有 references/labels-and-layout.md 中格式的标签。
• 没有标签使用长破折号作为分隔符。
• 每个过渡都使用动效令牌，且存在减少动效代码块。
• 每个控件都有可见的焦点轮廓。菜单行和图表控件高度至少 44px。
• references/plain-english.md 中的文字检查报告零命中。
• 切换到深色主题并再次阅读页面。

文件

• references/tokens.md：浅色和深色的站点与图表令牌、色相含义、动效令牌、实测对比度。
• references/typography.md：字体栈、字体链接、字号比例和标签样式。
• references/labels-and-layout.md：FIG_ 格式、文件名、卡片布局和图框。
• references/plain-english.md：完整文字规则列表、禁用词和检查器。
• references/accessibility.md：焦点、目标、图表标记、主题启动和减少动效。

在 AI Engineering from Scratch 仓库内，源值位于 site/style.css、manuals/_shared/tokens.css 和 scripts/audit_manuals.js。