course-style

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Course style

课程风格

This skill is the reference layer for the AI Engineering from Scratch look and voice. Other craft skills point here for exact values: blueprint-figure, motion-figure, isometric-explainer, and write-manual. Use it with Claude, Cursor, Codex, OpenClaw, Hermes, or any agent that reads SKILL.md. It holds no drawing method of its own. It tells you which colour, font, label, spacing, and word to use, and how to check each one.

该 skill 是 AI Engineering from Scratch 视觉风格和语言风格的参考层。其他 craft skill 会指向这里以获取精确值：blueprint-figure、motion-figure、isometric-explainer 和 write-manual。可与 Claude、Cursor、Codex、OpenClaw、Hermes 或任何能够读取 SKILL.md 的 Agent 配合使用。它本身不包含任何绘图方法。它会告诉你应使用哪种颜色、字体、标签、间距和措辞，以及如何逐一检查。

When to use

何时使用

You write or review a page, a card, a figure, or a manual for the course.
You need a token value for light or dark mode.
You need the label format for a figure, a sub-figure, or a widget.
You need to check prose against the plain technical English rules.
You add motion and need the timing, the easing, and the reduced motion behaviour.

你正在为课程编写或审查页面、卡片、图示或手册。
你需要浅色或深色模式的 token 值。
你需要图示、子图或控件的标签格式。
你需要根据简明技术英语规则检查正文。
你添加动态效果，并需要确定时长、缓动方式和 reduced motion 行为。

When not to use

何时不要使用

You draw a static SVG figure. Use blueprint-figure, which cites this skill.
You build an animated or slider figure. Use motion-figure.
You build an isometric machine explainer. Use isometric-explainer.
You write a full manual. Use write-manual for the structure and the audit.
The page belongs to a different product with its own brand.

你要绘制静态 SVG 图示。请使用 blueprint-figure，该 skill 会引用本文档。
你要构建动画图示或滑块图示。请使用 motion-figure。
你要构建等轴测机器讲解图。请使用 isometric-explainer。
你要编写完整手册。请使用 write-manual 处理结构和审核。
页面属于具有独立品牌的其他产品。

Method

方法

Set the theme. Put the light tokens on
```
:root
```
and the dark tokens on
```
[data-theme="dark"]
```
. Copy them from
```
references/tokens.md
```
.
Pick the token set. Pages use the site tokens. Manual figures use the
```
--m-
```
tokens.
Load the three fonts with the exact link in
```
references/typography.md
```
. Use the stacks as given.
Give each figure a label in the format from
```
references/labels-and-layout.md
```
.
Build cards and figure frames with the measurements in
```
references/labels-and-layout.md
```
.
Add motion only with the motion tokens. Add the reduced motion block from
```
references/accessibility.md
```
.
Write the prose. Then check every line against
```
references/plain-english.md
```
.
Run the checklist below. Fix each failure before you finish.

设置主题。将浅色 token 放在
```
:root
```
，将深色 token 放在
```
[data-theme="dark"]
```
。从
```
references/tokens.md
```
复制这些值。
选择 token 集。页面使用站点 token。手册图示使用
```
--m-
```
token。
使用
```
references/typography.md
```
中的准确链接加载三种字体。原样使用其中的字体栈。
按照
```
references/labels-and-layout.md
```
中规定的格式，为每个图示添加标签。
使用
```
references/labels-and-layout.md
```
中的尺寸构建卡片和图示框。
仅使用 motion token 添加动态效果。添加
```
references/accessibility.md
```
中的 reduced motion 代码块。
编写正文。然后根据
```
references/plain-english.md
```
检查每一行。
运行下方检查清单。完成前修复每一项未通过项。

Rules

规则

Colour

颜色

Use one accent per page:
```
--blueprint
```
(
```
#3553ff
```
light,
```
#6b8eff
```
dark). Status tokens and manual figure hues are the only other colours.
Write every colour as a CSS variable. A hex value is allowed only as the default inside
```
var()
```
.
Define every token in both themes. A token without a dark value is a defect.
Put body text in
```
--ink
```
or
```
--ink-soft
```
only.
Do not use
```
--ink-mute
```
or
```
--warn
```
for body text. Their contrast on the paper is below 4.5:1.
Keep the four fixed figure hues: rose for failure, grey for outside, amber for lifecycle, teal for durable state.
Use no gradients except the paper dot grid and the dashed rule. Use no rounded corners on cards or frames.

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

Type

字体排版

Headings use the display font, weight 400, uppercase, letter spacing 0.02em, colour
```
--blueprint
```
.
Body text uses the serif at 18px with line height 1.62.
Labels, meta lines, and code use the mono font, uppercase for labels, letter spacing 0.06em to 0.16em.
Figure text is at least 11 units at a 640-unit width.

标题使用 display 字体，字重为 400，采用大写形式，字间距为 0.02em，颜色为
```
--blueprint
```
。
正文使用 serif 字体，18px，行高为 1.62。
标签、元信息行和代码使用 mono 字体。标签采用大写形式，字间距为 0.06em 至 0.16em。
图示宽度为 640 单位时，其中文字至少为 11 单位。

Labels

Prose

正文

Sentences have at most 25 words. Instructions have at most 20 words and use the imperative.
A paragraph has one topic and at most six sentences.
Use no em dashes, no en dashes, no semicolons, and no contractions.
Never write "may". Write "can", or state the condition.
Use none of the banned words in
```
references/plain-english.md
```
.
Code spans, fenced code, quotes, and citations are exempt.

每个句子最多包含 25 个词。每条说明最多包含 20 个词，并使用祈使语气。
每个段落只讨论一个主题，且最多包含六个句子。
不使用 em dash、en dash、分号或英语缩合形式。
绝不写“may”。改写为“can”，或明确说明适用条件。
不使用
```
references/plain-english.md
```
中列出的任何禁用词。
行内代码、围栏代码块、引文和引用不受此限制。

Motion and access

动态效果与无障碍

Use only the four durations: 160, 180, 220, and 250 ms.
Page reveals start 8px away at opacity 0 and use
```
--ease-out
```
. Modals start 14px lower at scale 0.985.
Pressed buttons scale to 0.97.
Under
```
prefers-reduced-motion: reduce
```
, remove transitions and animations and show the final state.
Every focusable control shows a 2px solid
```
--blueprint
```
outline at a 2px offset.
Touch targets in menus and figure controls are at least 44px tall.

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

Check before you finish

完成前检查

Every colour is a
```
var(--token)
```
, and each token has a light and a dark value.
The page uses one accent colour.
No body text uses
```
--ink-mute
```
or
```
--warn
```
.
Fonts load from the one Google Fonts link, and the stacks match
```
references/typography.md
```
.
Every figure has a label in a format from
```
references/labels-and-layout.md
```
.
No label uses an em dash as a separator.
Every transition uses a motion token, and a reduced motion block exists.
Every control has a visible focus outline. Menu rows and figure controls are 44px tall or more.
The prose check in
```
references/plain-english.md
```
reports zero hits.
You switched the theme to dark and read the page again.

每种颜色都使用
```
var(--token)
```
，且每个 token 都有浅色和深色值。
页面使用一种强调色。
正文文本未使用
```
--ink-mute
```
或
```
--warn
```
。
字体从同一个 Google Fonts 链接加载，且字体栈与
```
references/typography.md
```
一致。
每个图示都有标签，且格式符合
```
references/labels-and-layout.md
```
。
标签分隔符均未使用 em dash。
每项过渡都使用 motion token，且存在 reduced motion 代码块。
每个控件都有可见的焦点轮廓。菜单行和图示控件的高度至少为 44px。
```
references/plain-english.md
```
的正文检查命中数为 0。
已切换到深色主题并再次阅读页面。

Files

文件

```
references/tokens.md
```
: site and figure tokens for light and dark, hue meanings, motion tokens, measured contrast.
```
references/typography.md
```
: font stacks, the font link, type scale, and label styles.
```
references/labels-and-layout.md
```
: FIG_ formats, file names, card layout, and figure frames.
```
references/plain-english.md
```
: the full prose rule list, the banned words, and a checker.
```
references/accessibility.md
```
: focus, targets, figure markup, theme start-up, and reduced motion.

Inside the AI Engineering from Scratch repo, the source values live in

site/style.css

manuals/_shared/tokens.css

, and

scripts/audit_manuals.js

```
references/tokens.md
```
：浅色和深色模式下的站点及图示 token、色相含义、motion token 和实测对比度。
```
references/typography.md
```
：字体栈、字体链接、字号比例和标签样式。
```
references/labels-and-layout.md
```
：FIG_ 格式、文件名、卡片布局和图示框。
```
references/plain-english.md
```
：完整的正文规则列表、禁用词和检查器。
```
references/accessibility.md
```
：焦点、触摸目标、图示标记、主题初始化和 reduced motion。

在 AI Engineering from Scratch 仓库中，源值位于

site/style.css

、

manuals/_shared/tokens.css

和

scripts/audit_manuals.js

。