2026 年国际数学家大会之后，数学家王虹和她的手写幻灯片一起进入了公众视野。国际数学联盟（IMU）的正式名单显示，Hong Wang 是 2026 年四位菲尔兹奖得主之一。菲尔兹奖常被通俗地称作"数学界的诺贝尔奖"，但严格来说，它是由国际数学联盟在国际数学家大会期间颁发、每四年一次的独立奖项。IMU：Fields Medal
引发演示设计者关注的，不只是奖项本身，还有王虹在大会报告中呈现知识的方式：45 分钟、高信息密度、公式与图表全部手写，几乎没有图标、背景图、大色块和商业模板的装饰。现场听众的转述尤其强调了字迹工整、图画清楚和逻辑链连续。这里真正值得借鉴的并不是"把字体换成手写体"，而是一种内容优先的视觉组织方法。
z-wanghong-handwritten-ppt 正是对这种方法的工程化尝试：它把文章、讲稿或技术主题转成 16:9 的 Notability 式学术手写 HTML 幻灯片，支持逐页导出 PNG，并默认生成可逐条播放的时间轴版 HTML。它不是一套普通 PPT 模板，而是一套面向 AI 编程代理的"技能包"：规范、模板、样式、运行时、构建脚本、测试与示例被放进同一个可执行工作流中。
这个项目真正解决了什么问题
传统演示模板通常从版式出发：先选封面、双栏、卡片、时间轴，再把内容填进去。这个项目反过来，从报告要回答的问题出发。其核心约束可以概括为：
- 每页只回答一个清楚的问题；
- 整套报告形成连续推导，而不是彼此孤立的要点集合；
- 正文只保留三到六行关键文字，复杂关系改用公式、坐标轴、流程或手绘示意图；
- 标注只负责引导视线，关键结论必须仍然写在正文里；
- 页面保持安静，但信息密度不能因为"极简"而被牺牲。
这一区分很重要。商业极简设计经常通过删减内容和放大标题制造留白；学术手写风则通过压低装饰噪声，为推理本身留出空间。前者强调"看起来简洁"，后者强调"理解路径清楚"。
仓库结构：规范、实现与验证三层合一
项目目录体现了一套相当完整的幻灯片生产链：
| 模块 | 作用 | 技术意义 |
|---|---|---|
SKILL.md |
定义触发场景、工作流程和完成标准 | 把审美要求变成代理可执行的约束 |
references/style-guide.md |
拆解颜色、版式、提示词和标注规则 | 提供可复用的视觉语法 |
templates/deck.html |
基础页面骨架 | 避免每次从零搭建演示运行时 |
assets/ |
基础样式、动画、批注、时间轴资源与预览图 | 将视觉与交互能力本地化 |
examples/deepseek-v4-flash/ |
19 页完整示例 | 展示故事线、版式和交互如何组合 |
scripts/ |
结构检查、时间轴构建、渲染准备与导出 | 把交付过程自动化 |
tests/ |
字体契约测试 | 防止手写字形在不同环境中悄悄退化 |
evals/ |
典型任务样例 | 用于检验技能是否在目标场景中正确触发 |
这种结构比一组 CSS 文件更有价值，因为它同时回答了四个问题：应该做成什么样、从哪里开始做、怎样生成最终文件、如何判断结果合格。
视觉系统：颜色不是装饰，而是语义
项目规定背景使用淡暖白，正文使用深蓝黑，并给辅助色分配固定职责：蓝色表示推导主线或坐标轴，玫红表示结论与警告，绿色表示成立条件或确认项，荧光黄只短暂强调少量关键词，珊瑚粉用于例外、损失或剩余部分。
这是一套"语义着色"系统。同一种颜色在不同页面中承担相同角色，观众会逐渐形成阅读习惯：看到玫红框就寻找结论，沿蓝线追踪推导，看到绿色便检查成立条件。颜色因而成为导航，而不是美化。
项目同时明确禁止圆角卡片、阴影、渐变、装饰图标、照片背景和大面积色块。其目的不是复古或反设计，而是避免无意义的视觉组件切断公式、文字和图形之间的关系。常用版式仍然存在，包括极简封面、左文右图、三步流程、坐标页、对比表和公式式结论页，只是它们不再被"卡片化"。
页面模型：一张幻灯片就是一个可检查的语义单元
每页使用一个带标题属性的 section.slide，正文之外还包含演讲备注：
html
<section class="slide" data-title="页面名称">
<h2 class="slide-title">这一页回答的问题</h2>
<!-- 正文、公式、SVG 图解 -->
<aside class="notes">演讲时补充的一到三句话。</aside>
</section>这个模型看似简单，却有三个好处。第一，页面天然具有明确主题，便于检查"一页一问"；第二，备注与画面内容分离，演讲者无需把所有信息塞上屏幕；第三，统一的 DOM 结构让翻页、导出和时间轴构建脚本能够可靠地处理每一页。
图表优先使用 SVG，而不是截图。线条通过圆形端点、轻微位移和不完全规则的轮廓模拟手绘感。这样既保留矢量清晰度，又能让坐标轴、箭头和框线参与后续动画。相比直接生成整页图片，HTML + SVG 也更容易修正文字、调整数据和检查溢出。
neat-annotations：让批注成为第二信息层
项目内置了 neat-annotations.css，可以用 data-note 给词语添加八个方向的手写箭头和短注释：
html
<span class="ann ann-n ann-green" data-note="成立条件">
横截性假设
</span>批注采用绝对定位，因此作者必须主动为箭头和文字预留空间。这也是它最容易踩坑的地方：短英文标签换成中文后，宽度增长明显；页面边缘的标注可能越界；多个标注过近会互相遮挡。项目的处理原则很稳妥------限制注释最大宽度、只写短语，并把不可缺失的结论保留在正文中。即使批注渲染失败，页面的信息仍然完整。
双版本输出：静态演示与逐条讲解共用一份内容
仓库默认生成两个版本：
index.html是可用左右键、空格翻页的原版；index-timeline.html是逐条播放版，会把标题、文字行、框、箭头和图表拆成连续步骤。
时间轴版通过 build_timeline.py 从原始 HTML 构建，而不是要求作者维护第二套页面。它把相关 CSS 与 JavaScript 内联成单文件，因此可以独立移动或发送。演讲时，单击或按空格只出现下一项，还可以自动连播，体验更接近 Office PPT 的分步动画。
这一设计的关键价值是"单一内容源"：排版和文字只维护一次，静态审阅版与动态演示版不会逐渐产生差异。对论文汇报尤其有用------作者可以先用静态版检查全局逻辑，再用时间轴版控制现场信息释放速度。
从原文到成品的完整流水线
按照技能定义，一次规范的制作过程可分为五步。
第一步是提炼故事线。先写出报告的总问题、必要背景、三到六个核心判断、支撑材料和最终要观众记住的一句话，再拆成 12 到 24 页。推荐顺序是"变化发生了什么 → 为什么重要 → 证据与推导 → 怎么做 → 陷阱 → 结论"。
第二步是为每个问题选择表达形式。概念关系用图解，变化趋势用坐标轴，操作步骤用流程，参数差异用表格，最终判断用细线结论框。不要把文章段落原封不动地贴进页面。
第三步是基于模板制作 HTML，并复用本地的基础样式、动画样式、批注样式和运行时。页面内的每个重要对象应保留清晰的 DOM 或 SVG 结构，以便时间轴脚本识别。
第四步是执行结构检查。check_deck.py 用于发现页面结构与备注等基础问题；随后由 build_timeline.py 生成时间轴版。
第五步是渲染和目视验收。导出脚本逐页生成 1920×1080 PNG，并要求检查中文清晰度、批注遮挡、表格密度、公式越界和结论框碰撞，最后再看一张总览图确认整套演示的节奏。
字体契约：这个项目最严格、也最现实的限制
项目固定使用 HanziPen SC，并要求字形与仓库中的封面预览一致，不设置其他中文字体作为回退。渲染脚本会注入指定字体文件，并在字体加载失败时停止导出。
这项约束非常重要。手写风的视觉身份高度依赖字形；如果系统悄悄回退到微软雅黑或黑体，布局可能仍然"能看"，但气质、字宽和换行都会改变。仓库甚至提供字体契约测试，说明作者把字体视为构建依赖，而不是可有可无的装饰。
它也带来明显的环境边界：README 给出的导出流程依赖 macOS、Google Chrome 和"翩翩体-简"字体资源。Windows 或 Linux 用户可以阅读和编辑 HTML，但若要得到与预览严格一致的 PNG，需要自行解决字体授权、安装与浏览器渲染环境问题。项目选择"缺字体就失败"，比无声降级更适合对视觉一致性有要求的正式交付。
为什么它适合技术博客、论文汇报和科普报告
技术内容通常同时包含术语、因果关系、数据和例外条件。常规商业模板喜欢把这些信息切成几张互不相干的卡片，反而破坏推导。这个项目强调连续逻辑链、语义颜色和一页一问，更适合以下任务：
- 解释算法或模型从输入到输出的过程；
- 展示论文中的定义、假设、推导与结论；
- 对比多个方案的成本、质量、速度和适用条件；
- 把长篇技术文章重构成可讲述的知识路径；
- 制作需要逐步揭示答案的科普演示。
它不适合品牌发布会、重照片叙事、复杂数据大屏或要求原生 .pptx 深度编辑的场景。项目输出的核心是 HTML 与 PNG；虽然时间轴版拥有类似 PPT 的播放体验，但它不是 PowerPoint 文件。
值得借鉴的工程思想
z-wanghong-handwritten-ppt 最有启发性的地方，不是成功模仿了一种热门视觉，而是把隐性的审美判断写成了可验证的工程规则：封面要留多少空白、颜色分别表示什么、每页承担几个问题、字体失败时是否继续、交付前检查哪些风险，都有明确答案。
这让"像王虹老师的手写报告"从一句模糊提示词，变成了一条可复现的生产流水线：内容建模决定故事线，HTML 与 SVG 承载结构，CSS 提供稳定视觉，批注建立第二信息层，脚本负责检查、动画和导出，人工总览完成最后验收。
真正值得学习的结论也因此很朴素：学术演示的高级感，不来自更多图标、更厚重的模板或更炫的转场，而来自对观众理解过程的精确设计。当每一种颜色、每一条线和每一次出现都有逻辑职责时，一张淡色纸面、几支数字笔，同样可以形成强大而美观的表达。