刷到一個項目叫 open-slide，專門寫給 AI 編程 Agent 用的幻燈片框架

不是給人用的，是給 Claude Code、Codex、Cursor 這些 Agent 用的

你跟 Agent 說"幫我做一份介紹 XX 的 10 頁 PPT"，它直接給你寫出來一份高質量、可以現場演示的深色編輯器風格 PPT，整個過程你不用打開 Keynote 也不用碰 figma

地址：github.com/1weiho/open-slide

我自己實測了一遍，用它做了一份 10 頁的「Harness 詳解」PPT，截圖插進了上一篇文章里，效果相當不錯

今天就來好好聊聊這個項目

簡介

先放官方一句話定位：

? The slide framework built for agents. Describe your deck in natural language — your coding agent writes the React. open-slide handles the canvas, scaling, navigation, hot reload, and present mode so the agent can focus on content.

你描述要做啥，Agent 寫 React 組件，框架處理所有臟活——畫布縮放、鍵盤導航、熱更新、演示模式

每一頁幻燈片是一個 1920×1080 的 React 組件，沒有 DSL 沒有模板限制，你想怎么 layout 怎么 layout，想用什么 React 庫就用什么

這點是它和 reveal.js、slidev 最大的區別：那倆是給"會寫 markdown 的人"用的，open-slide 是給"會寫 React 的 Agent"用的

核心功能拆解：

• Agent-native authoring ：腳手架自帶 4 個 Claude Code skill —— /create-slide （端到端生成一份 deck）、 /slide-authoring （畫布/字號/調色板技術規范，Agent 寫之前先讀這個）、 /apply-comments （應用評論修改）、 /create-theme （自定義主題）

• 瀏覽器內 inspector ：dev server 里點任何元素都能加評論，比如 *"make this red" 、 "shrink the headline"*，評論以 @slide-comment 標記保存到源碼，跑一句 /apply-comments ，Agent 一次性把改動全應用上，循環：present → 點選評論 → apply → 再來一遍

• Assets manager + svgl logo 搜索 ：每個 deck 有獨立的資源面板管理圖片/視頻/字體，要插品牌 Logo 直接通過集成的 svgl 搜，不用再去滿世界扒 SVG

• 專業演示模式 ：全屏播放 + 鍵盤導航，還有 presenter mode ——當前頁/下一頁預覽、speaker notes、計時器一應俱全，是給真正上臺做分享的人準備的，不是 demo

• 導出 HTML & PDF ：一條命令導出獨立靜態站或者打印就緒的 PDF，沒有服務器依賴

• 靜態部署 ：build 出來就是一坨純靜態文件，Vercel、Cloudflare Pages、Netlify、Zeabur 任你挑，零運維

按官方指引超簡單，三行命令的事：

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

我的流程是這樣的：寫一篇技術文章 → 讓 Agent 把核心觀點抽成 10 頁 PPT → 截圖插回文章

Step 1：讓 Agent 設計幻燈片

直接把原文 md 喂給 Claude Code，讓它讀 /slide-authoring skill 后，按照 1920×1080 畫布寫 10 頁 React 組件，保存到 slides/harness-2026/index.tsx

每頁就是一個 React function，可以 export default 一個數組，框架按數組順序渲染

Step 2：build + preview

pnpm build
pnpm preview

預覽跑在 4173，瀏覽器打開 /s/harness-2026 就能看效果

我做的 Harness PPT 大概長這樣（深色編輯器風、橙色 accent）：

10 頁全跑下來一氣呵成，視覺風格統一、信息密度合理，比我自己用 Keynote 拼一下午快至少 10 倍

Step 3：截圖插入文章

這步不是 open-slide 自帶的（issue 里有人提過想要批量導出 PNG），我自己寫了個 playwright 腳本：

const { chromium } = require('playwright');
const browser = await chromium.launch();
const ctx = await browser.newContext({
viewport: { width: 1920, height: 1080 },
deviceScaleFactor: 2,
});
const page = await ctx.newPage();
await page.goto('http://localhost:4173/s/harness-2026');
await page.click('body');
await page.keyboard.press('f');  // 進入 present mode


 for (let i = 1; i <= 10; i++) {
if (i > 1) await page.keyboard.press('ArrowRight');
await page.waitForTimeout(500);
const handle = await page.$('div[style*="1920px"][style*="1080px"]');
await handle.screenshot({ path: `png/page-${i}.png` });
}

這里有個關鍵技巧：必須先按 f 進入 present mode，普通預覽模式下鍵盤事件會被縮略圖組件吃掉，ArrowRight 只能翻一頁就卡住

我一開始沒進 present mode，10 張截圖里 9 張都是同一頁，調試了半天才發現這個機關

進 present mode 之后穩如老狗，10 張全部獨立，分辨率 3840×2160（DPR=2 的視網膜版本），插到文中絕對清晰

實測

實測下來我對它的評價是：專為 Agent 設計這個定位，不是噱頭，是真的把 Agent 的工作流吃透了

優點：

• React + Tailwind 寫頁面，自由度比 reveal.js / slidev 高一個量級，想做什么花活都行

• 1920×1080 固定畫布的設計簡單粗暴但有效，Agent 不用擔心響應式適配，專心寫內容

• /slide-authoring skill 文檔詳細到字體字號、行距、留白比例全都規定好了，Agent 寫出來的頁面視覺一致性極強

• present mode + presenter mode 是真的能上臺用，不是花架子

• 部署純靜態，扔 Cloudflare Pages 一秒上線

缺點 / 局限：

• 中文字體支持要自己折騰（assets 面板加字體文件 + 在 React 里 import）

• 沒有內置的 PNG 批量導出（要自己寫 playwright，像我上面那段）

• 寫 React 的門檻不算高但也不算零——如果你不會 React 完全不知道這是啥的話，得讓 Agent 全權代筆，自己改細節會有點懵

• 現在生態還小，主題/模板庫基本是空的，全靠自己（或 Agent）從零擼

適合誰：

• 經常需要把技術內容快速做成幻燈片的內容創作者、布道師、做技術分享的工程師

• 重度用 Claude Code / Codex / Cursor 的人，讓 Agent 直接產出 deck 是真的爽

• 喜歡 React 生態的，想用 Tailwind / shadcn / framer-motion 寫動畫的

不適合誰：

• 完全不寫代碼、純靠 GUI 拖拽做 PPT 的人——那你還是用 Keynote 吧

• 內容固定就是那幾個簡單 markdown 文檔，slidev 完全夠用，不需要這個

• 要協同編輯（多人同時改一份 deck）的——這個目前是個人本地工具

最讓我感慨的不是 open-slide 這個工具本身，而是它背后的思路

幻燈片是 visual code，Agent 擅長寫 code，所以讓 Agent 用代碼方式生產幻燈片，比讓它生成 pptx 文件靠譜一萬倍

這個思路可以推廣到很多地方：

• 簡歷是 visual code → 讓 Agent 用 React 給你寫一份

• 海報是 visual code → 讓 Agent 寫 SVG / Canvas

• 數據可視化是 visual code → 讓 Agent 用 D3 / Vega

未來真正的內容創作工具，可能都是這種"自然語言 → Agent → 代碼 → 視覺產出"的形態，open-slide 是這個范式很早期但很正確的一個樣板

我打算之后所有文章配的 PPT、信息圖都用它生成，正好湊齊"obsidian 寫文 + Claude Code 寫 PPT + R2 圖床 + 編輯器一鍵發"的全鏈路

一句話總結：如果你是用 Claude Code / Codex 的內容創作者，今晚就裝上玩玩，回不去了

制作不易，如果這篇文章覺得對你有用，可否點個關注。給我個三連擊：點贊、轉發和在看。若可以再給我加個，謝謝你看我的文章，我們下篇再見！