html-ppt-skill

核心用法

HTML PPT Skill 是一套以网页技术替代 Microsoft PowerPoint 的幻灯片制作方案。它通过纯 HTML/CSS/JavaScript 实现 16:9 比例的演示文稿，利用 CSS scroll-snap 模拟翻页效果，支持键盘方向键、滚轮导航，并能通过浏览器「打印 → 另存为 PDF」功能直接导出标准 PDF。

显著优点

1. 视觉表现力强：摆脱传统 PPT 模板限制，可自由运用 CSS 动画、渐变、Grid/Flex 布局，轻松实现杂志级排版
2. 响应式缩放：所有尺寸基于 vw 单位，自动适配任意屏幕分辨率，投影/网页/移动端均可完美呈现
3. 零软件依赖：仅需浏览器即可播放，无需安装 Office 或 Keynote，跨平台兼容性极佳
4. 版本控制友好：纯文本代码天然适合 Git 管理，协作修改与历史回溯远优于二进制 .pptx 文件
5. 打印精确对齐：通过 @media print 媒体查询，每页严格对应 A4 横向 297mm × 167mm，导出 PDF 分页准确

潜在局限

• 上手门槛：需具备基础 HTML/CSS 知识，非技术用户编辑困难
• 复杂动画受限：缺乏 PPT 的「平滑切换」「缩放定位」等高级动画引擎
• 离线字体依赖：Google Fonts 需网络加载，内网环境需手动托管字体文件
• 打印一致性：不同浏览器打印引擎存在细微差异，建议统一使用 Chrome

适合人群

• 技术演讲者、开发者、设计师（追求视觉差异化）
• 需要版本控制或自动化生成幻灯片的内容团队
• 希望「一次编写，多端播放」的轻量演示场景

常规风险

• 动态内容未做 XSS 过滤时可能引入脚本注入（用户输入内容需谨慎处理）
• 大量高分辨率图片未优化可能导致页面卡顿
• 浏览器兼容性问题：旧版 Safari/Firefox 对 scroll-snap 支持不完整

核心用法

html-ppt 是一个纯指导型代码生成 Skill，旨在替代传统 PowerPoint 工具。用户通过自然语言描述 PPT 需求后，系统会输出完整的单文件 HTML 代码，包含 CSS 样式、JavaScript 交互逻辑和响应式布局。生成的幻灯片严格遵循 16:9 比例（100vw × 56.25vw），利用 CSS scroll-snap 实现平滑翻页，支持键盘方向键、滚轮操作及触控滑动。每份输出均包含打印优化样式，用户可通过浏览器 Ctrl+P 直接导出为 PDF，无需额外软件。

技术实现亮点

该 Skill 建立了一套完整的设计系统：强制使用 vw 单位确保跨设备比例一致；集成 Google Fonts 开源字体库（如 ZCOOL XiaoWei、Noto Serif SC）提升视觉质感；内置 IntersectionObserver 实现页码同步；提供封面、目录、双栏、全图、时间线等 8 种标准页面模板。开发者只需按规范填入内容，即可生成媲美专业设计软件的视觉效果。

显著优点

跨平台零依赖：生成的 HTML 文件可在任何现代浏览器打开，无需安装 Office 或设计软件，彻底告别格式兼容性问题。输出质量高：通过 CSS Grid/Flexbox 布局与精心调校的排版系统，视觉效果远超传统 PPT 工具默认模板。交互体验流畅：scroll-snap 带来的物理手感翻页、键盘快捷键支持、实时页码指示，让演示过程更具科技感。版本控制友好：纯文本代码易于 Git 管理，团队协作时可像审查代码一样审查幻灯片变更。开源可定制：基于 MIT-0 许可，用户可自由修改样式变量、添加动画效果或扩展页面类型。

潜在缺点与局限性

技术门槛要求：最终用户需具备基础 HTML/CSS 知识才能深度定制，非技术人员修改内容存在学习成本。离线功能受限：默认依赖 Google Fonts CDN，离线环境需手动下载字体文件并修改引用路径。复杂动画缺失：相比 Keynote 或 PPT 的入场动画系统，当前版本仅支持基础滚动交互，高级动画需自行编写 CSS/JS。打印兼容性：虽已通过 @media print 优化，但不同浏览器 PDF 渲染仍存在细微差异，正式场合建议提前测试。无实时协作：不同于 Google Slides 或腾讯文档，该方案不支持多人实时编辑，需依赖 Git 等外部工具协作。

适合的目标群体

技术型演讲者：开发者大会、技术分享、产品路演等场景，演讲者本身就是技术背景，乐于展示"用代码做 PPT"的态度。设计敏感型用户：对默认 PPT 模板审美疲劳，追求独特视觉风格，愿意投入时间打磨排版的创意工作者。极简工具倡导者：希望减少软件安装、追求"一个文件搞定全部"的极客群体，尤其适用于跨设备快速演示。教育机构与开源社区：课件制作、开源项目文档、技术工作坊等需要低成本、高可移植性解决方案的场景。

使用风险与注意事项

性能风险：大量高清图片或复杂 CSS 动画可能导致低端设备卡顿，建议控制单页资源大小。外部依赖稳定性：Google Fonts 服务偶发区域性访问问题，关键商务场合建议本地字体备份。安全风险：虽然 Skill 本身无恶意代码，但生成后若手动添加第三方脚本可能引入隐患，建议审查后再分享。版权合规：使用的开源字体需遵守 SIL Open Font License，商用时需确认具体字体的授权条款。浏览器兼容性：scroll-snap 特性在旧版 Safari 和 IE 中支持不佳，面向多元化受众时需准备降级方案。