course-style

课程风格

此技能是《从零开始的 AI 工程》外观与语气的参考层。其他制作技能会在此查找具体数值：blueprint-figure、motion-figure、isometric-explainer 和 write-manual。可将它与 Claude、Cursor、Codex、OpenClaw、Hermes，或任何会读取 SKILL.md 的 Agent 搭配使用。它本身不包含绘图方法，而是告诉你该使用哪种颜色、字体、标签、间距和用词，以及如何逐一检查。

适用场景

• 为课程撰写或审阅页面、卡片、图示或手册。
• 需要浅色或深色模式的令牌值。
• 需要图示、子图或小组件的标签格式。
• 需要按照简明技术英语规则检查文案。
• 添加动态效果，需要确定计时、缓动和减少动态效果时的行为。

不适用场景

• 绘制静态 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。
• 固定使用四种图示色调：玫瑰色表示失败，灰色表示外部，琥珀色表示生命周期，青绿色表示持久状态。
• 除纸张点阵和虚线规则外，不得使用渐变。卡片或边框不得使用圆角。

字体

• 标题使用展示字体，字重为 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 个单词，并使用祈使句。
• 一个段落只讨论一个主题，且最多包含六个句子。
• 不得使用 em dash、en dash、分号或缩写形式。
• 不得使用“may”。请改用“can”，或说明具体条件。
• 不得使用 references/plain-english.md 中列出的任何禁用词。
• 代码片段、围栏代码、引文和引用不受此规则限制。

动效与无障碍访问

• 仅使用以下四种时长：160、180、220 和 250 ms。
• 页面内容从透明度为 0、偏移 8px 的位置开始显示，并使用 --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 格式的标签。
• 没有标签使用 em dash 作为分隔符。
• 每个过渡都使用动效令牌，且存在减少动效的代码块。
• 每个控件都有清晰可见的焦点轮廓。菜单行和图示控件的高度至少为 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。