slides-grab

slides-grab — 用 HTML/CSS 点选并编辑 AI 幻灯片

slides-grab（NomaDamas，MIT）是开源的 Claude Design 替代方案——一套用于通过编码 Agent 生成演示文稿的工具链、可视化编辑器和代码检查器。每张幻灯片都是一个独立的 slide-XX.html 文件，使用纯 HTML 和 CSS 编写——这是 AI Agent 最擅长的语言——因此演示文稿不仅美观，Agent 也能轻松编辑，还可导出为 PDF（以及处于实验阶段、不稳定的 PPTX 或 Figma）。它的招牌功能：在浏览器编辑器中，你可以框选任意区域，并让 Agent 只重写该区域；文本、大小、粗体等细节仍可像「2024 年那样」手动调整。此技能是一个路由优先的封装：选择安装方式、演示文稿工作区、设计风格，以及合适的素材和导出流程。

适用场景

• 用户想要根据主题或源文件生成幻灯片，然后通过可视化方式迭代，而不是从头开始重新提示
• 用户想要指向渲染后幻灯片中的某个区域，并让 Agent 只编辑该区域（边界框选择 + Agent 重写）——这是通过 slides-grab edit 实现的 slides-grab 核心工作流
• 用户想要使用可通过 HTML/CSS 手动调整（文本、大小、粗体）的演示文稿，并希望 Agent 能使用 35 种内置设计风格中的任意一种重新设计
• 用户想要导出演示文稿——使用 slides-grab pdf（截图或可搜索的 --mode print）、slides-grab png（逐张导出，包括适用于 Instagram 的 1:1 卡片新闻），或实验性、不稳定的 convert（PPTX）/figma（可导入 Figma 的 PPTX）
• 用户正在制作Instagram 风格的卡片新闻（720pt × 720pt 正方形），并希望优先输出 PNG
• 用户需要以受支持的方式处理演示文稿素材——使用 slides-grab image（god-tibo-imagen / codex / nano-banana）生成图像，使用 fetch-video（yt-dlp）抓取网络视频，或使用 slides-grab tldraw 将 .tldr 图表转换为适配幻灯片尺寸的 SVG
• 用户想要在导出前验证演示文稿（slides-grab validate、Playwright），以发现缺失的本地素材和不推荐的路径格式

不适用场景

• 用户想要在幻灯片中使用可编辑的矢量图表（架构图、ERD、UML、时序图、流程图）→ 使用 drawio 或 mermaid 创建图表，再嵌入导出的图像
• 用户想要在未采用 slides-grab 的 HTML 工作流的情况下，制定以数据包为先的演示文稿规划、叙事结构，或最终交付决策（HTML 审阅、PPTX、PDF 或 Google/Figma Slides）→ 使用 presentation-builder
• 用户只想要AI 生成的图像（而非演示文稿）→ 使用 god-tibo-imagen
• 用户想要广泛生成本地设计成果（Web/移动端/桌面端原型、媒体、72 种设计系统）→ 使用 open-design
• 演示文稿必须达到像素级精确的 PowerPoint 或原生 Figma——slides-grab 的 convert/figma 路径明确处于实验阶段且不稳定，只能尽力生成供手动导入的 .pptx，并且需要后续清理；不要承诺 PPTX/Figma 能忠实还原

前置条件

要求	说明
Node.js >= 20	CLI 的硬性要求
通过 Playwright 使用 Chromium	npx playwright install chromium — 用于渲染、验证和导出的流程
编码 Agent	Claude Code 或 Codex 提供一流的安装指南；边界框「编辑此区域」流程会将所选区域交给 Agent
yt-dlp（可选）	仅用于 slides-grab fetch-video
Codex/ChatGPT 登录账号（可选）	默认的 slides-grab image 提供方（god-tibo-imagen）会复用 ~/.codex/auth.json；替代提供方需要 OPENAI_API_KEY 或 GOOGLE_API_KEY

说明

步骤 1 — 安装 slides-grab

路径	适用场景	命令
npm 包（推荐）	常规用法 — CLI + 共享技能	npm install slides-grab → npx playwright install chromium → npx skills add ./node_modules/slides-grab -g -a codex -a claude-code --yes --copy
Agent 安装指南	让 Agent 端到端完成配置	Claude Code：阅读 docs/installation/claude.md；Codex：阅读 docs/installation/codex.md 并遵循所有步骤
克隆	开发或为 slides-grab 本身做贡献	git clone … && cd slides-grab && npm ci && npx playwright install chromium

此技能提供 scripts/install.sh，用于执行 npm 安装流程 （安装 + Playwright Chromium + npx skills add）；设置 SLIDES_GRAB_NO_SKILLS=1 可跳过 Agent 技能注册步骤。

步骤 2 — 选择幻灯片工作区

工作流命令接受 --slides-dir <path>（默认值：slides）。如果有多套幻灯片， 请将每套放在 decks/<name>/ 下，并在每个阶段都传入 --slides-dir decks/<name> 。全新安装时，发现类命令（--help、 list-templates、list-styles、preview-styles）无需幻灯片即可使用； edit、build-viewer、validate、convert 和 pdf 则需要现有工作区， 其中包含 slide-*.html。

步骤 3 — 规划 → 设计

1. 规划 — 让 Agent 根据主题/文件起草结构化大纲。
2. 设计 — Agent 将每张幻灯片生成为独立的 slide-XX.html。通过 slides-grab list-styles 浏览样式（内置 35 种： 30 种来自 corazzon/pptx-design-styles
   • 5 种原创样式），或运行 slides-grab preview-styles 查看视觉样式库，然后 直接告诉 Agent 使用哪种样式（也可以要求定制样式 — 无需配置 文件）。

步骤 4 — 可视化编辑（slides-grab 的亮点）

bash slides-grab edit --slides-dir decks/my-deck

这会启动纯 JavaScript 浏览器编辑器。在任意区域上拖出一个 bbox， 然后让 Agent 只重写该区域；简单的文本/尺寸/粗体修改可手动完成。在这里（以及之后的每个阶段）使用 --mode card-news，即可制作正方形 1:1 幻灯片。编辑器文件是纯 JS — 易于扩展新 Agent/设计。

步骤 5 — 以受支持的方式添加素材

将本地图片/视频存放在 <slides-dir>/assets/ 中，并使用 ./assets/<file> 引用。 保存的幻灯片中不允许使用远程 http(s):// 图片 URL 和绝对文件系统 路径；允许使用 data: URL。

需求	命令
生成图片	slides-grab image --slides-dir decks/my-deck --prompt "…"（默认 god-tibo-imagen 会复用 ~/.codex/auth.json；--provider codex 需要 OPENAI_API_KEY，--provider nano-banana 需要 GOOGLE_API_KEY）
获取网页视频	slides-grab fetch-video --url <youtube-url> --slides-dir decks/my-deck --output-name hero-video（需要 yt-dlp）
图表 → SVG	slides-grab tldraw --input …/system.tldr --output …/assets/system.svg --width 640 --height 320

god-tibo-imagen 会调用不受支持的私有 Codex 后端，可能在不另行通知的情况下失效， 并且需要具备图片生成权限的账户；如果失败，slides-grab 会回退到任何有凭据的服务提供方，否则使用网页搜索

• 下载到本地的方式，将素材保存到 assets/。

步骤 6 — 验证 → 导出

务必先验证，以发现缺失的素材和错误的路径：

bash slides-grab validate --slides-dir decks/my-deck

输出	命令
PDF（捕获，默认） — 栅格化，保真度最高	slides-grab pdf --slides-dir decks/my-deck --output decks/my-deck.pdf
PDF（打印） — 文本可搜索、可选择	slides-grab pdf --slides-dir decks/my-deck --mode print --output …-searchable.pdf
每张幻灯片导出为 PNG（默认 2160p）	slides-grab png --slides-dir decks/my-deck --output-dir …/out-png
卡片新闻 PNG（Instagram 1:1）	slides-grab png --slides-dir decks/my-cards --slide-mode card-news --resolution 2160p
PPTX（实验性／不稳定）	slides-grab convert --slides-dir decks/my-deck --output decks/my-deck.pptx
可导入 Figma 的 PPTX（实验性／不稳定）	slides-grab figma --slides-dir decks/my-deck --output …-figma.pptx
单文件查看器	slides-grab build-viewer

pdf 和 convert 默认使用 2160p／4k；可通过 --resolution 720p|1080p|1440p|2160p|4k 覆盖。对于包含 <video> 的幻灯片，请设置 poster="./assets/<file>"，以便 PDF 导出使用稳定的静态图像。

步骤 7 — 与 jeo-skills 并行的插件式安装

此技能文件夹可通过标准 jeo-skills 流程安装为插件，使包装器、参考资料和安装程序都能写入磁盘，供任何受支持的运行时使用：

bash

项目安装（写入 .agents/skills/slides-grab/）

npx skills add https://github.com/akillness/jeo-skills --skill slides-grab

为所有检测到的 Agent 全局安装

npx skills add -g https://github.com/akillness/jeo-skills --skill slides-grab

指定目标 Agent

npx skills add -g https://github.com/akillness/jeo-skills --skill slides-grab -a claude-code -a codex -y

输出格式

当用户向 slides-grab 寻求帮助时，请返回简洁的概要：

markdown

slides-grab 路由概要

范围

• 安装路径：npm-package | agent-guide | clone | already-installed
• 幻灯片：slides/ | decks/ | card-news | undecided
• 阶段：plan | design | edit | assets | validate | export

建议的下一步

• npm-install | slides-grab edit | list-styles | slides-grab image | validate | pdf | png-card-news | convert

原因

• 依据用户提供的材料列出 2–3 条要点

其他工具选项

• drawio／mermaid：用于嵌入幻灯片的可编辑矢量图
• presentation-builder：用于以材料为先的规划，并交接导出目标
• god-tibo-imagen：用于独立的 AI 图像生成
• open-design：用于生成多种本地设计成果

最佳实践

1. 每次导出前都先验证 — slides-grab validate（Playwright） 会在导出 PDF／PNG／PPTX 前检查缺失的本地素材和不建议使用的路径形式。
2. 将素材保存在本地 — 将素材放在 <slides-dir>/assets/ 下，并引用 ./assets/<file>；已保存的幻灯片不接受远程图像 URL 和绝对路径。请先用 fetch-video 下载网络视频。
3. 始终使用 --slides-dir — 每个阶段都传入相同的幻灯片路径； 对于卡片新闻，每一步都要传入 --mode card-news（编辑器／验证）和 --slide-mode card-news（pdf/png）。
4. 将 PPTX/Figma 视为尽力而为 — convert 和 figma 具有 实验性／不稳定性；请预期版面会发生偏移，并需要手动清理。保真度优先时请使用 PDF （捕获），卡片新闻优先使用 PNG。
5. 优先采用 bbox 编辑循环 — 拖选一个区域，让 Agent 只重写该区域，而不是重新生成整张幻灯片；仅对极简单的文本进行手动编辑。
6. 留意图像后端的限制 — god-tibo-imagen 是不受支持的私有 Codex 后端，需要拥有图像权限的账户；请准备好 OPENAI_API_KEY 或 GOOGLE_API_KEY 作为备用方案，或者改用网页搜索并下载。

References

• Upstream repo: https://github.com/NomaDamas/slides-grab
• Live showcase gallery: https://nomadamas.github.io/slides-grab/
• Install guides: docs/installation/claude.md, docs/installation/codex.md
• Feature + command reference: references/features.md
• Installer script: scripts/install.sh
• Adjacent skills: ../drawio/SKILL.md, ../presentation-builder/SKILL.md, ../god-tibo-imagen/SKILL.md, ../open-design/SKILL.md
• License: MIT