qiuye-PPT Skill · PPT HTML 设计系统

<span style="display:inline-block;background:linear-gradient(135deg,#C41E3A,#8B0A1A);color:white;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;">秋叶PPT出品</span>

用途

为高校竞赛（国创赛、教创赛等）PPT核心页面生成高质量的HTML预览文件，用于设计确认和视觉参考。

触发条件

当用户要求：
- 创建/生成/制作 PPT HTML 页面
- 设计竞赛PPT的某个页面（痛点页、技术方案页等）
- 将PPT内容做成HTML预览
- 需要PPT设计规范或模板

核心设计原则（不可更改）

1. 画布规格

⚠️ 本skill唯一的画布规格：1600px × 900px（16:9）

• HTML 网页显示尺寸：1600px × 900px（严格16:9）
• PNG 导出尺寸：3200px × 1800px（通过 device_scale_factor=2 实现 2x 渲染）
• 背景色：#FAFAFA（米白色）
• 外层body背景：#E5E1DD（浅灰米色，衬托画布）
• body padding：40px 0
• slide-container：width: 1600px; height: 900px; margin: 0 auto 40px auto
• 全屏缩放公式：scale = window.innerWidth / 1600（以宽度为准，高度不够时上下黑边）

2. 标题区（左上角）

格式：竖线 + 大标题（1600×900 画布标准）

• 标题栏高度：100px，padding: 0 80px，display: flex; align-items: center
• 竖线：8px宽，高度52px，红色渐变 linear-gradient(180deg, #C41E3A 0%, #8B0A1A 100%)，圆角4px
• 大标题：衬线体 Noto Serif SC，字重700，字号46px，颜色 #C41E3A，字间距1.5px，white-space: nowrap，margin-left: 24px
• 标题下方分隔线：渐变线 linear-gradient(90deg, rgba(196,30,58,0.25) 0%, rgba(196,30,58,0.05) 100%)，left: 80px; right: 80px; height: 1px
• 页码：右上角，top: 38px; right: 80px，14px，rgba(26,26,26,0.22)，字间距2px

3. 字体规范（1600×900 画布标准）

核心原则：衬线体用于标题和强调（占20%面积），无衬线体用于正文（占80%面积）。

4. 配色方案（严禁跑偏）

⚠️ 配色铁律：仅使用红色系 + 黑白灰。严禁蓝色、紫色、绿色等其他颜色。

❌ 明确禁止的色值（QA 必查）：
- #F5F3F0、#F5F5F5、#EEEEEE → 改用 #FAFAFA
- #ffffff、#fff → 改用 #FAFAFA
- rgba(0,0,0,x) → 改用 rgba(26,26,26,x) / #1A1A1A
- rgba(255,255,255,x) → 改用 rgba(250,250,250,x)

5. 布局系统

通用约束（所有页面遵守）：
- 必须包含 deco-circle×2 + footer-dots
- safe-area：position: relative; z-index: 10; height: 100%; padding: 124px 92px 52px 92px; overflow: hidden
- 嵌套 grid 子元素：min-height: 0; min-width: 0; overflow: hidden
- grid 子元素间距：gap: 14-16px

底部元素按需判断：
- 总结判断型内容 → 用 summary-bar
- 信息陈列型内容 → 不加底部元素，让内容自然结束
- 封面/过渡页 → 绝对不加底部元素

6. 卡片组件

/* 主体卡片（value-card）：顶部3px红色装饰条 + 内发光顶边 */
.value-card {
  background: white;
  border-radius: 20px;
  border: 1px solid rgba(196,30,58,0.065);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 8px 32px rgba(0,0,0,0.045),
              inset 0 1px 0 rgba(255,255,255,0.85);
  position: relative;
  overflow: hidden;
  min-width: 0;
  height: 100%;
}
.value-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #C41E3A 0%, #E8B4BC 100%);
  opacity: 0.55;
}

/* 引言卡片（intro-card）：玻璃态半透明 */
.intro-card {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  border: 1px solid rgba(196,30,58,0.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.035);
  overflow: hidden;
}

/* 迷你卡片（mini-card）：纯白底+细阴影 */
.mini-card {
  background: white;
  border: 1px solid rgba(196,30,58,0.08);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* 总结横幅（summary-bar） */
.summary-bar {
  background: linear-gradient(135deg, #C41E3A 0%, #8B0A1A 100%);
  border-radius: 18px;
  min-height: 112px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(196,30,58,0.18);
}
.summary-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 4px; height: 100%;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.25) 100%);
  opacity: 0.42;
}

/* 底部注释栏（footer-note） */
.footer-note {
  background: white;
  border-radius: 14px;
  border: 1px solid rgba(196,30,58,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
  position: relative; overflow: hidden;
}
.footer-note::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: linear-gradient(180deg, #C41E3A 0%, #E8B4BC 100%);
}

6b. 文字溢出防护（不可违反，最高优先级）

/* 溢出防护 */
.intro-card, .value-card, .mini-card, .summary-bar {
  overflow-wrap: break-word;
  word-break: break-word;
}
.intro-card p, .value-card p, .mini-card div, .summary-bar p {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
/* 嵌套 grid 子元素 */
.safe-area [style*="display: grid"] > * {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

7. 编号徽章

.number-badge {
  width: 50px; height: 50px; border-radius: 14px;
  background: linear-gradient(135deg, #C41E3A 0%, #8B0A1A 100%);
  display: flex; align-items: center; justify-content: center;
  color: white; font-family: 'Noto Serif SC', serif;
  font-size: 21px; font-weight: 700;
  box-shadow: 0 4px 20px rgba(196,30,58,0.25);
  flex-shrink: 0;
}

编号徽章内容规则：
- ✅ 允许：数字序号（1, 2, 3）、线性 SVG 图标
- ❌ 严禁：单个中文字符（如"正""写""验""法""分"等），必须替换为数字或图标
- 图标：白色描边 SVG（stroke="white" stroke-width="2.5"），26×26px 在 50×50 容器内居中

8. 背景纹理

.bg-texture {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 16% 82%, rgba(196,30,58,0.035) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 88% 18%, rgba(196,30,58,0.045) 0%, transparent 62%),
    linear-gradient(180deg, #FAFAFA 0%, rgba(196,30,58,0.015) 100%);
  z-index: 0;
}
.bg-texture::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(196,30,58,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,30,58,0.012) 1px, transparent 1px);
  background-size: 60px 60px;
}

9. 装饰元素

• 圆形边框装饰（deco-circle）：每页两个
• 右上大圆：width: 380px; height: 380px; top: -140px; right: -95px
• 左下小圆：width: 260px; height: 260px; bottom: -70px; left: -58px
• 样式：border: 1px solid rgba(196,30,58,0.06)，绝对定位
• 底部圆点（footer-dots）：position: absolute; right: 40px; bottom: 22px，四个圆点（w-2.5 h-2.5 rounded-full），渐变透明度（opacity 0.2/0.3/0.4/1.0）

10. 标签与徽章

/* 问题标签（question-tag）：药丸形，带红点 */
.question-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px;
  background: linear-gradient(135deg, rgba(196,30,58,0.08) 0%, rgba(196,30,58,0.02) 100%);
  border: 1px solid rgba(196,30,58,0.1); border-radius: 100px;
  font-size: 14px; font-weight: 500; color: #C41E3A;
  letter-spacing: 0.4px; white-space: nowrap;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: #C41E3A; flex-shrink: 0; }

/* 数据高亮样式 */
.data-highlight {
  font-size: 32px; font-weight: 900; color: #C41E3A;
  font-family: 'Noto Serif SC', serif; line-height: 1.2;
}
.data-label {
  font-size: 13px; color: rgba(26,26,26,0.55);
  font-weight: 500; margin-top: 4px;
}
.data-card {
  background: white; border-radius: 16px;
  border: 1px solid rgba(196,30,58,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  padding: 20px; display: flex; align-items: center; gap: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.data-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196,30,58,0.1); }
.data-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(196,30,58,0.08) 0%, rgba(196,30,58,0.02) 100%);
  border: 1px solid rgba(196,30,58,0.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

11. 动画规范

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in {
  animation: fadeInUp 0.7s cubic-bezier(0.4,0,0.2,1) forwards;
  opacity: 0;
}
.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.18s; }
.delay-3 { animation-delay: 0.28s; }
.delay-4 { animation-delay: 0.38s; }
.delay-5 { animation-delay: 0.48s; }

12. 封面设计规范

封面是唯一使用特殊样式的页面，使用深红渐变背景 + 全屏装饰元素：

/* 封面 slide-container 背景 */
.slide-container {
  /* 普通页面用：background: #FAFAFA */
  /* 封面页用：background: linear-gradient(135deg, #C41E3A 0%, #8B0A1A 50%, #6B0A12 100%); */
}

封面元素（从上到下）：
1. 网格背景（白色半透明线条网格，opacity: 0.08）
2. 对角线装饰（两组斜线，opacity: 0.06）
3. 外框线：两层（外层40px偏移/内层52px偏移，白色半透明）
4. 四角装饰：各40×40px，L型白色边框，3px宽
5. 圆形装饰：4个（右上2个、左下2个，白色半透明边框）
6. safe-area：居中 flex 布局，内容从上到下：
- 顶部装饰线（横线+菱形图标）
- 主标题框：双层边框，内含96px主标题
- 副标题：40px衬线体
- 分隔线（横线+菱形）
- 数据标签行：3个白色边框标签（数据+图标）
- 底部标语：上下边框线，内含18px标语文字

全屏播放功能（必须包含）

核心原则（不可违反）：
1. 禁止使用 cloneNode()（最高优先级）
2. 以宽度为准缩放：scale = window.innerWidth / 1600
3. 通过 DOM 移动（非克隆）实现翻页

全屏播放 JavaScript（v2 完整版，对标参考文件）

// ==================== 全屏播放控制器 v2 ====================
(function() {
  var slides = document.querySelectorAll('.slide-container');
  var totalSlides = slides.length;
  var currentIndex = -1;
  var isFullscreen = false;
  var savedParent = null;
  var savedNext = null;

  // 动态创建全屏舞台和控制栏
  var stage = document.createElement('div');
  stage.id = 'fullscreen-stage';
  document.body.appendChild(stage);

  var bar = document.createElement('div');
  bar.id = 'playback-bar';
  bar.innerHTML = '<button id="btn-all" title="从头播放 (F)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg><span>从头</span></button><button id="btn-curr" title="从当前页播 (S)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><polygon points="12 19 20 12 12 5"/></svg><span>当前</span></button><div class="bar-div"></div><button id="btn-prev" title="上一页 (←)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg></button><button id="btn-next" title="下一页 (→)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></button><div class="bar-div"></div><button id="btn-exit" title="退出 (ESC)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button><div class="bar-page">0 / 0</div>';
  document.body.appendChild(bar);

  // 注入样式
  var css = document.createElement('style');
  css.textContent = '#playback-bar{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:9998;display:flex;flex-direction:column;gap:6px;align-items:center;background:rgba(255,255,255,0.93);backdrop-filter:blur(14px);padding:12px 8px;border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.05)}#playback-bar button{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;padding:7px;border-radius:10px;color:#C41E3A;font-size:10px;font-weight:600;transition:all 0.2s;width:50px;font-family:\'Noto Sans SC\',sans-serif}#playback-bar button:hover{background:rgba(196,30,58,0.08)}#playback-bar button:disabled{opacity:0.28;cursor:not-allowed}.bar-div{width:34px;height:1px;background:rgba(0,0,0,0.07);margin:3px 0}.bar-page{font-size:10px;color:rgba(0,0,0,0.38);margin-top:3px;font-weight:500}#fullscreen-stage{display:none;position:fixed;inset:0;z-index:9997;background:#0a0a0a;overflow:hidden}#fullscreen-stage .slide-container{position:fixed;left:50%;top:50%;margin:0!important;transform-origin:center center}body.fs-mode{overflow:hidden}body.fs-mode>*:not(#fullscreen-stage):not(#playback-bar):not(script):not(style){display:none!important}body.fs-mode #fullscreen-stage{display:block!important}body.fs-mode #playback-bar{display:none!important}';
  document.head.appendChild(css);

  function updateUI() {
    document.querySelector('.bar-page').textContent = (currentIndex + 1) + ' / ' + totalSlides;
    document.getElementById('btn-prev').disabled = currentIndex === 0;
    document.getElementById('btn-next').disabled = currentIndex === totalSlides - 1;
  }

  function resizeEcharts(slide) {
    var containers = slide.querySelectorAll('[id^="chart-"]');
    for (var i = 0; i < containers.length; i++) {
      try {
        var instance = echarts.getInstanceByDom(containers[i]);
        if (instance) instance.resize();
      } catch(e) {}
    }
  }

  function resizeStage() {
    if (!isFullscreen) return;
    var slideEl = stage.querySelector('.slide-container');
    if (!slideEl) return;
    // 以宽度为准，确保16:9比例
    var scale = window.innerWidth / 1600;
    slideEl.style.transform = 'translate(-50%, -50%) scale(' + scale + ')';
  }

  function moveSlideIn(idx) {
    if (currentIndex === idx) return;
    moveSlideOut();
    currentIndex = idx;
    var slide = slides[currentIndex];
    savedParent = slide.parentNode;
    savedNext = slide.nextSibling;
    stage.appendChild(slide);
    slide.style.display = '';
    setTimeout(function() { resizeEcharts(slide); }, 100);
    setTimeout(function() { resizeEcharts(slide); }, 300);
    updateUI();
    resizeStage();
  }

  function moveSlideOut() {
    if (currentIndex < 0 || currentIndex >= totalSlides) return;
    var slide = slides[currentIndex];
    if (!stage.contains(slide)) return;
    slide.style.transform = '';
    slide.style.left = '';
    slide.style.top = '';
    if (savedNext && savedNext.parentNode === savedParent) {
      savedParent.insertBefore(slide, savedNext);
    } else {
      savedParent.appendChild(slide);
    }
    currentIndex = -1;
  }

  function enter(idx) {
    if (isFullscreen) return;
    isFullscreen = true;
    document.body.classList.add('fs-mode');
    moveSlideIn(Math.max(0, Math.min(idx, totalSlides - 1)));
  }

  function exit() {
    if (!isFullscreen) return;
    isFullscreen = false;
    document.body.classList.remove('fs-mode');
    moveSlideOut();
    stage.style.display = 'none';
    currentIndex = -1;
    updateUI();
  }

  function next() { if (currentIndex < totalSlides - 1) moveSlideIn(currentIndex + 1); }
  function prev() { if (currentIndex > 0) moveSlideIn(currentIndex - 1); }

  document.getElementById('btn-all').addEventListener('click', function() { enter(0); });
  document.getElementById('btn-curr').addEventListener('click', function() {
    var best = 0, bestDist = Infinity;
    for (var i = 0; i < slides.length; i++) {
      var d = Math.abs(slides[i].getBoundingClientRect().top);
      if (d < bestDist) { bestDist = d; best = i; }
    }
    enter(best);
  });
  document.getElementById('btn-prev').addEventListener('click', prev);
  document.getElementById('btn-next').addEventListener('click', next);
  document.getElementById('btn-exit').addEventListener('click', exit);

  document.addEventListener('keydown', function(e) {
    if (!isFullscreen) {
      if (e.key === 'f' || e.key === 'F') { e.preventDefault(); enter(0); }
      else if (e.key === 's' || e.key === 'S') { e.preventDefault(); document.getElementById('btn-curr').click(); }
      return;
    }
    switch(e.key) {
      case ' ': case 'ArrowRight': case 'ArrowDown': e.preventDefault(); next(); break;
      case 'ArrowLeft': case 'ArrowUp': e.preventDefault(); prev(); break;
      case 'Escape': exit(); break;
    }
  });

  stage.addEventListener('click', function(e) { next(); });

  window.addEventListener('resize', function() {
    resizeStage();
    if (isFullscreen && currentIndex >= 0) {
      setTimeout(function() { resizeEcharts(slides[currentIndex]); }, 200);
    }
  });

  updateUI();
})();

操作方式

4K PNG导出规范

核心策略

• HTML 画布：1600×900
• PNG 导出：3200×1800（device_scale_factor=2）
• 缩放公式：scale = window.innerWidth / 1600

技术实现

# device_scale_factor=2 让 Chromium 以 2x 分辨率渲染
context = await browser.new_context(
    viewport={'width': 1600, 'height': 900},
    device_scale_factor=2
)
page = await context.new_page()
await page.goto('file:///...')
await page.wait_for_timeout(3000)

# 隐藏全屏播放控制栏
await page.evaluate("""
    const bar = document.getElementById('playback-bar');
    if (bar) bar.style.display = 'none';
""")
await page.wait_for_timeout(200)

# 截图每个 slide
slides = await page.query_selector_all('.slide-container')
for i, slide in enumerate(slides):
    await slide.screenshot(
        path=f'D:/.../第{i+1}页_4K.png',
        type='png'
    )

截图脚本模板

import asyncio
from playwright.async_api import async_playwright

async def main():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        viewport_hd = {'width': 1600, 'height': 900}

        context = await browser.new_context(viewport=viewport_hd, device_scale_factor=2)
        page = await context.new_page()
        await page.goto('file:///D:/workbuddy_workspace/ppt-html-test/你的文件.html')
        await page.wait_for_timeout(3000)

        # 隐藏播放栏
        await page.evaluate("""
            const bar = document.getElementById('playback-bar');
            if (bar) bar.style.display = 'none';
        """)

        slides = await page.query_selector_all('.slide-container')
        for i, slide in enumerate(slides):
            await slide.screenshot(
                path=f'D:/workbuddy_workspace/ppt-html-test/第{i+1}页_4K.png',
                type='png'
            )
            print(f"截图成功: 第{i+1}页_4K.png (3200x1800)")

        await context.close()
        await browser.close()

asyncio.run(main())

HTML模板结构（通用基础）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PPT标题</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;600;700;900&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: #E5E1DD; padding: 40px 0; font-family: 'Noto Sans SC', sans-serif; }
    .slide-container { width: 1600px; height: 900px; position: relative; overflow: hidden; background: #FAFAFA; margin: 0 auto 40px auto; box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06); }
    /* (其余CSS见本skill各节定义) */
  </style>
</head>
<body>
  <!-- 每页一个 slide-container，内容见设计方案 -->
  <div class="slide-container">
    <div class="bg-texture"></div>
    <div class="deco-circle" style="width:380px;height:380px;top:-140px;right:-95px;"></div>
    <div class="deco-circle" style="width:260px;height:260px;bottom:-70px;left:-58px;"></div>
    <div class="slide-header">
      <div class="header-line"></div>
      <div class="header-title">页面标题</div>
      <div class="header-divider"></div>
    </div>
    <div class="page-num">01 / 08</div>
    <div class="safe-area">
      <!-- 内容区 -->
    </div>
    <div class="footer-dots">
      <div class="w-2.5 h-2.5 rounded-full" style="background:rgba(196,30,58,0.2);"></div>
      <div class="w-2.5 h-2.5 rounded-full" style="background:rgba(196,30,58,0.3);"></div>
      <div class="w-2.5 h-2.5 rounded-full" style="background:rgba(196,30,58,0.4);"></div>
      <div class="w-2.5 h-2.5 rounded-full" style="background:#C41E3A;"></div>
    </div>
  </div>
  <!-- 更多 slide-container... -->
  <!-- 全屏JS（见上方完整实现） -->
</body>
</html>

设计流程

每次生成前必须先输出设计方案，格式如下：

### P[N]：[页标题]

**1. 内容逻辑类型**（方法论讲解 / 信息陈列 / 递进叙事 / 对比论证 / 数据拆解 / 封面 / 过渡页）

**2. 布局结构**
- safe-area grid 骨架
- 主体区域划分：几栏？什么比例？
- 内容在主体内的组织方式

**3. 组件选择**
- 标题区、引言区、主体卡片、子信息（mini-card）、编号徽章、标签
- 底部：是否需要 summary-bar？理由？

**4. 字数评估**
- 预估总字数（1600×900 画布，18px正文）
- 排版策略：少字量(20-100字)/中字量(100-300字)/饱满字量(400-500字)/超量(>500字删减)

**5. 视觉节奏**
- 内容密度、留白策略、字号层次

QA 检查机制

交付前必须检查：
- [ ] 文字完整可见（无溢出/遮挡）
- [ ] 字号：正文18px、标题46px（内容页）/ 96px（封面）
- [ ] 配色仅使用红+黑白灰
- [ ] 无单字徽章
- [ ] 每页含deco-circle×2 + footer-dots
- [ ] value-card有顶部红色装饰条

文件输出规范

• 输出路径：d:/workbuddy_workspace/ppt-html-test/
• 命名格式：[主题]_[关键词].html
• 一套PPT = 一个HTML文件 = 多个.slide-container（严禁拆成单页文件）
• 预览方式：使用 preview_url 工具展示

参考案例

🎯 核心参考（对标此文件质量）：
追觅科技深度分析_10页_图表版.html — 本skill的gold standard，所有数值、规范、全屏JS均以此文件为准。