！ 本篇文章將會介紹 open-slide，一個為 agent 而生的簡報框架——每一頁都是 code，本系列的簡報就是用它做的 :D

TL;DR: https://dev.benben.me/slides/s/ironman-24-open-slide

本篇目標

讀完這篇你會學到：

• open-slide 的核心概念（React-first、1920×1080 canvas、每頁都是 code）
• 從 init 到 agent 產出簡報的完整流程
• 視覺編輯與評論系統的協作方式

簡報 + AI 的老問題

叫 AI 做 PPT，你大概體驗過兩種悲劇：

1. 生成一堆大綱文字，排版還是自己來
2. 生成一個檔，但沒辦法版本控管、沒辦法精準微調

open-slide（GitHub: 1weiho/open-slide，MIT 開源）換了個思路：與其讓 AI 操作簡報軟體，不如讓簡報本身變成 AI 最擅長的東西——code。

核心概念

每頁都是任意 code

• React-first：每頁就是一個 React component
• 畫布固定 1920×1080——沒有排版引擎要對抗，像素級自由
• 「No layout to fight. Design anything you can imagine.」

一頁長這樣：

// slides/hello/index.tsx
import type {Page} from '@open-slide/core'

const Cover: Page = () => (
  <div style={{background: '#08090a', color: '#f7f8f8'}}>
    <h1 style={{fontSize: 188}}>
      Hello, <em style={{color: '#de3b3d'}}>deck</em>.
    </h1>
    <p>A React slide, rendered live.</p>
  </div>
)

export default [Cover] satisfies Page[]

會 React 就會做簡報；不會 React——你的 agent 會。

簡報 = code = 無限好處

一個 deck 就是一個專案資料夾：git 版本控管、code review、多人協作、diff 看出這週改了哪幾頁。截圖時代結束。

上手流程

1. init

npx @open-slide/cli init my-deck

2. 叫 agent 出稿

open-slide 提供了 agent skill（/create-slide），支援 Claude Code、Codex、Cursor、Gemini CLI、OpenCode、Windsurf、Zed——任何會寫 React 的 agent 都能駕駛：

/create-slide a Q2 product launch

agent 直接把每頁寫成 React component。你用 prompt 引導：「第三頁太擠，拆兩頁」「整體色調改冷色系」。

3. 視覺微調：點了就改

覺得 agent 排得差一口氣？開 inspect 模式直接點畫面上的元素：改文字、字體、粗細、顏色、換圖——像在 Canva 一樣點選，改完按 Save，一次批次寫回 code。

4. 評論系統：反向指揮 agent

更帥的是評論流：點任何區塊留 comment，系統會在你的 source 裡釘一個 @slide-comment 標記，然後：

/apply-comments

agent 精準讀取你標記的位置與意見，改完自動清掉標記。「這個標題用強調色」這種回饋不用再描述位置——點哪、說什麼、就改哪。

5. 素材與 logo

素材窗格直接拖圖上傳；內建搜尋 svgl（1500+ 品牌logo），點一下 SVG 就落地到 assets 資料夾，import 即用。

本系列的實戰記錄

這個系列每篇文章都配一份簡報內容大綱（slides/ 目錄那些）——而正式簡報的產出，作者就是用 open-slide 產的。實際工作流：

1. 寫完文章（用 opencode）
2. 把 slides/NN-xxx.md 大綱餵給 agent
3. /create-slide 生成整份 deck
4. 開 demo 預覽、點元素微調、或丟 comment 給 agent 批次套用
5. deck 進 git，隔天要改就是改 code

從大綱到簡報的時間，大概是手做的五分之一，而且改起來不心痛——反正有版本控管。

用五維框架打分數

• 開源：MIT，滿分
• 模型自由：agent 無關（bring your own agent），滿分
• 擴充性：就是 React，天花板是你的前端功力
• 自動化：CLI + skill，進 pipeline 沒問題
• 心智負擔：要會一點 React；但「讓 agent 寫」的模式下，門檻轉移成「會下 prompt」

常見問題

Q：跟 Slidev / Reveal.js 差在哪？
A：它們是「給人寫的簡報框架」（markdown 或 HTML 為主）；open-slide 是為 agent 設計——任意 code 的頁面讓 agent 發揮、inspect/comment 是人機協作介面。當然，人直接寫也完全可以。

by the way, 筆者之前是 Slidev 的愛用者！

Q：一定要會 React 嗎？
A：走 agent 流程的話，不太需要——你出主意，agent 出 code。但懂一點 React 對「精準下指令」幫助很大。

Q：能輸出成 PDF / 影片嗎？
A：以 code 為本體的 deck，輸出端看專案現況提供的功能，細節以官方文件為準。就算只截圖，1920×1080 固定畫布也保證不歪。

小結

• open-slide：React-first 簡報框架，每頁是 1920×1080 canvas 上的任意 code
• 流程：init → /create-slide 出稿 → inspect 點改 → comment 讓 agent 批次套用
• 簡報進 git，版本控管與協作免費送
• agent 無關，opencode 也能當你的簡報設計師

明日預告

Day 25：Matt Pocock skills（上）——Skills for Real Engineers，把工程紀律打包成技能的完整生態系。

有任何疑問但沒有 iT 邦幫忙帳號，或是想匿名提問？
歡迎到 https://dev.benben.me/q/P3C5U6 提問或加油打氣，沒意外的話會在完賽之後一起回答 :D