【免费下载链接】slides-grabBest harness editor linter for generating slides in Claude Code / Codex - Claude Design Open Source Alternative项目地址https://gitcode.com/gh_mirrors/sl/slides-grab点击查看免费下载slides-grab 是一个开源的Agent-First 演示框架它让 Claude Code 与 Codex 这类 AI 编码代理直接以HTML/CSS 作为幻灯片的设计语言配合浏览器可视化编辑器拖选区域即可让 Agent 就地改写最终一键导出 PDF、PNG 或实验性 PPTX。它不发明任何私有 DSL而是相信HTML 就是 AI 最擅长写的设计语言。本文带你逐层拆解它的三阶段流水线、双运行时适配层与质量门禁架构。为什么演示工具需要Agent-First设计市面上大多数 AI 幻灯片工具都是生成即结束AI 出一版不满意就重新生成一版。slides-grab 补齐的正是生成之后的环节官方将其概括为四个步骤阶段做什么谁来做Plan从主题/资料生成结构化大纲slide-outline.mdAgentDesign每一页生成为独立的自包含 HTML 文件AgentEdit浏览器编辑器bbox 拖选、直接改字、Agent 重写选中区域你 AgentExport一条命令导出 PDF / PNG / PPTX / FigmaCLI它的核心差异化一句话你可以像用激光笔一样指着幻灯片说把这块改大一点——因为每一页都是真实 HTMLAI Agent 对 HTML 的理解能力远超任何私有格式。核心哲学HTML 就是设计语言项目在 AGENTS.md 中把这一理念写成了第一原则Core philosophy: HTML is the design language.Agents write HTML/CSS directly. The framework provides templates, validation, and conversion tools — not abstractions over HTML.落到工程上这套设计语言有几条硬约束固定画布720pt × 405pt16:9见 src/slide-mode.cjs语义化文本文字只能放在p、h1~h6、ul、ol、li中禁止直接塞进div/span——这是后续 PPTX 文本抽取能尽力可读的前提资产契约图片/视频必须落在slides-dir/assets/下并以./assets/file相对引用禁止远端 URL模板即起点templates/ 下内置 cover、content、chart、timeline、statistics 等 13 个 HTML 模板例如 templates/cover.html 就展示了标准画布与字体设置风格方面内置了95 套设计样式slides-grab list-styles可查preview-styles可视化预览并支持自定义。showcase 目录下的真实成品直观展示了它的表现力跨度——从赛博朋克霓虹到学术论文风三阶段流水线由 Skill 系统驱动的 Agent 工作流slides-grab 把怎么做幻灯片的知识封装为7 个可安装的 Agent SkillMarkdown 提示词 参考资料由 scripts/install-runtime.js 一键安装到 Claude Code 或 Codex 的技能目录slides-grab # 路由决定走 HTML 流水线还是 image-native 流水线 slides-grab-plan # Stage 1大纲规划 slides-grab-design # Stage 2HTML 设计 设计门禁 slides-grab-export # Stage 3导出转换 slides-grab-html / slides-grab-image / slides-grab-card-news # 三条变体流水线入口路由器是 skills/slides-grab/SKILL.md它根据用户意图要可编辑文本还是要对齐现有模板的视觉把请求分派到HTML 语义流水线或image-native 位图流水线两条流水线共享 Stage 1Plan与 Stage 3Export只有 Stage 2 的产出方式不同。这套设计的关键在于约束内建Skill 明确要求阶段顺序不可乱、每阶段需用户显式批准、导出前必须通过 design gateAgent 的自由发挥被框在了一个可控流程里。双运行时打通Claude Code 与 Codex 如何共用一套编辑器这是 slides-grab 架构中最巧妙的部分。浏览器编辑器需要能唤起两种本地 Agent CLI且模型列表在 Node 端服务端和浏览器端必须一致。1单一事实来源的模型注册表src/editor/js/model-registry.js 同时被 Node 代码scripts/editor-server.js和浏览器代码src/editor/js/editor-state.js导入export const CODEX_MODELS [gpt-5.6-sol, ...]; export const CLAUDE_MODELS [claude-opus-4-8, claude-sonnet-4-6];注释里写得很直白新加模型只需在两个数组各追加一项现有测试会自动验证分发正确性——新增 Agent 就是加一行字符串的事。2子进程编辑引擎当你在编辑器里点击Run Edit服务端通过 src/editor/edit-subprocess.js 的runEditSubprocess()以子进程方式拉起codex或claudeCLI并内建了生产级保护10 分钟超时自动SIGTERM→SIGKILL兜底、AbortSignal 中断传播、stdout/stderr 流式回传SSE 推给前端。3提示词即契约发给 Agent 的编辑规则被单独抽成 src/editor/editor-codex-prompt.md核心原则是用户的编辑请求是最高优先级规则只服务于它而不覆盖它并附带编辑工作流读文件 → 改选中区域 → 跑slides-grab validate→ 失败则修复重跑。4运行时适配器设计评审这类子任务同样双端适配runtimes/codex/agents/slides-grab-design-critic.md 与 runtimes/claude-code/agents/design-critic-agent.md 是同一套门禁逻辑在两个运行时上的薄封装。安装指南分别见 docs/installation/claude.md 和 docs/installation/codex.md。可视化编辑器拖一个框Agent 就地改写编辑器由约 5000 行纯 JavaScript 模块化前端组成src/editor/js/下 12 个模块无框架依赖README 称加新功能只需改 JS。关键机制bbox 选区src/editor/js/editor-bbox.js 先在预览中缩放幻灯片再把你在缩略画布上拖出的红框反向缩放回原始坐标scaleSelectionToScreenshotAgent 收到的永远是精确的原始位置信息标注截图选中区域会渲染成带标注的截图随请求一起发给 Agent——对视觉类指令把这个图表调暗至关重要直接编辑editor-direct-edit.js支持文字、字号、加粗这类小改动的本地直改不打扰 Agent图片原生模式edit-image子模式可整页重绘 image-native 幻灯片编辑器服务默认监听3456端口见 scripts/editor-server.js支持presentation与card-news1:1 方形卡片两种画布模式。双重质量门禁validate design-gateslides-grab 把正确拆成了两层这正是它区别于裸生成工具的地方第一层技术门禁slides-grab validatesrc/validation/core.js 基于 Playwright 真实渲染每一页检查画布溢出、缺失的本地资产、空 canvas 图表等机械性错误——证明HTML 在工程上是健全的。第二层设计门禁slides-grab design-gateskills/slides-grab-design/references/design-gate.md 定义了一个双裁判对抗式的视觉 QA 循环渲染 PNG 证据 → Pass A系统契约/约束完整性与 Pass B受众影响/表达可读性并行评审 → 合成Proceed / Revise / Rethink裁决 → 不通过则修复、重渲染、再评审循环直到通过。工程上还有防作弊细节src/design-gate-state.js 会对全部slide-*.html与本地资产计算SHA-256 指纹任何文件被改动过旧的proceed收据立即失效——pdf/convert/figma命令会直接拒绝执行。看起来不错不是通过条件我对照这些标准检查了这些幻灯片才是。导出层一条命令多种格式slides-grab pdf --slides-dir decks/my-deck --output my.pdf # 默认 capture 模式逐页光栅化视觉保真 slides-grab pdf --mode print # 可搜索/可选中文字的 PDF slides-grab png --resolution 2160p # 逐页 4K PNG默认 2160p slides-grab convert --engine raster|text # 实验性 PPTX位图 / 尽力可编辑文本 slides-grab figma # 实验性 Figma Slides 可导入 PPTXPDF/PNG 是最稳妥的主导出路径默认 2160p 光栅输出PPTX 由 src/html2pptx.cjs约 1256 行承担 DOM→幻灯片对象的映射--engine text依赖前面提到的语义文本标签做最佳努力抽取官方对convert/figma明确标注experimental / unstable建议当作最佳努力输出并留出手工微调余地项目结构速查路径职责skills/7 个可安装 Agent Skill 及其 references 参考资料src/editor/可视化编辑器浏览器 JS 模块 编辑服务端逻辑scripts/CLI 脚本editor-server、validate、html2pdf、html2pptx、design-gate、install-runtime 等src/设计样式数据、导出转换运行时、图像契约、门禁状态templates/13 个 HTML 幻灯片模板 95 套设计样式runtimes/Claude Code / Codex 双端 Agent 适配器showcase/18 套真实演示稿静态画廊可逐页翻阅总结slides-grab 的架构精髓可以浓缩为三个决定不造轮子造语言——以 HTML/CSS 这种 AI 天生最擅长的格式作为幻灯片载体框架只提供模板、验证与转换不做HTML 之上的抽象把 Agent 能力产品化——用 Skill 系统约束工作流、用子进程封装打通 Claude Code 与 Codex 双运行时、用浏览器编辑器把视觉意图翻译成 Agent 可执行的坐标上下文用门禁换取质量——Playwright 技术验证 双裁判设计门禁 SHA-256 指纹防伪让AI 生成的幻灯片具备了可审计、可追溯的交付标准。对新手来说上手路径也非常轻npm install slides-grabnpx slides-grab install-skills --target all --scope user然后把安装指引丢给 Claude Code 或 Codex即可进入 Plan → Design → Edit → Export 的完整循环。赞分享【免费下载链接】slides-grabBest harness editor linter for generating slides in Claude Code / Codex - Claude Design Open Source Alternative项目地址https://gitcode.com/gh_mirrors/sl/slides-grab点击查看免费下载相关推荐fzf 模糊查找实战3 个键位绑定让你在列表里把活干完fzf 模糊查找实战3 个键位绑定让你在列表里把活干完 周五下午六点要合代码想抽查 src 下 20 个 .go 文件的行数敲 wc、复制文件名、切窗口CLIAtomic Agents 架构深度解析Schema-first 的原子化 AI Agent 框架设计与运行原理Atomic Agents 架构深度解析Schema first 的原子化 AI Agent 框架设计与运行原理 本篇文章基于仓库架构文档 .claude/AI AgentAgent 框架MCP 服务后端如何少记快捷键搞定 macOS 窗口管理:Loop 免费开源工具上手笔记如何少记快捷键搞定 macOS 窗口管理:Loop 免费开源工具上手笔记 窗口拖到第三次:一个典型的调试场景 调试的时候,编辑器想占左半边,终端想贴右边,文档页桌面应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
