Azdmjiny/html-ppt-creator

HTML PPT Creator

创建一个清晰、视觉上有意图的 HTML 幻灯片组，可直接在浏览器中打开。默认生成一个自包含的 presentation.html 文件，包含内联的 CSS 和 JavaScript，无需构建步骤。

工作流程

1. 检查用户的简介、源文本、数据、品牌资产以及请求的输出位置。
2. 为缺失的细节推断合理的默认值。仅当受众、目的、语言、幻灯片数量或视觉方向会实质性改变结果且无法推断时，才进行询问。
3. 设计一个简洁的幻灯片序列。每张幻灯片只承担一个任务并有一个有用的标题；在编码前移除重复内容。
4. 选择适合主题的视觉系统。为颜色、字体、间距、边框、阴影和动效定义 CSS 自定义属性，并一致地使用它们。
5. 在从头开始时，复制 assets/starter.html 作为基础。替换所有示例幻灯片和主题标记，而不是将示例样式视为强制主题。
6. 实现完整的幻灯片组。使用语义化的 <section class="slide"> 元素，一个固定 16:9 的比例并自适应视口的舞台，以及键盘/点击/触摸导航。
7. 在最终 QA 前阅读 references/QUALITY.md。当浏览器控制可用时，在浏览器中打开幻灯片组，检查每一张幻灯片，修复溢出和交互缺陷，然后交付 HTML 文件。

除非用户要求迭代工作流，否则不要引入规划检查点或要求逐章节批准。

输出契约

• 默认生成 presentation.html。仅当用户明确要求或幻灯片组确实需要可复用的本地资源或大量应用程序逻辑时，才使用多文件文件夹。
• 保持默认幻灯片组离线可用：内联 CSS 和 JavaScript；使用本地或嵌入的图像和字体。除非用户同意，否则避免依赖 CDN。
• 保留提供的事实、措辞约束、引用、徽标和品牌规则。切勿编造统计数据或来源。
• 包含标题幻灯片、连贯的主题以及合适的结束幻灯片（如果适当）；如果请求的格式另有规定，则不要强制添加。
• 支持 ArrowLeft、ArrowRight、Space、PageUp、PageDown、Home 和 End；支持点击/触摸导航和触控滑动。使用 F 切换全屏。
• 显示微妙的幻灯片计数器或进度指示器。保持控件视觉上安静且对演示安全。
• 添加打印 CSS，使每张幻灯片打印为一页横向页面，并隐藏装饰性控件。
• 尊重 prefers-reduced-motion。谨慎使用动效，切勿依赖动画来揭示重要信息。
• 除非明确要求，否则不要添加演讲者备注、旁白脚本、音频、自动播放、录制辅助、视频时间线或 TTS 基础设施。

内容与视觉规则

• 每张幻灯片只陈述一个主要观点。优先使用 3-6 个简洁的支持项，而不是段落。
• 根据关系选择合适的视觉形式：比较、流程、时间线、层级、指标、引用、图像、图表或示意图。
• 优先使用真实内容、简单的 SVG、CSS 图表和有意义的图表，而不是装饰性填充。
• 保持强烈的层次结构和充足的留白。设计时应考虑远距离观看，而非文档阅读。
• 在幻灯片组中保持连贯的主题，同时允许布局变化。避免使每张幻灯片都是相同的圆角卡片网格。
• 避免通用的 AI 样式：无意义的紫色渐变、过度发光、随机玻璃面板、表情符号装饰、虚假的应用界面以及无数据支持的装饰性图表。
• 确保文本对比度、可见的焦点状态、有用的 alt 文本以及合理的 DOM 阅读顺序。
• 如果内容放不下，缩短它或拆分幻灯片。不要缩小正文文本直到它勉强能放下。

编辑现有幻灯片组

保留当前的架构和设计语言，除非用户要求重新设计。进行最小的连贯更改，然后重新检查导航、幻灯片编号、溢出、打印布局和响应式缩放。

完成检查

在报告完成之前：

1. 验证请求的消息、数字、引用和幻灯片顺序。
2. 测试第一张/最后一张幻灯片的边界以及每种导航方式。
3. 在 16:9 的桌面尺寸和至少一个较小的视口下检查所有幻灯片。
4. 检查文本被裁剪、重叠、字体过小、媒体损坏、控制台错误以及意外滚动。
5. 确认文件无需构建步骤即可打开，并且除非外部依赖已获批准，否则仍可离线使用。
6. 在交付结果之前修复所有问题。