📱 你正在看「手機長版」模式 — 點右上 toggle 可切回投影片
第一章：你有沒有遇過這件事

別再用
PPTX・Canva
做簡報了

AI 時代最聰明的工作者
都已經換成 HTML 了

省時 省錢 行銷好 互動好
— 而 Prompt 的品質，決定 HTML 的質感
PowerPoint
PPTX ✗
Canva
Canva ✗
HTML5
HTML ✓
往下滑繼續看 ↓
01 / 17
你 → AI
幫我做一份漂亮的 PPT，主題是「2024 行銷年度報告」，要有圖表、動畫、過場效果，設計要精緻…
AI
正在生成 PowerPoint 檔案...
AI
抱歉，發生了一個錯誤。
請重新嘗試。
第一章

你有沒有
遇過這種
情況？

叫 AI 做 PPT，它做到一半
就當掉了，或者做出來
醜得不忍直視。

這不是你的 Prompt 問題，是格式選錯了。

02 / 17
第一章

為什麼 AI 做 PPT，
常常做到一半
就壞掉？

因為 PPT 要求 AI 同時做兩件事：
想內容，又要排版。
這就像叫廚師一邊煮菜，
一邊裝潢餐廳。

AI 雙工失敗
叫 AI 做 PPT
想內容 +排版對齊 +生成 XML +處理格式
→ AI 過載，當機或做爛
叫 AI 做 HTML
只要想內容 →寫 code
→ 簡單，AI 最擅長的事

HTML 是純文字，AI 寫起來就像寫作文一樣自然。

03 / 17
第二章前傳：先懂 token

先搞懂一件事：
Token 是什麼？

Token ≈ AI 的「腦力格子」
用越多格子 → 越慢、越貴

AI 的
腦力格子

PPTX 是給「機器讀」設計的格式，
HTML 是給「人讀」設計的格式。

同一張投影片，AI 寫出的 code 長這樣：
PPTX (XML) ~4,000 tokens
<p:sld xmlns:p="..." xmlns:r="...">
  <p:cSld>
    <p:spTree>
      <p:nvGrpSpPr>...</p:nvGrpSpPr>
      <p:grpSpPr>
        <a:xfrm>
          <a:off x="0" y="0"/>
          <a:ext cx="9144000" cy="6858000"/>
          <a:chOff x="0" y="0"/>
          <a:chExt cx="9144000" cy="6858000"/>
        </a:xfrm>
      </p:grpSpPr>
      <p:sp>
        <p:nvSpPr>
          <p:cNvPr id="2" name="Title 1"/>
…還有上千行類似的標籤要寫
HTML ~600 tokens
<div class="slide">
  <h1>主題</h1>
  <p>內容</p>
</div>
就這幾行。AI 一秒寫完，省 85% token
04 / 17
第二章 · 差距 1：省時

省時

同樣的任務，HTML 快很多倍，
而且幾乎不會失敗

PPT
30–90 秒
VS
HTML
5–15 秒
請 AI 做 PPT
等待時間
30–90 秒，還常 timeout
失敗率
很高，做到一半常壞掉
Token 消耗
大量（貴）
請 AI 做 HTML
等待時間
5–15 秒，快又穩
失敗率
幾乎是零
Token 消耗
少量（省）
05 / 17
第二章 · 差距 2：省錢

省錢

Token 少，費用就少。
長期累積下來，差距超乎你想像。

省下 85% 費用
PPT 生成
~4,000
Tokens / 份
而且常常要重試多次
VS
HTML 生成
~600
Tokens / 份
一次成功，不需重試

同樣一份簡報，HTML 省下約 85% 的 Token 費用

06 / 17
第二章 · 差距 3：行銷

行銷好

還沒被點開，行銷就已經開始了

傳 .pptx 檔案
PowerPoint file
年度行銷報告.pptx
4.2 MB · 點擊下載
✗ 沒有預覽
✗ 要先下載才能看
✗ 手機打開很麻煩
✗ 看到檔名就不想點
傳 HTML 連結（Threads 長這樣）
AI
ai4taiwan
3 分鐘前 · threads.net
AI 時代不要再用 PPTX、Canva 了 👇
別再用 PPT・Canva 了
AI4TAIWAN.ORG.TW
AI 時代最強簡報格式
♡ 142↻ 38↗ 27
✓ 自帶縮圖＋標題
✓ 一鍵直接開啟
✓ 看到就想點開
07 / 17
第二章 · 差距 4：互動

互動好

PPT 的動畫是假的，
HTML 的互動是真的

即時資料圖表
Chart.js / D3.js 連動更新
互動投票問卷
即時參與，看見即時統計
16:9 Toggle 模式
手機長版 ⇄ 投影片，一份兩用
零安裝分享
瀏覽器直接開，不用下載
Live · 真的可以點
↑ 這頁是活的
看到這裡，你會想試 HTML 嗎？
點下方任一選項，票數即時加進去 ↓
⚡ 重點是這個
剛才那個按鈕、即時加總、進度條 — PPT 永遠做不到。
這就是「真互動」。
08 / 17
第三章：一張表看懂全部

PPT vs HTML · 完整對決

本場結果
PPT 0 ： 7 HTML
⚔ 比較項目
PowerPoint
挑戰者
PPT
敗
本場王者
HTML
勝
AI 生成速度
✗慢、常 timeout
✓快、幾乎不失敗勝
Token 消耗
✗~4,000 tokens
✓~600 tokens（省 85%）勝
手機閱讀
✗需要 App，很麻煩
✓瀏覽器直接開勝
社群分享預覽
✗冷冰冰的檔名
✓自帶縮圖＋標題勝
互動功能
✗只有假動畫
✓真互動、圖表、投票勝
版本管理
✗傳來傳去版本亂
✓改連結即時更新勝
製作成本
✗高（時間＋費用）
✓全面勝出 ✦勝
09 / 17

第三章 · 彩蛋

對了，你
現在看的
這個⋯⋯

就是用 HTML 做的

不需要 PowerPoint、不需要 Canva、不需要 Keynote
一個 .html 檔案，就是你手上的這份簡報

別再用 PPT和Canva 做簡報了.html

💡

連你剛才在 Threads 看到的縮圖預覽，
也是這頁自己（呼應第 7 頁 OG Tag）

10 / 17
第三章

一份內容，
兩種形式

同一個 HTML 檔案
手機看：上下滑動長版
簡報用：16:9 投影片模式

一份做好，兩種場合都搞定。
PPT 做不到這件事。

📱 滑動模式
🖥️ 16:9 投影片
11 / 17
第四章：怎麼做到

大多數人犯的錯

這樣說不夠
「幫我做一個 HTML 簡報，
主題是…」
✗沒說用什麼 CSS 框架
✗沒要求 16:9 切換功能
✗沒加社群分享優化
✗結果：普通、無聊、沒特色
正確的做法
用四層架構，
逐步指定細節
第一層：結構（Markdown 大綱）
第二層：樣式（Tailwind CSS）
第三層：功能（16:9 Toggle）
第四層：社群（OG Tag）
12 / 17
第四章

正確的
四層 Prompt
架構

像金字塔一樣，
先把地基打穩，
再一層層往上蓋。

層層疊加
由 1 → 4 依序處理
4
社群優化 — OG Tag
分享自帶縮圖預覽
3
功能注入 — 16:9 Toggle
手機 ⇄ 投影片切換
2
樣式指定 — Tailwind CSS
代碼最簡潔、Token 最省
1
結構先行 — Markdown 大綱
先把內容架構確認，再交給 AI 生成
地  基
13 / 17
第四章

可以直接用的
Prompt 範例

prompt.txt
請幫我製作一份 HTML 簡報，步驟如下：

【第一步】 先列出 Markdown 大綱
主題：＿＿＿，共 X 頁

【第二步】 用 Tailwind CSS 製作 HTML
設計要乾淨、現代、行動裝置優化

【第三步】 加入 16:9 切換功能
讓簡報可在投影片與滾動模式之間切換

【第四步】 加入 OG Meta Tag
og:title、og:description、og:image▍
複製這個框架，填入你的主題，就可以開始了。
14 / 17
第四章

你今天就可以試的
第一步

打開 Claude 或 ChatGPT
任何一個 AI 都可以
貼上上一頁的 Prompt
填入你的主題
存成 .html 分享連結
貼到 Threads 試試看

整個流程，15 分鐘內就能完成

15 / 17

第五章 · 總結

"

Prompt 的品質，
決定了你
HTML 的質感

格式選對了，剩下的就交給 AI

16 / 17

讓每個台灣人都能用上 AI

AI for Taiwan 是非營利的 AI 教育與共學社群，
我們相信 AI 不該只屬於少數人。

AI 教育 共學社群 免費資源

ai4taiwan.org.tw

認同我們的理念？

追蹤 IG 跟 Threads 支持我們吧！
讓更多台灣人接觸到好用的 AI 應用 ✨

順手分享：
© AI FOR TAIWAN · MADE WITH HTML, NOT PPT
17 / 17

icon icon icon