像 PPT 一样编辑,像代码一样保存。
PlainDeck 是一个以用户操作为先的幻灯片编辑器:你在浏览器里拖拽排版,底层文件则保持为 AI 能读写、Git 能管理的 JSON。
这些不是截图式样板,而是由 plaindeck npm 包通过 init → operations → validate → render 生成的完整项目。每一页仍然是可编辑、可审查的 JSON。
| 生成式 AI | 互联网如何工作 | 学习如何留下来 |
|---|---|---|
![]() |
![]() |
![]() |
源文件 · PDF |
源文件 · PDF |
源文件 · PDF |
- 对人友好:逐页画布、拖放、缩放、文字编辑和主题调整,不需要手写代码。
- 对 AI 友好:内容、位置和样式都是结构清楚的文本;AI 可以生成或修改初稿,你再用画布精调。
- 对 Git 友好:一页一个文件,移动一个元素通常只改变几个数字,可以查看差异、提交和回滚。
- 文件属于你:项目保存在你选择的本地文件夹里,不要求账号,不把演示文稿上传到服务器。
一句更短的介绍:
用户用画布编辑,AI 读写内容,Git 记录每一次变化。
PPTX 是压缩的 OOXML 容器,PDF 主要面向最终交付。它们并非完全不可读取,但普通 Git 很难稳定显示“标题右移了 16 像素”或“这一页只改了一句话”,AI 修改后也容易产生难以审查的大块变化。
PlainDeck 使用开放、稳定的文本源文件:
"frame": {
- "x": 80,
+ "x": 96,
"y": 56,
"w": 720,
"h": 90
}打开在线版本,直接拖动默认模板中的元素。此时修改只保存在浏览器恢复快照中。
- 使用桌面版 Chrome 或 Edge 打开在线版本。
- 点击左上角“新建项目”,选择一个本地空文件夹。
- 拖拽编辑;PlainDeck 会把页面自动保存为 JSON。
- 点击工具栏图片按钮选择本地图片,或直接把图片拖到画布;也可以从截图工具、浏览器和文件管理器复制后粘贴。
- 目录项目会把图片保存到
assets/并在页面 JSON 中记录相对路径;在线演示模式会以内嵌图片保存,避免刷新丢失。
- 使用 VS Code、终端或 GitHub Desktop 查看 diff、提交和回滚。
- 通过“导出”生成独立 HTML、项目 ZIP,或使用浏览器打印为 PDF。
也可以复制 examples/starter,然后在 PlainDeck 中选择“打开目录”。Firefox 和 Safari 暂不支持原位目录写入,可使用 ZIP 导入和导出。
| 能力 | PlainDeck | PowerPoint / PPTX | Marp / Quarto | |
|---|---|---|---|---|
| 直接拖拽排版 | 支持 | 最强 | 不适合编辑 | 通常需要改源码 |
| 源文件可读 | JSON,一页一文件 | OOXML 压缩容器 | 面向呈现 | Markdown / Quarto |
| 普通 Git 差异 | 清楚到元素属性 | 通常只能看到文件变化 | 通常只能看到文件变化 | 清楚 |
| AI 生成后人工精调 | 适合 | 需要专用工具链 | 不适合 | 适合生成,精调偏代码 |
| 可读的基础动画 | 支持,可选 JSON + Remotion | 支持,但难做 Git diff | 只保留结果 | 依工具而定 |
| Office 兼容 | 有限 | 最强 | 只保留结果 | 有限 |
| 本地与离线 | 支持 | 支持 | 支持 | 支持 |
PlainDeck 适合:
- 科研汇报、课程展示、技术方案和工程周报;
- 先让 AI 生成结构化初稿,再由人拖拽完善;
- 希望文件长期保存在自己目录,并能审查每次修改;
- 觉得纯 Markdown 幻灯片不够自由,又不需要完整 PowerPoint 功能。
PlainDeck 当前不适合:
- 依赖复杂动画、SmartArt、宏或完整 Office 兼容的演示;
- 多人实时协作、评论审批和云端权限管理;
- 无损导入任意 PPTX;
- 把 Git 或 AI 功能直接内置进编辑器——当前版本提供友好的文件格式,Git 与 AI 工具由用户自行选择。
要求 Node.js 22 或更新版本。
npm install
npm run dev质量检查:
npm run typecheck
npm test
npm run build
npm run test:e2e
npm run test:render
npm run test:remotion
npm run test:packPlainDeck 的 npm 包提供 TypeScript API、plaindeck 命令和 HTML/PNG/PDF 渲染器。AI Agent 可以先检查项目,再以稳定的页面路径与元素 ID 提交结构化操作:
npm install plaindeck
npx plaindeck init ./my-deck --title "生成式 AI 简介"
npx plaindeck inspect ./my-deck --json
npx plaindeck add-cards ./my-deck --content brief.md --name "Weekly brief"
npx plaindeck styles --search "社论"
npx plaindeck add-cards ./my-deck --content brief.md --style editorialMagazine
npx plaindeck apply ./my-deck --ops changes.json --dry-run --json
npx plaindeck apply ./my-deck --ops changes.json
npx plaindeck render ./my-deck --format html --output deck.htmlinit 默认创建一套可直接播放的五页编辑型模板,也可选择 pitch、blank 和 8 套内置配色。add-cards 可把 AI 整理出的 Markdown 或 JSON 直接变成 1–8 张自适应信息卡;styles 提供从 Juya News Card 批量迁移的 174 个原生视觉配方,Web 工具栏可以按名称和 27 个分类检索。所有配方最终仍是普通形状、文字和线条。推荐闭环是 init → inspect → operations → validate → dry-run → apply → render。网页编辑器的元素、页面、图层与主题修改也会转换为同一组 operations,因此 CLI 和画布共享同一个文档变更内核。HTML 默认嵌入本地图片并生成带方向键、进度和全屏控制的 Web 演示;外部图片默认不联网。PNG/PDF 渲染需要 Playwright Chromium:
npm install playwright
npx playwright install chromium公共 API 与操作格式见 docs/agent-api.md,npm 包说明见 packages/plaindeck/README.md。v0.3 不包含 HTTP API、MCP、serve/watch 或 PPTX 导入导出;项目 schema 仍保持 0.1 兼容。
PlainDeck 不把视频做成第二套幻灯片。@mappedinfo/plaindeck-react 把同一份页面 JSON 渲染为 React 组件,Web 编辑器直接使用它;@mappedinfo/plaindeck-remotion 只在组件外增加逐元素入场与页面镜头。HTML、PNG、PDF、Web 和视频共同使用 plaindeck/render 中的布局、字体、主题、形状和页脚解析。
npm install plaindeck @mappedinfo/plaindeck-react
npm install @mappedinfo/plaindeck-remotion remotionimport { PlainDeckSlide } from '@mappedinfo/plaindeck-react'
import { PlainDeckTimeline } from '@mappedinfo/plaindeck-remotion'
<PlainDeckSlide document={deck} slidePath="./slides/001-intro.json" />
<PlainDeckTimeline document={deck} framesPerSlide={150} />动画仍是可审查的普通 JSON;静态渲染器忽略动画字段并保持完全相同的最终版式,Remotion 按帧解释它。字幕与音频继续由视频项目作为独立时间轴图层叠加,不会复制页面内容。完整说明和 paper-to-Bilibili 接入方式见 docs/remotion.md。
Web 工具栏显示的版本号直接读取 packages/plaindeck/package.json。发布时只需更新 npm 包版本,Web 构建会自动同步,无需再修改界面源码。
- Zod schema、
0.1schema version、迁移入口和 canonical JSON serializer; - 页面新建、重命名、复制、删除、排序,文本、图片、矩形和线条元素;
- 本地图片文件选择、画布定位拖放和剪贴板粘贴,目录项目自动写入
assets/; - 9 种页面布局骨架、图片占位、1–8 张结构化摘要卡、174 个原生视觉配方、8 套默认配色与自定义主题颜色;
- 形状内文字、双击编辑、字号、颜色与对齐方式;
- 文档级左、中、右页脚编辑器,支持自定义文字、自动日期、页码、总页数、文档标题与页面名称;
- 可选的逐元素进入动画与页面镜头 JSON,Web 属性面板可视化编辑;
@mappedinfo/plaindeck-react共享页面组件与@mappedinfo/plaindeck-remotion帧驱动时间轴适配器;- 选择、Shift 多选、拖动、缩放、属性编辑、图层、对齐和网格吸附;元素可暂放在画布外,并通过本页元素清单检索或一键移回中心;
- 100 步 Undo/Redo、复制、删除和键盘微调;
- 本地目录读写、防抖最小写入、外部修改保护和 OPFS 恢复快照;
- ZIP 导入导出、独立 HTML、演示模式、浏览器 PDF 和 PWA 离线缓存。
推送到 main 后,Pages 工作流会完成检查、构建并部署在线版本。
PlainDeck 默认不加载统计脚本。若需要统计公开网站的页面访问,可在 GitHub 仓库的 Settings → Secrets and variables → Actions → Variables 中配置一个或两个仓库变量:
GOOGLE_ANALYTICS_ID:Google Analytics 4 衡量 ID,例如G-XXXXXXXXXX;BAIDU_ANALYTICS_ID:百度统计站点代码中的 32 位站点 ID。
配置后重新运行 Pages 工作流即可生效。统计代码只在生产构建中启用;PlainDeck 不会上报幻灯片内容、编辑操作、文件名或本地目录信息。删除变量并重新部署即可关闭。
完整格式说明见 docs/project-format.md,项目目标与设计背景见 PlainDeck_项目计划书_v0.1.md。
PlainDeck 采用 MIT License。由第三方项目迁移的设计元数据见 Third-party notices。


