slidehtml 入門

slidehtml 用 231 個固定範本拼出 16:9 的 HTML 簡報，最後輸出一個可以離線開啟的單一檔案 HTML。版式、字型、配色和動效都已經在範本裡定好，寫一份新簡報只需要三步：

1. 選範本
2. 填內容
3. 跑檢查

只要不改範本、不寫自訂 CSS，並且遵守每個範本的內容上限，做出來的效果就和範例簡報一致。這套約束也讓 AI 助手能穩定地寫出合格的簡報。

• 231 個範本：封面、資料圖表、對比、結構圖、時間線、截圖、節奏頁等
• 23 種風格（DeckDef.style）× 5 套配色（DeckDef.theme），任意組合
• 放映功能齊全：逐條展開、總覽、演講者檢視、雷射筆、畫筆、匯出 PDF
• 自動 QA：四種視窗尺寸逐頁檢查溢位、重疊、字號和遠端資源，最後輸出 PASS 或 FAIL

安裝

需要 Node.js 20.19 或更高版本。

npx slidehtml init my-talk      # 在 my-talk/ 產生一個專案
cd my-talk
npm install

5 分鐘做第一份簡報

npx slidehtml new q3-review     # 從起始範本產生 src/decks/q3-review/index.tsx
npx slidehtml dev q3-review     # 開啟開發預覽，改檔案後自動重新整理

開啟 src/decks/q3-review/index.tsx，每一頁就是一個範本，內容都透過 props 傳入：

import type { DeckDef } from '../../kit'
import { Cover, StatRow, Closing } from '../../kit'

export const deck: DeckDef = {
  title: 'Q3 Review',
  theme: 'cobalt',        // 配色
  style: 'standard',      // 風格
  slides: [
    { id: 'cover', label: '封面', render: () => <Cover kicker="季度回顧" title="平臺組 Q3" … /> },
    { id: 'numbers', label: '規模', build: 'reveal', render: () => <StatRow … source="出處" /> },
    { id: 'end', label: '結論', render: () => <Closing statement="……" … /> },
  ],
}

改完之後：

npx slidehtml check q3-review   # 型別檢查 + 建置 + 自動 QA，最後一行必須是 PASS
npx slidehtml build q3-review   # 產生 dist/q3-review.html，單一檔案，可以直接發給別人

check 輸出 FAIL 時按 guide.md 第 8 節 修復。每頁截圖在 qa/slide-NN-1920x1080.png，逐頁看過才算完成。

開發預覽裡開啟 #/kit 可以瀏覽全部範本、風格樣張和圖示。

配合 AI 助手使用

專案根目錄的 AGENTS.md（Claude Code 讀 CLAUDE.md）告訴 AI 助手這裡的規則。skills/slidehtml/ 是一份寫簡報的 skill：怎麼寫故事線、怎麼按內容形狀挑範本、怎麼把文字壓進上限、怎麼跑檢查。中文版是 SKILL.md，參考表在 skills/slidehtml/references/。

常見做法：把資料交給 AI 助手，說「用 slidehtml 做一份 10 頁的季度簡報」，它會建立 deck、填內容、執行 npx slidehtml check 直到 PASS。

文件導航

其他語言：English · Deutsch · 简体中文