README.md

# HTML PPT Skill — 用 HTML + CSS 制作专业幻灯片

> **版本**：V1.0.0  
> **语言**：HTML / CSS / JavaScript  
> **核心理念**：用 Web 技术取代传统 PPT/PPTX，制作 16:9 比例、可键盘翻页、可导出 PDF 的专业演示文稿。

---

## 概述

HTML PPT Skill 是一套完整的基于 HTML + CSS 制作幻灯片的工作流方案。与 PowerPoint / Keynote / Canva 等传统工具不同，它利用 **CSS `scroll-snap`** 实现精准的页面切割，以 **16:9 视口比例** 固定每张幻灯片，最终可通过浏览器 **Ctrl+P 导出为 PDF**。

适用场景：
- 技术分享 / 开发者演讲
- 学术报告 / 论文答辩
- 品牌宣传 / 产品路演
- 企业文化 / 历史展示

---

## 特性

| 特性 | 说明 |
|------|------|
| 🎯 **16:9 精确比例** | 每张幻灯片严格 `100vw × 56.25vw`，任何屏幕均等比例显示 |
| ⌨️ **键盘导航** | `↑ ↓ ← → PageUp PageDown` 均可翻页 |
| 🔵 **导航指示器** | 右侧圆点导航 + 底部箭头按钮，自动高亮当前页 |
| 🖨️ **一键导出 PDF** | 浏览器打印 → 另存为 PDF，每页精确对应一张幻灯片 |
| 📱 **响应式** | 所有尺寸使用 `vw` 单位，手机 / 平板 / 投影仪等比缩放 |
| 🎨 **预设主题** | 6 套精心搭配的配色方案（深空暗黑、金墨、自然绿、纯白简约、暖橙、冰蓝） |
| 🧩 **即用组件** | 排版系统、卡片、数据统计、进度条、时间线等开箱即用 |
| ✨ **动画效果** | 入场动画、脉冲光圈、滚动网格等轻量 CSS 动画 |
| 🖼️ **背景装饰** | 网格、光晕、水印、斜线分割、圆点阵列 5 种背景模式 |

---

## 快速开始

### 方式一：从空白模板开始

直接打开 `assets/blank-starter.html`，在 `<!-- ★ 在此开始添加幻灯片 ★ -->` 注释下方复制 `.slide` 块即可。

### 方式二：从设计系统模板开始

参考 `references/design-system.md` 中的布局代码（封面页、双栏页、四格卡片页、数据页、时间线页），复制粘贴后修改内容。

---

## 文件结构

```
V1.0.0/
├── SKILL.md                       # Skill 核心指令（AI 调用入口）
├── assets/
│   └── blank-starter.html         # 空白起始模板（开箱即用）
├── references/
│   └── design-system.md           # 完整设计系统文档
│       ├── 6 套预设颜色主题
│       ├── 通用 CSS 组件（排版 / 卡片 / 统计 / 列表等）
│       ├── 5 种背景装饰模式
│       ├── 5 种布局模板代码
│       ├── 动画效果库
│       └── 导航组件完整代码
└── README.md                      # 本文件
```

---

## 使用指南

### 1. 核心 HTML 结构

```html
<section class="slide" id="slide-1">
  <div class="slide-body">
    <!-- 内容 -->
  </div>
  <span class="slide-num">01 / 10</span>
</section>
```

每张幻灯片必备：
- `class="slide"` — 应用 16:9 尺寸和 scroll-snap 对齐
- `id="slide-N"` — 唯一标识（N 为页码序号）
- `.slide-num` — 底部页码

### 2. 导航系统（自动生效）

- **右侧圆点**：点击跳转对应页面
- **底部箭头**：上 / 下翻页
- **键盘**：`↑ ↓ ← →` 或 `PageUp / PageDown`
- **滚动**：鼠标滚轮 / 触控板逐页滑动
- **IntersectionObserver**：滚动时自动同步高亮当前页

### 3. 导出 PDF

1. 在浏览器中打开 HTML 文件
2. 按 `Ctrl + P` (Windows) 或 `Cmd + P` (Mac)
3. 目标打印机选择「另存为 PDF」
4. 取消勾选「页眉和页脚」
5. 保存 — 每张幻灯片即为一页 PDF

### 4. 编写新幻灯片

SKILL.md 中定义了 8 种典型页面类型：

| 页面类型 | 适用场景 |
|----------|----------|
| 封面页 | 第一页，大标题 + 视觉冲击背景 |
| 目录页 | 第二页，2×2 或 1×N 卡片网格 |
| 双栏内容页 | 文字 + 图片 / 列表 |
| 全图页 | 图片铺满 + 半透明遮罩文字 |
| 数据页 | 大数字 + 进度条 + 指标说明 |
| 时间线页 | 历史 / 流程 / 路线图 |
| 引用页 | 金句 / 观点 / 名人名言 |
| 结尾页 | 致谢 / Q&A / 联系方式 |

---

## 设计系统

详见 `references/design-system.md`，包含：

### 预设颜色主题

| 主题 | 场景 | 主色 |
|------|------|------|
| 🌑 深空暗黑 | 科技 / 互联网 | `#4F8EF7` |
| 🏮 金墨 | 中国文化 / 历史 | `#D4A017` |
| 🌿 自然绿 | 环保 / 农业 / 医疗 | `#34D399` |
| ☁️ 纯白简约 | 学术 / 报告 | `#2563EB` |
| 🔥 暖橙 | 创业 / 品牌 / 活力 | `#F97316` |
| 🧊 冰蓝 | 金融 / 咨询 / 企业 | `#1E40AF` |

### 字体体系

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

### CSS 组件

| 组件 | 类名 | 用途 |
|------|------|------|
| 超大展示标题 | `.title-xl` | 封面页主标题（6.5vw） |
| 页面主标题 | `.title-lg` | 内页大标题（3.8vw） |
| 章节标题 | `.title-md` | 小节标题（2.4vw） |
| 正文 | `.body-text` | 描述文字（1.2vw） |
| 小标签 | `.label` | 标签 / 副标题 |
| 卡片 | `.card` | 内容区块容器 |
| 统计数字 | `.stat-num` | 数据展示（5vw） |
| 分割线 | `.divider` | 装饰分隔 |
| 高亮 | `.hl` / `.hl-2` | 强调文字颜色 |
| 图标圆 | `.icon-circle` | 图标背景容器 |
| 进度条 | `.progress-bar-bg/fill` | 百分比进度 |

### 背景装饰

- **网格背景** — 科技感细线网格
- **光晕装饰 (Glow)** — 模糊彩色光晕
- **大字水印** — 半透明背景文字
- **斜线分割** — 135° 斜线划分
- **圆点阵列** — 规律小圆点背景

---

## 技术原理

### 16:9 比例

```css
.slide {
  width: 100vw;
  height: 56.25vw;  /* 9 ÷ 16 × 100 = 56.25 */
  scroll-snap-align: start;
}
```

`56.25vw = 9/16 × 100vw`，确保在任何分辨率下都精确保持 16:9 比例。

### 翻页机制

使用 CSS `scroll-snap-type: y mandatory` 实现强制逐页对齐，结合 `scrollIntoView({ behavior: 'smooth' })` 实现平滑跳转。

### 打印适配

```css
@media print {
  .slide {
    width: 297mm;           /* A4 横向宽度 */
    height: 167.0625mm;     /* 297 × 9/16 */
    page-break-after: always;
  }
  #nav-dots, #nav-arrows { display: none; }
}
```

打印时自动隐藏导航元素，每张幻灯片精准适配 A4 纸 16:9 区域。

---

## 许可

仅供个人和商业演示使用。Google Fonts 引用的字体遵循各自的开源许可（OFL 等）。

---

*由 HTML PPT Skill V1.0.0 生成 — 用代码重新定义演示文稿*