# 策展 · X (Twitter) 🔥🔥

> 作者：Yiwei Ho (@1weiho) · 平台：X (Twitter) · 日期：2026-05-17

> 原始來源：https://x.com/1weiho/status/2055565189907644910

## 中文摘要

open-slide 讓 Agent 用自然語言產出 React 程式碼。

open-slide 提供固定 1920 × 1080 畫布、導航、熱重載與專業呈現模式，讓 Agent 專注內容而非基礎架構。

**Agent 原生撰寫流程**  
- 任何程式撰寫 Agent（Claude Code、Codex、Cursor 等）皆可直接使用。  
- 內建 `/create-slide` 指令：Agent 會先詢問四個範疇問題（主題與風格、頁數、文字密度、動態或靜態），再決定 ID、規劃結構並寫出各頁。  
- `/slide-authoring` 提供 1920 × 1080 畫布、字型大小、配色與版面規則的技術參考，Agent 撰寫前會先閱讀。

**瀏覽器內即時檢視器**  
使用者可在開發伺服器中點擊任何元素附加評論，例如「把這個改成紅色」、「把標題改成 Open Slide Rocks」或「縮小標題」。  
評論會以 `@slide-comment` 標記儲存在原始碼中，執行 `/apply-comments` 即可讓 Agent 套用所有待處理修改並清除標記。  
此流程可重複進行：呈現 → 點擊評論 → 套用修改 → 重複。

**資產管理與品牌 Logo 搜尋**  
內建資產面板可管理每份簡報的圖片、影片與字型。  
整合 [svgl](https://svgl.app/) 目錄，使用者可直接搜尋並拖放任何品牌 Logo，無需另外尋找 SVG 檔案。

**專業呈現模式**  
提供全螢幕播放與鍵盤導航，另有「Presenter 模式」可同時顯示目前與下一張投影片、講者筆記與計時器。  
使用者可選擇視窗模式快速預覽、或全螢幕模式進行正式簡報。

**匯出與部署**  
單一指令即可將簡報匯出為獨立的靜態 HTML 網站或可列印的 PDF。  
輸出結果為純靜態檔案，可一鍵部署至 Vercel、Cloudflare Pages、Zeabur、Netlify 等任何靜態託管服務。

**快速開始**  
```bash
npx @open-slide/cli init my-slide
cd my-slide
pnpm dev
```
工作區已預先設定好 Claude Code 專用的 Agent 技能，使用者可直接透過 Agent 驅動，或手動編輯 `slides/<id>/index.tsx`。

## 標籤

Agent, 開源專案, React, Web, open-slide, Claude Code, Cursor