JACKY 的簡報新標準 · 2026-09-11

簡報改用 HTML
為什麼改、怎麼做、怎麼傳

這份簡報本身就是用這套方法做的，發佈在 GitHub Pages 上，你現在用網址打開它。

鐘基啟 Jacky · 双云行銷 · 薇姐製作

開場一句：你發現的事情是對的，我把它變成一套可重複的做法，順便解決了傳輸問題。

PART 01

為什麼改

先把代價講清楚，再講好處。

誠實先行。HTML 不是萬靈丹，有三個明確代價。

七個面向的實際差距

面向	pptx	單檔 HTML
AI 產出速度	逐物件擺放，改一頁常要重跑整份	純文字，改一行就是改一頁
版面控制	座標式，字級一變全頁走位	排版引擎自動重排
視覺天花板	受 Office 圖形能力限制	整個瀏覽器的能力
跨螢幕	固定比例，各裝置各自尷尬	等比縮放，比例永遠一致
傳給別人	傳檔案，要有 Office，會跑版	傳一條網址
版本管理	二進位，看不出改了什麼	git diff 看得見
對方要編輯	原生支援	要匯出，有損

最後一列是唯一輸的，而且輸得很明確。

三個代價，認清楚再上路

01

要可編輯檔時幫不上忙

客戶說「ppt 給我，我要改」，就得走匯出，而匯出是有損的。一開始就要問清楚。

02

大圖會讓單檔變肥

目標 5 MB 以內。超過就把圖片放外部網址，不要全部塞進檔案裡。

03

沒有 Office 協作註解

團隊要在檔案上互相批改，pptx 還是比較順。

判斷規則：自己講、給人看、線上分享 → HTML。對方要接手編輯 → 先問清楚再決定。

PART 02

舞台鎖定

你說的「不同螢幕彈性排版」，真正的實作方式。

內部用固定 px，外層做一次縮放

/* 設計稿尺寸，永遠不變 */
#stage{
  width: 1280px;
  height: 720px;
  transform-origin: center;
}

// 等比縮到視窗內
var s = Math.min(
  innerWidth  / 1280,
  innerHeight / 720) * 0.94;
stage.style.transform = 'scale('+s+')';

內部一律 px 排版，等於在設計稿上工作
外層只做一次 transform: scale()
結果：手機、筆電、4K、投影機比例完全一致
不會有元素換行、圖表被擠扁

這是整套做法最重要的一招，一行 CSS 加三行 JS。

同一份簡報，三種螢幕

藍色方塊代表舞台。比例不變，只有周圍留白變化。手機直向是刻意的例外。

舊版簡報用 min(1100px, 96vw) 自適應寬度，手機上會壓扁。這次升級成舞台鎖定。

操作介面

→ / 空白　下一頁
←　上一頁
O　總覽縮圖，點一下跳頁
N　講者備忘，觀眾看不到

F　全螢幕
P　列印成 PDF，每頁一張
點左右半邊翻頁、手機滑動
網址加 #7 直接開第 7 頁

現在就可以按 O 試試看總覽。

請他當場按 O 和 N，體感比講解有用。

PART 03

視覺可能性

HTML 相對 pptx 真正拉開差距的地方。

免費就有的，寫兩行 CSS

漸層與光暈　封面氛圍，比 pptx 自然
毛玻璃　浮層壓在圖上還看得見底
陰影層次　多層疊出紙張浮起感
文字漸層　標題單字上色（看封面）
深色自動切換　對方手機深色，簡報跟著深

實際效果

漸層底 + 毛玻璃卡

這張卡是半透明的，底下的漸層透出來，邊緣有一圈細亮線。

動態與互動：簡報變 Demo 的分水嶺

動畫

進出場、逐項出現

講到哪出現到哪。數字從 0 滾到 4,239 億，打字機開場。

互動

可以真的點

滑桿改參數即時看差異、切換方案對照、App 原型可以按。

敘事

捲動式故事

一路往下滑，圖表隨捲動變化。時間軸動畫做產品發表級敘事。

客戶自己動手玩過一次，記得住的程度跟看投影片完全不同。

這一頁是說服客戶改用 HTML 的主力論點。

資料視覺化

內嵌 SVG　可動、可標註，放大不糊
Canvas 圖表　資料量大時用
Mermaid　文字描述直接畫流程圖，改流程只改文字
知識圖譜　graphify 的產出直接嵌進來

這是純 SVG，沒有載任何函式庫，放大到 4K 也不糊。

零幻覺鐵律　圖表好看不代表數字對。每個數字先查真實來源，查不到就標查不到。

這條規矩對他特別重要，一定要放進來。

反 AI 味清單

AI 做的簡報有一種一眼可辨的廉價感，來源通常是這幾件事。

別做

滿版紫藍漸層
每張卡片都加 emoji
所有東西置中
字級只有大中小三級

要做

先選明確的設計方向再開工
字級至少五級，級距拉開
留白敢留，一頁一件事
主色一個、輔色一個，其餘灰階

PART 04

傳輸問題解掉了

今晚建好的公開空間與三種發佈方式。

傳一份 .html 給薇姐，回你一條網址

A · 首選

Telegram

把 .html 檔傳給薇姐，她發佈完回公開網址。手機、任何地方都能發。說明文字＝標題。

B

終端機

pubslide 檔案.html
加 --title "標題"。--list 看清單。

C

手動

放進 ~/slides/decks/，跑 publish.py --reindex。

0 元

GitHub Pages 免費、無流量限制

~90 秒

從傳檔到網址可開

1 條

傳給別人只需要一條網址

重點是 A：他人在外面跑行程，手機就能發佈。

三個限制，一定要知道

公開就是公開。任何拿到網址的人都能看，repo 歷史也留著。客戶機密簡報走 Google Drive 權限管控，不要放這裡。
Telegram 傳檔上限 20 MB。內嵌大量圖片會超過，把圖壓小或改用外部網址。
撤下不等於從未存在。網址會失效，但 git 歷史仍有紀錄。真正敏感的東西不要先發了再撤。

要撤下就跟薇姐說「撤下 2026-09-11-xxx」。

匯出成別的格式

要什麼	怎麼做	損耗
PDF	按 Ctrl/Cmd+P，選橫向、無邊界	動畫沒了，版面完整
可編輯 PPTX	huashu-design 的 export_deck_pptx.mjs	複雜版面、動畫會掉
圖片	Playwright 截圖或 PDF 轉圖	無
影片	huashu-design 的 HTML → MP4／GIF 管線	無

要 pptx 就一開始走那條路線，事後補很貴。

傳一份檔案，對方要有對的軟體。傳一條網址，對方只要有眼睛。

— 這次改變真正解決的問題

這句可以當作對外說服客戶的一句話。

下一步

現在就可以用

範本：~/slides/decks/_template.html，複製改標題就開工
知識文件：jacky-wiki/wiki/ailab/patterns/HTML簡報製作法.md
公開空間：gjj22622.github.io/slides/
要做到專業設計水準或加動畫，叫 huashu-design skill

按 P 可以把這份存成 PDF · 按 O 看總覽

簡報改用 HTML為什麼改、怎麼做、怎麼傳