didi-board

Spoken script → Whiteboard HTML slides

Overview

Break the spoken script into 5-8 slides and generate an HTML file with hand-drawn style SVG illustrations. Use it as a background board for explanation during screen recording.

Input

Spoken script text (Chinese, usually 800-2000 characters)

Output

A complete HTML file, saved to ~/Downloads/[topic]-board.html

Process

digraph board_flow {
    "读取口播稿" [shape=box];
    "拆分逻辑板块" [shape=box];
    "识别每块视觉类型" [shape=box];
    "生成 HTML" [shape=box];
    "保存文件" [shape=box];

    "读取口播稿" -> "拆分逻辑板块";
    "拆分逻辑板块" -> "识别每块视觉类型";
    "识别每块视觉类型" -> "生成 HTML";
    "生成 HTML" -> "保存文件";
}

Step 1: Split the spoken script into logical sections

Split the spoken script into 5-8 logical units, each unit = 1 slide.

Splitting principles:

• Each slide covers only one core point
• Opening/definition content gets its own slide
• Comparison content gets its own slide
• Key quote/summary gets its own slide
• Do not exceed 8 slides (screen recording pace becomes too slow)

Step 2: Identify the visual type of each section

Spoken content type	Visual mode	Layout
Definition/concept explanation	Analogy illustration (SVG)	text-col + art-col
A vs B comparison	Left-right comparison table .compare	Full width
Enumerating problems/key points	Card grid (2-3 columns)	Full-width grid
Process/steps	Process arrows .flow	text-col + art-col
Timeline/evolution	Timeline SVG	text-col + art-col
Core quote/summary	.callout Highlight box	text-col + art-col

Step 3: Generate the HTML

Use board-template.html as the base template. Key elements:

Fonts: Caveat (handwritten English) + Noto Sans SC (Chinese body text) Color scheme：

• --ink: #1a1a1a(primary color)
• --accent-red: #c0392b(emphasis/warning)
• --accent-blue: #2c5f8a(process/structure)
• --accent-green: #2d6a4f(positive/complete)
• --paper: #faf8f3(background paper color)

Structure of each Slide：

<div class="slide" id="s1">
  <div class="slide-num">1 / N</div>
  <div class="slide-title">
    中文标题
    <span class="en">English subtitle</span>
  </div>
  <div class="slide-body">
    <div class="text-col">
      <!-- 文字内容：.point / .callout / .flow / .compare -->
    </div>
    <div class="art-col">
      <!-- 手绘 SVG 插图 -->
    </div>
  </div>
</div>

SVG illustration specifications

Each slide with an art-col needs a hand-drawn style SVG.

Size: 150-180px wide, 200-230px tall Style requirements：

• Use stroke instead of fill(line-drawing style)
• Rounded rectangle rx="3-4" to simulate hand-drawing
• Dashed line stroke-dasharray="4,3" to indicate association/transmission
• For text use font-family="Caveat, cursive"
• Colors: use only the 4 types in the CSS variables
• Use emoji appropriately as marker symbols
• You can draw: boxes, circles, arrows, connecting lines, annotations

SVG content selection：

• Definition type → analogy diagram (e.g., engine = car, horse = harness)
• Process type → top-to-bottom flow diagram
• Comparison type → left-right symmetrical diagram
• Evolution type → timeline

Available components

Key point list .point

<div class="point">
  <div class="point-marker">①</div>
  <div class="point-text">
    <strong>加粗关键词</strong>带荧光笔效果
    <div class="point-sub">灰色补充说明</div>
  </div>
</div>

Highlight box .callout

<div class="callout">核心金句放这里</div>

Comes with ★ decoration and warm paper background.

Flowchart .flow

<div class="flow">
  <div class="flow-item">
    <div class="flow-box blue">步骤名</div>
    <div class="flow-label">补充说明</div>
  </div>
  <div style="padding-left:20px; font-size:22px; color:#aaa;">↓</div>
  <!-- 重复 -->
</div>

Color categories:.red .blue .green

Comparison table .compare

<div class="compare">
  <div class="compare-header">A 方案</div>
  <div class="compare-header">B 方案</div>
  <div class="compare-cell">A 的特点</div>
  <div class="compare-cell">B 的特点</div>
</div>

Tags .tag

<span class="tag red">关键词</span>
<span class="tag blue">分类</span>

Complete template

When generating the HTML, use the complete CSS and JS in board-template.html. Only replace the slides content and total variables.

IMPORTANT: Refer to @board-template.html for the complete CSS styles and JS navigation logic. Each time you generate, copy the complete template and only replace the <!-- SLIDES GO HERE --> section.

Quality Checklist

• Each slide has only one core point
• The title is concise and powerful (Chinese + English subtitle)
• The SVG illustration is related to the content, not decorative
• The strong tag is used on true keywords
• Key quotes/core points are highlighted with a .callout box
• The total number of slides is between 5-8
• The HTML file can be opened directly in a browser for use