LIVE DEMO · 這份簡報就是用 htmlpptskill 做的
htmlpptskill
一句話讓 AI 做出 HTML 簡報
可離線播放、QR 自動驗證、觀眾手機即時投票
電腦按 → 翻頁 · 手機往下捲動
先試試看
你可以這樣操作
→
下一步
有些頁面會一項一項出現
S
講者視窗
備註、下一頁、計時器
O
總覽
所有投影片縮圖
F
全螢幕
上台時用
B
黑屏
請觀眾看你
G
跳頁
輸入頁碼
A
揭曉答案
投票頁專用
?
全部快捷鍵
reveal.js 內建說明
這一頁示範的是
fragment
：按一下出一項，聽眾不會先把整頁讀完。
流程
從一句話到交付
1
說一句話
「幫我做一份 20 頁的講座簡報」
→
2
先對大綱
AI 列出頁碼、標題、要放的圖，等你確認
→
3
產生 HTML
reveal.js 單檔，圖片、QR 全內嵌
→
4
逐頁 QA
截圖、溢出、JS 錯誤、QR 解碼
→
5
交付
HTML ＋ 講義 PPTX／PDF
Auto-Animate
QA 到底檢查什麼？
逐頁 QA
Auto-Animate
QA 到底檢查什麼？
逐頁 QA：有問題就 exit 1
✓
每一頁截圖，拼成一張總覽圖
✓
文字有沒有超出版面
✓
有沒有 JavaScript 錯誤
✓
每一頁有沒有講者備註
✓
每張 QR 解碼，和網址比對
✓
離線模式：任何對外請求都算失敗
3D 翻卡
講者會遇到的事 → 這個 skill 的做法
QR 印錯
台下掃到 404
逐張解碼
QA 把每張 QR 截圖解碼，和 data-url 比對
會場沒網路
字型、圖、外掛全掛
單檔內嵌
reveal.js、圖片、QR 全塞進一個 HTML
文字溢出
播到一半才發現
逐頁截圖
一張總覽圖看完全部頁面
主辦要 PPTX
你只有 HTML
一行輸出
講義 PPTX（含備註）與 PDF
按 → 四張一起翻面；點單張可以翻回來。
頁內測驗
點點看：這是真的能作答的測驗
手機即時投票（示範模式）
你平常用什麼做簡報？
正式使用時，觀眾掃 QR 用手機作答；這裡模擬 60 人作答。作答數穩定後按 A 揭曉，Shift+R 重來。
A
PowerPoint／Keynote
0%
B
Google 簡報
0%
C
HTML（reveal.js 等）
0%
D
其他
0%
示範模式
模擬 60 人作答
正式使用時這裡是加入 QR
0
人作答
0
支手機在線
按 A 揭曉
猜數字（示範模式）
這份 Demo 整份 HTML 有多大？
reveal.js、講者備註外掛、QR、測驗、投票程式全部內嵌在同一個檔案裡。猜猜看幾 KB？
0–99
100–299
300–499
500–999
1000–1999
2000 以上
全場中位數
—
示範模式
模擬 60 人作答
正式使用時這裡是加入 QR
0
人作答
0
支手機在線
按 A 揭曉
滑桿對比
同一份 AI 簡報，有沒有 QA
沒有 QA
第 7 頁標題被切掉一半
結尾 QR 指向舊網址
會場 Wi-Fi 一斷，字型和圖全掉
第 12 頁的動畫卡住
主辦單位：「可以給 PPT 嗎？」
有 QA
✓
溢出：0 頁
✓
QR：3 / 3 解碼相符
✓
離線：對外請求 0 個
✓
JS 錯誤：0
✓
講義：deck.pptx、deck.pdf
← 拉動滑桿 →
開始用
30 秒安裝
# 下載並安裝到你用的 AI coding agent
git clone https://github.com/keanu77/htmlpptskill cd htmlpptskill && ./install.sh
# 重開 CLI 後直接說
「做一份 HTML 簡報」
支援
Claude Code、Codex CLI、Gemini CLI、Grok Build
。需要 Node 20+；QA 用 Playwright，講義用 Python。
github.com/keanu77/htmlpptskill
MIT 授權 · 歡迎給顆星
謝謝觀看
原始碼：
github.com/keanu77/htmlpptskill
這份 Demo 的原始檔在 repo 的 demo/src/index.html