# Chatgpt Ppt Maker

> 将资料、旧PPT或参考HTML整理为完整汇报，先生成逐页GPT视觉稿，再按视觉稿重建可编辑Reveal.js HTML，并完成截图质检、动画编排、离线单文件打包；同时保留图片型PPTX输出。Use when 用户要求“用GPT图片做PPT”“按图片风格转HTML”“做网页PPT/HTML汇报”“打包成别人双击可打开的单文件”，或需要从原始资料完成大纲、视觉稿、HTML和交付的端到端流程。

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

---


# ChatGPT PPT Maker

把资料变成两类交付物：

- 图片型 PPTX：适合静态展示，视觉稿直接作为整页图片。
- 可编辑 HTML：适合文字准确、图表可改、分步动画和离线分发。

默认优先完成 `GPT 视觉稿 → 可编辑 HTML → 离线单文件`。用户明确只要 PPTX 时才停在图片型 PPTX。

## 核心规则

1. 每页只表达一个主张，先写一句话信息，再设计版式。
2. GPT 图片是视觉样张，不是事实来源。数字、名称和结论必须来自资料。
3. HTML 中的标题、正文、图表和流程图用 HTML/CSS 重建，避免把含文字的整页图片当背景。
4. 品牌 Logo 优先从用户提供的源文件、旧 PPT 或参考 HTML 提取，禁止自行重绘。
5. 未核实数据标注“待补充”或说明口径，不编造完整率和成果。
6. 每页最多 4 次点击；同一语义组使用同一个 `data-fragment-index`。
7. 必须完成截图质检和断网复验，不能只凭代码判断完成。

## 七阶段流程

### 0. 初始化项目

```bash
python scripts/init_project.py <项目目录>
```

生成 `deck-plan.md`、`prompts/`、`images/`、`html/`、`qa/` 和 `output/`。HTML 模板固定为 1280×720、16:9。

### 1. 审阅资料

解压并读取用户资料、旧 PPT、表格、PDF、HTML 和图片。先形成事实表：

| 字段 | 内容 |
|---|---|
| 来源 | 文件名、页码或章节 |
| 事实 | 可直接使用的文字或数字 |
| 口径 | 时间范围、分母、单位和是否重合 |
| 状态 | 已核实 / 待确认 / 不使用 |

参考 HTML 中的 Logo、配色和页眉必须提取原始资源。不要通过截图裁 Logo，除非源文件中没有独立资源。

### 2. 编写逐页脚本

先输出并保存 `deck-plan.md`。每页必须包含：

- 页码和页型
- 一句话信息
- 页面标题
- 事实与数据
- 版式结构
- GPT 图片提示词要点
- HTML 重建方式
- 动画节奏

用户未要求暂停时，完成脚本后直接继续制作；对高风险数据再单独确认。

### 3. 生成 GPT 视觉稿

每页一个提示词文件：

```text
prompts/p01_封面.txt
prompts/p02_目录.txt
```

先固定全套风格段，再写单页版式。提示词方法见 [docs/prompt-guide.md](docs/prompt-guide.md)。

网页端：

```bash
python scripts/imggen_webui.py --login
python scripts/imggen_webui.py --prompts prompts --images images
```

API：

```bash
python scripts/imggen_api.py --prompts prompts --images images
```

逐页检查中文、数字、Logo、裁切和风格一致性。有问题只重生成对应页：

```bash
python scripts/imggen_webui.py --prompts prompts --images images --page p07
```

### 4. 按视觉稿重建 HTML

从 `html/deck.html` 开始。把视觉稿拆成可编辑层：

- 品牌层：Logo、页眉、页码、底线。
- 内容层：标题、正文、指标、表格、图表、流程图。
- 图片层：照片、场景图、产品图；可局部裁切。
- 动画层：翻页入场和点击显现。

对照图片复刻布局比例、视觉层级和色彩，不复制图片中的错字。详细规范见 [docs/html-workflow.md](docs/html-workflow.md)。

### 5. 编排动画

- `.anim`：翻到页面自动入场，用于 Logo、标题和骨架。
- `.fragment`：点击显现，用于演讲节奏。
- 同一次点击出现的元素共享 `data-fragment-index`。
- 结论条作为最后一次点击。

不要让隐藏元素改变网格尺寸或页面高度。

### 6. 截图质检

```bash
python scripts/shot_qa.py html/deck.html --mode pages --pages 0,1,2 --out qa/pages
python scripts/shot_qa.py html/deck.html --mode two-state --pages 4,5,7 --out qa/two-state
python scripts/shot_qa.py html/deck.html --mode steps --pages 8 --steps 3 --out qa/steps
```

检查：

- 所有页均在 1280×720 内完整显示。
- 中文、数字、Logo 无错位和重影。
- 初始态、完成态和逐步动画均合理。
- 导航按钮、长文本和图表不互相遮挡。

### 7. 打包和断网复验

```bash
python scripts/pack_singlefile.py html/deck.html -o output/deck-offline.html
python scripts/verify_offline.py output/deck-offline.html --pages 0,3,8 --out qa/offline
```

只有输出同时满足以下条件才可交付：

- 外网请求：0
- 页面报错：0
- 抽查页截图完整

最终告诉用户：只需发送 `output/deck-offline.html`，接收方双击即可打开。

## PPTX 路线

用户需要静态 PPTX 时：

```bash
python scripts/assemble_pptx.py --images images --prompts prompts -o output/deck.pptx
```

文字密集、名单、表格和精确图表不应使用图片型 PPTX，改走 HTML 路线。

## 项目目录

```text
project/
├── deck-plan.md
├── prompts/
├── images/
├── html/
│   ├── deck.html
│   └── vendor/
├── qa/
└── output/
```

## 交付清单

- `deck-plan.md`
- 全套 GPT 视觉稿
- 可编辑 `html/deck.html`
- 截图质检拼图
- `output/deck-offline.html`
- 用户明确要求时附 `output/deck.pptx`