note-slides

star 220

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

gainubi By gainubi schedule Updated 5/8/2026

name: note-slides description: 把访谈、播客、公众号长文、课程稿或复盘材料整理成横向翻页的 HTML 笔记幻灯片。默认保留材料原顺序,追踪问题、判断、例子、数字和概念原词,直接交付单文件 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 topslide-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-themedata-screen-labeldata-source
  7. data-source 是来源锚点的可见标签,例如:小标题:边界是什么 / Q3 / 18:42 / 第三节·开头。它既给读者翻原文用,也强制你在生成时确认这页是否真的来自原文。填不出来就说明这页该删。
  8. 保存当前页进度,刷新后回到当前页。
  9. 用户打开本地文件即可浏览时,不需要启动服务器。

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

版式原则

  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. 如果材料最后留下强问题、原话或未完成方向,核心总结之后再用一页未解问题或结尾回扣收住。
Install via CLI
npx skills add https://github.com/gainubi/note-slides --skill note-slides
Repository Details
star Stars 220
call_split Forks 16
navigation Branch main
article Path SKILL.md
More from Creator