裁剪与编辑 — slides-grab 如何用 AI 简化演示文稿布局
创建演示文稿对大多数工程师来说是一个传统难题。当您需要快速整理一份推介文稿、聚会演讲或季度报告时,通常只有两个选择:要么与 PowerPoint 或 Figma 这类笨重的编辑器搏斗,要么让 LLM 生成带幻灯片的 HTML 代码。
第二条路看起来很诱人,但很快就会在日常任务中陷入死胡同。如果您需要更改标题字体或将图片向左移动几个像素,要么得手动查找正确的 <div>,要么再写一条冗长的提示词。结果,神经网络往往会重写整个幻灯片,破坏相邻区块的布局。
slides-grab 项目提供了另一种解决方案。这是一个本地工具,结合了浏览器中的可视化编辑器、布局验证器和用于连接 AI 代理的包装器。
这个项目是关于什么的
slides-grab 的作者从一个简单的事实出发:语言模型非常擅长布局纯 HTML 和 CSS。主要问题不在于代码生成,而在于传递上下文。如何向模型解释您不喜欢幻灯片上的哪个元素?
该工具通过区域选择解决了这个问题。您启动本地编辑器,在浏览器中直接看到幻灯片,然后用鼠标选择所需的区块。编辑器为 AI 代理(如 Claude Code 或 OpenAI Codex)形成精确的上下文。您写道:“让这个区块颜色更深一些,并添加内边距”,代理就只会更改相应的 HTML 代码片段。

像拼写错误或文本大小这样的细微编辑可以直接在浏览器中手动完成。您不需要在 IDE 中来回移动标签。
幻灯片工作是如何组织的
所有幻灯片都作为单独的文件存储在工作目录中:slide-01.html、slide-02.html 等。媒体文件位于旁边的 assets/ 文件夹中。您不受制于供应商格式或封闭的云服务。如果这个工具明天停止维护,您仍然拥有常规的 Web 代码。
以下是使用该项目的主要工作流程:
- 结构和样式生成。代理创建演示文稿大纲并应用其中一个现成的主题。该工具附带 95 个设计系统目录。您可以通过本地图库查看器
slides-grab preview-styles选择合适的主题。 - 可视化编辑。您通过
slides-grab edit打开界面,手动修正拼写错误,或让代理更改选定的特定片段。 - 质量检查。
slides-grab validate命令通过 Playwright 在后台启动 Chromium。检查器会检查损坏的图片路径、外部链接或错误的 CSS 属性。 - 导出。结果可以编译为 PDF、图片或 PowerPoint 演示文稿。
本地资源和媒体处理
通常,创建演示文稿的瓶颈在于寻找合适的插图和图表。在 slides-grab 中,这些场景可以直接从控制台处理。
对于图片生成,该工具默认使用 codex-imagen 模块。它利用 Codex CLI 的本地授权,因此您甚至不需要指定单独的 OpenAI API 密钥。只需在终端中运行命令:
slides-grab image --slides-dir decks/my-deck --prompt "Минималистичный векторный график роста метрик"
生成的文件直接保存到 assets/ 文件夹,控制台返回相对路径,便于插入 HTML。如果您需要第三方提供商,可以切换到标准 OpenAI API 或 Google Gemini。
视频和图表的情况类似:
slides-grab fetch-video命令使用yt-dlp从 YouTube 下载视频并本地保存。slides-grab tldraw命令将图表从.tldr格式转换为干净的 SVG 图片,适配幻灯片尺寸。
底层实现和导出细节
该工具使用 JavaScript 编写,运行在 Node.js 20 及以上版本。服务器端启动本地服务器供编辑器使用,并通过 Playwright 与浏览器通信。
导入他人的演示文稿实现得很有趣。如果您有现成的企业 PPTX 文件或品牌指南,slides-grab import-template 命令会将其分解为颜色、字体和网格,形成 JSON 配置。之后,AI 代理使用这些数据作为新幻灯片的参考。
至于导出,主要且最可靠的选项是 PDF 或 PNG。slides-grab pdf 命令默认将帧栅格化为高分辨率 4K,精确保留原始布局到像素级别。对于可搜索文本的 PDF,有 --mode print 标志。
但是,您应该谨慎对待 PPTX 和 Figma 的导出。在文档中,开发者诚实地将 PowerPoint 转换标记为实验性功能。当选择文本引擎(--engine text)时,该工具尝试将 DOM 树转换为原生 PowerPoint 元素,但在复杂的 CSS 网格上,布局可能会被破坏。
如何尝试使用
安装只需通过 npm 安装包并为 Playwright 添加 Chromium 浏览器:
npm install slides-grab
npx playwright install chromium
npx slides-grab install-skills --target all --scope user
install-skills 命令将工具的功能注册到您本地的 Claude Code 或 Codex 代理。要开发自己的幻灯片集,您不需要克隆仓库。
谁会发现这个项目有用
slides-grab 非常适合那些厌倦了在图形编辑器中对齐区块的开发者、创始人和技术负责人。
该工具的主要优势是自主性和使用 LLM 时的精确上下文。您将整个演示文稿以可读的 HTML 形式保存在 Git 中,不依赖第三方 SaaS 平台,可以通过语音或鼠标轻松进行编辑。
缺点是 PPTX 导出不完善,以及内置图片生成依赖于非公开的 Codex 端点,这些端点可能会随时间变化。尽管如此,对于组装整洁的幻灯片并随后导出为 PDF,该项目看起来是一个非常实用的解决方案。
相关项目