About `html-to-one-pptx` is a Claude Code Skill that automates the entire pipeline from an HTML design file to a `.pptx` slide. — About `html-to-one-pptx` is a Claude Code 技能 that automates the entire 流水线 from an HTML de签名 file to a `.pptx` slide.

HTML → PPTX Conversion 技能 (v4.4)

Read first: pptxgenjs.md for the full API reference.

Five principles:

One HTML = one slide subfolder — each HTML 获取s its own tmp/slide_NN/ directory Never batch-script — write and 运行 gen.js individually for each slide Fit-to-page — 扩展 = min(slide_w/html_w, slide_h/html_h) guarantees 1-page 输出 图表s use native PPT — 检测 图表 data with 检测_图表s.py → 添加图表() (not images) Color Master before gen.js — always 审计 contrast and visibility before writing any code 工作流: Single HTML PROJECT/ ├── slide.html └── tmp/ ├── 解析html.md ← Claude writes this in Phase 1 ├── colors.md ← from Phase 2.5 Color Master ├── 图表s.json ← from 检测_图表s.py (if 图表s found) ├── gen.js ← write here └── 输出.pptx

① self-解析 HTML → Claude reads HTML, writes tmp/解析html.md ② 检测_图表s.py → 提取s 图表 data → tmp/图表s.json (skip if no 图表s) ③ Color Master → 审计 contrast + visibility → tmp/colors.md (always 运行) ④ write gen.js → driven by 解析html.md + 图表s.json + colors.md ⑤ node tmp/gen.js → tmp/输出.pptx ✅ done

工作流: Multiple HTML Files PROJECT/ ├── slide1.html ├── slide2.html └── tmp/ ├── slide_01/ │ ├── 解析html.md ← Claude writes this first │ ├── colors.md ← from Phase 2.5 Color Master │ ├── 图表s.json ← if 图表s 检测ed │ ├── gen.js │ └── 输出.pptx ├── slide_02/ │ └── (same structure) └── final.pptx ← merged 结果

Multi-HTML step-by-step

For EACH HTML file, one at a time (never batch):

# Slide 1 SLIDE=./tmp/slide_01 mkdir -p $SLIDE # ① Write 工具 → $SLIDE/解析html.md (Phase 1 template) python3 scripts/检测_图表s.py slide1.html --out $SLIDE # ③ Color Master → $SLIDE/colors.md (Phase 2.5) # → write $SLIDE/gen.js (from 解析html.md + 图表s.json + colors.md) node $SLIDE/gen.js # ✅ 输出.pptx 生成d

# Slide 2 — only after slide 1 is done SLIDE=./tmp/slide_02 mkdir -p $SLIDE # ① Write 工具 → $SLIDE/解析html.md python3 scripts/检测_图表s.py slide2.html --out $SLIDE # ③ Color Master → $SLIDE/colors.md # → write $SLIDE/gen.js node $SLIDE/gen.js # ✅ 输出.pptx 生成d

# Merge all slides python3 scripts/merge_slides.py --slides-dir ./tmp

CRITICAL anti-lazy rule

NEVER batch-loop gen.js files — write each one individually and 运行 it before moving to the next.

Phase 1 — Self-解析 HTML → write tmp/解析html.md

Read the HTML source completely, then write tmp/解析html.md (or tmp/slide_NN/解析html.md) with the following structure. This file is your single source of truth for gen.js — every shape, text, and 图表 must 应用ear here before being coded.

# 解析html.md

1. Canvas

• size: {width}px × {height}px
• background: {color}
• font-family: {family}
• layout: {description of top-level structure with exact px values}

Example: "header 72px / content 580px (left-panel 668px + right-panel 349px) / summary 48px / footer 20px"

2. Layout Blocks

列出 every top-level structural section with page-level coordinates:

id	x	y	w	h	bg	notes
header	0	0	1017	72	#0f2460	flex row, space-between, p添加ing:0 28px
left-panel	0	72	668	580	#f0f5fd	p添加ing:8 10 6 12, border-right:1px #bfdbfe
right-panel	668	72	349	580	#fff	p添加ing:10 12 8 10
summary	0	652	1017	48	#eef3fc	border-top:2px #2563eb
footer	0	700	1017	20	#0f2460	flex space-between

3. Nested Structure Analysis (CRITICAL)

For complex 组件s (e.g., "house" contAIner), document the FULL nested hierarchy:

house (x:12, y:80, w:646, h:497)
├── roof (h:44, y:82-126)
│   ├── bg:#0f2460, border-机器人tom:2px #2563eb at y=124
│   └── p添加ing:0 44px (text 启动s at x=44)
├── floor-2col #1 (h:148, y:128-276)
│   ├── left: 应用安全 (w:322) + db-hd:24px + tile-grid:124px (2×4)
│   ├── col-sep: 1px at x=336
│   └── right: 网络安全 (w:322) + db-hd:24px + tile-grid:124px (2×4)
├── floor-div (h:1, y:276-277)
├── floor-2col #2 (h:116, y:278-394)
│   ├── left: 数据安全 (w:322) + db-hd:24px + tile-grid-3r:92px (2×3)
│   └── right: 内容安全 (w:322) + db-hd:24px + tile-grid-3r:92px (2×3)
├── floor-div (h:1, y:394-395)
├── 模型-floor (h:114, y:396-510) 全宽
│   ├── db-hd:24px + tile-grid-模型:90px (3×3)
├── floor-div (h:1, y:510-511)
└── ops-floor (h:72, y:512-584) 全宽
    ├── ops-hd:24px + ops-tiles:48px (7 items horizontal)

4. Shapes

列出 every visual shape (div/span with background, border, border-radius, box-shadow):

id	x	y	w	h	fill	border	radius	notes
header-bg	0	0	1017	72	#0f2460	机器人tom 3px #2563eb	0
house	12	80	646	497	#f4f8ff	2px #1e3a8a	0	contAIner
roof	14	82	642	44	#0f2460	机器人tom 2px #2563eb	0	trapezoid 命令行工具p
db-hd-应用	14	128	322	24	#3b82f6