揭秘slides-grab design-gate：双评审对抗式Visual QA如何终结AI幻灯片的塑料味-平芜编程栈

【免费下载链接】slides-grab

Best 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是一个开源的 AI 幻灯片生成框架，其design-gate（设计门控）机制用一套"双评审对抗式 Visual QA"流程，在导出前拦住 AI 生成的"AI 味"排版。它让两个独立的 AI 评审（Pass A 与 Pass B）并行挑刺，再合成为 Proceed / Revise / Rethink 三种判决，并靠 SHA-256 指纹防"评审过期"——本文将完整拆解这套门控的工作原理。

design-gate 是什么：技术校验之后的"品味关卡"

slides-grab 的工作流分三阶段：Plan（大纲）→ Design（生成 HTML 幻灯片）→ Export（导出 PDF/PPTX）。在 Design 与 Export 之间夹着两道关卡：

slides-grab validate—— 技术校验：资源路径、尺寸、溢出等"机器问题"；
slides-grab design-gate—— 设计门控：证明幻灯片"真的设计得好"，而不只是"HTML 没报错"。

官方规范有句话很直白：门控产出的是带证据的判决，而不是观点。"看起来不错"不算通过；"我对照这些标准逐张检查了这些幻灯片，结果如下"才算通过。

双评审机制：两个"对手"如何对抗式挑刺

这是整套机制最精髓的设计：评审者必须独立于写幻灯片的那个 agent，否则"自己检查自己"毫无意义。门控派发两个只读（read-only）评审，各自带着不同章程：

评审	角色定位	负责的检查项
Pass A：System Contract / Constraint Integrity	契约守护者——证明 deck "被允许"且可追溯	系统一致性、颜色纪律、AI slop 套路、内容纪律
Pass B：Audience Impact / Expressive Readability	观众守护者——打开每张渲染 PNG，判断观众实际看到什么	构图与层级、字体可读性、CJK 断词完整性、Review Litmus（3–5 秒读懂）

官方定义这两个角色为"辩证的关系"：契约没有冲击力是无效的，冲击力没有契约则是跑偏。

评审必须基于"渲染证据"，不能读代码猜

关键约束：门控必须针对真实渲染出的 PNG，而不是只看 HTML 源码。读 HTML 看不出来韩文断行、文字裁切、元素重叠、视觉锚点缺失这些问题。流程是：

slides-grab png --slides-dir <path> --output-dir <path>/.slides-grab/gate-preview --resolution 1080p

每个评审都必须亲自打开这些 PNG（要求使用具备视觉能力的模型），Pass B 甚至永远不允许仅凭 HTML 通过。如果运行时没有可用的视觉评审，门控不允许宣布 Proceed——"视觉检查未完成"不等于"通过"。

四级严重度：AI 味如何被精确分级

每个发现（finding）必须且只能被打上一个严重度标签，严重度直接决定后续动作：

严重度	定义	后果
Critical	破坏设计完整性：文字不可读、色板违规、AI slop 套路当主视觉、关键页无视觉锚点	硬阻塞导出，必须修复
Major	显著降低质量但还能用：层级弱、跨页系统不一致	评审/交付前应当修复
Minor	小瑕疵：间距、对齐小问题	顺手修，否则记入 design debt
Note	观察或想法	记录即可

其中针对"AI 味"的清单尤为硬核：禁止整页渐变背景当主表面、禁止圆角卡片+左侧色条的默认容器、禁止 Inter/Roboto 等通用字体栈、禁止 emoji 当默认图标、禁止 3×2 功能卡片网格作为万金油答案……把 AI slop 套路当主视觉处理 = Critical。

Pass A 与 Pass B 的分工：规则端 vs 副作用端

门控还内置了一张"Rule → side effect → Visual QA 补偿"矩阵，例如word-break: keep-all能防止韩文词中断行，但会制造"参差的断行"这种新副作用。于是 Pass A 负责验证机械规则是否被一致执行，Pass B 负责在渲染图上捕捉规则带来的副作用并提出补偿方案（如插入<br>、text-wrap: balance、收窄max-width）。规则本身防缺陷，视觉 QA 补规则之过——两层缺一不可。

如何运行 design-gate：一条命令记录判决

两个评审都产出结构化报告（含VERDICT: PASS、置信度、渲染 PNG 证据文件名、每张幻灯片的 SHA-256 指纹、发现表格）后，执行：

slides-grab design-gate --slides-dir <path> --verdict proceed \ --pass-a-report <pass-a.md> --pass-b-report <pass-b.md>

CLI 会先跑validate（技术校验必须全绿），再渲染新一轮 PNG 证据，然后写入design-gate.json状态与design-gate-report.md报告。判决为proceed之外时进程以非零退出码结束。

三种判决的含义：

Proceed：零未解决 Critical，deck 可进入用户评审与导出；
Revise：存在 Critical，修复后整轮重跑门控（validate → 新渲染 → 双评审）；
Rethink：设计方向本身失败，停止打补丁，重写视觉系统声明。

防"评审重放"：指纹机制如何让旧报告作废

slides-grab design-gate对 Proceed 报告的校验由 CLI 强制（源码：src/design-gate-report.js），弱报告会被直接拒绝。例如写一句"Pass A says Proceed"就想放行，会因缺少指纹、证据引用、发现表格而被拒（对应测试用例见 tests/design-gate/design-gate.test.js）。

更进一步，导出前的assertDesignGateReady（src/design-gate-state.js）会比对四类 SHA-256 指纹：幻灯片源文件、本地图片资产、两份评审报告、渲染 PNG。任何一类发生变化，收据立即过期：

export blocked: design gate is stale because slides changed: slide-01.html.

这保证了你不能在评审通过后偷偷改一张幻灯片再导出——门控记录的是"被评审的那个状态"，而非"任意状态"。

门控之后：哪些导出被拦截

在 CLI 入口（bin/ppt-agent.js）中，pdf、convert、figma三个导出命令都会先调用ensureDesignGateForExport。缺少收据、判决不是 proceed、报告校验未过、或指纹过期，导出直接失败。也就是说：没有新鲜的 Proceed 收据，就出不了一张 PDF。

结语：给新手的关键文件地图

想深入这套机制，从这几个文件读起：

完整门控规范（七项检查、双评审章程、补偿矩阵）：skills/slides-grab-design/references/design-gate.md
门控 CLI 实现：scripts/design-gate.js
报告结构与指纹校验：src/design-gate-report.js、src/design-gate-state.js
Claude Code / Codex 的评审 agent 配置：runtimes/claude-code/agents/design-critic-agent.md、runtimes/codex/agents/slides-grab-design-critic.md
门控的端到端测试（含 8 种拒绝场景）：tests/design-gate/design-gate.test.js

一句话总结 design-gate 的设计哲学：不信任任何"我觉得好看"——用渲染证据、对抗式双评审、严重度分级和指纹收据，把"AI 味"挡在导出之前。