wehub-resource-sync
115 lines
5.2 KiB
Markdown
115 lines
5.2 KiB
Markdown
<!-- WEHUB_ZH_README -->
|
||
> [!NOTE]
|
||
> 本文档由 WeHub 基于上游 README 翻译整理，属于社区翻译，非官方中文文档。
|
||
> [English](./README.en.md) · [原始项目](https://github.com/1weiho/open-slide) · [上游 README](https://github.com/1weiho/open-slide/blob/HEAD/README.md)
|
||
> 原作者、版权与许可证归属以原始项目及本仓库 LICENSE 文件为准。
|
||
|
||
<img width="1280" height="640" alt="open-slide github cover" src="https://github.com/user-attachments/assets/02f5e6d7-12a7-4a8e-88e7-ae8770a96584" />
|
||
|
||
<br />
|
||
<br />
|
||
<a href="https://vercel.com/open-source-program">
|
||
<img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge-2026.svg" />
|
||
</a>
|
||
|
||
# open-slide
|
||
|
||
[](https://github.com/1weiho/open-slide/stargazers)
|
||
[](https://github.com/1weiho/open-slide/network/members)
|
||
[](https://opensource.org/licenses/MIT)
|
||
|
||
**专为智能体（agent）打造的幻灯片框架。** 用自然语言描述你的演示文稿——你的编程智能体会编写 React 代码。open-slide 负责画布、缩放、导航、热重载和演示模式，让智能体可以专注于内容。
|
||
|
||
每张幻灯片都会渲染到固定的 **1920 × 1080** 画布上。页面是任意的 React 组件，而非受限制的 DSL。
|
||
|
||
```bash
|
||
npx @open-slide/cli init my-slide
|
||
```
|
||
|
||
## 为什么选择 open-slide
|
||
|
||
幻灯片就是可视化代码。智能体擅长写代码。open-slide 是缺失的运行时，能将「做一套关于 X 的幻灯片」变成精美、可演示的 deck——无需离开对话。
|
||
|
||
## 亮点
|
||
|
||
### 🤖 面向智能体的创作
|
||
|
||
可与任意编程智能体（Claude Code、Codex、Cursor 等）配合使用。脚手架内置以下技能（skills）：
|
||
|
||
- **`/create-slide`** — 端到端起草整套 deck。会提出四个范围界定问题（主题与风格、页数、文字密度、动效 vs. 静态），选定 id、规划结构并编写页面。
|
||
- **`/slide-authoring`** — 1920 × 1080 画布、字号层级、配色与布局规则的技术参考。智能体在编写前会阅读此文档。
|
||
|
||
从一行提示到精美 deck，无需样板代码。
|
||
|
||
### 🎯 浏览器内检查器
|
||
|
||
在开发服务器中点击任意元素并添加注释——*"改成红色"*、*"改为 'Open Slide Rocks'"*、*"缩小标题"*。注释会以 `@slide-comment` 标记的形式持久化在源码中。运行 `/apply-comments`，智能体会应用所有待处理的修改，然后清除标记。
|
||
|
||
循环：演示 → 点击添加注释 → `/apply-comments` → 重复。
|
||
|
||
### 🖼️ 资源管理器 + svgl 标志搜索
|
||
|
||
通过内置资源面板管理每套 deck 的图片、视频和字体。通过集成的 [svgl](https://svgl.app/) 目录搜索并拖入任意品牌标志——不用再到处找 SVG。
|
||
|
||
### 🎬 专业演示模式
|
||
|
||
支持键盘导航的全屏播放，另有带当前/下一张幻灯片预览、演讲者备注和计时器的**演讲者模式（presenter mode）**。为舞台而生，而不只是浏览器标签页。
|
||
|
||
### 📦 导出为静态 HTML 和 PDF
|
||
|
||
一条命令即可将 deck 导出为自包含的静态 HTML 站点或可直接打印的 PDF。无需服务器即可分享。
|
||
|
||
### 📁 幻灯片管理器
|
||
|
||
用自定义 emoji 将 deck 整理到文件夹中，并拖放重新排序。当你做了三套以上 deck 需要查找时很有用。
|
||
|
||
### 🚀 易于部署
|
||
|
||
输出纯静态构建——可一键部署到 Vercel、Cloudflare Pages、Zeabur、Netlify 或任意静态托管服务。无需服务器、无需运行时、无厂商锁定。
|
||
|
||
## 快速开始
|
||
|
||
```bash
|
||
npx @open-slide/cli init my-slide
|
||
cd my-slide
|
||
pnpm dev
|
||
```
|
||
|
||
脚手架工作区已为 Claude Code 预配置好智能体技能。之后可通过智能体驱动 deck——或直接编辑 `slides/<id>/index.tsx`。硬性规则见 [CLAUDE.md](CLAUDE.md)。
|
||
|
||
## 仓库结构
|
||
|
||
本仓库为 pnpm + Turbo monorepo。
|
||
|
||
| 路径 | 说明 |
|
||
| --- | --- |
|
||
| [packages/core](packages/core) | `@open-slide/core` — 运行时（首页、幻灯片查看器、演示模式、检查器）、Vite 插件，以及 `open-slide` 开发/构建/预览 CLI。 |
|
||
| [packages/cli](packages/cli) | `@open-slide/cli` — `npx @open-slide/cli init` 脚手架。生成最小工作区，Vite/React/tsconfig 隐藏在 core 内部。 |
|
||
| [apps/demo](apps/demo) | 通过 `workspace:*` 使用 `@open-slide/core` 的示例工作区。用于框架的本地开发。 |
|
||
|
||
## 开发
|
||
|
||
```bash
|
||
pnpm install
|
||
pnpm dev # runs the demo against the local @open-slide/core
|
||
pnpm build # builds all packages
|
||
pnpm check # type-checks all packages
|
||
pnpm lint # lints via biome
|
||
```
|
||
|
||
## Star 历史
|
||
|
||
如果 open-slide 对你有帮助，请在 GitHub 上 [给仓库点 star](https://github.com/1weiho/open-slide) — 这能帮助其他人发现该项目。
|
||
|
||
[](https://star-history.com/#1weiho/open-slide&Date)
|
||
|
||
## 支持
|
||
|
||
如果 open-slide 对你有帮助，欢迎支持开发：
|
||
|
||
[](https://ko-fi.com/D1D11YPUP1)
|
||
|
||
## 许可证
|
||
|
||
MIT
|