HTML演示幻灯片制作器

从模板到代码：追求演示视觉的完全控制

传统的演示软件（如 PowerPoint, Keynote）提供了便捷的模板和拖拽界面，但在实现高度定制化、响应式布局或精确的视觉还原时，往往受限于预设的组件与格式。当你需要创建一个视觉驱动、细节考究且在不同设备上都能完美呈现的幻灯片时，使用代码构建是更直接的路径。

html-ppt-skill 的核心就是将幻灯片完全视为一个网页项目，用 HTML 和 CSS 从零构建每一帧。这让你摆脱了模板的束缚，获得了像素级的控制力，能够实现复杂的交互、流畅的动画以及任意独特的版式。

核心实现与技术规范

该技能定义了一套严格的工程规范，以确保生成的幻灯片在功能和视觉上都能达标。

• 精确的 16:9 比例与响应式：每页幻灯片（.slide 容器）的高度被强制设置为 56.25vw（即 9/16 * 100vw），确保在任何分辨率的屏幕上，比例始终精确为 16:9。所有尺寸单位（字体、间距）使用 vw 或百分比，实现完全的响应式缩放。
• 内置的导航与导出逻辑：每个文件必须包含标准化的 JavaScript，用于处理键盘方向键翻页和触控滑动。通过 scroll-snap CSS 属性实现平滑的页面吸附效果。用户可直接使用浏览器 Ctrl+P 功能“打印为 PDF”，每张幻灯片会自动分页。
• 设计系统驱动：技能关联了一个详细的设计规范库（references/design-system.md）。它规定了中英文字体（例如中文展示用 ZCOOL XiaoWei，正文用 Noto Sans SC，并明确禁用 Arial 等通用字体）以及可复用的配色主题，确保输出的专业美感与一致性。
• 结构化的工作流：从理解需求、规划页面类型（如封面、双栏、数据页、时间线），到逐页编码和最终的严格自检清单，提供了一个清晰的产出流程。最终的 HTML 文件应输出到指定目录并通过 present_files 函数展示。

适用场景与注意事项

这种“代码优先”的幻灯片制作方式并非没有代价。

它特别适合：

• 需要极高视觉自由度和品牌一致性的产品发布会、设计提案。
• 包含大量数据可视化或复杂交互的技术演讲。
• 演示内容本身即是网页原型或需要嵌入动态 Web 组件的场景。

你需要知晓：

• 学习曲线：你需要熟悉 HTML, CSS，特别是现代布局技术（如 Grid, Flexbox）和单位（如 vw）。不适合只想快速套模板的用户。
• 内容更新：修改文案或图片需要直接编辑代码，而非在可视化界面中操作。
• 维护成本：自定义的样式和布局需要你自己维护，尤其是跨浏览器兼容性。

总之，它为开发者和设计师提供了一个将演示文稿完全置于自己掌控之下的强大工具，但需要你投入相应的技术能力来交换这种灵活性。