z-wanghong-handwritten-ppt

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

王虹学术手写风 HTML 幻灯片

Wang Hong Academic Handwritten-style HTML Slides

把内容做成一套安静、工整、逻辑清楚、信息密度高的手写学术报告。视觉上接近 Notability 数字手写页，内容上强调一页一个问题和连续推导。

Turn content into a set of quiet, neat, logically clear, and information-dense handwritten academic reports. Visually close to Notability digital handwritten pages, with content emphasizing one question per page and continuous derivation.

适用场景

Applicable Scenarios

技术文章转演示文稿
论文、模型、工具或产品的原理讲解
需要 16:9 HTML 幻灯片和逐页 PNG 的任务
希望保留手写温度，同时要求中文清楚可读的报告

Convert technical articles into presentation slides
Explain principles of papers, models, tools or products
Tasks requiring 16:9 HTML slides and page-by-page PNGs
Reports that want to retain handwritten warmth while requiring clear and readable Chinese

先读材料

Pre-reading Materials

读取用户提供的文章、讲稿、数据和参考图。
需要复用完整视觉规范或提示词时，读取
```
references/style-guide.md
```
。
需要查看成品结构时，打开
```
examples/deepseek-v4-flash/index.html
```
。
需要快速开工时，从
```
templates/deck.html
```
复制一份新文件。

Read articles, speeches, data and reference images provided by users.
Read
```
references/style-guide.md
```
when complete visual specifications or prompt words need to be reused.
Open
```
examples/deepseek-v4-flash/index.html
```
when checking the finished structure.
Copy a new file from
```
templates/deck.html
```
for quick start.

完成标准

Completion Standards

固定 16:9，浏览器中无滚动条和内容溢出。
封面保持极简，下半页至少留出一半空白。
正文每页回答一个清楚的问题，整套报告形成连续逻辑链。
字号、颜色和手绘线条统一，中文投影可读。
重要数字和结论同时出现在正文，手写标注只承担视觉提示。
支持左右键、空格翻页和全屏。
每页都有简短讲稿备注。
输出原版 HTML、时间轴版 HTML、全部 PNG 和一张总览图，并实际打开检查。时间轴版默认同目录生成
```
index-timeline.html
```
；用户明确只要某一版时按需输出，不强制问询。

Fixed 16:9 aspect ratio, no scrollbars or content overflow in the browser.
Keep the cover page minimalist, leaving at least half of the lower page blank.
Each body page answers a clear question, and the entire report forms a continuous logical chain.
Uniform font size, color and hand-drawn lines, with Chinese text readable under projection.
Important figures and conclusions appear in the body text at the same time; handwritten annotations only serve as visual prompts.
Support left/right arrow keys, space bar for page turning and full-screen mode.
Each page has short speech notes.
Output the original HTML, timeline version HTML, all PNGs and an overview image, and open them to check. The timeline version is generated as
```
index-timeline.html
```
in the same directory by default; output only the required version when the user explicitly requests a specific version, no mandatory inquiry needed.

工作流程

Workflow

1. 整理故事线

1. Organize the Storyline

先从原文提取：

报告要回答的总问题
观众需要先知道的背景
3 到 6 个核心判断
支撑判断的数据、对比、流程和例子
最后希望观众记住的一句话

把内容拆成 12 到 24 页。推荐顺序：封面 → 变化发生了什么 → 为什么重要 → 证据与推导 → 怎么做 → 陷阱 → 结论。

不要把文章段落直接塞进页面。每页只留 3 到 6 行关键文字，复杂信息转换成图、表、坐标轴或公式。

First extract from the original text:

The main question the report aims to answer
Background knowledge the audience needs to know first
3 to 6 core judgments
Data, comparisons, processes and examples supporting the judgments
One key sentence the audience should remember at the end

Split the content into 12 to 24 pages. Recommended order: Cover Page → What Changes Have Occurred → Why It Matters → Evidence and Derivation → How to Do It → Traps → Conclusion.

Do not directly insert article paragraphs into pages. Keep only 3 to 6 lines of key text per page; convert complex information into diagrams, tables, coordinate axes or formulas.

2. 选择页面类型

2. Select Page Types

优先使用这些版式：

极简封面：单行标题、细横线、作者/场合/日期、大片留白
左文右图：三到五行解释配一个手绘示意图
流程页：三个框和箭头，最重要的一步用荧光色
坐标页：用两个轴解释成本、质量、速度或规模
对比页：两列、三列或一张紧凑表格
结论页：公式式收束，底部一条玫红结论框
结束页：一句感谢和署名，保持安静

Prioritize using these layouts:

Minimalist cover page: Single-line title, thin horizontal line, author/occasion/date, large blank space
Text on left, diagram on right: 3 to 5 lines of explanation with a hand-drawn schematic
Process page: Three boxes and arrows, highlight the most important step with fluorescent color
Coordinate page: Explain cost, quality, speed or scale using two axes
Comparison page: Two columns, three columns or a compact table
Conclusion page: Formula-style conclusion with a magenta conclusion box at the bottom
Closing page: A thank-you sentence and signature, keep it quiet

3. 使用固定视觉语言

3. Use Fixed Visual Language

背景：淡暖白，接近干净的数字纸张
主文字：深蓝黑
蓝色：标题下划线、坐标轴、推导主线
玫红：结论、警告、推荐框
绿色：成立条件、确认项、推荐档
荧光黄：极少量关键词
珊瑚粉：例外、损失或剩余部分

字体固定使用

HanziPen SC

，与

assets/preview-cover.png

里的字形保持一致。不设置其他中文字体候选。渲染环境缺少该字体时先安装，不得带着替代字形交付。

避免圆角卡片、阴影、渐变、装饰图标、商业模板、照片背景和大面积色块。

Background: Light warm white, close to clean digital paper
Main text: Deep blue-black
Blue: Title underlines, coordinate axes, derivation main lines
Magenta: Conclusions, warnings, recommendation boxes
Green: Validation conditions, confirmation items, recommended categories
Fluorescent yellow: Very few key words
Coral pink: Exceptions, losses or remaining parts

Fixed font:

HanziPen SC

, consistent with the glyphs in

assets/preview-cover.png

. Do not set other Chinese font alternatives. Install the font first if it is missing in the rendering environment; do not deliver with substitute glyphs.

Avoid rounded cards, shadows, gradients, decorative icons, commercial templates, photo backgrounds and large color blocks.

4. 使用 neat-annotations

4. Use neat-annotations

项目已在

assets/neat-annotations.css

中本地保存。它用手写箭头把短注释指向目标词，支持八个方向、颜色和自定义颜色。

中文可以直接写入

data-note

。同时在页面样式里覆盖：

css

:root {
  --ann-font: "HanziPen SC";
  --ann-label-max-width: 220px;
}

使用示例：

html

<span class="ann ann-n ann-green" data-note="甜点档">Q4_K_XL</span>

标注采用绝对定位。给箭头和文字预留空间，避免贴近页面边缘或相互遮挡。长中文结论仍写在正文中。

The project has been saved locally in

assets/neat-annotations.css

. It uses handwritten arrows to point short annotations to target words, supporting eight directions, colors and custom colors.

Chinese can be directly written into

data-note

. Meanwhile, override in the page style:

css

:root {
  --ann-font: "HanziPen SC";
  --ann-label-max-width: 220px;
}

Usage example:

html

<span class="ann ann-n ann-green" data-note="甜点档">Q4_K_XL</span>

Annotations use absolute positioning. Reserve space for arrows and text to avoid being close to page edges or overlapping with each other. Long Chinese conclusions should still be written in the body text.

5. 制作 HTML

5. Create HTML

从

templates/deck.html

开始，保留这些本地资源：

html

<link rel="stylesheet" href="../assets/base.css">
<link rel="stylesheet" href="../assets/animations.css">
<link rel="stylesheet" href="../assets/neat-annotations.css">
<link rel="stylesheet" href="../assets/template.css">
<script src="../assets/runtime.js"></script>

每页使用：

html

<section class="slide" data-title="页面名称">
  <h2 class="slide-title">这一页回答的问题</h2>
  <!-- 页面内容 -->
  <aside class="notes">演讲时补充的一到三句话。</aside>
</section>

图表优先用 SVG 手绘。线条使用

stroke-linecap="round"

，适当叠加轻微位移滤镜，让直线保留手画感。

Start from

templates/deck.html

, retain these local resources:

html

<link rel="stylesheet" href="../assets/base.css">
<link rel="stylesheet" href="../assets/animations.css">
<link rel="stylesheet" href="../assets/neat-annotations.css">
<link rel="stylesheet" href="../assets/template.css">
<script src="../assets/runtime.js"></script>

Use this structure for each page:

html

<section class="slide" data-title="Page Name">
  <h2 class="slide-title">The question this page answers</h2>
  <!-- Page content -->
  <aside class="notes">1 to 3 sentences to supplement during the speech.</aside>
</section>

Prioritize using SVG for hand-drawn charts. Use

stroke-linecap="round"

for lines, and appropriately add slight displacement filters to retain the hand-drawn feel of straight lines.

6. 检查与导出

6. Check and Export

先检查结构：

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，再重新导出。交付前至少完成一次浏览器翻页测试和一次全页总览检查。

First check the structure:

bash

python3 scripts/check_deck.py /absolute/path/to/index.html

Then export page by page:

bash

scripts/render.sh \
  /absolute/path/to/index.html \
  all \
  /absolute/path/to/png-output \
  /absolute/path/to/Hanzipen.ttc

On macOS, download "HanziPen SC" in Font Book first. The script will directly inject the specified font file into the temporary rendering page and confirm the font is loaded successfully before exporting. Stop exporting if the font is missing or fails to load.

Actually check all PNGs. Focus on:

Whether Chinese text is clear
Whether annotations block the body text
Whether tables are too dense
Whether code and formulas exceed the boundaries
Whether conclusion boxes cover the content
Whether each page still only addresses one question

Modify the HTML if problems are found, then re-export. Complete at least one browser page-turning test and one full-page overview check before delivery.

7. 生成时间轴版（默认同时产出）

7. Generate Timeline Version (Produced by Default)

使用同一份 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 相对路径，可以单独移动或发送。

Use the same HTML to generate a presentation version that supports step-by-step animation playback:

bash

python3 scripts/build_timeline.py \
  "/absolute/path/to/deck/index.html" \
  --out "/absolute/path/to/deck/index-timeline.html"

The timeline version splits each page into steps such as title, box, arrow, text line, chart, etc. Only the next step appears when pressing space or clicking, and auto-play can be enabled. The effect is close to Office PPT, and it can be directly presented in the browser. It shares the same visual style as the original version, without changing the text and layout.

Deliver both the original and timeline versions by default; output only the corresponding file when the user says "only original version" or "only timeline version". The timeline version is an inline single file, independent of the relative path of the original HTML's assets, and can be moved or sent separately.

输出目录建议

Recommended Output Directory

text

output/<主题>-handwritten-ppt/
  index.html
  index-timeline.html
  style.css
  assets/
  png/
  contact-sheet.png
  prompts.md

text

output/<topic>-handwritten-ppt/
  index.html
  index-timeline.html
  style.css
  assets/
  png/
  contact-sheet.png
  prompts.md

随附内容

Attached Content

```
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 导出

```
templates/deck.html
```
: Editable basic template
```
assets/template.css
```
: General handwritten-style styles
```
assets/timeline.css
```
: Timeline version animation and control bar styles
```
assets/timeline.js
```
: Runtime for step-by-step playback of the timeline version
```
examples/deepseek-v4-flash/
```
: 19-page complete example
```
references/style-guide.md
```
: Style breakdown, GPT Image prompts and HTML prompts
```
scripts/check_deck.py
```
: Structure check
```
scripts/build_timeline.py
```
: Generate single-file HTML for timeline version
```
scripts/render.sh
```
: Page-by-page PNG export