Wang Hong Academic Handwritten-style HTML Slides

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

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

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

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. Organize the Storyline

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. 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. Use Fixed Visual Language

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. Use neat-annotations

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. Create HTML

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. Check and Export

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. Generate Timeline Version (Produced by Default)

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/<topic>-handwritten-ppt/
  index.html
  index-timeline.html
  style.css
  assets/
  png/
  contact-sheet.png
  prompts.md

Attached Content

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

z-wanghong-handwritten-ppt

NPX Install

Tags

SKILL.md Content (Chinese)

Wang Hong Academic Handwritten-style HTML Slides

Applicable Scenarios

Pre-reading Materials

Completion Standards

Workflow

1. Organize the Storyline

2. Select Page Types

3. Use Fixed Visual Language

4. Use neat-annotations

5. Create HTML

6. Check and Export

7. Generate Timeline Version (Produced by Default)

Recommended Output Directory

Attached Content