PPT as Code：用网页做比 PPT 更惊艳的演示

这两个东西不是为了显得专业，而是让观众知道"我讲到哪了"。输出时还要让 AI 先说明：新增功能分别属于"状态可视化"还是"导航能力"，并标出想删减时优先删哪一块。

复制基于我现在这个单文件 HTML 分页演示 demo，继续增强，但不要推倒重写。请只在现有结构上新增这些能力：

1. 顶部或底部加一个进度条，根据当前页数计算百分比。
2. 加一组分页圆点，点击圆点可以跳到对应 slide。
3. 当前页的圆点要有激活态。
4. 保留原有按钮和键盘切页逻辑。
5. 不要引入任何第三方库。
6. 尽量复用现有 currentIndex 状态，不要新造一套并行逻辑。
7. 保持视觉风格统一，避免加很多无关装饰。

输出时请先告诉我：这次新增功能分别属于“状态可视化”还是“导航能力”，并标出我后续如果想删减，应该优先删哪一块。

要把演示直接发成网页，URL 同步几乎必补：观众刷新后能回到当前页，你也能把第 5 页单独发给别人。重点不是背 API，而是把需求说清楚；还要让 AI 回答：这种同步更适合"可分享演示链接"还是"上台播放模式"，以及为什么。

复制请基于当前 HTML 分页演示，增加 URL 同步能力，但不要破坏现有按钮、键盘和动画逻辑。要求：

1. 当前页变化时，把 URL 更新为类似 #slide-1、#slide-2 这样的 hash。
2. 页面首次加载时，如果 URL 里已经有 hash，就直接定位到对应页。
3. 浏览器前进后退时，演示要能跟着同步切页。
4. 不要引入路由库，不要引入框架。
5. 保持实现尽量简单，优先使用原生 History API 或 hash 方案。
6. 请告诉我：这种 URL 同步更适合“可分享演示链接”，还是“上台播放模式”，以及为什么。

PPT 里最常见的能力：标题先出来，再出第一条、第二条。关键不在于动画，而在于节奏控制——观众跟着你的叙述节拍走。记住作者的判断：fragment 的本质是"页内步骤状态"，而不是"单纯多几个 class"。

复制请在我现有的 HTML 分页演示上，增加类似 PPT fragment 的能力。要求：

1. 同一页内某些元素可以逐步显现，而不是一进页就全部显示。
2. 右方向键或下一步操作时，优先显示当前页还没出现的 fragment。
3. 只有当前页 fragment 全部显示完，才真正翻到下一页。
4. fragment 的默认动画要克制，优先用 opacity 和轻微位移，不要夸张飞入。
5. 需要兼容 prefers-reduced-motion。
6. 输出时请给我一个最小示例：标题常驻，三条 bullet 逐条出现。
7. 请额外解释：为什么 fragment 的本质是“页内步骤状态”，而不是“单纯多几个 class”。

一旦演示里放大图、视频、iframe，资源加载会造成卡顿。策略：优先预加载当前页、前一页、后一页的重资源，不要一口气全加载；没准备好的给 loading 占位；建议分"必须做 / 建议做 / 可选做"三档。

复制请帮我优化一个 HTML 分页演示，让它在图片和视频较多时切页更稳。要求：

1. 优先考虑预加载当前页、前一页、后一页的重资源。
2. 不要一口气把所有页面的资源都提前加载。
3. 如果某一页资源还没准备好，给出简单的 loading 占位。
4. 不要引入打包工具或复杂工程化方案，只讨论原生前端里最实用的做法。
5. 请把建议分成三类：必须做、建议做、可选做。

只投屏可以晚一点；但只要准备发链接，移动端就不是可选项。至少想清楚两件事：桌面端是不是保持 16:9；手机端是不是切成 9:16 或允许内容重排——不要简单缩小整张 slide，要优先保证可读性。

复制请基于现有 HTML 演示，补一套移动端适配方案。要求：

1. 桌面端保持 16:9 的发布会式演示观感。
2. 手机端不要简单缩小整张 slide，而是优先保证可读性。
3. 可以根据屏幕尺寸切换为更接近 9:16 的布局。
4. 需要考虑移动浏览器视口高度变化。
5. 不要做成完全两套页面，而是尽量复用一套结构。
6. 输出时请说明：哪些是必须改的，哪些只是锦上添花。

给滚动容器加 scroll-snap-type、子元素加 scroll-snap-align，浏览器会在滚动结束时吸附到最近的对齐位置。适合一屏一屏往下滚的发布页、观众自己浏览的演示链接；不适合要精准控制每一下按键、必须先 reveal 三次再翻页、每页高度差异大的场景。

复制请帮我把当前的 HTML 分页演示，改造成更适合“观众自己滚动浏览”的 scroll-snap 版本。要求：

1. 使用现代 CSS Scroll Snap 写法，不要使用旧语法。
2. 每个 slide 至少占满一个视口高度。
3. 保持当前视觉风格，不要重做整套 UI。
4. 请解释这种方案和“按钮切页方案”最大的结构区别。
5. 请告诉我：什么场景适合 scroll-snap，什么场景反而不该用。

简单翻页 CSS transition 就够了。但要动态改动画时长、等数字滚动完再出现下一层、多元素跟同一条时间线推进时，Web Animations API 更舒服。不要一刀切全改，只挑 1 到 2 类动画做示例。

复制请帮我评估，当前这个 HTML 分页演示里，哪些动画适合继续用 CSS transition，哪些更适合改成 Web Animations API。要求：

1. 不要一刀切全改。
2. 只挑最适合 WAAPI 的 1 到 2 类动画做示例。
3. 优先选择需要更强时间控制、播放控制或链式触发的场景。
4. 输出时请分成三部分：继续保留 CSS 的、建议改 WAAPI 的、没必要做复杂的。

它适合做"旧视图和新视图之间的镜头感"，不是拿来替代整套 slide 系统的。状态逻辑没理顺就先上它，只会更乱。用"收益 / 复杂度 / 浏览器现实"三个维度判断，而不是只讲 API 本身。

复制请基于我当前的 HTML 演示，评估 View Transition API 是否值得接入。要求：

1. 先判断这个项目是否真的适合同文档视图切换。
2. 如果适合，只给一个最小可用接法，不要大改架构。
3. 如果不适合，也请明确告诉我原因。
4. 请用“收益 / 复杂度 / 浏览器现实”三个维度来判断，而不是只讲 API 本身。

它最有价值的不是功能多，而是很多你迟早会补的能力它都有了：Fragments、Auto-Animate（相邻两页自动补间）、Markdown 写幻灯片。如果你是内容创作者、不想长期维护自写逻辑，reveal.js 比原生手写更划算。

复制请帮我用 reveal.js 搭一个最小可用的 HTML 演示原型，主题是产品发布式分页展示。要求：

1. 先用 reveal.js 官方推荐结构搭建，不要引入无关插件。
2. 至少包含 4 页 slide。
3. 第 2 页演示 fragment。
4. 第 3 页演示 auto-animate。
5. 第 4 页演示一页代码或数据排版，但风格要简洁。
6. 优先用 reveal.js 自带能力，不要为了炫技增加复杂定制。
7. 输出时请告诉我：如果我是内容创作者，不想长期维护自写逻辑，为什么 reveal.js 可能比原生手写更划算。

复制请基于我当前这个 HTML 演示项目，不直接生成最终页面，而是先给我 3 套彼此差异明显的视觉方向方案。要求：

1. 每套方案都要包括：设计关键词、适合的内容气质、标题字体建议、正文字体建议、主色 / 辅色 / 背景色、组件风格、动画节奏。
2. 三套方向不能只是换颜色，要有明显的风格差异。
3. 风格方向尽量朝“产品发布页 / 设计评论 / 商业杂志封面 / 信息可视化演示”这些成熟方向靠，不要默认赛博朋克紫色。
4. 输出时请告诉我：哪一套最适合“PPT as Code”这种偏理性、偏设计系统感的主题，为什么。
5. 不要直接写完整代码，先做视觉方案。

复制请基于我已经选定的视觉方向，重构当前 HTML 演示的视觉样式，但不要推倒现有内容结构和交互逻辑。要求：

1. 优先改 CSS，不要重写整套 HTML 和 JavaScript。
2. 用 CSS 变量先抽出颜色、圆角、阴影、间距、字号层级。
3. 保持 slide 数量、内容顺序、切页逻辑不变。
4. 目标气质是：克制、锋利、像高质量产品发布页，不要廉价科技风。
5. 请重点优化：标题层级、留白、背景、卡片质感、按钮、分页器、进度条。
6. 输出时请先解释：这次改动里，哪些是“风格层”，哪些是“结构层”，并确保你只动风格层。

同一句话可以配很多种图（浏览器舞台、多 slide 切换系统图、传统幻灯片与网页状态对照图、"文件变系统"的视觉隐喻）。先让 AI 把方向拆出来，后面找图效率才高。

复制请基于这篇文章 / 这一页 slide 的内容，先不要直接生成图片，也不要直接搜图。先帮我做视觉拆解。要求：

1. 提炼这一页最核心的表达目标。
2. 给出 3 到 5 个不同的视觉隐喻方向。
3. 每个方向都要说明：适合传达什么、不适合传达什么、可能出现什么误解。
4. 请额外告诉我：哪一个方向最适合做封面，哪一个方向更适合做正文配图。
5. 输出要像一个创意总监在做前期视觉方向会，而不是像关键词列表。

最怕 AI 只给一个大词比如"technology presentation"，一搜全是廉价科技蓝。要的是一整套：英文主关键词、替代词、应避开的词、图片方向、横竖比例、色彩倾向。

复制请基于我这页内容，帮我生成一个“找配图搜图包”。要求：

1. 先给出这页内容最适合的 1 个主视觉方向。
2. 再给出 8 到 12 个英文搜索关键词组合
3. 再给出 5 个应避开的关键词，避免搜出廉价、跑题或过度科技感的图。
4. 补充建议的图片比例、构图方向、主色倾向。
5. 如果你觉得这页更适合插画而不是照片，也请明确指出。
6. 输出时请按“封面搜图词 / 正文搜图词 / 应避开词 / 筛选标准”四块组织。

只有经过拆解、搜图、筛图留下来的方向，才值得被翻译成最终 prompt。要求中英双语、写清不要出现什么、封面要留标题区，风格像设计评论杂志封面。

复制请把我已经选定的这套视觉方向，翻译成一个适合图像模型的最终出图 prompt。要求：

1. 先写清楚主题和画面主体。
2. 再写清楚构图、色彩、材质、气质。
3. 明确写出不要出现什么。
4. 如果这是文章封面，请留出标题区。
5. 输出中英双语 prompt。
6. 风格要像设计评论杂志封面，而不是 AI 工具宣传图。