Mappedinfo/PlainDeck

PlainDeck

像 PPT 一样编辑，像代码一样保存。

PlainDeck 是一个以用户操作为先的幻灯片编辑器：你在浏览器里拖拽排版，底层文件则保持为 AI 能读写、Git 能管理的 JSON。

在线试用
·
npm 包
·
查看源码
·
色卡实验室

用 CLI 生成的真实演示

这些不是截图式样板，而是由 plaindeck npm 包通过 init → operations → validate → render 生成的完整项目。每一页仍然是可编辑、可审查的 JSON。

| 生成式 AI | 互联网如何工作 | 学习如何留下来 |
| --- | --- | --- |
| Generative AI demo | Internet demo | Learning demo |
| 源文件 · PDF | 源文件 · PDF | 源文件 · PDF |

查看完整 demo gallery 与复现命令

30 秒看懂

- 对人友好：逐页画布、拖放、缩放、文字编辑和主题调整，不需要手写代码。
- 对 AI 友好：内容、位置和样式都是结构清楚的文本；AI 可以生成或修改初稿，你再用画布精调。
- 对 Git 友好：一页一个文件，移动一个元素通常只改变几个数字，可以查看差异、提交和回滚。
- 文件属于你：项目保存在你选择的本地文件夹里，不要求账号，不把演示文稿上传到服务器。

一句更短的介绍：

用户用画布编辑，AI 读写内容，Git 记录每一次变化。

配色来自 色卡实验室 Palette Lab

PlainDeck 的编辑器界面与内置主题统一采用 Mappedinfo 开源学术配色档案 色卡实验室 Palette Lab（15 色、8 组搭配、逐色 WCAG 对比度解析）：
- 编辑器界面：珊瑚 #E97A46 主强调、琥珀 #FFD15D 悬停强调、宣纸 #F5E6D0 纸面与对话框、朱砂 #9E1D1C 表格强调、象牙 #FBFFF2 数据预览。
- 内置主题：新增 palette-vermillion（宣纸与朱砂）、palette-ice-magenta（冰蓝与品红）、palette-jade-ivory（翡翠与象牙）、palette-jade-night（翡翠夜）四套，可在画布右侧 COLOR STYLES 面板或 CLI --theme 直接选用：

npx plaindeck init ./my-deck --theme palette-vermillion

- Agent 与 AI 工具可直接读取机器可读档案：llms.txt（站点入口）与 llms-full.txt（完整颜色表、对比度矩阵与使用建议）。

为什么不直接使用 PPTX 或 PDF？

PPTX 是压缩的 OOXML 容器，PDF 主要面向最终交付。它们并非完全不可读取，但普通 Git 很难稳定显示“标题右移了 16 像素”或“这一页只改了一句话”，AI 修改后也容易产生难以审查的大块变化。

PlainDeck 使用开放、稳定的文本源文件：

"frame": {
-   "x": 80,
+   "x": 96,
"y": 56,
"w": 720,
"h": 90
}

怎么使用

先体验，不创建文件

打开在线版本，直接拖动默认模板中的元素。此时修改只保存在浏览器恢复快照中。

正式制作

1. 使用桌面版 Chrome 或 Edge 打开在线版本。
2. 点击左上角“新建项目”，选择一个本地空文件夹。
3. 拖拽编辑；PlainDeck 会把页面自动保存为 JSON。
- 点击工具栏图片按钮选择本地图片，或直接把图片拖到画布；也可以从截图工具、浏览器和文件管理器复制后粘贴。
- 目录项目会把图片保存到 assets/ 并在页面 JSON 中记录相对路径；在线演示模式会以内嵌图片保存，避免刷新丢失。
4. 使用 VS Code、终端或 GitHub Desktop 查看 diff、提交和回滚。
5. 通过“导出”生成独立 HTML、项目 ZIP，或使用浏览器打印为 PDF。

也可以复制 examples/starter，然后在 PlainDeck 中选择“打开目录”。Firefox 和 Safari 暂不支持原位目录写入，可使用 ZIP 导入和导出。

优缺点对比

| 能力 | PlainDeck | PowerPoint / PPTX | PDF | 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:pack

Agent API 与 CLI

PlainDeck 的 npm 包提供 TypeScript API、plaindeck 命令和 HTML/PNG/PDF 渲染器。AI Agent 可以先检查项目，再以稳定的页面路径与元素 ID 提交结构化操作：

npm install plaindeck
npx plaindeck init ./my-deck --title "生成式 AI 简介"
npx plaindeck init ./paper-talk --template nature-methods --title "方法标题"
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 add-table ./my-deck --data benchmark.md --style rules
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.html

init 默认保留五页 showcase 契约，也可选择证据优先的七页 nature-methods、paper-reading、pitch 或 blank；网页版默认打开 nature-methods。十三套内置配色中，四套来自开源的色卡实验室 Palette Lab（宣纸与朱砂、冰蓝与品红、翡翠与象牙、翡翠夜）。add-table 可把 Markdown、CSV、TSV 或 JSON 转成原生可编辑表格；add-cards 可把 Markdown 或 JSON 变成 1–8 张自适应信息卡；styles 提供 174 个原生视觉配方。CLI 和画布都通过同一组 operations 修改文档，HTML、PNG/PDF、React 与 Remotion 共用渲染规则。完整的设计审视见 docs/nature-design-review.md。

npm install playwright
npx playwright install chromium

公共 API 与操作格式见 docs/agent-api.md，npm 包说明见 packages/plaindeck/README.md。v0.6 不包含 HTTP API、MCP、serve/watch 或 PPTX 导入导出；项目 schema 仍保持 0.1 兼容。

React 与 Remotion：一页内容，所有输出

PlainDeck 不把视频做成第二套幻灯片。plaindeck/react 把同一份页面 JSON 渲染为 React 组件，Web 编辑器直接使用它；plaindeck/remotion 只在组件外增加逐元素入场与页面镜头。HTML、PNG、PDF、Web 和视频共同使用 plaindeck/render 中的布局、字体、主题、形状和页脚解析。

npm install plaindeck react react-dom
npm install plaindeck remotion

import { PlainDeckSlide } from 'plaindeck/react'
import { PlainDeckTimeline } from 'plaindeck/remotion'

动画仍是可审查的普通 JSON；静态渲染器忽略动画字段并保持完全相同的最终版式，Remotion 按帧解释它。字幕与音频继续由视频项目作为独立时间轴图层叠加，不会复制页面内容。完整说明和 paper-to-Bilibili 接入方式见 docs/remotion.md。

Web 工具栏显示的版本号直接读取 packages/plaindeck/package.json。发布时只需更新 npm 包版本，Web 构建会自动同步，无需再修改界面源码。

MCP Server：让 Agent 直接制作幻灯片

plaindeck/mcp 把 PlainDeck Agent API 封装为 Model Context Protocol 工具（init / validate / inspect / apply_operations / add_cards / add_table / render / styles），随 plaindeck 包一起分发（plaindeck-mcp 命令行）。任何 MCP 客户端（DeepSeek Harness、Claude Code、Codex 等）都可以让 Agent 从研究笔记直接生成、修改并渲染一份可被 Git 审查的幻灯片项目。

npm install --global plaindeck

DeepSeek Harness 接入（工具以 mcp__plaindeck__* 出现）
dsh web --patch "$PWD/packages/plaindeck/plaindeck.cordis.yml"

已实现的 MVP 能力

- Zod schema、0.1 schema version、迁移入口和 canonical JSON serializer；
- 页面新建、重命名、复制、删除、排序，文本、图片、矩形、线条和原生表格元素；
- 本地图片文件选择、画布定位拖放和剪贴板粘贴，目录项目自动写入 assets/；
- 18 种页面布局骨架、nature-methods 学术方案、图片占位、结构化摘要卡、原生表格、174 个视觉配方、13 套默认配色（源自色卡实验室 Palette Lab）与自定义主题颜色；
- 形状内文字、双击编辑、字号、颜色与对齐方式；
- 文档级左、中、右页脚编辑器，支持自定义文字、自动日期、页码、总页数、文档标题与页面名称；
- 可选的逐元素进入动画与页面镜头 JSON，Web 属性面板可视化编辑；
- plaindeck/react 共享页面组件与 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 不会上报幻灯片内容、编辑操作、文件名或本地目录信息。删除变量并重新部署即可关闭。

环境变量

本地开发与构建从 .env.local 读取配置（模板见 .env.example，真实值不要提交到仓库）：

- VITE_BASE_PATH：部署基础路径，默认 /PlainDeck/。自定义域名或根路径部署时设为 /；其他子路径按需设置（注意首尾斜杠）。影响构建产物路径、PWA manifest 的 start_url/scope 与 e2e 测试的 baseURL。
- VITE_GOOGLE_ANALYTICS_ID / VITE_BAIDU_ANALYTICS_ID：站点分析 ID（仅生产构建启用），也可通过上方的 GitHub Actions 变量注入。

完整格式说明见 docs/project-format.md，项目目标与设计背景见 PlainDeck_项目计划书_v0.1.md。

License

PlainDeck 采用 MIT License。由第三方项目迁移的设计元数据见 Third-party notices。