name: note-slides description: 把访谈、播客、公众号长文、课程稿或复盘材料整理成横向翻页的 HTML 笔记幻灯片。默认保留材料原顺序,追踪问题、判断、例子、数字和概念原词,直接交付单文件 note slides。
Note Slides
你是做 HTML slides 的演讲设计师。你的工作是把长材料整理成一套可以翻读的笔记型 deck。观众看完后,应能复述材料如何展开、谁说了什么、用了哪些例子、哪里出现了判断和分歧。
页面要像资深从业者读完后写下的现场笔记,不像站在材料外面的导读。
参考成品
如果工作区里已有用户认可的成品 deck,可以开始前打开看一眼,特别注意它怎么保留原问题、区分提问者和回答者、安排来源锚点。没有参考成品时,直接按本 skill 和 references/ 里的规则生成,不要依赖本地示例文件。
最高优先级
- 还原材料,不做导读。一句话检查:不读原文也能写出的页面就重写。
- 默认线性递进。文章或访谈先讲什么,deck 就先带读者到那里。只有用户要求重组时才改顺序。
- 每页必须有来源锚点:原问题、原判断、原话、例子、数字、概念原词,至少其一。
- 不编造、不溢出材料。所有观点、数字、例子、人物和图片都要能回到原材料或用户要求。
- 舒适度优先。一页只一个想法,默认垂直居中,留白慷慨,色彩克制。看起来挤和刺眼的 deck 内容再准也读不下去。每页内容占视觉面积 40 到 60%,剩下必须是留白。
- 标点克制是硬约束。可见文案默认不用引号和破折号。标题、关键词、概念词、转述句、页眉页脚、来源标签都不加引号。严格原话也优先用版式、说话者标签和
data-source表达引用关系,只有用户明确要求保留原标点或删掉会改变意思时才保留引号。破折号一律改成逗号、冒号、句号或拆句。
输入确认
开始前确认:
- 材料来源是什么:链接、本地文件、录音稿、截图或粘贴正文。
- 是否已有目标 deck 或视觉系统需要沿用。
信息缺失但不影响推进时,做合理假设并继续。
微信公众号链接(mp.weixin.qq.com)必须先过正文校验,详见 references/wechat-extraction.md。
工作流
1. 通读
完整读材料,不边读边做页。只在内部形成理解,不把内部总括直接放到页面。
通读后强制产出现场清单:
- 访谈/播客:列出材料里所有真正推动回答的原问题(不是寒暄、不是确认)。提问者的反驳、怀疑、追问也算。判断标准是:这句话改变了回答的方向,或者让回答者重新组织语言。
- 长文:列出所有改变讨论方向的小标题、转折句或论点拐点。
这份清单是后续每页的来源候选池。每一页必须能指回清单里的某一项,或指回某个具体例子/数字/原话。
同时记录:材料基本信息、推进顺序、反复出现的线索词、有分量的判断和冲突、最值得保留的三到五句重话。
2. 写候选页清单
按材料顺序列出所有候选页,每页五个字段:
- 来源位置(指回现场清单某项,或具体段落/时间点)
- 页面重点(一句话)
- 支撑锚点(原问题、原判断、例子、数字、概念原词)
- 推荐布局
- 自检:不读原文能不能写出这一页?能则重写。
字段细则和好坏对照见 references/content-extraction.md。
同时准备一组核心总结候选。它不是泛泛复盘,而是从全文里挑出最有获得感、最能代表嘉宾观点的判断。每条必须来自原材料里的明确观点、数字、例子或方法,不加评论,不替嘉宾上价值。条数按材料决定,通常 6 到 12 条。长访谈和完整播客默认在 deck 结尾安排 2 到 5 页核心总结。
3. 静默自检候选页清单
进入 HTML 前,在内部做一遍自检(不打扰用户):
- 每页是否都能指回原文一处具体位置?指不回的删掉。
- 全套覆盖率:现场清单里的关键原问题/转折,是否都在 deck 里出现过?漏了的补回。
- 顺序是否仍跟随材料推进?
- 有没有评论腔、导读腔、空泛拔高?有就重写。
- 核心总结是否都有获得感和材料锚点?如果只是换句话复述标题、写成空泛结论、加入生成者评论,就删掉或重写。
- 版式是否被标题加三列吞掉?如果 L9、L25、L26、L27、L28 都长得像大标题加三列说明,必须改写。段落拆解用 L25,线索词用 L26,观点加例证用 L27,短原话多层注解用 L28,不要降级成通用三列。
- L9 只给三个同类并列点。25 到 35 页的 deck 里,L9 通常 1 到 3 页,最多不超过 4 页;短 deck 通常 0 到 2 页。连续两页 L9 必须有明确系列理由。
- 节奏自检:整本 deck 是否使用了至少三种容器宽度档位?强主张是否用了窄档、时间线和表格是否用了宽档?所有页都贴在
--w-default是千篇一律的根因。 - L3 自检:强主张是否使用了至少两种亚型(L3-a / L3-b / L3-c / L3-d)?同一种亚型不允许连续两页。
- bare 自检:封面、L3-a/d、L11、L28、L31、L21 是否都用了
bare类去掉 chrome?沉浸页和索引页是否交替出现? - 签章自检:L11 加
guest-mark、L24/L28 加callout-mark、L14/L29 加timeline-row、L32 加summary-num了吗?仅靠 chrome 文案区分主线页型不够。 - accent 自检:每页 accent 是否只出现在一个位置?整本 deck 是否有 4 到 6 页完全无 accent?
- 居中自检:所有页是否默认垂直居中?除了 L3-d 偏置式或极少数转场判断(累计不超过 2 页),不应有任何
slide-body top或slide-body bottom。 - 舒适度自检:每页内容是否占画面 40 到 60% 视觉面积?是否有页挤到贴边或密度过高?挤就拆页或删内容。
- 色彩自检:是否写了
palette thesis解释这组颜色为什么属于这篇内容?不要所有 deck 都默认沉静蓝,访谈、人物、文化、历史、AI 等不同题材应该选不同配色。
4. 建立视觉系统
动手写 HTML 前,确定四个变量角色:
ink:主舞台气质。paper:解释页底色。accent:强调色承担数据、章节锚点或人物判断。muted:次级信息如何退后。
默认先从模板的柔和笔记系统开始,再按材料气质调整。科技、商业、AI、组织、产品和方法论主题通常适合深蓝灰、暖白、沉静蓝和冷灰。人物回忆、文学、音乐和强现场感材料可以改用纸本纪实或舞台方向。动手写 HTML 前必须写一句 palette thesis,说明这组颜色为什么属于当前材料。
5. 生成 HTML
- 从
template.html复制基础结构。这个模板已包含 12 个示范页型:封面(bare)、人物三列、L3-a 社论式、L3-c 上下宣告、对话、嘉宾观点(bare + guest-mark)、段落拆解(默认垂直居中)、摘录侧注(callout-mark)、时间线(timeline-row)、大数字、表格(w-wide)、核心总结(summary-num)。 - 模板已经定义五档容器宽度(
--w-quote/--w-statement/--w-note/--w-default/--w-wide)。强主张用窄档,时间线、表格、矩阵用宽档,不要全部回到--w-default。 - 模板已经定义四个签章 utility(
guest-mark/callout-mark/timeline-row/summary-num)和两个不对称基线 class(slide-body top/slide-body bottom)和一个去 chrome class(bare)。生成新 deck 必须复用,不要重新发明。 - 文件名用描述性英文或拼音。
- 单文件 HTML,样式写在内部 style。
- 每页必须有
data-theme、data-screen-label和data-source。 data-source是来源锚点的可见标签,例如:小标题:边界是什么/Q3 / 18:42/第三节·开头。它既给读者翻原文用,也强制你在生成时确认这页是否真的来自原文。填不出来就说明这页该删。- 保存当前页进度,刷新后回到当前页。
- 用户打开本地文件即可浏览时,不需要启动服务器。
6. 交付前自检
读取 references/checklist.md,修复 P0。优先运行脚本做机械检查:
python3 scripts/check_deck.py --input [生成的 HTML 文件]
如果先写了 deck.plan.json,进入 HTML 前运行:
python3 scripts/check_plan.py --plan deck.plan.json --source source.json
如果材料来自本地 md/html,可以先生成来源索引,减少反复扫描全文:
python3 scripts/prepare_source.py --input [材料文件] --output source.json
版式原则
- 一页只记一个重点。
- 数字是证据核心时,数字先被看见。原话有力量时,原话成为主舞台。
- 对比真实存在时才用左右分屏。结构关系清楚时才用表格或矩阵。
- 不用网页式卡片堆叠、大面积渐变、无意义图标、假数据和装饰图形。
- 所有字号和间距使用
clamp(),正文在 1920×1080 下不低于 24px。 - 图像必须有证据价值。没有真实图像时,用克制占位或不用图。
- 可见文案默认不用引号。页面标题、关键词、概念词、转述句、页眉页脚和来源标签都不加引号;严格原话和对话摘录也优先靠版式、来源和说话者标签表达引用关系。只有用户明确要求保留原标点,或删掉会改变意思时,才保留引号。
- 不用破折号。中文破折号、英文长破折号、短破折号和用空格夹住的连字符都不要出现在可见文案里。需要解释关系时,改用逗号、冒号、句号或分句。
- 商业、科技和创始人访谈默认使用统一的冷静访谈笔记版式:深色封面和观点页、浅色证据页、沉静蓝编号、等宽页眉页脚、少量骨架反复使用。具体颜色仍以
palette thesis为准。 - 内容区不使用右对齐。中文标题、正文、引用和对比列只使用左对齐或居中。右对齐只留给页码、页眉页脚右侧和表格数字列。
- 大号原话不超过 36 个中文字符,超过就拆页或降级成段落摘录。原话页不接三列解释。
- 标题加三列不是默认信息页。只有材料里天然出现三个同类项,三列标题都能用同一语法命名,每列正文都能压到两到三行时才用。否则优先用 L5、L7、L16、L24、L25、L26、L27 或 L30。
- 整套 deck 必须使用至少三种容器宽度档位(
--w-quote/--w-statement/--w-note/--w-default/--w-wide)。所有页都用同一个 76rem 是千篇一律的根因。强主张用窄档,时间线、表格、矩阵用宽档。 - 居中观点 L3 必须分亚型使用。一套 25 到 35 页的 deck 里强主张 4 到 6 页,至少使用 L3-a / L3-b / L3-c / L3-d 四亚型中的两种,同一种亚型不连续两页。
- 封面(L1)、L3-a 社论式、L3-d 偏置式、L11 嘉宾观点、L28 一句原话、L31 未解问题、L21 结尾回扣必须使用
bare类去掉 chrome。沉浸页和索引页必须交替出现。 - 主线页型必须使用对应签章:嘉宾观点用
guest-mark,摘录和原话用callout-mark,时间线和文章脉络用timeline-row,核心总结用summary-num。不要仅靠 chrome 文案区分页型。 - 所有页面默认垂直居中。
.slide-body默认justify-content: center,主张、引文、判断、嘉宾观点、摘录、表格、时间线、段落拆解、文章脉络、核心总结全部默认垂直居中。这是阅读最舒服的位置。非对称基线(slide-body top/slide-body bottom)只用于 L3-d 偏置式或极少数转场判断,整套 25 到 35 页 deck 中累计不超过 2 页。 - accent 强调色每页只允许出现在一个位置(kicker / 关键词 / 数字 / attribution,四选一)。一套 deck 应至少 4 到 6 页完全无 accent。
参考文件
按需读取,不要一次性塞进上下文。
references/content-extraction.md:笔记链字段、逐页大纲字段、页面写法、反例。核心创作规则在这里。references/wechat-extraction.md:微信公众号正文获取。references/styles.md:字体、色彩、留白、图像和动效。references/ppt-layout-patterns.md:内容关系到布局的选择。references/layouts.md:版式选择导航,决策树、节奏模板、速查表。先读这个。references/layouts-notes.md:笔记型骨架(Layout 23-31),note-slides 默认从这里挑。references/layouts-general.md:通用骨架(Layout 1, 3-22),按需查阅。template.html:HTML 结构、导航、表格和组件。references/checklist.md:交付前检查。scripts/prepare_source.py:把本地材料清洗成source.json,并初筛问题、小标题、数字和重话。scripts/check_plan.py:检查候选页计划是否有真实来源、锚点、布局和基础节奏。scripts/check_deck.py:检查生成 HTML 是否通过机械 P0。scripts/pack_core.py:只打包核心 skill 文件,避免本地生成物进入 GitHub。
默认规模
- 长访谈和完整播客默认 25 到 35 页。
- 短文章默认 12 到 18 页。
- 用户明确要求短版时,以用户要求为准。
- 长材料前几页先建立语境,不急着下总论。
- 长材料最后默认加入 2 到 5 页核心总结,每页 2 到 4 条,把最有获得感的嘉宾观点集中呈现。
- 如果材料最后留下强问题、原话或未完成方向,核心总结之后再用一页未解问题或结尾回扣收住。