open-slide 是什麼？讓 AI agent 用 React 寫簡報，再由框架處理播放與匯出

open-slide 的定位：讓 agent 寫投影片，讓 runtime 處理投影片

open-slide 是一款專為 coding agent 設計、以 React 為核心的簡報框架。它的運作邏輯相當直覺：使用者以自然語言描述簡報需求，agent 負責生成 slides/<id>/index.tsx 檔案；後續的畫布縮放、投影片導覽、熱更新（HMR）、簡報播放模式以及檔案匯出等工作，則由 open-slide runtime 處理。

這樣的定位與傳統簡報工具有很大落差。open-slide 定位為簡報執行環境（runtime），負責提供穩定的機制供 agent 進行寫入、預覽、修改與交付。它本身不包含 AI 模型，亦不內建 LLM 對話式 agent。因為投影片本質上依然是 React 元件，除了手動修改程式碼，也可以搭配 Claude Code、Codex 或 Cursor 等具備程式碼編輯能力的 coding agent 來自動化調整。

在 open-slide 中，每頁投影片都以 1920 × 1080 的固定畫布呈現。你可以自由編寫任何 React 結構，不需受限於語法死板的簡報專用 DSL。這代表你的簡報將轉化為一組能納入版本控制（git version control）的前端專案，不再是只能在封閉式軟體 GUI 介面中拖拉的黑盒子。

本文依照目前官方 repository main 分支的 3054b184a5ea8fc7858c56962817825d5ca138e2 commit 進行查核，相關套件版本對應為 @open-slide/core 1.17.1 與 @open-slide/cli 1.4.1。文中提及的指令與功能均取材自官方 README、文件、套件設定與原始碼，版本與功能邊界以這個查核時間點為準。

先看重點

• 輸入契約：以 slides/<id>/index.tsx 等模組為主，預設匯出（default export）一組 React Page 元件陣列。
• 投影片畫布：尺寸固定為 1920 × 1080，運行時會根據瀏覽器視窗自動進行等比例縮放。
• 起手步驟：透過 npx @open-slide/cli init my-slide 初始化專案，接著執行 pnpm install 與 pnpm dev 啟動開發伺服器。
• Agent 工作流：內建提供 create-slide、slide-authoring、apply-comments、current-slide 與 create-theme 等技能（skills）引導。
• 開發體驗：支援 Vite 熱更新（HMR）、縮圖邊欄（thumbnail rail）、鍵盤導覽、瀏覽器內置檢查器（inspector）、講者備註、簡報者模式與資源管理器。
• 匯出格式：官方文件已明確支援 static HTML 與 PDF；此外，專案原始碼中亦包含將投影片轉換為圖片並打包的 PPTX 匯出工具。
• 部署方式：執行 open-slide build 可輸出靜態網頁，方便部署至 Vercel、Cloudflare Pages、Zeabur 或 Netlify 等靜態空間。
• 開源授權：採用 MIT 授權條款。
• 重要限制：該框架的主要作用是將 agent 產生的 React 轉化為可播放的簡報，並不保證簡報內容的品質或排版完全正確，且官方並未提供最低硬體規格與效能測試數據。

它解決的是哪一段問題？

在使用 AI agent 生成簡報的過程中，真正棘手的部分通常落在後續一連串繁雜的前端實作細節，而非單純寫出一段標題：如何維持畫布比例、各分頁的導覽切換、即時預覽、熱更新、全螢幕簡報模式、講者備註、圖片與字型的載入管理，以及最後該以何種格式交付。

open-slide 的出現正是為了解決這類共用的基礎建設問題。它讓 agent 能專注於調整內容、版面與 React 元件，而框架本身則打理好以下的工作劃分：

由此可見，open-slide 的核心價值在於將簡報生產轉化為可重複迭代的程式碼工作流：生成程式碼 → 畫面預覽 → 標註修改需求 → 自動回寫原始碼 → 重新驗收。這種設計將原本一鍵生成完美簡報的理想，落實為更具控制力的開發循環。

從安裝到第一份 deck

1. 使用 CLI 建立工作區

根據官方文件說明的起手步驟：

npx @open-slide/cli init my-slide
cd my-slide
pnpm install
pnpm dev

@open-slide/cli 主要作為工作區初始化工具，會為你建立一個隨開即用的開發專案，目錄結構包含：

• slides/getting-started/：初始投影片範例。
• package.json：宣告依賴套件 @open-slide/core。
• open-slide.config.ts：可選用的強型別設定檔。
• .claude/skills/ 與 .agents/skills/：提供給 agent 的撰寫技能（skills）定義。
• CLAUDE.md / AGENTS.md：引導 agent 的開發指南文件。
• assets/、themes/ 資料夾及其他相關設定檔。

在初始化專案時，CLI 也提供了幾項可調整工作流程的參數：

open-slide init [dir]
open-slide init --force
open-slide init --name <name>
open-slide init --no-install
open-slide init --no-git

套件管理工具支援 npm、pnpm、Yarn 或 Bun。當指定的目標路徑非空資料夾時，初始化程序預設會中止以防止檔案遭到覆蓋，必須明確加上 --force 參數才會強制執行。這項保護措施讓你能在現有專案目錄旁安全地進行測試，不必擔心意外遺失既有資料。

2. 撰寫投影片模組

每組投影片的進入點為：

slides/<kebab-case-id>/index.tsx

最基本的投影片頁面結構如下：

import type { Page, SlideMeta } from '@open-slide/core';

const Cover: Page = () => (
  <div
    style={{
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: '#08090a',
      color: '#f7f8f8',
    }}
  >
    <h1 style={{ fontSize: 140 }}>Hello, open-slide</h1>
  </div>
);

export const meta: SlideMeta = { title: 'Hello, open-slide' };
export default [Cover] satisfies Page[];

開發時需遵循兩個核心規則：檔案的預設匯出（default export）必須是 Page 陣列，且每個頁面元件都應填滿 1920 × 1080 的父容器。你可以在同一個檔案中定義多個元件，陣列中的先後順序即代表投影片的播放順序。

透過 SlideMeta，你可以定義投影片標題、套用主題與建立時間；若需要引入可動態調整的樣式變數，也可以匯出 DesignSystem。官方 core API 還提供了 MorphElement、Steps、Step、頁碼 Hook 及轉場類型（transition types），方便實作跨頁面共享元素動畫、內容漸進式呈現以及細緻的頁面狀態切換。

3. 讓 Agent 接手簡報撰寫

初始化專案時所產生的 skills，是 open-slide 與 coding agent 協作的核心橋樑。其中最常被調用的指令是 /create-slide：

1. 釐清簡報主題與受眾定位。
2. 確立美術設計風格。
3. 估算投影片頁數範圍。
4. 設定每頁投影片的文字密度。
5. 選擇動畫動態的複雜度（例如：無動畫、微動畫或豐富轉場特效）。
6. 規劃投影片結構角色（如封面頁、內容頁、對比頁、引言頁與結尾頁等）。
7. 將產出的程式碼寫入 slides/<id>/index.tsx。

相較於直接對 agent 下達籠統的「幫我做份簡報」，這種編排模式更具預測性，因為它在撰寫程式碼前，就先對可能影響整體排版風格的關鍵要素進行了決策收斂。若工作區內已配置了 theme 的 markdown 檔，create-slide 會優先讀取其中的調色盤（palette）、字型樣式、版面配置以及共用元件，確保新生成的簡報與整體風格保持一致。

此外，agent 輸出的內容是通俗易懂的 React 程式碼，避開了格式封閉的 JSON 設定檔。你可以將程式碼直接納入 Git 版本控制，藉由 diff 清楚比對每一頁的修改細節，更能在 agent 搭建好骨架後隨時接手微調。

最有用的迭代迴圈：畫布上的 inspector 加上 source marker

open-slide 最獨特的功能之一，莫過於其視覺化的檢查器（inspector）。在開發伺服器啟動後，你可以在畫布上直接點選元件，調整文字、字型大小、字重、顏色或更換圖片。這些變更一開始會暫存在記憶體中，直到點擊「Save」才會整批回寫至原始碼。

另一種修改途徑是透過程式碼註解（comment marker）來標記：

<div>
  {/* @slide-comment id="c-1234abcd" ts="2026-08-10T05:31:19Z" text="..." */}
  <h1>Q2 Launch</h1>
</div>

此處的 text 內容在實際運作時會是 base64url 編碼的 JSON，上方程式碼僅為概念示意，不需使用者手動編寫。在正常的使用流程下，只要在瀏覽器檢查器中輸入「將標題改為紅色」或「縮小此行文字」，工具便會自動將對應的 comment 插入對應的 JSX 位置。

接著，只要交由 agent 執行 /apply-comments 指令：

1. 掃描專案內所有 slides/*/index.tsx 中的 @slide-comment 標記。
2. 解碼註解內容，定位該標記所關聯的 JSX 包覆元素（enclosing element）。
3. 由後往前依行號套用變更。
4. 移除已處理完成的標記。
5. 重新讀取檔案，確認沒有留下未處理的 marker。

這建立起非常流暢的開發循環：檢視畫面 → 點選元素標註意見 → agent 讀取並修改原始檔 → 重新整理確認效果。相較於每次都要費心描述「第三頁右上角那個藍色區塊」，此模式在微調產品投影片或技術分享報告時，顯得更為精準且踏實。

Assets、theme 與 presenter mode

資源管理器（Assets Manager）

每組簡報都可以將專屬的圖片、影片及字型存放在該簡報目錄下的 slides/<id>/assets/ 中；至於跨簡報通用的 logo 或個人頭像等資源，則可以放置於全域的 assets/ 資料夾。

開發介面中整合了資源管理器，讓你能一覽簡報內使用的素材，並支援直接拖曳上傳、重新命名與替換資源，甚至整合了 svgl 方便快速搜尋主流品牌的向量 logo。這種管理方式的好處在於，所有圖片與素材都能與投影片原始碼一同收納在專案中，免去了上傳外部圖床的麻煩，也無須塞在 prompt 裡傳遞。

專案中負責匯出靜態 HTML 的程式碼已支援辨識常見的媒體格式，包含 PNG、JPEG、GIF、SVG、WebP、AVIF 等圖片，MP4、WebM、MOV 影片，Woff、TTF 字型，以及 MP3、WAV、OGG 音訊副檔名。雖然這代表框架內建了資產打包機制，但不同瀏覽器對影片編碼、客製字型與外部樣式表的渲染結果可能存在差異，發布前仍建議在實際的目標瀏覽器進行測試。

主題與設計系統

使用 create-theme 能為專案產出一套主題規範與展示元件，便於重複利用色彩配置（palette）、字型設定（typography）、版面樣式、頁首頁尾元件以及動畫原則。這裡的主題定義與單一簡報中的 design 變數在層級上有所區隔：

• theme markdown：提供給 agent 作為開發時的視覺設計指引。
• themes/<id>.demo.tsx：主要用於主題面板（Themes panel）中的視覺預覽。
• 簡報內的 design：屬於運行期間（runtime）可讀取並動態調整的設計 token。

如果你需要製作一系列符合品牌規範的投影片，建議先定義好主題，再引導 /create-slide 依循該主題生成內容，如此一來能有效避免每張投影片色彩或字型不一致的窘境。

簡報者模式

open-slide 在運行時提供了全螢幕播放、鍵盤控制導覽、講者備註（speaker notes）、目前與下一頁投影片預覽，以及計時器等完整功能。投影片製作完成後，可以直接在瀏覽器中進入播放狀態，不需額外轉檔成傳統簡報格式即可登台報告。

不過，開發者需留意「簡報播放執行環境」與「最終簡報交付格式」的差異：此簡報者模式專注於瀏覽器端的播放體驗，與 Microsoft PowerPoint 的相容性不可等同視之；在不同瀏覽器與投影環境下仍需自行驗證。

輸入與輸出格式怎麼看？

在這些格式中，PPTX 匯出的機制特別需要釐清。從原始碼的 exportSlideAsImagePptx 實作來看，該功能會將每頁投影片以 2 倍像素比例渲染為 PNG 圖片並封裝入簡報包。這種做法屬於「將視覺設計截圖後塞入 PPTX 容器」，並不會把 React 元件轉換為 PowerPoint 的原生文字框、向量圖形或可編輯物件。如果簡報的交付條件是客戶必須能在 PowerPoint 內編輯內文，目前 open-slide 的這套匯出機制可能無法滿足此需求。

技術架構：兩個公開套件加上一個 agent-friendly workspace

open-slide 採用 pnpm 與 Turbo 組成的 monorepo 架構，其核心運作可拆解為以下三個層次：

專案啟動層：@open-slide/cli

此套件版本為 1.4.1，執行環境要求 Node.js 版本為 >=18。它主要負責執行 init 初始化工作，將基礎投影片範本、設定檔、agent 專屬技能（skills）描述以及指引手冊複製到新的工作區目錄。此外，在建置 CLI 時，它會自動將產生的 package.json 中的 @open-slide/core 版本號替換為對應的 core 版本，確保專案範本中的預留字眼不會直接變成使用者安裝時的無效版號。

核心運行層：@open-slide/core

此核心套件版本為 1.17.1，同樣限制 Node.js >=18。其內部主要包含：

• React 簡報環境：建置了首頁入口、投影片檢視器、縮圖側欄、簡報者模式、DOM 檢查器與資源管理介面。
• 開發指令 open-slide dev：用以啟動開發伺服器，支援 --port、--host 與 --open 等常見參數。
• 編譯指令 open-slide build：用於導出正式環境的靜態網站，可藉由 --out-dir 指定輸出路徑。
• 預覽指令 open-slide preview：用來在本機預覽編譯完成的靜態成果。
• Vite 插件：自動掃描 slides/<id>/index.{tsx,jsx,ts,js} 檔案，利用虛擬模組（virtual modules）將投影片導出至執行環境，並支援在投影片檔案新增或刪除時觸發自動重載（reload）。
• 開發端 API：提供簡報檢查器、註解回寫、媒體檔案讀寫、資料夾管理及備註更新等後台 API。

套件依賴項涵蓋了 React、React DOM、Vite、Tailwind CSS、Base UI、dnd-kit、React Router、Babel parser、html-to-image 以及 fflate。從這些組成元件來看，它是一個具備視覺化編輯與雙向程式碼回寫能力的 React 專案環境，這與單純的 Markdown 轉網頁編譯器有顯著的差別。

協作規則層：Skills 機制

存放於 packages/core/skills/ 的定義檔是框架與 coding agent 溝通的權威依據。當執行 CLI 初始化時，這些定義會被搬移至 .agents/skills/，並同步在 .claude/skills/ 中建立連結。這些規則檔案規範了：

• 簡報結構的規劃守則。
• 1920 × 1080 畫布比例與字體縮放比例（type scale）。
• 素材管理、主題套用、動畫特效與過場特效的規範。
• 如何解析視覺化檢查器所產生的 comment 語法。
• 當使用者提及「這頁投影片」時，agent 如何透過讀取 current.json 定位當前的簡報 ID、頁碼與選取元素。

因此，open-slide 與 AI agent 的整合，核心在於檔案與流程的約定契約。框架本身並不提供特定需要串接 token 的雲端模型服務，開發者可依喜好選用不同的 agent 工具。只要該 agent 能解讀這些 skill 規範、具備專案檔案讀寫能力，並能獨立修改 React 程式碼，就能接入這套工作流。

三種實際使用情境

1. 技術分享與團隊內部簡報

如果想將簡報程式碼、系統架構與流程圖納入版本控制，這是最契合的情境：

• 先透過 /create-slide 決定投影片大綱與總頁數。
• 每一頁均能以原生 React 實作圖表、互動流程圖、程式碼高亮區塊（syntax highlighter）與醒目的排版。
• 透過 slide-authoring 技能來約束畫布尺寸、字體大小與間距。
• 播放時利用簡報者模式搭配 speaker notes 順暢登台。
• 最終編譯為 static site，直接掛載在公司內部網站或轉為網址分享。

此情境的核心優勢在於簡報與專案原始碼同步存放在 Git 之中，不僅在調整簡報時能檢視 diff 紀錄，也能安心指派 agent 針對特定頁面進行微調。

2. 產品提案與路線圖（Roadmap）

商業提案往往在簡報前夕面臨標題調整、更換產品截圖或修正業務數據的需求。在此情境下，可以先讓 agent 快速產生首版草稿，隨後在瀏覽器中點選要修改的元素，將修改指令寫入為程式碼中的 marker，最後調用 /apply-comments 進行一鍵批次修改。

這套工作流非常適合用在「視覺版面已大致定案，但細部文字仍需反覆琢磨」的場景。但需注意，若簡報需要多人在瀏覽器中即時同步編輯，由於 open-slide 的架構並不屬於雲端協作簡報平台，此時仍應透過 Git 分支、PR（Pull Request）等傳統軟體工程手段來協作開發。

3. Agent 生成並需線上部署的簡報網頁

當簡報需要公開展示或託管於網路、不限於在本機播放時，open-slide 的 static build 機制可將簡報邏輯與靜態素材打包為獨立的靜態網頁專案：

pnpm build
pnpm preview

隨後只需將編譯出的靜態檔案上傳至靜態主機即可。這種模式非常適合產品發表投影片、技術文件中的互動指南、線上課程教材或內部知識庫。需要提醒的是，即使在伺服器上部署成功，網頁中的外部字體、影片格式以及瀏覽器專屬 API 能否在各種裝置上完美運作，仍需在發表前進行實際的跨瀏覽器相容性測試（QA）。

什麼時候不適合用？

1. 交付目標為「可自由編輯的商務 PowerPoint 檔案」

open-slide 的主要渲染結果為 React 渲染出的網頁畫布。即使目前的原始碼中包含了基於圖片的 PPTX 匯出功能，其本質仍是將畫面擷圖打包為簡報包。如果你的主管或客戶要求拿到簡報後，必須能直接在 PowerPoint 裡敲鍵盤修改文字、調整表格內容或編輯向量圖表，請務必選擇原生簡報格式或其他工具。

2. 習慣使用流式排版（Flow Layout）快速產出內容

1920 × 1080 的固定畫布雖然提供了像素級（pixel-level）的精密排版控制，但也意味著開發者仍要自行處理版面排版與尺寸控制。當內文字數超出預期、圖片寬高比例不合、或是因多國語言導致行寬拉長時，都需要自行撰寫 CSS 來防止文字溢出或跑版。這種設計高度有利於追求精緻視覺的簡報，但若你的目標只是快速堆砌文字清單（bullet points），這樣的自由度反而會帶來額外的切版負擔。

3. 指望框架自主決定簡報內容與數據的正確性

儘管 /create-slide 技能能協助大綱生成，檢查器也能加速版面微調，但 open-slide 核心並不在於提供事實查核、品牌語氣審查或簡報結構合理性的評估。AI agent 自動生成的數據、名言引用、圖表內容與規格描述，在正式場合發表前，依然必須由人類進行嚴格的事實審查與校對。

4. 需要完備的雲端協作平台功能

從官方的程式庫與說明文件來看，open-slide 的主力是本機開發環境、開發伺服器以及靜態網頁輸出路徑。目前的公開資料並未將其定位為一套包含使用者帳號、雲端多人共同編輯、細部權限管控、託管儲存空間或提供服務水準保證（SLA）的 SaaS 平台。此類多人協作需求，仍需開發團隊自行結合 Git 分支管理、自動化 CI/CD 以及第三方雲端代管服務來搭建。

授權與版本注意事項

專案根目錄的 LICENSE 採用 MIT 開源協定，這意味著你可自由進行使用、修改、分發與商業應用，唯需在散布時保留版權聲明與授權條款。必須注意的是，此協議僅適用於 open-slide 框架本身的程式碼；簡報中所引用的圖片、客製字型、影片素材、企業品牌商標或外部第三方樣式，其版權與授權範圍仍需開發者自行確認並遵循。

目前官方的 main 分支目前仍在持續更新中，且 @open-slide/core 與 @open-slide/cli 有各自獨立的 npm 版本號。為了建立可重複部署（reproducible）的簡報專案建置流程，強烈建議在專案中鎖定特定的 CLI 與 core 套件版本，並確實提交 lockfile，避免過度依賴無特定版本限制的 npx @open-slide/cli 執行指令。

結語：將簡報開發融入 React 的工程迭代中

open-slide 最值得關注的價值，在於將 agent 的程式碼生成優勢接到前端開發流程。它藉由設計明確的 React runtime，滿足簡報必備的畫布比例、頁面導覽、播放模式、線上檢查與匯出需求。

如果你已經習慣用 Git 控管前端專案、能適應 1920 × 1080 的固定比例畫布，且期望 agent 能直接在投影片原始碼上進行微調，那麼 open-slide 適合用來製作技術分享、產品提案、開發路線圖或互動教學簡報。最務實的做法是將其定位為「AI 協作開發 + React 簡報運行環境」的組合工具，若期望它完全替代傳統 PowerPoint 全功能辦公室套件，則可能與其實際功能定位有所出入。

官方來源

• open-slide repository
• open-slide README
• open-slide 官方文件
• @open-slide/cli README
• @open-slide/core README
• create-slide skill
• apply-comments skill
• @open-slide/cli init source
• @open-slide/core package metadata
• @open-slide/cli package metadata
• export-html.ts
• export-pdf.ts
• export-pptx.ts
• LICENSE