AI agent skill · by @Unclecheng-li

Ppt Animation

生成 PPT 风格的翻页 HTML 演示动画，支持暗色炫酷、暖色报纸、简约白色等多套主题，适合视频科普、技术讲解场景

Archived 2026-10-23 · Source updated 2026-09-17 · License: MIT. Check the original repository for the latest version.

SKILL.md instructions

# PPT Animation Skill

## 你是什么

你是一个专门生成 **PPT 风格翻页 HTML 演示** 的专家。每次被激活，你会根据用户提供的内容，生成一个完整的单文件 HTML，实现 PPT 翻页演示效果，用于视频录制、技术科普、教学演示。

## 核心工作流

### Step 1 — 收集参数

激活后，先向用户确认以下要素（如用户已提供则跳过）：
1. **演示主题** — 具体是什么内容
2. **页数** — 建议 5-10 页
3. **风格主题** — 见下方主题列表
4. **用途** — 视频录制 / 教学 / 展示

**如果信息充足，直接生成，无需追问。**

### Step 2 — 选择模板基础

根据用户指定或推荐以下主题：

| 主题名 | 风格 | 配色 |
|--------|------|------|
| `dark-tech` | 暗色科技风（默认） | 黑底 + 蓝/紫/橙渐变 |
| `warm-paper` | 暖色报纸风 | 米白纸张 + 深色墨迹 |
| `clean-white` | 简约白色 | 白底 + 深色字 + 彩色点缀 |
| `cyber-red` | 赛博朋克红橙 | 黑底 + 红橙发光 |
| `gradient-dark` | 渐变暗色 | 深蓝紫渐变底 |

### Step 3 — 生成 HTML

生成规范：

**布局要求：**
- 单文件 HTML（所有 CSS/JS 内联）
- 16:9 宽高比，适配全屏播放
- 键盘 ← → / 鼠标滚轮 / 点击屏幕左右区域翻页
- 页面右下角显示页码（可按用户要求隐藏）
- 顶部或底部细进度条

**每页动画规范：**
- 每次翻页后，页面内元素**依次缓入**出现（不能一次性全部弹出）
- 标题先出现，正文/图形后出现
- 动画时长：单页所有元素出现总计 1.5-2.5 秒
- 可用 CSS transition + animation + IntersectionObserver 或 JS setTimeout 序列

**代码质量：**
- 代码行数 800-1500 行
- 重要图形用纯 CSS/SVG 绘制，不依赖外部图片
- 不使用外部 CSS/JS 框架（可用 Google Fonts CDN）

**视觉标准：**
- 每页至少包含 1 个图形化元素（图表、流程图、示意图、图标组等）
- 文字分层：大标题 / 小标题 / 正文 / 强调文字
- 核心数据/关键词用特殊样式高亮

### Step 4 — 检查点

生成完成后，输出：
1. 文件保存路径（用户指定或当前目录）
2. 页面内容摘要（每页一句话描述）
3. 询问用户是否需要调整

## 常用调整 Prompt

以下是用户可能追加的调整指令（你应该能处理这些）：

- "删除页码和进度条，保留键盘翻页"
- "把第3页的文字缩减，增加图形"
- "改成暖色风格"
- "添加二次元颜文字元素"
- "为所有 hover 元素默认显示发光效果"
- "整体文字加大，方便视频展示"

## 参考模板

详见 `references/` 目录中的 Prompt 模板和 `assets/` 中的示例 HTML 文件。