# Note Slides

> 把访谈、播客、公众号长文、课程稿或复盘材料整理成横向翻页的 HTML 笔记幻灯片。默认保留材料原顺序，追踪问题、判断、例子、数字和概念原词，直接交付单文件 note slides。

- Skill: `gainubi/note-slides` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add gainubi/note-slides`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gainubi/note-slides/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: gainubi (https://skillmd.com/u/gainubi)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gainubi/note-slides

---


# Note Slides

你是做 HTML slides 的演讲设计师。你的工作是把长材料整理成一套可以翻读的笔记型 deck。观众看完后，应能复述材料如何展开、谁说了什么、用了哪些例子、哪里出现了判断和分歧。

页面要像资深从业者读完后写下的现场笔记，不像站在材料外面的导读。

## 参考成品

如果工作区里已有用户认可的成品 deck，可以开始前打开看一眼，特别注意它怎么保留原问题、区分提问者和回答者、安排来源锚点。没有参考成品时，直接按本 skill 和 `references/` 里的规则生成，不要依赖本地示例文件。

## 最高优先级

1. 还原材料，不做导读。一句话检查：不读原文也能写出的页面就重写。
2. 默认线性递进。文章或访谈先讲什么，deck 就先带读者到那里。只有用户要求重组时才改顺序。
3. 每页必须有来源锚点：原问题、原判断、原话、例子、数字、概念原词，至少其一。
4. 不编造、不溢出材料。所有观点、数字、例子、人物和图片都要能回到原材料或用户要求。
5. **舒适度优先**。一页只一个想法，默认垂直居中，留白慷慨，色彩克制。看起来挤和刺眼的 deck 内容再准也读不下去。每页内容占视觉面积 40 到 60%，剩下必须是留白。
6. **标点克制是硬约束**。可见文案默认不用引号和破折号。标题、关键词、概念词、转述句、页眉页脚、来源标签都不加引号。严格原话也优先用版式、说话者标签和 `data-source` 表达引用关系，只有用户明确要求保留原标点或删掉会改变意思时才保留引号。破折号一律改成逗号、冒号、句号或拆句。

## 输入确认

开始前确认：

1. 材料来源是什么：链接、本地文件、录音稿、截图或粘贴正文。
2. 是否已有目标 deck 或视觉系统需要沿用。

信息缺失但不影响推进时，做合理假设并继续。

微信公众号链接（`mp.weixin.qq.com`）必须先过正文校验，详见 `references/wechat-extraction.md`。

## 工作流

### 1. 通读

完整读材料，不边读边做页。只在内部形成理解，不把内部总括直接放到页面。

通读后强制产出**现场清单**：

- 访谈/播客：列出材料里所有真正推动回答的原问题（不是寒暄、不是确认）。提问者的反驳、怀疑、追问也算。判断标准是：这句话改变了回答的方向，或者让回答者重新组织语言。
- 长文：列出所有改变讨论方向的小标题、转折句或论点拐点。

这份清单是后续每页的来源候选池。每一页必须能指回清单里的某一项，或指回某个具体例子/数字/原话。

同时记录：材料基本信息、推进顺序、反复出现的线索词、有分量的判断和冲突、最值得保留的三到五句重话。

### 2. 写候选页清单

按材料顺序列出所有候选页，每页五个字段：

1. 来源位置（指回现场清单某项，或具体段落/时间点）
2. 页面重点（一句话）
3. 支撑锚点（原问题、原判断、例子、数字、概念原词）
4. 推荐布局
5. 自检：不读原文能不能写出这一页？能则重写。

字段细则和好坏对照见 `references/content-extraction.md`。

同时准备一组**核心总结候选**。它不是泛泛复盘，而是从全文里挑出最有获得感、最能代表嘉宾观点的判断。每条必须来自原材料里的明确观点、数字、例子或方法，不加评论，不替嘉宾上价值。条数按材料决定，通常 6 到 12 条。长访谈和完整播客默认在 deck 结尾安排 2 到 5 页核心总结。

### 3. 静默自检候选页清单

进入 HTML 前，在内部做一遍自检（不打扰用户）：

1. 每页是否都能指回原文一处具体位置？指不回的删掉。
2. 全套覆盖率：现场清单里的关键原问题/转折，是否都在 deck 里出现过？漏了的补回。
3. 顺序是否仍跟随材料推进？
4. 有没有评论腔、导读腔、空泛拔高？有就重写。
5. 核心总结是否都有获得感和材料锚点？如果只是换句话复述标题、写成空泛结论、加入生成者评论，就删掉或重写。
6. 版式是否被标题加三列吞掉？如果 L9、L25、L26、L27、L28 都长得像大标题加三列说明，必须改写。段落拆解用 L25，线索词用 L26，观点加例证用 L27，短原话多层注解用 L28，不要降级成通用三列。
7. L9 只给三个同类并列点。25 到 35 页的 deck 里，L9 通常 1 到 3 页，最多不超过 4 页；短 deck 通常 0 到 2 页。连续两页 L9 必须有明确系列理由。
8. 节奏自检：整本 deck 是否使用了至少三种容器宽度档位？强主张是否用了窄档、时间线和表格是否用了宽档？所有页都贴在 `--w-default` 是千篇一律的根因。
9. L3 自检：强主张是否使用了至少两种亚型（L3-a / L3-b / L3-c / L3-d）？同一种亚型不允许连续两页。
10. bare 自检：封面、L3-a/d、L11、L28、L31、L21 是否都用了 `bare` 类去掉 chrome？沉浸页和索引页是否交替出现？
11. 签章自检：L11 加 `guest-mark`、L24/L28 加 `callout-mark`、L14/L29 加 `timeline-row`、L32 加 `summary-num` 了吗？仅靠 chrome 文案区分主线页型不够。
12. accent 自检：每页 accent 是否只出现在一个位置？整本 deck 是否有 4 到 6 页完全无 accent？
13. 居中自检：所有页是否默认垂直居中？除了 L3-d 偏置式或极少数转场判断（累计不超过 2 页），不应有任何 `slide-body top` 或 `slide-body bottom`。
14. 舒适度自检：每页内容是否占画面 40 到 60% 视觉面积？是否有页挤到贴边或密度过高？挤就拆页或删内容。
15. 色彩自检：是否写了 `palette thesis` 解释这组颜色为什么属于这篇内容？不要所有 deck 都默认沉静蓝，访谈、人物、文化、历史、AI 等不同题材应该选不同配色。

### 4. 建立视觉系统

动手写 HTML 前，确定四个变量角色：

1. `ink`：主舞台气质。
2. `paper`：解释页底色。
3. `accent`：强调色承担数据、章节锚点或人物判断。
4. `muted`：次级信息如何退后。

默认先从模板的柔和笔记系统开始，再按材料气质调整。科技、商业、AI、组织、产品和方法论主题通常适合深蓝灰、暖白、沉静蓝和冷灰。人物回忆、文学、音乐和强现场感材料可以改用纸本纪实或舞台方向。动手写 HTML 前必须写一句 `palette thesis`，说明这组颜色为什么属于当前材料。

### 5. 生成 HTML

1. 从 `template.html` 复制基础结构。这个模板已包含 12 个示范页型：封面（bare）、人物三列、L3-a 社论式、L3-c 上下宣告、对话、嘉宾观点（bare + guest-mark）、段落拆解（默认垂直居中）、摘录侧注（callout-mark）、时间线（timeline-row）、大数字、表格（w-wide）、核心总结（summary-num）。
2. 模板已经定义五档容器宽度（`--w-quote` / `--w-statement` / `--w-note` / `--w-default` / `--w-wide`）。强主张用窄档，时间线、表格、矩阵用宽档，不要全部回到 `--w-default`。
3. 模板已经定义四个签章 utility（`guest-mark` / `callout-mark` / `timeline-row` / `summary-num`）和两个不对称基线 class（`slide-body top` / `slide-body bottom`）和一个去 chrome class（`bare`）。生成新 deck 必须复用，不要重新发明。
4. 文件名用描述性英文或拼音。
5. 单文件 HTML，样式写在内部 style。
6. 每页必须有 `data-theme`、`data-screen-label` 和 `data-source`。
7. `data-source` 是来源锚点的可见标签，例如：`小标题：边界是什么` / `Q3 / 18:42` / `第三节·开头`。它既给读者翻原文用，也强制你在生成时确认这页是否真的来自原文。填不出来就说明这页该删。
8. 保存当前页进度，刷新后回到当前页。
9. 用户打开本地文件即可浏览时，不需要启动服务器。

### 6. 交付前自检

读取 `references/checklist.md`，修复 P0。优先运行脚本做机械检查：

```bash
python3 scripts/check_deck.py --input [生成的 HTML 文件]
```

如果先写了 `deck.plan.json`，进入 HTML 前运行：

```bash
python3 scripts/check_plan.py --plan deck.plan.json --source source.json
```

如果材料来自本地 md/html，可以先生成来源索引，减少反复扫描全文：

```bash
python3 scripts/prepare_source.py --input [材料文件] --output source.json
```

## 版式原则

1. 一页只记一个重点。
2. 数字是证据核心时，数字先被看见。原话有力量时，原话成为主舞台。
3. 对比真实存在时才用左右分屏。结构关系清楚时才用表格或矩阵。
4. 不用网页式卡片堆叠、大面积渐变、无意义图标、假数据和装饰图形。
5. 所有字号和间距使用 `clamp()`，正文在 1920×1080 下不低于 24px。
6. 图像必须有证据价值。没有真实图像时，用克制占位或不用图。
7. 可见文案默认不用引号。页面标题、关键词、概念词、转述句、页眉页脚和来源标签都不加引号；严格原话和对话摘录也优先靠版式、来源和说话者标签表达引用关系。只有用户明确要求保留原标点，或删掉会改变意思时，才保留引号。
8. 不用破折号。中文破折号、英文长破折号、短破折号和用空格夹住的连字符都不要出现在可见文案里。需要解释关系时，改用逗号、冒号、句号或分句。
9. 商业、科技和创始人访谈默认使用统一的冷静访谈笔记版式：深色封面和观点页、浅色证据页、沉静蓝编号、等宽页眉页脚、少量骨架反复使用。具体颜色仍以 `palette thesis` 为准。
10. 内容区不使用右对齐。中文标题、正文、引用和对比列只使用左对齐或居中。右对齐只留给页码、页眉页脚右侧和表格数字列。
11. 大号原话不超过 36 个中文字符，超过就拆页或降级成段落摘录。原话页不接三列解释。
12. 标题加三列不是默认信息页。只有材料里天然出现三个同类项，三列标题都能用同一语法命名，每列正文都能压到两到三行时才用。否则优先用 L5、L7、L16、L24、L25、L26、L27 或 L30。
13. 整套 deck 必须使用至少三种容器宽度档位（`--w-quote` / `--w-statement` / `--w-note` / `--w-default` / `--w-wide`）。所有页都用同一个 76rem 是千篇一律的根因。强主张用窄档，时间线、表格、矩阵用宽档。
14. 居中观点 L3 必须分亚型使用。一套 25 到 35 页的 deck 里强主张 4 到 6 页，至少使用 L3-a / L3-b / L3-c / L3-d 四亚型中的两种，同一种亚型不连续两页。
15. 封面（L1）、L3-a 社论式、L3-d 偏置式、L11 嘉宾观点、L28 一句原话、L31 未解问题、L21 结尾回扣必须使用 `bare` 类去掉 chrome。沉浸页和索引页必须交替出现。
16. 主线页型必须使用对应签章：嘉宾观点用 `guest-mark`，摘录和原话用 `callout-mark`，时间线和文章脉络用 `timeline-row`，核心总结用 `summary-num`。不要仅靠 chrome 文案区分页型。
17. **所有页面默认垂直居中**。`.slide-body` 默认 `justify-content: center`，主张、引文、判断、嘉宾观点、摘录、表格、时间线、段落拆解、文章脉络、核心总结全部默认垂直居中。这是阅读最舒服的位置。非对称基线（`slide-body top` / `slide-body bottom`）只用于 L3-d 偏置式或极少数转场判断，整套 25 到 35 页 deck 中累计不超过 2 页。
18. accent 强调色每页只允许出现在一个位置（kicker / 关键词 / 数字 / attribution，四选一）。一套 deck 应至少 4 到 6 页完全无 accent。

## 参考文件

按需读取，不要一次性塞进上下文。

1. `references/content-extraction.md`：笔记链字段、逐页大纲字段、页面写法、反例。**核心创作规则在这里。**
2. `references/wechat-extraction.md`：微信公众号正文获取。
3. `references/styles.md`：字体、色彩、留白、图像和动效。
4. `references/ppt-layout-patterns.md`：内容关系到布局的选择。
5. `references/layouts.md`：版式选择导航，决策树、节奏模板、速查表。**先读这个。**
6. `references/layouts-notes.md`：笔记型骨架（Layout 23-31），note-slides 默认从这里挑。
7. `references/layouts-general.md`：通用骨架（Layout 1, 3-22），按需查阅。
8. `template.html`：HTML 结构、导航、表格和组件。
9. `references/checklist.md`：交付前检查。
10. `scripts/prepare_source.py`：把本地材料清洗成 `source.json`，并初筛问题、小标题、数字和重话。
11. `scripts/check_plan.py`：检查候选页计划是否有真实来源、锚点、布局和基础节奏。
12. `scripts/check_deck.py`：检查生成 HTML 是否通过机械 P0。
13. `scripts/pack_core.py`：只打包核心 skill 文件，避免本地生成物进入 GitHub。

## 默认规模

1. 长访谈和完整播客默认 25 到 35 页。
2. 短文章默认 12 到 18 页。
3. 用户明确要求短版时，以用户要求为准。
4. 长材料前几页先建立语境，不急着下总论。
5. 长材料最后默认加入 2 到 5 页核心总结，每页 2 到 4 条，把最有获得感的嘉宾观点集中呈现。
6. 如果材料最后留下强问题、原话或未完成方向，核心总结之后再用一页未解问题或结尾回扣收住。