高空云图

---
name: high-cirrus-deck
description: 制作任意页数的浏览器演示文稿，用来从容讲清一件复杂的事。背景是代码绘制的明亮高空云图，内容放在半透明玻璃卡片上；带翻页、总览、演讲备注和打印，内置可视化编辑，并能导出可编辑的 PowerPoint 和 PDF。当有人需要讲解型演示、教学课件、公开讲座或内部简报，并希望气质安静、开阔，或直接点名这种风格时使用。
version: 1.0.0
---

# 高空云图

样式都在文件里。你只写 `content.json`，`scripts/build.mjs` 会为每一页绘制天空，生成一个独立的 `deck.html`。不要改它的 CSS 和引擎代码。`scripts/check.mjs` 会站在观众的角度检查成品，它没通过，工作就没做完。

如果需要确切的设计参数和规则背后的理由，请读 `references/style.md`。

## 需要询问的信息

简报里没给的，一次问完，放在同一条消息里。

必须有：
1. 主题和听众。
2. 希望的页数。没有说就做 12 页。
3. 要用的事实，以及数字的出处。
4. 这份演示是真实内容，还是虚构示例。

可选：
5. 语言：英文或中文。一份演示只用一种语言。
6. 用来替换天空的照片。
7. 演讲人姓名，以及主题：`arc`（默认）、`dawn`、`noon`、`storm`、`night`。

## 遇到这些情况怎么办

- **简报很单薄。** 用平实的句子复述对方给的事实，什么都不要编：不编数字、客户、引语、成果或资历。宁可少做几页，也不要凑数。交付时把所有你推断出来的句子列给对方。
- **简报完全没有事实，只有一个主题。** 可以用常识，但这样一来每句话都是你推断的。只写教科书层面的内容，不写数字，不点名出处。所有版式都可以用；下面“只用简报给的”这类规则，针对的是编造的具体细节，不是常识。交付时要明确说明全部文字都是推断的，列出其中陈述事实的句子，并标明需要对方审核后才能使用。
- **没有人能回答问题。** 按最保守的理解继续做，交付时列出你的假设。
- **对方想改页数。** 任何页数都可以，包括 1 页和 40 页。要缩短就合并内容，保留整体节奏。要加长就增加 `section` 页、拆分观点，不要在多页重复同一句话。同一版式不要连续超过三页。
- **没有演讲人或日期。** 不写 `byline`，也不要写占位文字。
- **数字没有出处。** 删掉它，或者把小数目写成汉字。如果数字来自对方的简报，把这一页的 `source` 写成 `来自委托方简报`，这样可以通过检查。
- **内容放不下。** 检查脚本会指出是哪一页。缩短文字或拆成两页，不要动 CSS。

## 步骤

1. 环境：Node 18 以上，以及任意一个 Chrome、Chromium 或 Edge。如果没有浏览器，运行 `npm install playwright && npx playwright install chromium`。`scripts/check.mjs` 和 `scripts/export.mjs` 会自己找到浏览器。`scripts/drive.mjs` 需要 Playwright 包；如果它装在别处，把 `NODE_PATH` 指向对应的 `node_modules`。
2. 按下面的表格写 `content.json`。如果有 `example/content.json`，可以参考格式，但不要沿用其中的文字。
3. 生成：`node scripts/build.mjs content.json --out deck.html`。破晓、正午、夜空每页约 3 秒，风暴边缘每页约 13 秒。12 页约一分钟，40 页约四分钟。天空有缓存，只改文字时重新生成是瞬间的事。
4. 检查：`node scripts/check.mjs deck.html`，只需几秒。修改内容后重新生成，直到显示 PASS。
5. 亲眼看。把每一页在 1280 和 390 宽度下截图，逐张查看。检查脚本判断不了内容是否讲得通，也判断不了好不好看。再开着动效把全篇翻一遍：每一页应该淡入，卡片上升后停稳，最后没有文字缺失。如果只能截图，就无法用眼睛判断动效；`drive.mjs` 会确认开关动效时内容都能出现，你要说明自己没有亲眼看过。
6. 如果改动的不只是文字，再驱动一遍各项功能：`node scripts/drive.mjs deck.html --out drive-output/`。
7. 导出：`node scripts/export.mjs deck.html --pptx deck.pptx --pdf deck.pdf`，然后运行 `node scripts/verify-pptx.mjs deck.pptx --expect-slides 页数 --render thumbs/`，查看缩略图。在 Mac 上，逐页查看苹果渲染出来的 PDF：`node scripts/pdf-pages.mjs deck.pdf pages/`。`sips` 本身只画第一页，所以这个脚本先把每页拆成单独的文件。

## 字段说明

**文件的整体结构。** `content.json` 的顶层只有两个键：`meta`（对象）和 `slides`（数组，按顺序放每一页）。

```json
{
  "meta": { "title": "...", "lang": "zh", "kind": "real" },
  "slides": [
    { "layout": "cover", "title": "...", "notes": "..." },
    { "layout": "figure", "title": "...", "diagram": { "type": "flow", "nodes": [ { "label": "...", "note": "..." } ] }, "notes": "..." }
  ]
}
```

长度单位：一个汉字算 2.5，其他字符算 1。所有上限都会被检查。

**meta**

| 字段 | 含义 | 上限 | 简报单薄时 |
|---|---|---|---|
| title | 演示文稿的名称，显示在标签页和文件里 | 90 | 用大白话写主题 |
| lang | `en` 或 `zh` | | 跟简报的语言一致 |
| kind | `real`；虚构示例写 `fictional` | | 先问。没人能答时，如果内容是你编的，就写 `fictional` |
| fictionalLabel | 虚构时必填，必须包含“虚构”或 "fictional"。只显示在第一页和最后一页，其他地方不要重复 | 110 | `虚构示例。` |
| presenter | 写入文件属性 | 70 | 不写 |
| theme | `arc`、`dawn`、`noon`、`storm`、`night` | | `arc` |
| seed | 改变所有天空的数字 | | 不写 |

**每一页都有**

| 字段 | 含义 | 上限 | 简报单薄时 |
|---|---|---|---|
| layout | 下表中的一种版式 | | 按这一页要做的事来选 |
| notes | 演讲备注，必填。写演讲人要说的话，用口语。这里出现数字同样需要 `source`。“虚构”标签的规则不限制备注，演讲人可以说出来 | 900 | 把这一页的要点说出来，只用简报里的事实 |
| source | 页脚的小字来源。这一页或它的备注里出现阿拉伯数字或百分比时必填 | 140 | 对方自己的数字写 `来自委托方简报`，否则删掉数字 |
| photo | JPEG 或 PNG 的路径，相对于 content.json，用来替换天空 | | 不写 |
| mood | `dawn`、`noon`、`storm`、`night`，优先于主题 | | 不写 |
| seed | 换一片天空的数字 | | 不写 |

**版式和字段**（方括号是允许的条目数）

| 版式 | 用途 | 字段和上限 | 简报单薄时 |
|---|---|---|---|
| cover | 开场 | title 90（必填）、eyebrow 44、subtitle 170、byline 70 | 只写标题也可以 |
| section | 章节转折 | title 56（必填）、lead 130 | 只写标题也可以 |
| statement | 让人停下来想的一句话 | text 160（必填）、aside 120 | 用简报的原话写主旨 |
| explain | 把一个观点拆开讲 | title 70、lead 170（都必填）、points [2-4] {term 30, text 100} | 把事实复述成两点 |
| figure | 图示 | title 80（必填）、caption 170、diagram（见下） | 用 `flow` 画对方描述的过程；否则换版式 |
| compare | 两者对照 | title 80、a 和 b {label 30, points [2-5] 每条 66}（都必填）、verdict 130 | 只对比简报里对比过的内容，不写 verdict |
| matrix | 两三个选项比较多个方面 | title 80、columns [2-3] 每项 26、rows [2-5] {aspect 24, cells 每格 56，每列一格}、note 110 | 简报没有足够事实就别用 |
| sequence | 清楚的先后步骤 | title 80（必填）、lead 120、steps [2-6] {label 28, text 76} | 用对方自己的步骤，不要多编 |
| pillars | 两到四个并列的要点 | title 80（必填）、lead 130、items [2-4] {term 30, text 120} | 事实有几条就写几条 |
| myth | 常见误解和更正 | title 60、myth 110、fact 130（都必填）、why 120 | 简报给了更正才用 |
| image | 一张照片配一句说明 | title 70（必填）、caption 150 | 需要照片，否则画面就是天空 |
| closing | 结尾要点 | title 60（必填）、points [1-3] 每条 80、next 100 | 一条就够，不写 next |

**图示。** 不要手写 SVG。选一种图元，填上文字，引擎会在幻灯片、手机、打印和 PowerPoint 上画好。

`"diagram": { "type": "flow", "nodes": [ { "label": "...", "note": "..." } ] }`

| 类型 | 表达 | 节点数 | label | note |
|---|---|---|---|---|
| flow | 带箭头的链条 | 2-6 | 24 | 40 |
| cycle | 闭合的循环 | 3-6 | 26 | 44 |
| layers | 叠放的层，从上往下列 | 2-6 | 30 | 80 |
| spectrum | 一条线上的先后位置，不带数字 | 2-6 | 24 | 40 |
| branch | 一个原因、多个结果，另需 `"root": { "label", "note" }` | 2-5 | 30 | 64 |

`note` 可以不写。简报单薄时只写 label。

## 天空和照片

天空由种子数字计算而来，不用图像模型，也不用图片文件。默认的 `arc` 按页面位置走过一天：前 20% 是破晓，到 58% 是正午，到 84% 是风暴边缘，其余是夜空。安排顺序时请考虑这一点；如果某页的内容需要特定天气，就设置 `mood`，比如讲暴雨的那页用 `storm`。每种版式都会告诉渲染器卡片放在哪里，云层在那里会压成柔和的薄雾，所以卡片不会落在杂乱的区域上。太阳和月亮按位置摆放，完整地留在画面内；如果会被卡片挡住就不画。如果天空失去了云层，或者日月被画面边缘切掉，检查脚本会报错，这时换一个这一页的 `seed`。

设置了 `photo` 的页面用照片替换天空，玻璃也会随之变化：明亮的照片配浅色玻璃，昏暗的照片配深色玻璃。照片请先缩到约 1920 像素宽。只用对方拥有或提供的图片。如果检查脚本报告背景杂乱或对比度不足，换一张更安静的照片，或换一种版式。

### 可选：用对方自己的图像模型生成天空

这个技能并不需要这一步。只有在对方提出要求、且对方的智能体本来就有图像模型时才做，用的是对方的模型和额度。用下面的提示词生成一张 16:9 的图，存成 JPEG，填到这一页的 `photo`：

> Photograph from a high-altitude aircraft window: a sea of cloud below a luminous sky at [dawn / noon / the edge of a storm / night under a bright moon], thin cirrus high above, soft even light across the [left / right] two-thirds where text will sit, no aircraft, no people, no text, no logos.

交付时告诉对方哪些页用了生成的图片，然后照常运行检查脚本。

## 交付物

- `deck.html`：单个文件，没有外部请求，双击即可打开。
- `deck.pptx` 和 `deck.pdf`（如果对方需要）。
- 一段交付说明，列出假设和推断出来的句子。

**PowerPoint 文件是什么样的。** 文字和演讲备注可以继续编辑。背景、玻璃卡片、分隔线和图示线条是图片，不能在 PowerPoint 里改样式。请把这些如实告诉对方，并说明：

- 文件能控制的：标题，以及中文演示的全部文字，都带着浏览器里量好的换行，所以词不会被拆开，在不同软件里换行也一致。代价是这些行里有手动换行符，改写时要删掉。其他英文文字在略宽的文本框里自由换行。步骤和章节的数字用 Arial，高度一致。
- 取决于查看软件的：字体和字距。西文写的是 Georgia 和 Arial；中文默认是 Songti SC 和 PingFang SC（`--fonts win` 则是 SimSun 和 Microsoft YaHei）。机器上没有这些字体时会替换，行可能变长。Georgia 正文里的数字是旧式数字，高低不一。QuickLook、Keynote 和 PowerPoint 的行距也略有不同。

## 演示文稿能做什么

方向键、空格、Page Up/Down、Home、End 翻页；触屏可滑动；`O` 总览；`N` 演讲备注，附下一页和计时；`P` 打印；`F` 全屏；`E` 编辑。在手机上，每一页会变成可以上下滚动的阅读页，工具栏只有上一页、下一页、总览、备注和编辑：没有全屏按钮，打印在“编辑”的“文件”里。中文只在词与词之间换行，靠的是浏览器的分词功能；如果有词被拆到两行，检查脚本会报错。

编辑模式可以：直接在页面上改字；换版式；增减列表条目；改演讲备注和来源；用照片替换天空；重绘云层或换时刻；拖动或用箭头调整顺序；复制、删除、新增页面；换主题（天空在本机重新计算，每页约 1 到 5 秒）；撤销和重做；保存为以标题命名的新独立 HTML 文件（`标题.html`，在浏览器的下载文件夹里，原文件不变）；导出 PowerPoint 和 PDF。修改会自动存在浏览器里，但能带走的是保存出来的文件。

PDF：在演示文稿里打印并选择“存储为 PDF”，或者运行 `export.mjs`，它用同一套打印样式，不弹窗。打印时玻璃效果会预先合成到图片里，因为苹果的 PDF 渲染器经常处理不好实时模糊。每段文字在 PDF 的文字层里只出现一次。

## 交付前检查

- [ ] `node scripts/check.mjs deck.html` 显示 PASS，并且包含渲染检查（不是 `--static`）。
- [ ] 我看过每一页在 1280 和 390 宽度下的真实截图；如果交付 PDF，也用 `pdf-pages.mjs` 看过每一页。
- [ ] 如果简报没有事实，我已说明全部文字都是推断的，并标出了需要审核的事实性句子。
- [ ] 没有编造任何事实、数字、名字或成果；推断出来的句子已经列给对方。
- [ ] 虚构内容已在 `fictionalLabel` 中写明，幻灯片其他地方没有重复。
- [ ] 每一页都有演讲备注。
- [ ] 如果导出了文件：`verify-pptx.mjs` 已通过，我看过缩略图，并告诉了对方哪些可编辑、哪些是图片。
- [ ] 如果我没能在 PowerPoint 里实际打开文件，我已经说明。

## 不适合的情况

- 图表密集的数据汇报：这里没有图表版式，数字也必须有出处。
- 必须套用公司 PowerPoint 模板的文稿：这里的背景是图片。
- 声势很大的发布会或销售演讲：这套风格是安静、不慌不忙的。
- 主要用来打印细读的文档。

## 环境要求

Node 18 以上。检查和导出需要任意一个 Chrome、Chromium 或 Edge。只有 `drive.mjs` 需要 Playwright。只用系统字体，无需安装或授权：Iowan Old Style 或 Palatino，以 Georgia 兜底；系统无衬线字体；宋体-简和苹方，并以思源（Noto CJK）字体兜底。不联网，不用图像模型。