# html-ppt — 震撼级单文件 HTML 演示生成规范 > 用途:把任意输入内容(报告 / 文档 / 数据 / 笔记)转成 **单文件、离线可用、支持翻页遥控器** 的 PPT 式 HTML 演示。 > 目标:打开第一页 3 秒内让观众"哇"出来;翻完全片觉得这是发布会级作品,而不是 AI 生成的模板。 > 使用方式:把本文档全文 + 你的原始材料一起交给任意 AI 模型,要求它"严格按此规范执行"。 --- ## 零、三条铁律(任何情况下不许违反) 1. **单文件、零外链。** 所有 CSS / JS / 字体回退 / 图形全部内联,不引用任何 CDN、外部字体、外部图片。演示现场经常没网,外链 = 现场裸奖。图形一律用 CSS / SVG / Canvas 画,不用图片。 2. **不编造数据。** 所有数字、事实、引语必须来自输入材料。材料里没有的,宁可不写,不许脑补。 3. **每一页在进入的瞬间必须"看起来是完整的"。** 不允许出现"按了键才有内容、不按键像坏了"的空页(这是最高频翻车点,见第六节)。 --- ## 一、先想清楚再写代码(内容优先) **在写任何 HTML 之前**,先完成并输出这份大纲,再动手: 1. 通读输入材料,提炼:**一条主线故事**(整个演示回答什么问题)、**5±2 个核心判断**、**所有值得放大的数字**。 2. 排片 10–20 页,每页只讲**一件事**。讲不完就拆页,不许堆。 3. 每页标题必须是**观点句**,不是名词: - ❌ "市场分析" / "产品介绍" / "数据概览" - ✅ "监管换挡,主战场转向存量价值挖掘" / "31 秒到账,是这个模式的全部底气" 4. 输出三列大纲:`页码 | 观点式标题 | 这页的核心视觉(大数字?对比条?流程链?)`。 5. 标准叙事弧:封面钩子 → 目录 → 核心判断 → 背景/沿革 → 拆解主体(3–8 页,数据密度最高)→ 风险/反面 → 结论/行动 → 金句收尾页。 --- ## 二、定气质(反 AI 味守则) ### 禁令清单(出现任何一条即判定为"AI 模板脸",必须重做) - 紫蓝渐变背景 + 玻璃拟态白色圆角卡片阵列 - 每页三个并排圆角卡片、卡片里放 emoji 当图标(emoji 禁止作图标使用) - 全片只用一种版式、一种字号层级 - Inter/Roboto 默认字体、无任何字号对比(标题和正文差距 < 2 倍) - 居中大标题 + 副标题 + 三点列表的"模板脸"结构页超过 2 页 ### 正面要求 - **从内容领域出发选一种气质**,四套现成方案(也可自创,但要报出完整色板): | 气质 | 适用 | 背景 | 文字 | 强调 | 语义色 | |---|---|---|---|---|---| | 暗夜指挥舱 | 金融/商业情报/战略 | `#050E17` | `#EAF2FA` | 金 `#F7C74F` + 蓝 `#35A2F5` | 正 `#23D58C` 负 `#FF7A59` | | 纸面杂志 | 人文/品牌/教育 | `#F5F1E8` | `#1A1712` | 朱红 `#C3422F` | 墨蓝 `#1F3A5F` | | 荧光终端 | 科技/开发者/极客 | `#0A0E0A` | `#D8F3DC` | 荧绿 `#39FF88` | 琥珀 `#FFB300` | | 深空画廊 | 消费/生活方式 | `#14100E` | `#F5EDE4` | 橙 `#FF8C42` | 青 `#4ECDC4` | - 全片色板 **≤ 5 色**:1 背景 + 1 主文字 + 1 强调 + 2 语义(正/负)。强调色是稀缺资源,只给最重要的词和数字。 - **字体三层制**:标题用衬线(`"Noto Serif SC","Songti SC",serif`)或超大字重;正文用系统无衬线;**所有数字一律等宽字体** + `font-variant-numeric:tabular-nums`。中文字体必须带回退链(PingFang SC / Microsoft YaHei)。 - **一个签名元素**贯穿全片:与主题相关的符号粒子背景(如金融用 ₦/$/¥)、巨型半透明页码水印、扫描线、装饰性角标——任选其一做足,不要三心二意。 - 所有尺寸用 **vh/vw**,禁止 px 定字号(投影仪/大屏上比例才不会崩)。标题 5–9vh,正文 2–2.6vh,大数字 10–14vh。 --- ## 三、引擎骨架(直接复制,不要重写) 下面是**已在真实项目里验证过的完整引擎**。使用规则: - 只允许改:`:root` 色板变量、签名元素(粒子符号)、`
` 里的内容。 - **引擎 JS 与 HUD 结构一个字都不要动**——它已处理好所有边界情况(Esc 冲突、计数器重复触发、总览模式白屏等)。 - 能力强的模型可以增加转场变体和签名元素,但**按键协议和自查清单不可删减**。 ```html 演示标题
INTERNAL BRIEF · 2026

观点式主标题,
关键词高亮

一句话副标题

→ 翻页 O 总览 ? 帮助

数据页示例:数字要动起来

指标 A0

结尾金句,一句话,不解释

→ ↓ Space PgDn下一步 / 下一页
← ↑ PgUp上一步 / 上一页
O / Esc总览网格
B / .黑屏暂停
F全屏
A自动播放
Home / End首页 / 末页
``` --- ## 四、页型模式库(按大纲对号入座) 每页从下面选一种"核心视觉",全片至少用到 5 种不同页型: 1. **封面页**:`fx-zoom` + 8–9vh 观点标题(关键词 `` 高亮)+ 底部一排关键数据小条(用计数器)+ 按键提示。第一页就要有动的东西。 2. **目录页**:可点击网格,每格 `onclick="go(n)"`(n 为目标页序号,从 0 数)。 3. **大数字页**:一个 10–14vh 的等宽数字撑满视觉中心,`0`,配一行小字解释。一页只放一个主数字。 4. **对比条形页**:多行 `.bar > .fill`,每行 `--w` 按真实比例;竞对/多项对比首选。**不要给条形加 `.fr`**,进页一起生长最有气势。 5. **环形占比页**(SVG,进页自动画弧): ```html ``` 6. **左右对峙页**:两个半屏,一半用 `--pos` 一半用 `--neg`(表面 vs 真相、宣传 vs 实际),中间可加一道 SVG 裂缝/闪电做戏剧张力。 7. **时间轴页**:横向轴线 + 节点 `.auto` 级联入场,每节点"年份(等宽)+ 一句事件"。 8. **流程链页**:节点 + 箭头,节点数字用计数器;适合"XX 只需 31 秒"类叙事,可用 `.fr` 逐步点亮(这是少数该用 `.fr` 的场景)。 9. **四象限页**(SWOT 等):2×2 网格 `.auto` 级联,四格用不同边框色区分。 10. **金句收尾页**:`fx-rise` + 居中一句话,大量留白,不放任何图表。 --- ## 五、动效纪律 - **默认一律用 `.auto` 级联入场**(引擎自动按 0.09s 间隔编排),进页即完整、有节奏。 - **`.fr` 手动分步全片最多 3 页**,只给"需要跟着讲述节奏逐条抛出"的叙事关键页(核心判断、流程揭秘)。滥用 `.fr` = 每页进去都像白屏坏页。 - 所有数据动画由 `.slide.active` 触发:条形用 `--w`、圆环用 `dashoffset`、数字用 `data-count`。**禁止进页就静止的死数字**——凡是重要数字必须有计数动画。 - 转场默认 3D 推移已足够炫,`fx-zoom` 给封面/高潮页、`fx-rise` 给收尾页,变体页占比 ≤ 1/3,多了就晕。 - `prefers-reduced-motion` 的降级规则已在骨架里,不许删。 --- ## 六、真实翻车点备忘(每条都是踩过的坑) 1. **分步动画滥用** → 页面进入时只有标题、像渲染失败。默认 `.auto`,`.fr` 限量。 2. **内容超出一屏** → `overflow:hidden` 只是遮羞布。每页内容必须在 16:9 一屏内放得下,放不下就拆页或删字。文字多的页每块 ≤ 3 行。 3. **绝对定位元素叠到标题上**(窗口偏矮时)→ 装饰环/大图形要给容器留 `margin-top`,并用 `min(Xvh, Yvw)` 限制尺寸。 4. **px 定字号** → 投影仪上崩。全部 vh/vw。 5. **忘记中文字体回退** → Windows 上衬线标题变默认宋体,气质全无。字体栈必须含 PingFang SC / Microsoft YaHei。 6. **计数器重复触发** → 引擎已用 `dataset.done` 防重,别自己另写计数器。 7. **Esc 键冲突**(关帮助时误入总览)→ 引擎已按"帮助 > 黑屏 > 总览"优先级处理,别改键盘逻辑。 8. **总览模式白屏** → 根源是 `.slide` 的 `visibility 0s .85s` 延迟,引擎的 `#stage.ov` 规则已覆写,别删。 9. **外链字体/库** → 断网现场直接裸奔。零外链。 10. **上下文小的模型一次写不完长文件** → 先写完整骨架(引擎 + 空 section 占位),再分批填页,每批 3–5 页,避免截断产出半个标签。 --- ## 七、交付前自查清单(逐项过,任何一条不过就修完再交) - [ ] 大纲阶段的每一页都已实现,页数与目录一致,目录可点击跳转 - [ ] 标签配平:`` 数量相等,`` 数量相等 - [ ] JS 无语法错误(有运行环境就 `node --check`;没有就把 `