Open Slide：讓 Coding Agent 直接寫 React 幻燈片

open-slide 是一個專為 AI Coding Agent 設計的開源幻燈片框架。說白了，它不再讓你用 Markdown 或純 HTML 拼湊簡陋的簡報，而是讓 Claude Code、Codex CLI 或 Cursor 直接幫你把需求寫成標準的 React 元件。

專案把每張幻燈片都放在固定 1920 × 1080 的畫布上渲染。你只要在瀏覽器裡描述演示內容，Agent 就會逐頁編寫程式碼，畫布同時即時熱過載並跟隨渲染。

它能做什麼

相比傳統的網頁幻燈片方案，open-slide 的核心優勢是擁有 React 的生態元件和更順暢的 AI 協作迴圈。

你可以在瀏覽器裡直接驅動本地 Agent。按鍵盤上的 A 鍵能喚起側邊面板，按 C 鍵則能框選元素或區域留下修改批註。這些批註會自動存入原始碼中的註釋標記，Agent 可以一次性讀懂並批次修改，免去一段段提示詞來回複製的麻煩。

除了完全交給 AI 編寫程式碼，它還自帶一套視覺化編輯器。文字、位置、尺寸都可以手動拖拽微調，對齊輔助線和內聯文本編輯一應俱全。

專案還內建了資源管理器，集成了收錄 1500 多個品牌向量圖示的 SVGL 庫與 Google Fonts。如果你經常寫技術類 PPT，找 Claude、Codex 或 Cursor 的高畫質 Logo 不用再到處切網頁去搜。

在輸出方面，open-slide 支援演講者雙屏模式、倒計時與演講備註。做好的幻燈片既能直接匯出為靜態 HTML、PDF 和 PPTX，也可以一鍵構建並部署到 Cloudflare Pages、Vercel 或 Netlify。

怎麼跑起來

open-slide 採用 MIT 協議開源。你的電腦只要裝了 Node 環境，終端裡執行 npx @open-slide/cli init my-deck 就能初始化專案。

首次在瀏覽器打開面板時，它會自動在本地工作區配置 SDK，複用你現有的 Claude Code 或 Codex 終端登入狀態，不需要額外去配第三方 API 金鑰。如果你更習慣純終端工作流，專案自帶的命令技能也可以直接被各類程式碼助手呼叫。

為什麼重要

我們認為 open-slide 聰明的地方在於，它沒有自己去重造一套半吊子的大模型生成後臺，而是順應了開發者已經習慣的終端 Coding Agent。把幻燈片當作標準 React 前端工程來維護，既讓 AI 寫程式碼的泛化能力徹底釋放，又用直觀的畫布和批註解決了純程式碼修圖的痛點。

如果你平時需要頻繁製作技術分享、產品演示，又對市面上千篇一律的 AI PPT 排版感到厭煩，這個專案非常值得拉到本地試一試。