# Z Wanghong Handwritten Ppt
> 将文章、讲稿或技术主题制作成王虹学术报告气质的 16:9 Notability 手写风 HTML 幻灯片，逐页导出 PNG，并默认同时生成可逐条播放动画的时间轴版 HTML。触发词：王虹PPT风格、王虹手写PPT、Notability学术手写幻灯片、手写网页PPT、手写PPT、数学家手写报告风、手写PPT时间轴版、手写演示动画。
- Skill: `tjxj/z-wanghong-handwritten-ppt` (Agent Skill, multi-file: 28 files)
- Install (CLI): `npx skillmds@latest add tjxj/z-wanghong-handwritten-ppt`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tjxj/z-wanghong-handwritten-ppt/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tjxj (https://skillmd.com/u/tjxj)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tjxj/z-wanghong-handwritten-ppt
---
# 王虹学术手写风 HTML 幻灯片
把内容做成一套安静、工整、逻辑清楚、信息密度高的手写学术报告。视觉上接近 Notability 数字手写页，内容上强调一页一个问题和连续推导。
## 适用场景
- 技术文章转演示文稿
- 论文、模型、工具或产品的原理讲解
- 需要 16:9 HTML 幻灯片和逐页 PNG 的任务
- 希望保留手写温度，同时要求中文清楚可读的报告
## 先读材料
1. 读取用户提供的文章、讲稿、数据和参考图。
2. 需要复用完整视觉规范或提示词时，读取 `references/style-guide.md`。
3. 需要查看成品结构时，打开 `examples/deepseek-v4-flash/index.html`。
4. 需要快速开工时，从 `templates/deck.html` 复制一份新文件。
## 完成标准
- 固定 16:9，浏览器中无滚动条和内容溢出。
- 封面保持极简，下半页至少留出一半空白。
- 正文每页回答一个清楚的问题，整套报告形成连续逻辑链。
- 字号、颜色和手绘线条统一，中文投影可读。
- 重要数字和结论同时出现在正文，手写标注只承担视觉提示。
- 支持左右键、空格翻页和全屏。
- 每页都有简短讲稿备注。
- 输出原版 HTML、时间轴版 HTML、全部 PNG 和一张总览图，并实际打开检查。时间轴版默认同目录生成 `index-timeline.html`；用户明确只要某一版时按需输出，不强制问询。
## 工作流程
### 1. 整理故事线
先从原文提取：
- 报告要回答的总问题
- 观众需要先知道的背景
- 3 到 6 个核心判断
- 支撑判断的数据、对比、流程和例子
- 最后希望观众记住的一句话
把内容拆成 12 到 24 页。推荐顺序：封面 → 变化发生了什么 → 为什么重要 → 证据与推导 → 怎么做 → 陷阱 → 结论。
不要把文章段落直接塞进页面。每页只留 3 到 6 行关键文字，复杂信息转换成图、表、坐标轴或公式。
### 2. 选择页面类型
优先使用这些版式：
- 极简封面：单行标题、细横线、作者/场合/日期、大片留白
- 左文右图：三到五行解释配一个手绘示意图
- 流程页：三个框和箭头，最重要的一步用荧光色
- 坐标页：用两个轴解释成本、质量、速度或规模
- 对比页：两列、三列或一张紧凑表格
- 结论页：公式式收束，底部一条玫红结论框
- 结束页：一句感谢和署名，保持安静
### 3. 使用固定视觉语言
- 背景：淡暖白，接近干净的数字纸张
- 主文字：深蓝黑
- 蓝色：标题下划线、坐标轴、推导主线
- 玫红：结论、警告、推荐框
- 绿色：成立条件、确认项、推荐档
- 荧光黄：极少量关键词
- 珊瑚粉：例外、损失或剩余部分
字体固定使用 `HanziPen SC`，与 `assets/preview-cover.png` 里的字形保持一致。不设置其他中文字体候选。渲染环境缺少该字体时先安装，不得带着替代字形交付。
避免圆角卡片、阴影、渐变、装饰图标、商业模板、照片背景和大面积色块。
### 4. 使用 neat-annotations
项目已在 `assets/neat-annotations.css` 中本地保存。它用手写箭头把短注释指向目标词，支持八个方向、颜色和自定义颜色。
中文可以直接写入 `data-note`。同时在页面样式里覆盖：
```css
:root {
--ann-font: "HanziPen SC";
--ann-label-max-width: 220px;
}
```
使用示例：
```html
Q4_K_XL
```
标注采用绝对定位。给箭头和文字预留空间，避免贴近页面边缘或相互遮挡。长中文结论仍写在正文中。
### 5. 制作 HTML
从 `templates/deck.html` 开始，保留这些本地资源：
```html
```
每页使用：
```html
```
图表优先用 SVG 手绘。线条使用 `stroke-linecap="round"`，适当叠加轻微位移滤镜，让直线保留手画感。
### 6. 检查与导出
先检查结构：
```bash
python3 scripts/check_deck.py /absolute/path/to/index.html
```
再逐页导出：
```bash
scripts/render.sh \
/absolute/path/to/index.html \
all \
/absolute/path/to/png-output \
/absolute/path/to/Hanzipen.ttc
```
macOS 上可先在字体册下载“翩翩体-简”。脚本会把指定字体文件直接注入临时渲染页，并在导出前确认字体加载成功。缺少该字体或加载失败时停止导出。
实际查看所有 PNG。重点检查：
- 中文是否清楚
- 标注是否遮挡正文
- 表格是否过密
- 代码和公式是否超出边界
- 结论框是否压住内容
- 每页是否仍然只讲一个问题
发现问题后修改 HTML，再重新导出。交付前至少完成一次浏览器翻页测试和一次全页总览检查。
### 7. 生成时间轴版（默认同时产出）
使用同一份 HTML 生成可逐条播放动画的演示版：
```bash
python3 scripts/build_timeline.py \
"/absolute/path/to/deck/index.html" \
--out "/absolute/path/to/deck/index-timeline.html"
```
时间轴版把每一页拆成标题、框、箭头、文字行、图表等步骤，按空格或点击只出现下一步，可开启自动连播，效果接近 Office PPT，直接在浏览器中演示。它与原版共用同一份视觉，不改文字和排版。
默认同时交付原版和时间轴版；用户说“只要原版”或“只要时间轴版”时，按需只输出对应文件。时间轴版是内联的单文件，不依赖原 HTML 的 assets 相对路径，可以单独移动或发送。
## 输出目录建议
```text
output/<主题>-handwritten-ppt/
index.html
index-timeline.html
style.css
assets/
png/
contact-sheet.png
prompts.md
```
## 随附内容
- `templates/deck.html`：可直接改写的基础模板
- `assets/template.css`：通用手写风样式
- `assets/timeline.css`：时间轴版动画与控制条样式
- `assets/timeline.js`：时间轴版逐条播放运行时
- `examples/deepseek-v4-flash/`：19 页完整示例
- `references/style-guide.md`：风格拆解、GPT Image 提示词和 HTML 提示词
- `scripts/check_deck.py`：结构检查
- `scripts/build_timeline.py`：生成时间轴版单文件 HTML
- `scripts/render.sh`：逐页 PNG 导出