Slides Grab HTML 幻灯片技能
在 Claude Code / Codex 中生成语义化 HTML 幻灯片，配 AI 定制配图、设计审查关卡与 PDF/PPTX 导出。
证据显示较完善的安全设计：导出被 design-gate Proceed 回执强制拦截（有测试验证）、DESIGN.md 作为不可信数据用明确边界包裹并有对抗性注入测试、禁止远程 http(s) 图片 URL、资产路径本地化、凭据缺失时有明确回退并复用本地 codex 登录（已披露）。扣分点：默认复用 ~/.codex/auth. 的凭据路径仅靠文档披露、无最小权限声明的细粒度说明、回滚机制未描述。
SKILL.md 工作流自洽（Plan→Design→Export 与 CLI 命令一一对应），仓库含大量针对性测试（design-gate 拦截/过期/模板保真、codex-imagen 回退与错误包装、validate），失败反馈有明确信息（如 codex login 提示）。扣分点：静态评审无法执行复现，且证据中未见运行测试套件的 CI workflow，故按校准规则不超过 10。
适用场景、触发条件与非适用边界（明确指向 slides-grab-image 管线处理整页栅格）写得非常清楚，模式信号（mode: html）支持准确语义调用。扣分点：未声明中文支持；核心图像生成依赖 Codex/OpenAI/Google 等海外服务，对中国大陆网络可达性存在风险，仅靠 web 搜索下载回退部分缓解。
文档分层良好（SKILL.md + references + 相邻技能互链），示例与规则具体，MIT 许可明确，贡献与 PR 流程清晰。扣分点：技能本身无版本号/changelog/已知限制清单，维护责任与更新路径依赖仓库整体而非技能级声明。
管线覆盖生成、验证、编辑、导出全链路，输出为可直接使用的 HTML/PDF/PNG，超出手工或普通 AI 生成幻灯片的边际价值明显。扣分点：静态评审无法验证代表性产出可直接使用；PPTX/Figma 导出自认实验性且可能需大量手工清理；design-gate 自我报告机制增加流程成本。
关键声明有可审计一手材料：针对设计门、图像回退、验证器的提交测试（使用 mock provider，无需外部凭据）可独立复现。扣分点：静态读取无法确认测试在 CI 中实际通过，第三方执行佐证未见，故不超过 5。
- 默认图像生成复用本地 Codex 登录凭据（~/.codex/auth.），用户应知晓该凭据流向；若不需要，改用显式 provider 或回退方式。
- 图像生成依赖 OpenAI/Google/Codex 等海外服务，中国大陆网络环境下可能不可达或需代理，回退路径为 web 搜索加本地下载。
- PPTX（convert）与 Figma 导出为实验性/不稳定功能，输出可能需大量手工清理。
- design-gate 的 Pass A/B 报告由代理自产并自我记录，本质是软性质量门，不能完全等同于人工评审。
- 静态评审，未实际执行；置信度为低。
这个 Skill 能做什么，适合哪些场景？
slides-grab-html 是 slides-grab 单体仓库中的一个技能，提供以 HTML 为核心的幻灯片生成流程。幻灯片是真正的语义化 HTML 文件（slide-XX.html），文字可选择、可编辑、可搜索，配图由 AI 单独生成作为背景或主视觉素材。流程分三阶段：规划大纲、设计生成并经过设计审查关卡（design gate）、最后导出。该技能明确面向需要高可编辑性图表和可访问文字的演示文稿，而非像素级复刻既有模板。整个仓库以 MIT 协议开源，可用 npm 安装，同时支持 Claude Code 和 Codex。
读取主题、受众和风格要求，从内置的 95 种设计风格中挑选方案并生成幻灯片大纲；生成 slide-XX.html 语义化幻灯片，文字使用 p/h1-h6/ul 等语义标签；通过 slides-grab image 生成主视觉或点缀配图（默认使用本地 Codex ChatGPT 登录，无需单独 API 密钥，可选 OpenAI gpt-image-2 或 Google gemini-3-pro-image-preview）；用 Chart.js 绘制图表、tldraw 渲染架构图、Lucide 图标替代 emoji；运行 slides-grab validate 做 Playwright 校验、执行两阶段设计审查并记录 proceed 凭证；最后导出 PDF（capture/print 两种模式）、2160p 逐页 PNG、卡片式方图，以及实验性的 PPTX 和 Figma 导入用文件。
- 需要后续频繁手动或 AI 修改文字的技术分享幻灯片，HTML 文本可直接编辑和搜索
- 包含数据图表或系统架构图的演示文稿，Chart.js 图表与 tldraw 图形可本地渲染导出
- 想要从公司品牌色/字体生成新幻灯片但不需像素级复刻模板的团队，可用 slides-grab import-template 提取设计令牌
- 需要在 Instagram 发布 1:1 卡片图文的创作者，用 --slide-mode card-news 导出方图
- 没有独立图像 API 密钥但已登录 Codex 的用户，可直接复用本地登录生成配图
- 需要可访问、可选择文本的 PDF 演示材料，用 --mode print 导出可搜索文本 PDF
这个 Skill 有哪些优点和局限？
- 幻灯片为真 HTML 语义文本，可选择、可搜索、可访问，编辑体验远优于整页图片式幻灯片
- 内置 95 种设计风格加自定义方向，代理可即时选用无需配置文件
- 默认图像生成复用本地 Codex 登录，无需额外 API 密钥或费用
- 强制设计审查关卡与 validate 校验，导出前拦截质量问题
- 一次导出多格式：PDF、逐页 PNG、卡片方图，PWA/Figma 也在路上（实验性）
- MIT 协议开源，npm 可装，纯 JS 编辑器易于扩展
- 不适合需要像素级复刻既有模板的场景——技能本身声明这是 image-native 管线的用例
- PPTX 和 Figma 导出被官方标注为实验性/不稳定，预期需要手动清理
- 默认 codex-imagen 调用未获支持的私有 Codex 后端，可能随时失效，且并非所有 ChatGPT 账号有图像生成权限
- 依赖链较重：Node.js 20+、Playwright Chromium、slides-grab CLI，视频下载还需 yt-dlp
- 多处规则限制（禁止 CSS 渐变、正文字号 ≥14pt、禁用远程图片 URL 等）需要代理严格遵守
- 导出被 design gate 凭证阻断，未通过审查无法拿到 PDF/PPTX
如何安装这个 Skill？
安装整个 slides-grab 技能集合（本技能位于 skills/slides-grab-html/SKILL.md，是仓库捆绑的 7 个技能之一）：npm install slides-grab && npx playwright install chromium && npx slides-grab install-skills --target all --scope user。要求 Node.js >= 20。也可在 Claude Code 中粘贴：Read https://raw.githubusercontent.com/NomaDamas/slides-grab/main/docs/installation/claude.md and follow every step.（Codex 对应 codex.md）。使用图像生成默认 provider 前需执行一次 codex login。
如何使用这个 Skill？
生成幻灯片时分三阶段：1) 规划——告知代理主题、受众和语气，运行 slides-grab list-styles 挑选 2-3 个风格经确认后写入 slide-outline.md，记录 mode: html；2) 设计——代理生成语义化 slide-XX.html（720pt × 405pt），需要配图时运行 slides-grab image --prompt "<仅描述视觉氛围的提示词>" --slides-dir <路径>，然后运行 slides-grab validate 并通过两阶段设计审查（Pass A 系统契约 + Pass B 受众影响），记录 proceed 凭证；3) 导出——运行 slides-grab pdf / png，或实验性的 convert / figma。注意：导出前必须有新鲜的 design gate proceed 凭证。
这个 Skill 与同类方案有什么区别？
仓库自述定位为「Claude Design 的开源替代品」，比通用「让 AI 生成幻灯片 HTML」工具多出可视化框选编辑与原位迭代能力；与同仓库的 slides-grab-image（整页图片管线）相比，本技能牺牲像素级视觉一致性，换取可编辑、可搜索、可访问的文本。