dom-to-pptx
把任意 HTML 元素在浏览器端转换成完全可编辑的 PowerPoint 幻灯片，保留渐变、阴影、圆角图片与响应式布局，并支持原生动画与翻页过渡。
技能本身权限最小化：只生成HTML并调用npx导出工具，无敏感数据读取、无隐蔽外传，数据流（CDN脚本、Google Fonts、Unsplash图片）基本可见；但依赖未固定版本（@latest CDN与npx包），供应链与网络依赖未经披露完整，无回滚或确认机制，发布者身份未经验证，故不给高分。
文档内部自洽：安全模板、样式白名单、验证器与示例提示互相对齐，约束规则明确（px单位、禁transform等），失败模式有说明（CORS图片、字体嵌入）；但为静态审阅，无测试套件或CI证据覆盖关键路径，浏览器差异（Firefox CORS）仅口头提示，错误反馈质量未验证，封顶10以内。
场景清晰（生成高保真、可编辑的PPTX幻灯片），能力边界通过白名单明确声明，触发条件与name/description匹配度高；但无中文支持声明，核心功能依赖jsDelivr CDN、Google Fonts、Unsplash等海外服务，在中国大陆网络可达性存疑，需扣分。
信息架构分层良好（SKILL.md + 9个参考文件，渐进披露），示例与FAQ（SAMPLE_PROMPTS、模板）充足，已知限制（白名单❌项）披露详尽，MIT许可证明确；但版本管理依赖npm @latest而非固定版本，维护责任、更新路径与changelog未在技能文件中说明。
目标产出（可直接使用的.pptx）描述具体，工作流完整（生成→验证→导出），有边际价值（像素级还原加原生动画）；但静态审阅无法验证导出结果可直接可用，未观察到代表性产出验证，与替代方案（python-pptx、marp等）的对比收益缺乏证据，封顶7以内。
白名单文档声称源自dom-to-pptx源码并给出核对方法（rg搜索utils.js），有可审计的推导路径；但无测试复现、无第三方执行证据、无跨源佐证，效果声明多为作者断言，仅得基础分。
- 模板与脚本依赖未固定版本（cdn.jsdelivr.net 的 @latest 及 npx 未锁版），存在供应链与行为变更风险，建议锁定具体版本号。
- 核心功能依赖 jsDelivr、Google Fonts、Unsplash 等海外服务，中国大陆网络环境下字体加载、CDN脚本与图片可能失败，导出保真度会下降。
- 静态审阅未执行导出流程，'像素级还原'与动画导出的实际效果未经验证，重要用途前请自行小样测试。
- 发布者未经验证；示例建议使用互联网图片，请注意生成内容的版权与许可合规。
- 提示中称模板含'导出按钮+验证器'，但安全模板使用的是CLI导出，文档间存在轻微不一致，使用时以实际模板为准。
这个 Skill 能做什么，适合哪些场景？
dom-to-pptx 是一个客户端 JavaScript 库，通过遍历 DOM 并读取每个元素的计算样式（Flexbox/Grid 布局、复杂渐变、阴影等），将其数学映射为原生 PowerPoint 形状和文本框，而不是截图，因此导出的 .pptx 完全可编辑。v2.0.0 新增 20+ 元素动画和 70+ 幻灯片过渡，均通过 CSS 类声明并导出为原生 PowerPoint 动效。它还提供无头浏览器 CLI（dom-to-pptx-exporter）用于命令行导出，以及一个面向 AI 编码代理（Claude Code、Gemini CLI、Windsurf、Cursor）的技能安装器。该 Skill 附带完整的设计方法论（主题工程、布局规范、样式白名单、导出前校验器）和 14 个示例提示词。
1) 读取 HTML 文件中的 .slide 容器（默认选择器，可自定义），用无头浏览器测量每个元素最终的位置和计算样式；2) 将 Flexbox/Grid 布局转为绝对定位的原生 PPT 形状，渐变解析为矢量 SVG，CSS 阴影换算为 PowerPoint 极坐标阴影，圆角图片用 Canvas 蒙版去白边；3) 自动检测并嵌入网页字体，保证跨机器显示一致；4) 将 CSS 动画类（fade-in、fly-in 等）转换为原生 PowerPoint 动画，过渡类转换为幻灯片翻页效果；5) 通过 npx dom-to-pptx-exporter 从命令行输出 .pptx 文件，支持自定义页面尺寸、元数据和单页导出；6) Skill 本身指导 AI 生成'大气感'高级设计幻灯片 HTML，并运行 window.validateSlides() 做导出前校验。
- 需要从 Web 应用（React/Vue/原生 JS）一键导出高保真、可编辑 PPT 的前端开发者
- 使用 Claude Code / Cursor 等 AI 编码代理的工程师，希望用文字提示词生成设计水准远超常规 AI 幻灯片工具的演示文稿
- 需要批量或自动化生成 PPTX 的团队，可在 CI 或脚本中用 CLI 无头导出
- 投资人路演、产品发布、学术讲座等场景的创作者，需要 bento 网格、玻璃拟态等高级版式
- 希望幻灯片自带演讲者备注和点击式动画编排的演示者
这个 Skill 有哪些优点和局限？
- 导出结果完全可编辑（矢量形状+文本框），不像截图方案
- 客户端运行，无需服务器；npm 月下载量超 23 万
- v2 支持原生 PowerPoint 动画（20+）和翻页过渡（70+），纯 CSS 类声明
- 自动字体嵌入、渐变矢量解析、阴影极坐标换算、圆角图片无白边处理等细节还原度高
- 配套完整的设计规范、样式白名单、校验器和 14 个示例提示词，降低导出失败率
- 依赖网络：CDN 样式表、图片和字体需正确 CORS 配置，否则字体回退为 Arial、图片处理失败
- 布局测量方式决定它不读取 Flexbox/Grid 定义，极端动态布局可能有偏差
- 幻灯片翻页过渡在浏览器中无法预览（导出正确但调试不便）
- README 声称的'23 万+月下载'为宣传数据，仓库未提供测试套件说明；外部平台兼容性（各 AI 代理的实际效果）缺乏独立验证
- SVG 矢量导出需 svgAsVector: true 且需在 PowerPoint 中手动'转换为形状'
如何安装这个 Skill？
方式一（作为库）：npm install dom-to-pptx。方式二（作为 Skill）：运行 npx dom-to-pptx-skills，安装器会扫描代理目录（Claude Code、Gemini CLI、Windsurf、Cursor）并自动配置提示词模板；Skill 文件位于仓库的 skills/dom-to-pptx-skill/SKILL.md，参考文件在同目录 reference/ 下。仓库未说明手动复制 Skill 文件夹的具体步骤。
如何使用这个 Skill？
命令行导出整份演示：npx dom-to-pptx-exporter presentation.html -o presentation.pptx；单页导出：npx dom-to-pptx-exporter presentation.html -s "#slide-2" -o slide2-only.pptx。可选参数：--width/--height（英寸）、--no-pseudo（禁用伪元素）、--title/--author（元数据）。浏览器端用法：import { exportToPptx } from 'dom-to-pptx'，传入选择器或元素数组；动画通过 CSS 类声明（如 class="fade-in animate-duration-[1000]"），并用 domToPptx.applyBrowserAnimations() 在浏览器中预览。建议按 1920x1080 构建 HTML，库会自动缩放到 16:9。触发 AI 代理时可直接说：'帮我创建一份 Q3 路演 PPT，使用 dom-to-pptx 技能'。
这个 Skill 与同类方案有什么区别？
README 明确指出大多数 HTML-to-PPTX 库在遇到渐变、圆角等现代设计时会失败或直接截图（不可编辑），dom-to-pptx 以坐标抓取+样式引擎的方式区别于这些方案；底层构建于 PptxGenJS 之上并做了扩展。其他截图式导出工具（如 html2pptx 类库）是隐含的替代品，但源文未具体点名。