演示幻灯片

演示幻灯片

目标

用单文件 HTML 制作幻灯片：每页一个 <section>，键盘左右翻页，统一视觉体系。产物是一个自包含 HTML，浏览器打开即可全屏演示。核心是"每页一个观点、真实放映条件（投影/Zoom/手机）下清晰可读"。

幻灯片是视觉辅助不是文档。优先级：清晰 > 可读 > 层次 > 简洁。一致性 > 创意，降低认知负荷。

核心规则（不可协商）

• 一页一个观点。标题直接说结论（takeaway），不是话题标签。
• 内容在要求字号下放不下就拆页或删减，绝不缩字。
• 短语 > 句子，不要整段文字，不要段落。细节进备注/附录。
• 字号地板（16:9，1920×1080 画布）：正文 ≥ 28px（宜 28-36），标题 ≥ 56px（宜 56-80），区块标题 ≥ 40px，标签/caption ≥ 22px（绝不再小），关键数字 56-96px（单个英雄 KPI 可上 120+）。
• 最多 2 个字族，靠 weight 拉层次不靠堆字号。行高用像素值不用无单位倍数。避免 ALL CAPS（标签除外）。
• 内容距边缘 ≥ 100px 安全区。文字/背景永远高对比。

工作流步骤

1. 理清叙事结构

先把内容组织成一条线索：每页承担一个信息点，页与页之间有推进关系（问题→洞察→方案→证据→行动）。判断语境调性：企业=结构化；创业=极简大胆；营销=利益驱动；内部=可略密；keynote=极视觉。规则始终适用。

2. 规划每页的布局契约

给每页选一个骨架，同类页复用同一契约以保持一致：

• 封面：居中标题(64-96 Bold) + 副标题(32-40) + meta(24-28)；或左块式大标题 + logo 右下。
• 章节分隔：小标签(28 弱化) + 大标题(56-72)，大留白，只这两样。
• 金句/主张：单条陈述(48-64，≤2 行)，可选署名(28)，只一个信息。
• 概念+视觉：左右 50/50，一侧标题(40-48)+正文(28-32，≤4 行)，一侧图，间距 ≥ 40，垂直居中。
• 三支柱/特性：3 列等宽，每列视觉 + 标签(32) + 描述(24，≤2 行)，同顶线、同基线。
• 对比：2 列，各标题(32-40) + 要点(28，2-4 条)，内容平衡。
• 单 KPI：标签(28 弱) + 巨大数字(120-200) + 上下文(28-32)，数字是绝对主角。
• 两/三 KPI：等权数字(96-120 / 72-96) + 标签，同基线。
• 流程：一排 3-5 步，图标/序号 + 标签(32) + 一行描述(24)，等间距同基线。
• 数据+洞察：图表(约 60% 高) + 加粗洞察句(28-32)，一个高亮点，无 chart junk。
• 列表：标题(48) + 3-5 项(28-32)，不换行、大间距。
• 收尾：headline(56-72) + 副标题(28-32) + 联系方式(24-28)，干净，留最后印象。

3. 建立统一视觉体系

• 配色：2-3 个核心色 + 中性色，强调色只用于强调，正文中性，尽量色盲友好。整套 deck 一套灰阶。
• 排版：整套统一字体栈，用 CSS 变量集中管理颜色/字号/间距，保证跨页一致。
• 视觉支撑意义不做装饰：数据优先用图表而非文字，一图一洞察，简化图表，高亮关键数据点。图标同风格同尺寸。
• 首尾两页是"陈述"不是"信息"：追求情绪与印象，强视觉配强文字。纯文字页就让排版做情绪主角，敢用超大字号与非对称，但不牺牲可读。

4. 实现翻页与放映

• 每页一个 <section class="slide">，占满视口（100vw × 100vh，16:9 用 aspect-ratio 或 letterbox 居中）。
• JS 内联实现：← / → 或 PageUp/PageDown 翻页，F 或双击进入全屏，可选页码指示与进度条。当前页 display:flex 居中，其余 display:none。
• 用 scale 或 vw/vh 单位让内容随窗口等比缩放，保证投影/手机上比例不变。
• 过渡克制：翻页做 150-300ms 的淡入/位移即可，不做花哨特效。

生成前后自查

• 每页是否只有一个观点、标题是否说了结论。
• 有没有整段文字（有就拆成短语或移到备注）。
• 所有字号是否达标（正文≥28、标题≥56、caption≥22）。
• 内容是否距边 ≥ 100px、对比是否够。
• 同类页是否复用同一布局、整套是否一套配色一套字体。
• 假数据用可信真实感内容，不用 "John Doe" / "Acme" / "99.99%" 这类 AI 味儿占位。

输出格式

1. 先给出 deck 大纲：每页序号 + 该页的布局契约 + 一句话观点；再声明配色（hex）与字体。
2. 用 Write 生成单文件 HTML：<style> 内联（含 CSS 变量体系与打印分页 @media print { .slide { page-break-after: always } }），每页一个 <section>，翻页 JS 内联在 <script>，字体用 Google Fonts <link>。
3. 用 Bash 打开预览：macOS open <HTML绝对路径>，提示用户按方向键翻页、F 全屏。
4. 如需导出 PDF，可提示用浏览器「打印 → 存为 PDF」（配合上面的 @media print 规则每页一张）。
5. 简述 deck 结构、视觉决策与如何演示/导出。

边界

• 只产出自包含单文件 HTML（内联 CSS/JS），不引构建工具、不拆多文件、不依赖本地不存在资源。
• 不接真实数据源；需要数据时用可信假数据并如实标注。
• 若用户明确要 .pptx 文件而非可放映网页，这不是本 skill 的交付物，应改用处理 PowerPoint 的工具；用户说"演示稿/幻灯片/HTML/网页版"或未指定格式则留在本 skill。
• 内容语言默认跟随用户 prompt，保留英文术语原样。