粉笔课堂

---
name: chalk-talk
description: 生成一份真正能用的网页课件，看起来就像写在教室黑板上，长短不限，可用英文或简体中文。青绿色石板、粉笔灰、粉笔字、带种子抖动的手绘标记，黑板下的粉笔槽托着页码。自带键盘翻页、总览、讲者备注和讲者窗口、打印为文档，以及可另存新文件的内置编辑。当用户要做讲课课件、教学演示、团队分享或工作坊，想要亲切的板书风格，或直接点名这个风格时使用。
version: 1.0.0
---

# 粉笔课堂

外观和全部功能都在 `assets/template.html` 里。你要做的是选版式、写内容。你只写一个页面文件，由 `scripts/assemble.mjs` 合成一个独立的网页课件。不要手改引擎，也不要凭记忆重写。

动笔前先读 `assets/layouts.html`：里面有全部 14 种版式、图示元件、数学写法，以及各个文字位和字数上限。只有需要查具体数值或规则缘由时，才读 `references/style.md`。不要打开 `assets/fonts-*.css`，那是体积很大的内嵌字体。

## 需要问清楚的信息

简报里缺什么，一次问完，放在同一条消息里。

必需：
1. 主题，以及听完之后听众应该会做什么。
2. 听众是谁，已经懂多少。
3. 时长：多少分钟或多少页。
4. 语言：简体中文或英文。

可选：
5. 要用到的资料、事实和日期。
6. 每页粉笔槽上的一句话，比如课程名称或免责声明。
7. 是否要在学校电脑上离线放映。课件本来就能离线，对方担心时说明一下。

## 步骤

1. 先列提纲：每页一行，写明版式。可参考下表，再按内容调整。

   | 时长 | 页数 |
   |---|---|
   | 5 分钟 | 5 到 6 页 |
   | 15 分钟 | 10 到 12 页 |
   | 30 分钟 | 18 到 22 页 |
   | 45 分钟 | 26 到 32 页 |
   | 60 分钟 | 35 到 45 页 |

   第一页用 `title`，最后一页用 `recap`。同一版式不要连用三次。讲课时大约每 8 页放一个 `quiz`。
2. 在技能目录之外建一个工作文件夹，在里面写 `slides.html`，从 `assets/layouts.html` 复制版式块。替换所有 `[[...]]`，保留所有属性。遵守每个 `data-max` 的上限（斜杠前是英文字符数，斜杠后是中文字数）。每页用不同的 `data-seed`。图标要选合乎学科的，版式库里的只是起点。每页都写真实的讲者备注。
   - **换行：** `<br>` 可以用在任何文字位，正文和标题都行。词语或算式断得难看时就用它。
   - **分步显示：** `data-step` 加在要显示的那一块上。`flow` 版式里，把它同时加在方框和方框前面的箭头上，数字相同。第一个方框不用加。数字只要依次变大即可。
   - **图示：** 学科需要的图（分数条、格子、坐标轴、箭头、括号、涂色部分），用 `diagram` 版式，或者把 `<figure class="dg">` 放进 `points` 的图形位。元件都列在 `assets/layouts.html` 里。标签是 `.dg-label` 文字位，在课件里可以直接修改。不要手写 `<svg>` 或 `<text>`，检查脚本会拒绝。
   - **数学：** 上下式分数写成 `<span class="frac"><span>3</span><span>4</span></span>`，算式用 `<span class="math">...</span>` 包起来。这样在标题字体里也认得清，直接打 5/12 则不好认。
   - **粉笔槽：** `--ledge` 上限是 36 个汉字或 70 个拉丁字符，检查脚本会核对。`title` 页不显示这句话，所以虚构或免责说明写在标题页的署名位，不要在小标题里再写一遍。
3. 合成：
   ```
   node scripts/assemble.mjs --slides slides.html --lang zh --title "课件标题" --ledge "粉笔槽上的一句话" --out deck.html
   ```
   英文课件用 `--lang en`。确实必须保留外文的术语，才用 `--foreign-ok "术语,术语"`。
4. 检查：`node scripts/check.mjs deck.html`。修好它报告的所有问题，再跑一次，直到通过。`WARN` 行列出内嵌字体没有的字，这些字仍会显示，但用的是系统字体，能换就换。
5. 亲眼看：`node scripts/view.mjs deck.html shots` 会给每一页截图并报告溢出，每页约 2 秒。它也会提示哪些字形用了系统字体。每张截图都要打开看。断行难看就改文字。如果某页被自动缩小，就把内容写短。不要改样式。
6. 中文标题一律用 `<br>` 控制换行，不要把一个词拆到两行。
7. 如果能打开浏览器，用键盘把整份课件翻一遍。做不到就如实说明。

## 交付物

- `deck.html`：单个文件，不发起任何外部请求，用 Chrome 或 Edge 打开。
- 可选的 `deck.pdf`：`node scripts/export-pdf.mjs deck.html deck.pdf`，15 页约 5 秒。文档里的粉笔质感已合成为图片，文字层只有一份，所以在苹果的预览程序里也能正常打开。复制文字时，上下式分数会变成两个分开的数字。
- 一份简短清单：你的假设，以及你推断出来的句子。

告诉对方怎么用：方向键或空格翻页，按 O 看总览，按 N 看备注，按 S 开讲者窗口，按 E 编辑，按 P 打印。在打印对话框里选存储为文档。尽量按 P 或点“打印为文档”，不要从浏览器菜单打印，并保持背景图形打开。编辑时点“另存为新文件”，会下载一份新文件，原文件不变。

## 遇到特殊情况

- **简报内容很少。** 把对方给的事实写进去，绝不编造。不要虚构数字、客户、评价、资历、引语或日期。推断出来的句子都要列出来。
- **没人能回答问题。** 先做一份最小的、诚实的课件，并在回复开头列出假设。
- **想换一个长度。** 按上表重新规划再合成。要缩短就删整页，保留 `title`、一个 `quiz` 和 `recap`。要加长就拆开太满的页，或者加 `quiz`、`statement`，不要往一页里塞更多字。
- **没有真实链接。** 这套课件不依赖链接。不要编造网址，用平实的话写清楚听众该做什么，或者干脆不写。
- **题目涉及健康、法律或金钱。** 只讲一般性知识，并在标题页和粉笔槽上写明，同时告诉听众到哪里获得个人建议。
- **例子是虚构的。** 在标题页的署名位标明一次，其他页的粉笔槽上也标明。
- **你自己编了练习题。** 题目里的数字可以是编的，但必须算对，并在备注里说明这道题是为本课编的。
- **内容主要是大表格或密集数据。** 这种风格撑不住。直说，并建议换一种形式。
- **图表需要真实数据。** `graph` 版式是手绘示意。如果不是实测数据，图注必须写明是示意，不要借它暗示精确。

## 交付前检查

- [ ] 最终文件通过 `scripts/check.mjs`。
- [ ] `scripts/view.mjs` 没有报告溢出，每一页我都看过。
- [ ] 每一页的讲者备注都是为这次讲课写的。
- [ ] 界面和内容只用一种语言。
- [ ] 没有编造内容，推断的句子已经列给对方。
- [ ] 虚构的例子在标题页标明一次，其他页的粉笔槽上也标明了。
- [ ] 算式和图互相对得上，格数与算式一致。
- [ ] 交付的文档我打开看过。
- [ ] 黄色和粉色只用来表达含义，每个文字位最多两段彩色。
- [ ] `quiz` 和 `flow` 页的分步顺序正确。

## 什么时候不适合

- 必须显得正式的融资或法律材料。
- 必须交付成演示文稿文件、供别人继续用办公软件修改的场合。
- 数据密集的汇报，或需要精确图表的内容。
- 主要在很小的屏幕上看。手机能打开，但它是为投影和共享屏幕设计的。

## 运行要求

- `assemble.mjs` 和 `check.mjs` 需要 Node 18 或更新版本，不用安装其他依赖。
- `view.mjs` 和 `export-pdf.mjs` 需要 Playwright：`npm install playwright`，再运行 `npx playwright install chromium`。如果它装在别处，把 `NODE_PATH` 指向那个 `node_modules` 文件夹。
- 成品只在 Chromium 内核浏览器上实测过，讲课时请用 Chrome 或 Edge。它只用标准网页功能，但没有在 Safari 和火狐上测试过，要用的话请先试一遍。讲者窗口需要允许弹出窗口。
- 中文课件约 3.5 MB，因为内嵌了字体，字体已缩减为最常用的 3755 个汉字。生僻字会回退到系统楷体。英文课件约 150 KB。