# 策展 · X (Twitter) 🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

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

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

## 中文摘要

Open-slide 框架支援自然語言生成簡報。

**核心概念與架構**
「open-slide」將簡報視為視覺化的程式碼，利用 React 組件而非受限的領域特定語言（DSL）來建構內容。該框架提供了一個固定的 1920 × 1080 畫布，並處理了畫布縮放、導覽、熱重載（Hot Reload）及簡報模式等底層技術細節，讓 Agent 能專注於簡報內容的生成。使用者可透過以下指令快速初始化專案：

```bash
npx @open-slide/cli init my-slide
cd my-slide
pnpm dev
```

**Agent 程式開發整合**
該框架專為 Agent 打造，支援 Claude Code、Codex 及 Cursor 等工具。其內建的 Agent 專用 skill 包括：
- `/create-slide`：透過詢問主題、美學風格、頁數、文字密度及動態需求，進行端到端的簡報草擬與結構規劃。
- `/slide-authoring`：提供畫布規格、字體比例、配色與排版規則的技術參考，確保 Agent 在撰寫程式碼前具備正確的設計規範。

**互動式編輯與工作流**
「open-slide」具備瀏覽器內建檢查器，使用者可直接點擊簡報元素並留下註解（例如「將標題縮小」），這些註解會以 `@slide-comment` 標記存入程式碼中。執行 `/apply-comments` 指令後，Agent 會自動套用所有修改並清除標記，形成「簡報 → 點擊註解 → 執行修改」的高效循環。

**功能亮點**
- **資產管理**：內建 asset 面板，並整合 [svgl](https://svgl.app/) 目錄，方便搜尋與匯入品牌 Logo。
- **專業簡報模式**：支援全螢幕播放、鍵盤導覽，以及包含當前/下一頁預覽、演講者備忘錄與計時器的專業模式。
- **部署與匯出**：支援匯出為獨立的靜態 HTML 網站或 PDF 檔案，並可一鍵部署至 Vercel、Cloudflare Pages、Zeabur 或 Netlify 等靜態託管平台。
- **專案管理**：提供簡報管理介面，支援資料夾分類與拖曳排序。

**技術規格與開發**
該專案採用 pnpm 與 Turbo 建構的 monorepo 架構，核心元件包含：
- `packages/core`：包含執行時期（簡報檢視器、簡報模式、檢查器）、Vite plugin 及 CLI 工具。
- `packages/cli`：負責專案初始化，隱藏 Vite、React 與 `tsconfig` 等複雜設定。
- `apps/demo`：提供框架的範例 workspace，供開發者進行本地測試。

開發者可透過 `pnpm install` 安裝依賴，並使用 `pnpm dev` 進行開發，詳細規則請參考專案中的 `CLAUDE.md` 文件。

## 標籤

開源專案, CLI, React, Web, Agent, Open-slide
