TL;DR
- open-slide 是台灣開發者 Yiwei Ho（@1weiho）做的開源簡報框架，定位是「給 AI coding agent 用的」：你在對話框講想要什麼，Claude Code（或 Codex / Cursor）幫你寫成 React 投影片。
- 上線沒多久，GitHub star 已從 4 千一路衝破 4.6k，repo 卡片現在直接顯示 5k Stars，MIT 授權。
- 它跟 Slidev、reveal.js 最大的差別：每頁不是 markdown 也不是受限 DSL，而是任意 React component，跑在固定 1920×1080 canvas 上。
- 安裝就一行npx @open-slide/cli init，scaffold 出來就附三個給 Claude Code 的 skill：/create-slide、/slide-authoring、/apply-comments。
- 我自己最有感的點：寫程式跟做投影片終於不用切換工具，整個流程留在 agent 裡。
📌 目錄
- open-slide 是什麼？一句話定位
- 我為什麼盯上這個工具
- ⚡ 核心設計：1920×1080 canvas + 任意 React
- 🎨 三個 agent skill 怎麼配合
- ⭐ open-slide vs Slidev vs reveal.js
- 📝 安裝與第一份 deck
- 🧠 inspector：點一下、留個 comment，agent 幫你改
- 踩坑與該注意的地方
- ❓ 常見問題 FAQ
- 🔗 延伸資源
open-slide 是什麼？一句話定位
open-slide 是一個 React-first 的簡報框架，官方 tagline 寫得很直接：「The slide framework built for agents. Describe your deck in natural language — your coding agent writes the React.」翻成白話就是：你用自然語言描述要做什麼簡報，coding agent 幫你把每一頁寫成 React，open-slide 負責 canvas、縮放、導航、hot reload、演講模式這些雜事。
它的作者是台灣全端開發者 Yiwei Ho（何宜韋，GitHub / X / Threads 都是 @1weiho）。專案 2026 年才公開，star 數從 4 千一路往上，我去 repo 抓 social preview 的時候卡片已經顯示 5k Stars（README 上的精確數字是 4.6k，這幾天還在漲）。授權是 MIT，可以安心拿去用。
技術組成也很單純：TypeScript 佔 95.5%，底層是 React + Vite，monorepo 用 pnpm + Turbo 管。換句話說，它不是另一套你得重新學的簡報 DSL，而是「把你已經會的 React 拿來當投影片引擎」。
我為什麼盯上這個工具
我教 AI 課、也用 Claude Code 在開專案，做投影片是每週都會碰的事。我自己的流程一直有個斷點：用 Claude Code 寫程式、debug、改 config 都很順，一旦要產投影片，就得跳出去開 Gamma、PowerPoint，或寫 Slidev 的 markdown。 工具一換，agent 累積的上下文就斷了——它知道我這個專案在幹嘛，卻沒辦法直接幫我把成果做成一頁一頁的 deck。
open-slide 補的就是這一段。它把「做簡報」這件事拉回對話框：agent 本來就在寫 React，現在投影片也是 React，於是「幫我把這個專案做成 8 頁的介紹 deck」變成 agent 能一口氣接住的任務。對我這種「同一份內容要先寫成 code、再講成課」的人，少一次工具切換就是少一次心流斷裂。
這不是「酷炫的玩具」，而是把一個真實流程的接縫補起來。下面拆它怎麼做到。
⚡ 核心設計：1920×1080 canvas + 任意 React
open-slide 的設計哲學就兩條，但這兩條決定了它跟其他簡報工具的根本差異。
固定 1920×1080 canvas
官方說明：「Every slide renders into a fixed 1920 × 1080 canvas.」每一頁都在一個固定 1920×1080 的畫布上排版，框架負責把這個畫布等比縮放到你的螢幕。這對 agent 來說是關鍵——它不用煩惱 RWD、不用算各種螢幕尺寸，只要在一個確定的座標系裡擺東西，所見即所得。你開全螢幕播放時，open-slide 自動把 canvas scale 到剛好填滿。
每頁是任意 React component，不是 DSL
第二條：「Pages are arbitrary React components, not a constrained DSL.」這是它跟 Slidev / Marp 的分水嶺。Slidev 用 markdown + Vue 擴充語法，reveal.js 用 HTML section，都有各自的「投影片語言」要學。open-slide 沒有——一頁就是一個 .tsx，你想放什麼 React 元件就放什麼，動畫、互動圖表、自訂 layout 全部用你已經會的 React 寫法。slides 檔案放在 deck 的 slides 目錄下，跟著 repo 一起版控。
這個迴圈就是 open-slide 的全部精髓：你講、agent 寫、瀏覽器即時長出來、你點一下留意見、agent 再改。 沒有「打開設計軟體拖拉」這一步。
🎨 三個 agent skill 怎麼配合
scaffold 出來的專案會內建三個給 Claude Code 的 skill（同一批檔案 Codex / Cursor / Gemini CLI / OpenCode / Windsurf / Zed 也能讀）。這三個是整個工作流的骨架：
| Skill | 做什麼 | 什麼時候用 |
|---|---|---|
/create-slide | 問 4 個 scoping 問題（主題、美學偏好、頁數、文字密度、要不要動畫），選一個 deck ID，規劃結構，把每頁寫出來 | 從零生一份 deck |
/slide-authoring | 技術參考：1920×1080 canvas、type scale、配色、layout 規則。agent 動筆前先讀它，確保風格一致 | agent 內部查規範用 |
/apply-comments | 處理 @slide-comment 標記（你在瀏覽器 inspector 留的註解），套用所有待辦修改後清掉標記 | 改稿迴圈 |
/create-slide 那 4 個 scoping 問題設計得很實用——它不會一上來就亂生，而是先問清楚「你要幾頁、文字多不多、要不要 motion」，這正是新手最容易漏掉的簡報前置決策。/slide-authoring 則是把「好看的投影片該遵守什麼排版規則」externalize 成一份 agent 隨時可查的文件，避免每頁風格各自為政。
⭐ open-slide vs Slidev vs reveal.js
我把三個常被拿來比的 React/前端系簡報工具列成表。注意 open-slide 沒有在官方 README 裡直接點名比較，下面是我根據各專案文件整理的對照，幫你判斷選哪個。
| 維度 | open-slide | Slidev | reveal.js |
|---|---|---|---|
| 每頁寫法 | 任意 React .tsx | Markdown + Vue | HTML section |
| 為 AI agent 設計 | ✓（核心定位） | △（可手寫餵 agent） | ✗ |
| 內建 agent skill | ✓ /create-slide 等 | ✗ | ✗ |
| 視覺 inspector 改稿 | ✓ 點元素留 comment | ✗ | ✗ |
| 固定 canvas | ✓ 1920×1080 | △ 自適應 | △ 自適應 |
| 演講者模式 | ✓ | ✓ | ✓ |
| Export HTML / PDF | ✓ | ✓ | ✓ |
| 學習曲線 | 會 React 就上手 | 要學 Slidev 語法 | 要寫 HTML/CSS |
📝 安裝與第一份 deck
open-slide 安裝很乾淨，沒有一堆前置。
前置依賴
| 依賴 | 最低需求 | 驗證指令 |
|---|---|---|
| Node.js | 建議 20+（Vite 7 系需求） | node -v |
| pnpm | 官方範例用 pnpm | pnpm -v |
| coding agent | Claude Code / Codex / Cursor 任一 | — |
官方 README 沒有明寫 Node 最低版本；上表的 Node 20+ 是我依它用 Vite 的常見需求推的，正式跑之前以你機器上node -v跟 repo 的package.jsonengines欄位為準，不要照抄。
一鍵 scaffold + 啟動
把下面三行貼給 Claude Code（或直接在 terminal 跑），一次到位：
npx @open-slide/cli init my-slide
cd my-slide
pnpm dev跑完 pnpm dev，open-slide 會起一個本地 dev server，瀏覽器打開就看得到第一份 deck 的即時預覽，改 .tsx 會 hot reload。
驗證有沒有成功
成功的判斷標準不是「terminal 沒紅字」，而是 round-trip 看得到畫面：
pnpm dev 後 terminal 印出 local URL（Vite 的 Local: http://localhost:5173/ 之類）。.tsx 的文字，存檔，瀏覽器立刻變——這才算真的跑起來。接著就能對 Claude Code 下 /create-slide，給它主題，讓它幫你生整份。export 成 static HTML 或 print-ready PDF 官方說是「one command」搞定，具體的 export 指令旗標我沒在公開文件頁找到明列，請以 scaffold 出來的 repo 內 package.json scripts 或 README 為準，不要照我憑空編的指令跑。
🧠 inspector：點一下、留個 comment，agent 幫你改
這是 open-slide 我覺得最聰明的一塊，也是它「為 agent 設計」最具體的體現。
dev server 跑起來後，你可以直接點投影片上的任何元素，附一句話的 comment，像「make this red」「這段字改小一點」。這些 comment 不會憑空消失——它們會以 @slide-comment 標記的形式寫進原始碼。等你累積一批改動，對 agent 下 /apply-comments，它就把所有待辦一次套用、改完清掉標記。
為什麼這個設計重要？因為它解決了「人看得到問題、但講不清座標」的老痛點。你不用跟 agent 描述「左上角第三個圖示往右兩個字距」，你就點它，agent 從標記知道你指的是哪個 node。視覺意圖跟程式碼之間，open-slide 用 inspector + @slide-comment 搭了一座橋。
踩坑與該注意的地方
我整理幾個上手前值得先知道的點，避免你踩。
⚠️ 它預設綁 pnpm，不是 npm
官方範例 scaffold 完是 pnpm dev。如果你機器上只有 npm，先 npm i -g pnpm 裝起來，不然 pnpm: command not found。這是 monorepo 專案常見的設定，別硬用 npm 去跑它的 workspace。
⚠️ export 指令官方頁沒明列，別照網路文章亂抄
我查 README、官網 open-slide.dev、AGENTS.md 三個來源，都只寫「one command export to HTML & PDF」，沒給確切指令字串。網路上若有人寫得斬釘截鐵（例如某個 pnpm export --pdf），請先回 repo 的 package.json scripts 對一下再跑，不要把別人（包含我）沒驗證過的指令當真。這是工具還新、文件還在補的正常狀態。
⚠️ 「任意 React」是雙面刃
每頁是任意 component 自由度極高，但也代表沒有人幫你守排版下限。這就是 /slide-authoring 存在的理由——它把 type scale、配色、layout 規則寫成 agent 必讀的參考，等於幫你補上「設計護欄」。如果你跳過它、放任 agent 自由發揮，很容易每頁字級、間距都不一致。要讓成品看起來像一份 deck 而不是 8 個獨立網頁，記得讓 agent 先吃 /slide-authoring。
⚠️ 它是 dev-time 工具，不是線上協作平台
open-slide 的迴圈跑在你本機的 dev server 上，slides 跟著 repo 版控。它不是 Google Slides 那種多人即時協作。團隊協作走的是 git（PR、review），不是雲端同編。這個取向對工程團隊很自然，但如果你期待的是「丟連結給同事即時一起拉」，那不是它的場景。
❓ 常見問題 FAQ
Q：open-slide 一定要用 Claude Code 嗎？沒有 agent 能用嗎？
A：不一定要 Claude Code。官方說同一批 skill 檔案 Codex、Cursor、Gemini CLI、OpenCode、Windsurf、Zed 都能讀。你甚至可以完全手寫 .tsx——因為每頁本來就是普通 React，agent 只是讓「用講的生出投影片」變可能，不是必要條件。
Q：它跟 Claude 自己的簡報功能（Claude Design / Artifacts）差在哪？
A：Claude 內建的簡報生成是封閉的、跑在 Anthropic 服務裡，遇到複雜需求容易撞限制。open-slide 是開源、跑在你本機、產物是版控的 React 原始碼，你對每一頁有完全控制權，也能接任何 agent。要客製化、要進 git、要離線，open-slide 自由度高得多。
Q：做出來的投影片怎麼分享給沒裝環境的人看？
A：open-slide 支援把整份 deck export 成 self-contained 的 static HTML 或 print-ready PDF。HTML 版是單檔靜態站，丟到任何靜態 host（GitHub Pages、Vercel）就能給人看，對方不用裝任何東西。
Q：我完全不會 React，用得動嗎？
A：能跑，但會卡。因為 agent 幫你寫，基本生成你不碰 code 也行；可是一旦要微調、debug 某頁壞掉，看得懂 React 會差很多。建議至少懂 JSX 跟 component 概念再上手，不然遇到問題只能一直丟回給 agent 賭它修對。
Q：1920×1080 固定 canvas，那在手機或不同比例螢幕會怎樣？
A：框架會把整個 1920×1080 畫布等比縮放塞進你的視窗，所以比例維持 16:9、內容不變形，只是整體變小或變大。它不是 RWD 重排，是「固定畫布 + 縮放」，這也是它能保證 agent 所見即所得的原因。
🔗 延伸資源
- open-slide GitHub repo（1weiho/open-slide） — 原始碼、README、issues，一切的 source of truth。
- open-slide 官網 open-slide.dev — 介紹頁與 quickstart。
- 作者 Yiwei Ho 的 X 介紹貼 — 第一手 demo。
- 用 Claude Code 從零做一個遊戲：實戰紀錄 — 同樣是「讓 agent 接住整個流程」的實作，可對照看 agent-first 工作流。
- Claude Code Teams owner 管理指南 — 如果你打算讓團隊一起用 agent 工作流，後台這幾項值得先設。