HTML PPT Skill

用 HTML + CSS 制作媲美专业设计软件的幻灯片，视觉效果远超传统 PPT 工具。

核心规范（必须遵守）

1. 比例与分页

/* 每张幻灯片：宽 = 100vw，高 = 56.25vw（即 9/16）*/
.slide {
  width: 100vw;
  height: 56.25vw;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* body 开启强制对齐 */
body {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100%;
}
html { height: 100%; }

原理：56.25vw = 9/16 × 100vw，无论屏幕分辨率如何，每页都精确为 16:9。

2. 打印 / 导出 PDF

@media print {
  html, body { height: auto; overflow: visible; scroll-snap-type: none; }
  #nav-dots, #nav-arrows { display: none !important; }
  .slide {
    width: 297mm;
    height: 167.0625mm;   /* 297 × 9/16 = 167.0625 */
    page-break-after: always;
    break-after: page;
    scroll-snap-align: none;
  }
}

用户按 Ctrl+P → 另存为 PDF 即可导出，每页精确对应一张幻灯片。

3. 导航 JS（标准实现，每次必须包含）

const slides = Array.from(document.querySelectorAll('.slide'));
let current = 0;

function goTo(i) {
  i = Math.max(0, Math.min(slides.length - 1, i));
  slides[i].scrollIntoView({ behavior: 'smooth' });
  current = i;
  updateDots(i);
}

// 键盘支持
document.addEventListener('keydown', e => {
  if (['ArrowDown','ArrowRight','PageDown'].includes(e.key)) { e.preventDefault(); goTo(current+1); }
  if (['ArrowUp','ArrowLeft','PageUp'].includes(e.key))      { e.preventDefault(); goTo(current-1); }
});

// IntersectionObserver 同步当前页
const io = new IntersectionObserver(entries => {
  entries.forEach(en => { if (en.isIntersecting) { current = slides.indexOf(en.target); updateDots(current); }});
}, { threshold: 0.6 });
slides.forEach(s => io.observe(s));

标准文件结构

每次生成的 HTML 文件必须包含以下部分：

\x3Chead>
  Google Fonts 引入（选择与主题匹配的中文字体）
  \x3Cstyle>
    1. CSS 变量（颜色、字体）
    2. 核心框架（slide 比例、scroll-snap、body）
    3. 导航组件样式（dots、arrows）
    4. 通用设计组件（见下方）
    5. @media print
  \x3C/style>
\x3C/head>
\x3Cbody>
  \x3Cnav id="nav-dots">（自动生成）\x3C/nav>
  \x3Cdiv id="nav-arrows">↑ ↓ 按钮\x3C/div>

  \x3Csection class="slide" id="slide-1"> ... \x3C/section>
  \x3Csection class="slide" id="slide-2"> ... \x3C/section>
  ...

  \x3Cscript> 导航逻辑 \x3C/script>
\x3C/body>

设计规范

详细设计组件库见 references/design-system.md。

字体选择原则

• 中文展示字体：ZCOOL XiaoWei（庄重）、Ma Shan Zheng（书法）、Long Cang（手写）
• 中文正文字体：Noto Serif SC（衬线）、Noto Sans SC（无衬线）
• 英文展示字体：Playfair Display、Cormorant Garamond、Space Mono
• 禁止使用：Arial、Inter、Roboto、system-ui（太通用，无设计感）

颜色主题选择

根据演示主题选择合适的色系，参考 references/design-system.md 中的预设主题。

每张幻灯片的尺寸感知

• 字体大小使用 vw 单位（如 3.5vw），随屏幕等比缩放
• 间距使用 % 或 vw 单位，避免固定 px
• 内容区 padding 建议：4% 6%

典型页面类型

工作流程

接到 PPT 制作需求时，按以下步骤执行：

1. 理解需求：主题、受众、页数、风格偏好（科技/商务/学术/文化）
2. 选定主题：从 references/design-system.md 选择或创建配色方案
3. 规划页面：确定每页类型和内容大纲
4. 逐页编写：每张 .slide 按内容量和页面类型选择合适布局
5. 检查清单（完成后必须自查）：
   • 每页都有 class="slide" 和 id="slide-N"
   • 每页底部有页码 \x3Cspan class="slide-num">N / Total\x3C/span>
   • body 有 scroll-snap-type: y mandatory
   • 包含键盘导航 JS
   • 包含 @media print 样式
   • 所有字体大小用 vw 单位（非 px）
   • 文件输出到 /mnt/user-data/outputs/ 并调用 present_files

快速参考：CSS 变量模板

:root {
  /* 根据主题替换以下变量 */
  --c-bg:      #0D0F14;       /* 背景色 */
  --c-surface: #151820;       /* 卡片背景 */
  --c-border:  rgba(255,255,255,0.08);
  --c-accent:  #4F8EF7;       /* 主强调色 */
  --c-accent2: #A78BFA;       /* 副强调色 */
  --c-text:    #F0F2F8;       /* 主文字色 */
  --c-muted:   rgba(240,242,248,0.45); /* 次要文字 */

  --f-display: 'ZCOOL XiaoWei', serif;
  --f-body:    'Noto Sans SC', sans-serif;

  /* 固定不变 */
  --slide-w: 100vw;
  --slide-h: 56.25vw;
}