Primer Design — 小白图解读本风格
生成"讲给完全不懂的人"的图解页:纸白底子上,一个复杂主题被拆成几屏,每屏一个概念、一张厚描边插画、两句短话。抽象的东西先给一个日常比喻,行话一出现就配"术语 → 人话"小片,结尾一条回顾条说清"现在你知道了什么"。质感来自《How It Works》/ DK 图解百科:亲切,不幼稚 —— 成年小白看了不觉得被当小孩。
Generates picture-explainer pages for readers who know nothing about the topic: one idea per screen, one thick-outline illustration carrying more than half of it, at most two short sentences of prose. Every abstraction arrives with an everyday analogy first; every piece of jargon arrives with its plain-language translation attached.
和其余 8 套的本质区别:其余 8 套是"给定内容 → 按美学渲染";primer 多一步内容转换 —— 先按 references/explain-method.md 把主题拆成小白能懂的结构(比喻、分步、术语翻译),再渲染。拆解规则是硬规则,critic 按它打分。
§1 使用方式
- 引入
assets/fonts.css + assets/primer.css。
- 页面骨架:
<body class="primer-body"> → .primer-nav → .primer-hero(大标题 + 主插画 + 一句"这页讲什么")→ 若干 .primer-section(每节一个概念)→ .primer-recap(结尾回顾条)→ .primer-footer。
- 容器三档:
.primer-container 默认 1080px(插画的工作档)· .primer-container--narrow 720px(只给正文,别拿它裹插画)· .primer-container--wide 1280px(≥16 个标签或 ≥3 列时必须)。
- 组件用
primer- 前缀 class,单连字符(primer-step-num,不是 BEM __;修饰符用 --,如 primer-container--wide,且修饰符不能单独出现,必须跟基类同写);页面局部样式用无前缀 class 写在页内 <style>(verify.py 只校验 primer-* 是否定义于 CSS)。
- 招牌组件(每一个都有对应 class,别自己另起名字):
.primer-analogy — 比喻卡("就像……"),自带小插画。一页至少一张,这是 primer 的身份标志。
卡里的插画用 <div class="primer-analogy-fig"> 裹,别用 <figure> —— 没有 <figcaption> 的
<figure> 会被 visual-audit 警告(known-bugs 1.18),而比喻卡的说明文字本来就在 .primer-analogy-body 里。.primer-step-num — 超大圆号步骤数字,厚描边手绘感圆圈 + 大号数字。装在 .primer-step 行里;这行当节标题用(体内只有一个 h2)时加修饰符 .primer-step--centered,数字对 h2 垂直居中 —— 别在页内 <style> 里自己写居中。.primer-term — 术语翻译气泡:mono 排术语,正文字排人话。.primer-recap — 结尾回顾条,三点总结 + 绿勾(.primer-recap-tick)。.primer-mark — 马克笔黄高亮 span,只圈一句里最要紧的那几个字。.primer-figure — 插画容器(<figure>),内含 <svg> + .primer-figcaption。
- 双语:每段
<span class="lang-en">…</span><span class="lang-zh">…</span>;nav 放 .primer-langtoggle lang-toggle 按钮组 + 页尾 IIFE 脚本(从 canonical 复制:脚本翻 html[data-lang],CSS 靠 html[data-lang="en"] .lang-zh { display:none } 收起另一语)。默认中文。
- 先读
references/dos-and-donts.md(品位边界)和 references/explain-method.md(拆解规则),再复制 references/canonical/<页型>.html 起步。
- 技术主题(位域 / 波形 / 总线 / IP core / 调用路径 / 算法 / 互连与地址带 / 协议分层 / 纵向地址映射)先读
references/tech-figures.md,现成 SVG 起点在 templates/diagrams/。
§2 触发关键词
eli5 / ELI5 / explain like I'm five / explain simply / picture explainer /
小白也能看懂 / 讲人话 / 图解 / 图解页 / 科普页 / 给外行解释 / 给非技术的人讲 /
给我妈讲讲 / 零基础入门讲解 / primer 风格
§3 不要用于
- 长文阅读站 / 知识库 / 文档首页 → 用 sage 或 anthropic(primer 是"少字大图",不是阅读排版;一段 300 字的正文在这里无处安放)
- 营销落地页 / 定价页 / 产品官网 → 用 apple 或 ember(primer 不卖东西,它只负责让人看懂)
- 数据汇报 / 董事会评审 / 季度 deck → 用 lectern(读者已经懂业务,不需要比喻)
- 产品发布会 / keynote → 用 eclat(primer 是白天的教室,不是熄了灯的发布厅)
- 应用界面 / 仪表盘 / 后台 → 用 atelier(primer 画的是解释,不是能点的产品)
- 玻璃拟态 / aurora 暗调展示页 → 用 glass(primer 零 backdrop-filter)
§4 阅读顺序
references/dos-and-donts.md — 品位边界(黄单档铁律 · 比喻卡必有 · 厚描边不是简笔画 · 不幼稚化)references/explain-method.md — 拆解规则(术语先翻译 · 抽象必配比喻 · 数字给实物参照 · 句长上限 · 讲解顺序锁定)references/illustration-craft.md — 厚描边插画画法(描边宽度 / 圆头 / 抖动 / 平涂色序)references/design-tokens.md — token 清单references/tech-figures.md — 技术主题才读:九类技术图的规格(位域 / 时序波形 / 总线 SoC /
IP core 内部 / 调用路径 / 算法 / 互连与地址带 / 协议分层 / 纵向地址映射),每一类都带"必须画 / 禁止 / 违例改写 / viewBox 与标签预算"references/canonical/{concept,process,compare}.html + 同名 .md — 对应页型的 canonical(含 self-diff 决策块)
§5 发布前检查(MUST)
~/.claude/skills/design-review/dr-cli --skill=primer <your-page.html> # 四道机械检查(结构/渲染/可达性/截图)
~/.claude/skills/design-review/dr-cli --skill=primer --critic <your-page.html> # 再加 LLM critic · 口味评审(四道之外)
任一 error = 任务没完成。canonical 自回归:verify + visual-audit 必须 0 error。
页内 </body> 前 embed design-review:self-diff v1 注释块(canonical 必须)。
机械检查是必要条件,不是充分条件:截图必须人眼看过。
§6 primer 专属要点(机械检查 + critic 会抓)
- 黄单档铁律(口味规则,机器不管):
--primer-marker #ffd23f 只此一档,禁止派生深黄 token。压深的黄(如 hover 用 (230,178,60))不再像荧光笔划过纸,开始像 ember 的暖金 #c49464 —— 换成了别家的声音。串味检查不会为它响(实测欧氏 60.5,阈值 22,而且 ember 金不在 primer 的禁忌清单里),所以这条只有 critic 和你自己盯着。要更重的强调就换 --primer-violet-ink 的紫字,不要压黄。
- 比喻卡必有:一页至少一张
.primer-analogy。抽象概念没有比喻 = 这页没做 primer 该做的事,critic 直接扣。
- 一屏一概念:每个
.primer-section 只讲一件事,插画占该节面积 ≥ 一半,正文每屏最多两短句。堆成密集 above-the-fold 落地页就丢掉了读本调性。
- 术语先翻译后使用:没被
.primer-term 用人话定义过的行话,不许出现在正文里。裸数字同理 —— "2MB" 要跟一个实物参照("约一首歌")。
- 厚描边不是简笔画:
.primer-figure svg 用 3–4px 圆头描边 + 平涂色块 + 轻微手绘抖动,画的是真东西(有齿的齿轮、有抽屉的柜子、有页脚的书)。扁平图标 + 打钩是 slop tell。
- 插画标签预算是别家的一半:1080 档 ≤14 个标签,想放 20 个就拆成两屏。一张图只教一件事;彩虹配色是通用信息图的味道。
- 紫是招牌色,第一屏就要看见:
--primer-violet #7a5cd6 活在超大圆号数字、比喻卡边框、nav 字标的点、hero 主插画的主色上。
- 实色,不用 rgba 调正文颜色:
--primer-ink #243244 是实值;alpha 淡化的正文是 axe color-contrast 的常见死法(atelier 踩过)。
- 双语全角标点:zh span 内
,;: 一律全角 ，；：(verify 抓)。
1---2name: primer-design3description: 把复杂主题变成"零基础也能看懂"的图解读本页 —— 纸白底 + 厚描边插画 + 超大圆号步骤数字 + 比喻卡 + 马克笔黄高亮。大图、少字、比喻先行:每屏只讲一件事,插画占一半以上面积,术语先翻译成人话再使用。科普绘本感,亲切但不幼稚。TRIGGER 当用户提到 eli5 / 小白也能看懂 / 图解 / 给外行解释 / 科普页 / 给我妈讲讲 / 讲人话 / picture explainer / explain simply / explain like I'm five / primer 风格 时使用。DO NOT TRIGGER:长文阅读站 / 知识库(用 sage / anthropic)、营销落地页 / 定价页(用 apple / ember)、数据汇报 deck(用 lectern)、产品发布会(用 eclat)、应用界面 / 仪表盘(用 atelier)、玻璃拟态 aurora(用 glass)。4---56# Primer Design — 小白图解读本风格78生成"讲给完全不懂的人"的图解页:纸白底子上,一个复杂主题被拆成几屏,每屏一个概念、一张厚描边插画、两句短话。抽象的东西先给一个日常比喻,行话一出现就配"术语 → 人话"小片,结尾一条回顾条说清"现在你知道了什么"。质感来自《How It Works》/ DK 图解百科:**亲切,不幼稚** —— 成年小白看了不觉得被当小孩。910Generates picture-explainer pages for readers who know nothing about the topic: one idea per screen, one thick-outline illustration carrying more than half of it, at most two short sentences of prose. Every abstraction arrives with an everyday analogy first; every piece of jargon arrives with its plain-language translation attached.1112**和其余 8 套的本质区别**:其余 8 套是"给定内容 → 按美学渲染";primer 多一步**内容转换** —— 先按 `references/explain-method.md` 把主题拆成小白能懂的结构(比喻、分步、术语翻译),再渲染。拆解规则是硬规则,critic 按它打分。1314## §1 使用方式15161. 引入 `assets/fonts.css` + `assets/primer.css`。172. 页面骨架:`<body class="primer-body">` → `.primer-nav` → `.primer-hero`(大标题 + 主插画 + 一句"这页讲什么")→ 若干 `.primer-section`(每节一个概念)→ `.primer-recap`(结尾回顾条)→ `.primer-footer`。183. 容器三档:`.primer-container` 默认 1080px(**插画的工作档**)· `.primer-container--narrow` 720px(**只给正文**,别拿它裹插画)· `.primer-container--wide` 1280px(≥16 个标签或 ≥3 列时必须)。194. 组件用 `primer-` 前缀 class,**单连字符**(`primer-step-num`,不是 BEM `__`;修饰符用 `--`,如 `primer-container--wide`,且修饰符不能单独出现,必须跟基类同写);页面局部样式用**无前缀** class 写在页内 `<style>`(verify.py 只校验 `primer-*` 是否定义于 CSS)。205. 招牌组件(每一个都有对应 class,别自己另起名字):21 - `.primer-analogy` — 比喻卡("就像……"),自带小插画。**一页至少一张**,这是 primer 的身份标志。22 卡里的插画用 `<div class="primer-analogy-fig">` 裹,**别用 `<figure>`** —— 没有 `<figcaption>` 的23 `<figure>` 会被 visual-audit 警告(known-bugs 1.18),而比喻卡的说明文字本来就在 `.primer-analogy-body` 里。24 - `.primer-step-num` — 超大圆号步骤数字,厚描边手绘感圆圈 + 大号数字。装在 `.primer-step` 行里;这行当节标题用(体内只有一个 h2)时加修饰符 `.primer-step--centered`,数字对 h2 垂直居中 —— 别在页内 `<style>` 里自己写居中。25 - `.primer-term` — 术语翻译气泡:mono 排术语,正文字排人话。26 - `.primer-recap` — 结尾回顾条,三点总结 + 绿勾(`.primer-recap-tick`)。27 - `.primer-mark` — 马克笔黄高亮 span,只圈一句里最要紧的那几个字。28 - `.primer-figure` — 插画容器(`<figure>`),内含 `<svg>` + `.primer-figcaption`。296. 双语:每段 `<span class="lang-en">…</span><span class="lang-zh">…</span>`;nav 放 `.primer-langtoggle lang-toggle` 按钮组 + 页尾 IIFE 脚本(从 canonical 复制:脚本翻 `html[data-lang]`,CSS 靠 `html[data-lang="en"] .lang-zh { display:none }` 收起另一语)。默认中文。307. 先读 `references/dos-and-donts.md`(品位边界)和 `references/explain-method.md`(拆解规则),再复制 `references/canonical/<页型>.html` 起步。318. 技术主题(位域 / 波形 / 总线 / IP core / 调用路径 / 算法 / 互连与地址带 / 协议分层 / 纵向地址映射)先读 `references/tech-figures.md`,现成 SVG 起点在 `templates/diagrams/`。3233## §2 触发关键词3435eli5 / ELI5 / explain like I'm five / explain simply / picture explainer /36小白也能看懂 / 讲人话 / 图解 / 图解页 / 科普页 / 给外行解释 / 给非技术的人讲 /37给我妈讲讲 / 零基础入门讲解 / primer 风格3839## §3 不要用于4041- 长文阅读站 / 知识库 / 文档首页 → 用 **sage** 或 **anthropic**(primer 是"少字大图",不是阅读排版;一段 300 字的正文在这里无处安放)42- 营销落地页 / 定价页 / 产品官网 → 用 **apple** 或 **ember**(primer 不卖东西,它只负责让人看懂)43- 数据汇报 / 董事会评审 / 季度 deck → 用 **lectern**(读者已经懂业务,不需要比喻)44- 产品发布会 / keynote → 用 **eclat**(primer 是白天的教室,不是熄了灯的发布厅)45- 应用界面 / 仪表盘 / 后台 → 用 **atelier**(primer 画的是解释,不是能点的产品)46- 玻璃拟态 / aurora 暗调展示页 → 用 **glass**(primer 零 backdrop-filter)4748## §4 阅读顺序49501. `references/dos-and-donts.md` — 品位边界(黄单档铁律 · 比喻卡必有 · 厚描边不是简笔画 · 不幼稚化)512. `references/explain-method.md` — 拆解规则(术语先翻译 · 抽象必配比喻 · 数字给实物参照 · 句长上限 · 讲解顺序锁定)523. `references/illustration-craft.md` — 厚描边插画画法(描边宽度 / 圆头 / 抖动 / 平涂色序)534. `references/design-tokens.md` — token 清单545. `references/tech-figures.md` — **技术主题才读**:九类技术图的规格(位域 / 时序波形 / 总线 SoC /55 IP core 内部 / 调用路径 / 算法 / 互连与地址带 / 协议分层 / 纵向地址映射),每一类都带"必须画 / 禁止 / 违例改写 / viewBox 与标签预算"566. `references/canonical/{concept,process,compare}.html` + 同名 `.md` — 对应页型的 canonical(含 self-diff 决策块)5758## §5 发布前检查(MUST)5960```bash61~/.claude/skills/design-review/dr-cli --skill=primer <your-page.html> # 四道机械检查(结构/渲染/可达性/截图)62~/.claude/skills/design-review/dr-cli --skill=primer --critic <your-page.html> # 再加 LLM critic · 口味评审(四道之外)63```6465任一 error = 任务没完成。canonical 自回归:verify + visual-audit 必须 0 error。66页内 `</body>` 前 embed `design-review:self-diff v1` 注释块(canonical 必须)。67机械检查是必要条件,不是充分条件:**截图必须人眼看过**。6869## §6 primer 专属要点(机械检查 + critic 会抓)7071- **黄单档铁律**(口味规则,机器不管):`--primer-marker #ffd23f` 只此一档,**禁止派生深黄 token**。压深的黄(如 hover 用 (230,178,60))不再像荧光笔划过纸,开始像 ember 的暖金 `#c49464` —— 换成了别家的声音。串味检查不会为它响(实测欧氏 60.5,阈值 22,而且 ember 金不在 primer 的禁忌清单里),所以这条只有 critic 和你自己盯着。要更重的强调就换 `--primer-violet-ink` 的紫字,不要压黄。72- **比喻卡必有**:一页至少一张 `.primer-analogy`。抽象概念没有比喻 = 这页没做 primer 该做的事,critic 直接扣。73- **一屏一概念**:每个 `.primer-section` 只讲一件事,插画占该节面积 ≥ 一半,正文每屏最多两短句。堆成密集 above-the-fold 落地页就丢掉了读本调性。74- **术语先翻译后使用**:没被 `.primer-term` 用人话定义过的行话,不许出现在正文里。裸数字同理 —— "2MB" 要跟一个实物参照("约一首歌")。75- **厚描边不是简笔画**:`.primer-figure svg` 用 3–4px 圆头描边 + 平涂色块 + 轻微手绘抖动,画的是**真东西**(有齿的齿轮、有抽屉的柜子、有页脚的书)。扁平图标 + 打钩是 slop tell。76- **插画标签预算是别家的一半**:1080 档 ≤14 个标签,想放 20 个就拆成两屏。一张图只教一件事;彩虹配色是通用信息图的味道。77- **紫是招牌色,第一屏就要看见**:`--primer-violet #7a5cd6` 活在超大圆号数字、比喻卡边框、nav 字标的点、hero 主插画的主色上。78- **实色,不用 rgba 调正文颜色**:`--primer-ink #243244` 是实值;alpha 淡化的正文是 axe color-contrast 的常见死法(atelier 踩过)。79- **双语全角标点**:zh span 内 `,;:` 一律全角 `，；：`(verify 抓)。
TbusOS