Turn content into a quiet, neat, logically clear, information-dense handwritten academic report. Visually close to a Notability digital handwriting page; in content, emphasize one question per page and continuous derivation.
Use cases
- Turning technical articles into presentations
- Explaining the principles of papers, models, tools, or products
- Tasks that need 16:9 HTML slides and page-by-page PNGs
- Reports that want to keep the warmth of handwriting while requiring clear, readable Chinese
First read the material
- Read the articles, scripts, data, and reference images provided by the user.
- When the complete visual specification or prompt needs to be reused, read
references/style-guide.md。 - When the finished structure needs to be viewed, open
examples/deepseek-v4-flash/index.html。 - When a quick start is needed, copy a new file from
templates/deck.html.
Completion criteria
- Fixed 16:9, with no scrollbars or content overflow in the browser.
- The cover stays minimalist, with at least half of the lower page left blank.
- Each body page answers one clear question, and the whole report forms a continuous chain of logic.
- Font sizes, colors, and hand-drawn lines are consistent, and the Chinese is readable when projected.
- Important numbers and conclusions also appear in the body text; handwritten annotations only serve as visual cues.
- Supports left/right arrow keys, spacebar paging, and fullscreen.
- Each page has brief speaker notes.
- Output the original HTML, timeline-version HTML, all PNGs, and one overview image, and actually open them for checking. The timeline version is by default generated in the same directory as
index-timeline.html; when the user explicitly wants only one version, output it as requested and do not force a question.
Workflow
1. Organize the storyline
First extract from the source text:
- The overall question the report should answer
- The background the audience needs to know first
- 3 to 6 core judgments
- The data, comparisons, processes, and examples that support the judgments
- The one sentence you want the audience to remember at the end
Break the content into 12 to 24 pages. Recommended order: cover → what changed happened → why it matters → evidence and derivation → how to do it → pitfalls → conclusion.
Do not stuff article paragraphs directly onto pages. Keep only 3 to 6 lines of key text per page, and convert complex information into diagrams, tables, axes, or formulas.
2. Choose page types
Prioritize these layouts:
- Minimal cover: single-line title, thin horizontal line, author/occasion/date, large blank space
- Text left, image right: three to five lines of explanation with one hand-drawn schematic
- Process page: three boxes and arrows, with the most important step in highlighter color
- Coordinate page: use two axes to explain cost, quality, speed, or scale
- Comparison page: two columns, three columns, or one compact table
- Conclusion page: formula-style closure, with one rose-red conclusion box at the bottom
- Ending page: one line of thanks and a signature, kept quiet
3. Use a fixed visual language
- Background: light warm white, close to clean digital paper
- Main text: dark navy black
- Blue: title underline, axes, main derivation line
- Rose red: conclusions, warnings, recommendation boxes
- Green: conditions for validity, confirmation items, recommended tier
- Fluorescent yellow: a very small amount of keywords
- Coral pink: exceptions, losses, or remaining parts
The font is always HanziPen SC, consistent with the glyphs in assets/preview-cover.png . Do not set any other Chinese font candidates. If the rendering environment lacks this font, install it first, and do not deliver with substitute glyphs.
Avoid rounded cards, shadows, gradients, decorative icons, commercial templates, photo backgrounds, and large areas of solid color.
4. Use neat-annotations
The project is already saved locally in assets/neat-annotations.css . It uses handwritten arrows to point short annotations at target words, supporting eight directions, colors, and custom colors.
Chinese can be written directly into data-note. At the same time, override in the page styles:
:root {
--ann-font: "HanziPen SC";
--ann-label-max-width: 220px;
}
Usage example:
<span class="ann ann-n ann-green" data-note="甜点档">Q4_K_XL</span>
Annotations use absolute positioning. Reserve space for arrows and text, and avoid being close to the page edges or overlapping each other. Long Chinese conclusions are still written in the body text.
5. Create the HTML
Start from templates/deck.html , and keep these local assets:
<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 on each page:
<section class="slide" data-title="页面名称">
<h2 class="slide-title">这一页回答的问题</h2>
<!-- 页面内容 -->
<aside class="notes">演讲时补充的一到三句话。</aside>
</section>
For charts, prefer hand-drawn SVG. Use for lines stroke-linecap="round", and appropriately overlay a slight displacement filter so the straight lines retain a hand-drawn feel.
6. Check and export
First check the structure:
python3 scripts/check_deck.py /absolute/path/to/index.html
Then export page by page:
scripts/render.sh \
/absolute/path/to/index.html \
all \
/absolute/path/to/png-output \
/absolute/path/to/Hanzipen.ttc
On macOS, you can first download "HanziPen SC" in Font Book. The script injects the specified font file directly into the temporary rendering page, and confirms that the font has loaded successfully before export. If the font is missing or loading fails, stop the export.
Actually inspect all PNGs. Focus on checking:
- Whether the Chinese is clear
- Whether annotations obscure 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 discusses only one issue
After finding problems, modify the HTML and export again. Before delivery, complete at least one browser page-turning test and one full-page overview check.
7. Generate the timeline version (produced by default at the same time)
Use the same HTML to generate a presentation version that can play animations step by step:
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, boxes, arrows, text lines, and charts. Pressing space or clicking reveals only the next step. Autoplay can be enabled, and the effect is close to Office PPT, presented directly in the browser. It shares the same visuals as the original version and does not change the text or layout.
By default, deliver both the original version and the timeline version at the same time; when the user says "only the original version" or "only the timeline version", output only the corresponding file as needed. The timeline version is an inline single file, does not depend on the relative assets path of the original HTML, and can be moved or sent separately.
Recommended output directory
output/<主题>-handwritten-ppt/
index.html
index-timeline.html
style.css
assets/
png/
contact-sheet.png
prompts.md
Included content
templates/deck.html: a basic template that can be directly rewrittenassets/template.css: general handwritten-style stylesassets/timeline.css: timeline version animation and control bar stylesassets/timeline.js: timeline version step-by-step playback runtimeexamples/deepseek-v4-flash/: a complete 19-page examplereferences/style-guide.md: style breakdown, GPT Image prompts, and HTML promptsscripts/check_deck.py: structure checkscripts/build_timeline.py: generate the timeline version single-file HTMLscripts/render.sh: export page-by-page PNGs