# Guizang Ppt Lite

> 生成高级质感的单文件 HTML 横向网页 PPT。何时使用：当用户需要高级网页 PPT、商业汇报 PPT、战略会 PPT、发布会 PPT、产品路演 PPT、趋势洞察 PPT，或要求优化 PPT 审美、信息层级、视觉中心、叙事节奏时触发。

- Skill: `steelan9199/guizang-ppt-lite` (Agent Skill, multi-file: 9 files)
- Install (CLI): `npx skillmds add steelan9199/guizang-ppt-lite`
- Raw SKILL.md: https://api.skillmd.com/api/skills/steelan9199/guizang-ppt-lite/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: steelan9199 (https://skillmd.com/u/steelan9199)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/steelan9199/guizang-ppt-lite

---


# guizang-ppt-lite

生成一份**高级质感、商业表达优先、符合成熟演示文稿规则、单文件 HTML** 的横向翻页网页 PPT。
生成的 PPT 放到当前项目的 `ppt/` 文件夹下。

最高原则：**先做演示设计，再写 HTML。** 不得把内容随机塞入模板；每一页都必须先通过"页面角色、核心结论、视觉中心、信息层级、叙事节奏、可读性"的设计审查。

- **大师规则**：详细生成规范见 [`references/ppt-master-rules.md`](references/ppt-master-rules.md)（权威源）。
- **场景风格**：4 种使用场景的详细规则见 [`references/scenario-styles.md`](references/scenario-styles.md)（权威源）。
- **页面布局**：10 种可选布局骨架见 [`references/layouts.md`](references/layouts.md)。
- **主题配色**：5 套预设主题见 [`references/themes.md`](references/themes.md)。

## 触发映射

| 用户说                                     | AI 做                                             |
| ------------------------------------------ | ------------------------------------------------- |
| 高级网页 PPT / 精品 PPT / 质感 PPT         | 生成符合大师级 PPT 规则的单文件 HTML PPT          |
| CEO 战略会 / 董事会 / 经营汇报 / 复盘      | 使用"董事会汇报"场景风格（见 scenario-styles.md） |
| 发布会 / 内部动员 / 愿景宣讲 / 战略发布    | 使用"战略发布"场景风格                            |
| 产品路演 / 解决方案 / 融资路演 / SaaS 展示 | 使用"产品路演"场景风格                            |
| 趋势洞察 / 行业观察 / 观点报告 / 白皮书    | 使用"趋势洞察"场景风格                            |
| 用户指定风格很多                           | 收敛到最匹配的 1 个场景，不混搭                   |
| 用户没有指定风格                           | 先按使用场景自动选择，不是按视觉偏好选择          |

> 场景风格不是皮肤，而是**场景下的表达规则**。4 种场景共用同一模板（`assets/template.html`）和同一套配色（`references/themes.md`），差异仅在内容规则、叙事结构和表达重心。详细规则见 [`references/scenario-styles.md`](references/scenario-styles.md)。

## 强制工作流

### Step 1 · 明确演示任务

先判断以下 5 项；信息不足且会影响质量时，最多问 3 个选择题。

| 判断项     | 必须明确                                     |
| ---------- | -------------------------------------------- |
| 使用场景   | 是决策会、动员会、路演，还是洞察分享         |
| 听众       | 谁在听，他们关心决策、认同、购买还是启发     |
| 目标动作   | 听完要批准、对齐、购买、传播，还是启动项目   |
| 内容成熟度 | 是只有主题、已有大纲、已有长文，还是已有素材 |
| 约束       | 页数、语气、品牌、是否需要数据/图片          |

### Step 2 · 先产出演示蓝图

生成 HTML 前，先在内部完成演示蓝图：

```text
受众判断 → 核心主张 → 叙事弧 → 页面清单 → 每页角色 → 每页核心结论 → 每页视觉中心 → 每页版式类型
```

不得跳过蓝图直接写页面。

各场景推荐叙事弧见 [`references/scenario-styles.md`](references/scenario-styles.md)。

### Step 3 · 使用大师规则设计每页

每页写代码前，必须逐页按 [`references/ppt-master-rules.md`](references/ppt-master-rules.md) 确认：

- 页面角色（钩子/背景/问题/洞察/框架/证据/路径/行动/收束）
- 核心结论（标题能独立表达一个完整判断）
- 视觉中心（有且只有一个第一视觉焦点）
- 信息层级（主标题 > 关键数字/图形 > 支撑点 > 注释）
- 叙事位置（与前后页有因果/转折/递进关系）
- 认知负荷（一页最多 1 个主观点 + 3-5 个支撑点）
- 留白与重心（内容不贴边、不贴底、不平均摊满）
- 对齐与网格（元素共享清晰轴线）
- 可读性（投屏可读，不低对比，不小字堆叠）
- 配色安全（正文高对比；禁止灰字叠加半透明浅底）
- 完整显示（标题、正文、图注、行动项不得被裁切或遮挡）

### Step 4 · 基于模板生成

1. **必须先 `Read` 读取 `assets/template.html`**，确认 `#deck` 容器、`.slide` 结构、翻页 JS 逻辑。禁止未读模板就生成 HTML。
2. 所有 4 种场景共用 `assets/template.html` 这一个模板。
3. 必须使用模板内的 PPT Master Guards：`.ppt-safe-frame`、`.ppt-balanced-frame`、`.ppt-action-frame`、`.ppt-focal`、`.surface-light`、`.surface-muted`、`.surface-ink`、`.surface-accent`、`.text-readable`、`.ppt-no-sink`。
4. **必须复用模板的翻页机制**：使用 `#deck` 容器（`display: flex`）+ CSS `transform: translateX()` + JS 精确切换。禁止自行发明翻页方案（scroll-snap、scrollIntoView 等）。
5. 基于模板生成目标 HTML；不得绕开模板重新写 CSS。
6. 替换 `<title>`。
7. 保持单文件 HTML；除非用户提供素材，否则不强行使用图片。
8. 主题色只从 [`references/themes.md`](references/themes.md) 的 5 套预设中选择，不随意自造颜色。
9. 新增局部 CSS 必须通过"配色安全与完整显示规则"：正文对比度不低于模板正文；正文容器不得半透明；文字不得裁切或被导航遮挡。

## 反随机生成硬规则

禁止以下行为：

- 只根据页面数量平均分配内容。
- 看到"三个点"就机械使用三卡片。
- 每页都居中大标题。
- 把内容贴到底部或角落，导致视觉重心失衡。
- 为了填满页面增加无意义图形。
- 使用 `opacity`、过浅灰色、半透明背景承载正文。
- 在浅色/半透明卡片上使用 `muted` 灰色正文。
- 在没有真实图片素材时使用图片版式。
- 发明模板不存在的复杂类名。
- 绕开模板护栏重写 CSS。
- **使用 `scroll-snap-type`、`scroll-snap-align`、`scroll-behavior: smooth` 或 `scrollIntoView()` 实现翻页**。必须用 `#deck` + `transform: translateX()`。
- **将中文、日文、韩文等 CJK 字符写成 Unicode 转义序列（如 `\u8fc7\u53bb`）**。所有 CJK 文本必须写为原文字符。这是不可协商的硬约束。
- **禁止手写或简化模板的 `<script type="module">` Motion One 动效引擎脚本**。该脚本包含 `window.__playSlide` 注册和首屏 `playSlide(0)` 初始化调用（修复首次加载文字消失的 Bug），必须逐字复制自 `assets/template.html`。手写该脚本几乎必然遗漏初始化调用，导致首屏文字消失。

## 交付自检

| 检查项       | 标准                                                                                    |
| ------------ | --------------------------------------------------------------------------------------- |
| 占位符       | 不存在 `[必填]`、未替换标题、模板默认文案                                               |
| 单一场景风格 | 整份 deck 只使用 1 个场景风格                                                           |
| 页面角色     | 每页角色明确且不重复堆叠                                                                |
| 视觉中心     | 每页第一视觉焦点清晰，无随机漂浮                                                        |
| 信息层级     | 标题、主视觉、支撑信息层级分明                                                          |
| 叙事节奏     | 有钩子、展开、转折、框架、行动或收束                                                    |
| 可读性       | 无白底白字、暗底低对比、小字过密；正文禁止半透明容器+灰色文字                           |
| 裁切         | 主体容器无文字溢出，底部内容不被导航遮挡                                                |
| 字符编码     | HTML 中所有中文/CJK 字符必须是原文字符，禁止 `\uXXXX` 转义                              |
| 翻页机制     | 使用 `#deck` + `transform: translateX()`，禁止 scroll-snap 等                           |
| 模块脚本     | `<script type="module">` 动效引擎完整复制自 template.html，包含首屏 `playSlide(0)` 调用 |
| 文件         | 输出可直接打开的单文件 HTML                                                             |

## 错误处理

| 错误场景                             | 处理方式                                                                                                                              |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
| 用户只给主题                         | 先补商业叙事蓝图，再生成 PPT                                                                                                          |
| 用户要求风格很多                     | 收敛为 1 个场景风格，并说明选择理由                                                                                                   |
| 内容太多                             | 按叙事角色拆页，绝不缩小字号硬塞                                                                                                      |
| 内容太少                             | 补足逻辑链，不编造数据                                                                                                                |
| 缺少素材                             | 使用排版、框架、对比、数字和留白，不强行找图                                                                                          |
| 模板不符合审美                       | 修改模板或局部 CSS，直到符合大师规则                                                                                                  |
| 用户指出页面低级                     | 先诊断违反了哪条 PPT 规则，再修复，不只移动位置                                                                                       |
| 中文/CJK 显示为乱码或 `\uXXXX`       | 必须重新生成整个 HTML，确保所有 CJK 字符为原文字符                                                                                    |
| PPT 纵向滚动而非横向翻页             | 翻页机制错误，必须改为 `#deck` + `transform: translateX()`                                                                            |
| 当前页底部露出下一页内容             | 翻页未按 `100vw` 对齐，改用 `#deck` + `transform` 方案根治                                                                            |
| 首屏加载后文字消失，切页再切回才恢复 | 动效引擎脚本被手写或简化，遗漏了 `playSlide(0)` 初始化调用 → 必须从 `assets/template.html` 逐字复制 `<script type="module">` 完整脚本 |