back
loading skill details...
交互式PPT设计全流程管控，基于create-ppt技能，增加需求确认→风格预览→正式生成三阶段交互
---
name: opc-ppt-design-workflow
description: 交互式PPT设计全流程管控，基于create-ppt技能，增加需求确认→风格预览→正式生成三阶段交互
license: MIT
compatibility:
- claude-code
- copilot
- cursor
- openclaw
- coze
author: 胡田
version: 1.0.0
---
# PPT设计流程 Skill
## 定位
交互式PPT设计全流程管控，基于create-ppt技能，增加"需求确认→风格预览→正式生成"三阶段，确保交付即满意。
## 核心理念
1. **先问后做，先看后全做。** 不允许接到任务直接开干，必须经过需求确认和风格预览两个关卡。
2. **文字和图像分离。** AI生图模型是"画"字而非"写"字，中文极易出现乱码、缺笔画、虚构字。解决方案：**图像负责"好看"，HTML负责"正确"**。
---
## 三阶段流程
### 阶段一：需求确认（必问5维度）
收到PPT制作需求后，必须向用户逐一确认以下5个维度。用户已明确给出的不再重复问，缺失的必须问：
| 维度 | 必问问题 | 示例 |
|------|---------|------|
| **1.内容定位** | PPT主题是什么？核心传达1-3个要点？受众是谁？ | "技术成果转化OPC案例全集，受众是培训学员" |
| **2.章节架构** | 几个章节？每章重点是什么？有无必须包含/排除的内容？ | "9章，去掉曹操案例，加电促会" |
| **3.页面规模** | 预计多少页？有无特定页数限制？ | "12-15页" |
| **4.数据精度** | 哪些数据必须精确呈现？哪些可以概括？ | "879→120筛选数据必须精确" |
| **5.风格偏好** | 从8大风格中选择（可多选2-3种做预览） | "轻松科普风+科技动感二次元风" |
**提问模板**：
```
收到，做PPT前我需要确认几个点：
1. **内容定位**：[已知的填上，未知的问]
2. **章节架构**：[已知的填上，未知的问]
3. **页面规模**：[已知的填上，未知的问]
4. **数据精度**：[已知的填上，未知的问]
5. **风格偏好**：以下8种风格，选2-3种我做预览对比：
A. 严谨学术顶刊风 E. 日系蒸汽波迷幻风
B. 轻松科普风 F. 极简手绘插图风
C. 欧式轻奢商务风 G. 新中式混搭风
D. 科技动感二次元风 H. 美系硬朗大气风
```
### 阶段二：风格预览（1-2页 × 2-3种风格）
用户选择风格后，每种风格只做**1-2页**预览（封面页+1个典型内容页），让用户直观对比选择。
**预览生成规则**：
- 每种风格生成1-2页，使用create-ppt技能的generate_batch.py
- 预览页必须有实质内容（用用户提供的真实数据），不用占位符
- 预览文件命名：`./{标题}_preview_{风格代号}.pptx.html`
- 同时展示2-3种预览，让用户对比
**预览提示词**：
```
我做了[2-3]种风格的预览，每样1-2页，你看看哪个感觉对：
[风格A预览] - 特点说明
[风格B预览] - 特点说明
[风格C预览] - 特点说明
选哪个？也可以选2-3种混搭（比如封面用A，内容用B）
```
### 阶段三：正式生成（选定风格后全量制作）
用户确认风格后，开始全量生成。
**生成规则**：
- 使用create-ppt技能的标准流程
- 按阶段一确认的架构和内容制作
- 遵循8大风格的标准化prompt模板
- 生成后必须验证（页数、格式、无乱码）
---
## 8大风格体系
### A. 严谨学术顶刊风
- **适用**：学术论文答辩、科研报告、技术白皮书
- **视觉风格prompt**：`线性扁平风格，纯白背景，深灰细线网格纹理，极简无装饰。标题使用衬线体，字号中号，正文极小号。配色仅用深灰+单色强调（深蓝或深红）。数据图表严谨对齐，表格带细线框。不要出现人像和装饰图案。`
- **布局特征**：左对齐为主，大量留白，图注式标注
- **字体**：衬线体标题，无衬线正文
- **配色**：白底+深灰(#333333)+单强调色(#1a3a5c或#8b0000)
### B. 轻松科普风
- **适用**：B站科普视频、公众号配图、知识分享、培训课件
- **视觉风格prompt**：`米白暖色风格，米色图纸感背景，低饱和暖色调。扁平几何图形和图标辅助说明，圆角卡片承载内容。标题中号粗体，正文小号。配色以暖灰、淡蓝、淡橙为主，点缀亮色。轻松友好但信息清晰。不要出现人像。`
- **布局特征**：卡片式布局，图标+文字组合，流程图/步骤图
- **字体**：圆体或无衬线
- **配色**：米白(#FFF8F0)+暖灰(#8B7E74)+淡蓝(#7EB8DA)+淡橙(#F5A962)
### C. 欧式轻奢商务风
- **适用**：高端商务提案、品牌发布、投资路演
- **视觉风格prompt**：`线性扁平风格，深藏青底色，金色细线装饰。标题使用衬线体大号，正文小号。几何色块以深色为主，金色或浅色文字。极简装饰线条，对称构图。不要出现人像。`
- **布局特征**：对称构图，大面积色块，金色分隔线
- **字体**：衬线体为主
- **配色**：深藏青(#0A1628)+金色(#C5A55A)+浅灰白(#E8E4DD)
### D. 科技动感二次元风
- **适用**：科技产品发布、AI/互联网公司、技术架构展示
- **视觉风格prompt**：`赛博科技风格，深蓝渐变背景，霓虹发光线条和几何粒子装饰。标题大号粗体，带发光效果。信息卡片半透明玻璃质感，边框发光。流程图用霓虹箭头连接。配色以深蓝+电光蓝+亮紫为主。不要出现人像。`
- **布局特征**：中心辐射/科技路线图/架构图，发光节点连接
- **字体**：无衬线粗体
- **配色**：深蓝(#0B0E2D)+电光蓝(#00D4FF)+亮紫(#8B5CF6)+霓虹绿(#00FF88)
### E. 日系蒸汽波迷幻风
- **适用**：创意提案、潮流品牌、文化类内容
- **视觉风格prompt**：`蒸汽波美学风格，渐变粉紫底色，网格线和日落圆形装饰。标题使用粗体大号，文字带轻微阴影。几何图形以圆形和三角为主，半透明叠层效果。配色以粉紫+青蓝+日落橙为主。不要出现人像。`
- **布局特征**：中心对称，叠层色块，网格线背景
- **字体**：无衬线，可带轻微倾斜
- **配色**：粉紫(#FF71CE)+青蓝(#01CDFE)+日落橙(#FF6B6B)+深紫(#2B1055)
### F. 极简手绘插图风
- **适用**：知识分享、生活科普、个人品牌、经验总结
- **视觉风格prompt**：`手绘笔记风格，米白纸张质感背景，手绘线条装饰。标题使用手写风格大号字，正文小号。信息用手绘框和箭头组织，配简洁的手绘小图标。配色以黑白为主，点缀单色（蓝色或绿色）。不要出现人像。`
- **布局特征**：手绘框+箭头连接，自由布局，笔记感
- **字体**：手写体/手绘感
- **配色**：米白(#FFF9F0)+黑色(#222222)+单色点缀(#3B82F6或#10B981)
### G. 新中式混搭风
- **适用**：文化项目、政策解读、传统行业升级、政府汇报
- **视觉风格prompt**：`新中式风格，宣纸质感底色，淡墨晕染装饰。标题使用衬线体大号，正文小号。几何色块以淡金和墨色为主，配以简笔水墨元素（山、云、竹等抽象化）。配色以墨灰+淡金+朱红为主。不要出现人像。`
- **布局特征**：留白意境，竖排可选，水墨点缀
- **字体**：衬线体/楷体
- **配色**：宣纸白(#F5F0E8)+墨灰(#4A4A4A)+淡金(#C9B037)+朱红(#C23A2B)
### H. 美系硬朗大气风
- **适用**：战略规划、军事/安全/工业、大型工程
- **视觉风格prompt**：`硬朗工业风格，深灰底色，粗实线条分隔。标题使用超粗体大号，正文中号。色块以深色为主，配以高对比亮色强调。几何形状方正，无圆角。配色以深灰+亮黄+白色为主。不要出现人像。`
- **布局特征**：方正色块，粗线条，左对齐，大色块对比
- **字体**：超粗无衬线
- **配色**：深灰(#2D2D2D)+亮黄(#FFD700)+白色(#FFFFFF)+安全橙(#FF6600)
---
## 标准化Prompt控制机制
### 标题控制
- 每页必须有明确标题，写法："标题「XX」位于页面[位置]，[字号]粗体"
- 章节页标题格式："第X章 · [章节名]"
- 禁止纯描述性标题（如"数据分析"），必须带观点（如"数据说话：筛选率13.7%远超行业均值"）
### 字体大小控制
| 元素 | 学术顶刊 | 科普/手绘 | 商务/中式 | 科技/二次元 | 蒸汽波/硬朗 |
|------|---------|----------|----------|------------|-----------|
| 页标题 | 中号 | 中号大 | 大号 | 大号 | 超大号 |
| 节标题 | 小号 | 中号 | 中号 | 中号 | 大号 |
| 正文 | 极小号 | 小号 | 小号 | 小号 | 中号 |
| 数据数字 | 中号 | 大号 | 大号 | 超大号 | 超大号 |
### 布局控制
- 禁止连续2页以上相同布局
- 布局类型轮换：流程图→左右对比→矩阵卡片→中心辐射→列表详情→漏斗图
- 4个以上分点时：优先横向/矩阵布局，避免纵向堆叠
### 页面特效控制
| 风格 | 允许特效 | 禁止特效 |
|------|---------|---------|
| 学术顶刊 | 细线网格、表格线 | 发光、渐变、粒子 |
| 轻松科普 | 圆角阴影、淡渐变 | 发光、粒子、强对比 |
| 欧式商务 | 金线、对称、渐变色块 | 粒子、手绘元素 |
| 科技二次元 | 发光、粒子、玻璃质感 | 水墨、手绘 |
| 蒸汽波 | 叠层、网格、渐变 | 严谨表格 |
| 手绘插图 | 手绘线条、笔记框 | 发光、几何精确 |
| 新中式 | 水墨晕染、淡渐变 | 发光、粒子 |
| 美系硬朗 | 粗线、色块对比 | 圆角、渐变、手绘 |
---
## 质量检验机制
### 生成前检验
- [ ] 5维度需求是否全部确认
- [ ] 风格预览是否已通过用户选择
- [ ] prompt是否使用对应风格的标准化模板
- [ ] 每页标题是否带观点（非纯描述）
- [ ] 布局是否有足够变化（非连续同布局）
### 生成后检验（交付前必须执行）
- [ ] 文件存在且大小>1KB
- [ ] SLIDE SPLIT数量 = 页数-1
- [ ] DOCTYPE数量 = 页数（每页独立HTML）
- [ ] 抽查3页HTML结构完整（DOCTYPE/html/head/body）
- [ ] 无乱码字符（检查控制字符和Unicode替换符）
- [ ] 页码连续正确
- [ ] 如有特定内容要求（如去掉某人物），grep确认已执行
### 内容逻辑检验
- [ ] 章节架构与需求一致
- [ ] 关键数据准确（与源数据对照）
- [ ] 无遗漏案例/章节
- [ ] 风格统一性（配色/字体/布局不跳跃）
---
## 执行规范
1. **接到PPT任务**：不要立刻做，先执行阶段一
2. **风格预览**：用create-ppt的generate_batch.py生成，只做1-2页
3. **预览转正式**：用户确认后，用同一ppt_title继续生成剩余页面（增量模式）
4. **交付验证**：执行"生成后检验"清单，全部通过才交付
5. **失败处理**：单页失败用generate_batch.py重试，最多2次；仍失败则交付已有部分并说明
## 文字防乱码机制（极其重要）
### 问题根因
AI生图模型（Stable Diffusion/Seedance等）本质是**画字而非写字**——根据字形概率分布生成像素。遇到中文这种笔画密集的字符，极大概率产生：
- 缺笔画（"谢"画成"射"）
- 多笔画（凭空多一横一点）
- 虚构字（完全不存在的"字"）
- 笔画粘连（几个字糊成一团）
- 英文/数字也可能变形（O变成0，1变成l）
### 解决方案：图文分离双层架构
**核心原则：图像负责"好看"，HTML负责"正确"。**
每页PPT由两层构成：
1. **底层**：AI生成的视觉设计图（背景、装饰、图标、流程箭头、色块形状）——负责美感
2. **上层**：HTML/CSS渲染的真实文字——负责正确
```
┌─────────────────────────┐
│ HTML文字层（z-index:2） │ ← 标题、正文、数据、标签
├─────────────────────────┤
│ AI生图背景层(z-index:1) │ ← 配色、装饰、图形、图标
└─────────────────────────┘
```
### Prompt编写规则（文字控制三原则）
**原则1：生图prompt中尽量不放文字**
- ❌ 好的做法：prompt中写"标题位置预留空白区域"，文字由HTML覆盖
- ✅ 好的做法：只在极少数场景（封面大标题）允许生图渲染文字，但必须同时提供HTML文字层兜底
**原则2：必须放文字时，只用英文/数字/极简中文**
- 安全：数字"879"、英文"OPC"、符号"%"
- 危险：超过3个字的中文词组、带标点的中文句子
- 绝对禁止：中文长句、带特殊字符的内容
**原则3：所有关键文字必须有HTML层兜底**
- 即使prompt中要求渲染了文字，HTML层也必须叠加上正确的文字
- 用户看到的是HTML文字覆盖在生图之上
- HTML文字设为半透明底色或精确定位，与生图设计融合
### HTML文字覆盖模板
每页生成的pptx.html结构：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<style>
.slide-container {
position: relative;
width: 1280px; height: 720px;
overflow: hidden;
}
.bg-image {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 1;
}
.text-layer {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
z-index: 2;
pointer-events: none;
}
.text-layer .title {
position: absolute;
top: 40px; left: 60px;
font-size: 36px; font-weight: 700;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
/* 根据风格调整颜色 */
}
.text-layer .subtitle {
position: absolute;
top: 90px; left: 60px;
font-size: 20px;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.text-layer .content-card {
position: absolute;
/* 精确定位到生图中的卡片区域 */
font-size: 16px;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
background: rgba(255,255,255,0.7);
padding: 8px 12px;
border-radius: 8px;
}
.page-number {
position: absolute; bottom: 15px; right: 25px;
font-size: 12px; color: rgba(255,255,255,0.5);
font-family: sans-serif;
z-index: 2;
}
</style>
</head>
<body>
<div class="slide-container">
<img class="bg-image" src="{AI生成的图片URL}" alt="背景"/>
<div class="text-layer">
<div class="title">OPC案例全集</div>
<div class="subtitle">23个实战案例 · 9大方法论</div>
<!-- 其他文字元素精确定位 -->
</div>
<div class="page-number">1/14</div>
</div>
</body>
</html>
```
### 文字定位策略
| 文字类型 | 定位方式 | 说明 |
|---------|---------|------|
| 页面标题 | 绝对定位 top+left | 固定在顶部，与生图标题区域对齐 |
| 副标题 | 绝对定位，标题下方 | 跟随标题 |
| 数据数字 | 绝对定位，居中/偏移 | 大号粗体，精确覆盖生图中的数字位置 |
| 卡片内容 | 绝对定位+半透明底色 | 白色半透明底确保可读性 |
| 页码 | 绝对定位 right+bottom | 固定右下角 |
| 流程标签 | 绝对定位，逐一 | 每个标签单独定位到流程节点上方 |
### 生成后文字验证（必做）
交付前必须逐页检查：
- [ ] 所有中文文字正确，无乱码/缺笔画/虚构字
- [ ] 数字精确（对比源数据）
- [ ] 英文无拼写错误
- [ ] 文字位置与生图设计协调，不遮挡关键图形
- [ ] 文字可读性：对比度足够，无底色冲突
### 混合策略决策表
| 场景 | 文字处理方式 | 生图prompt文字量 |
|------|------------|-----------------|
| 封面（1-2个大词） | 允许生图渲染+HTML兜底 | 2-3个短词 |
| 数据展示页 | 生图只画图形，HTML覆盖数字 | 0个或仅数字 |
| 流程图页 | 生图画箭头/节点框，HTML填文字 | 0个 |
| 对比页 | 生图画左右色块，HTML写对比内容 | 0个 |
| 矩阵卡片页 | 生图画卡片框，HTML填内容 | 0个 |
| 章节过渡页 | 允许生图渲染章节名+HTML兜底 | 1-2个短词 |
---
## 与create-ppt技能的关系
本Skill是create-ppt的**流程管控层**，不替代create-ppt的生图能力。实际生图仍调用create-ppt的脚本，本Skill负责：
- 需求确认（减少返工）
- 风格标准化（8大风格prompt模板）
- 文字防乱码（图文分离双层架构）
- 质量检验（交付前必检）
## 图文位置和谐机制（图文分离架构 v2）
### 问题根因
图文分离双层架构（图底层+文字层）有一个致命缺陷：**AI生图不知道文字会放在哪，文字也不知道图片的视觉重心在哪**。结果就是文字经常压在图片的装饰元素上，或者文字因为图片底色太杂而看不清。
### 解决方案：图文和谐三层架构
在原来的"两层"之间，插入一个**视觉缓冲层（text-zone-backdrop）**——一个渐变半透明遮罩，在文字区提供实底保证可读性，在图片区透明让视觉元素展示。
```
┌──────────────────────────────┐
│ HTML文字层（z-index:3） │ ← 标题、正文、数据
├──────────────────────────────┤
│ 渐变缓冲层（z-index:2） │ ← 文字区实底→图片区透明
├──────────────────────────────┤
│ AI生图背景层（z-index:1） │ ← 配色、装饰、图形
└──────────────────────────────┘
```
### 第一层：AI生图留白区规范
在生图prompt中强制指定文字区和视觉区的空间分配：
**内容页prompt模板**（在风格prompt末尾追加）：
```
构图要求：左侧45%和顶部15%为纯净纹理/渐变区域，仅保留极简装饰线条；
视觉装饰元素（图形、图标、色块）集中在右侧55%和底部25%。
画面中不要出现任何文字、字母或数字。
```
**封面页prompt模板**：
```
构图要求：中央60%区域（水平30%-70%，垂直25%-65%）为纯净纹理区域，仅保留极简装饰；
视觉装饰元素集中在四周边缘和角落。
画面中不要出现任何文字、字母或数字。
```
**目录页prompt模板**：
```
构图要求：左侧60%为纯净纹理/渐变区域；视觉装饰集中在右侧40%。
画面中不要出现任何文字、字母或数字。
```
### 第二层：HTML渐变缓冲层规范
根据页面类型，在bg-img和text-layer之间插入渐变遮罩div：
**内容页缓冲层CSS**（文字左图右布局）：
```css
.text-zone-backdrop {
position: absolute;
top: 0; left: 0;
width: 55%; height: 100%;
z-index: 2;
background: linear-gradient(to right,
var(--backdrop-solid) 0%,
var(--backdrop-solid) 55%,
var(--backdrop-mid) 80%,
transparent 100%);
pointer-events: none;
}
```
**封面页缓冲层CSS**（居中标题）：
```css
.text-zone-backdrop-cover {
position: absolute;
top: 25%; left: 15%;
width: 70%; height: 50%;
z-index: 2;
background: radial-gradient(ellipse at center,
var(--backdrop-solid) 0%,
var(--backdrop-mid) 60%,
transparent 100%);
pointer-events: none;
}
```
**目录页缓冲层CSS**（左侧列表）：
```css
.text-zone-backdrop-toc {
position: absolute;
top: 0; left: 0;
width: 65%; height: 100%;
z-index: 2;
background: linear-gradient(to right,
var(--backdrop-solid) 0%,
var(--backdrop-solid) 65%,
var(--backdrop-mid) 85%,
transparent 100%);
pointer-events: none;
pointer-events: none;
}
```
**各风格的缓冲层变量**：
| 风格 | --backdrop-solid | --backdrop-mid |
|------|-----------------|----------------|
| A学术顶刊 | rgba(255,255,255,0.96) | rgba(255,255,255,0.7) |
| B轻松科普 | rgba(255,248,240,0.93) | rgba(255,248,240,0.65) |
| C欧式商务 | rgba(10,22,40,0.88) | rgba(10,22,40,0.5) |
| D科技二次元 | rgba(11,14,45,0.88) | rgba(11,14,45,0.5) |
| E蒸汽波 | rgba(43,16,85,0.85) | rgba(43,16,85,0.45) |
| F手绘插图 | rgba(255,249,240,0.93) | rgba(255,249,240,0.65) |
| G新中式 | rgba(245,240,232,0.93) | rgba(245,240,232,0.6) |
| H美系硬朗 | rgba(45,45,45,0.9) | rgba(45,45,45,0.55) |
### 第三层：标准布局网格
每种页面类型定义固定文字区域坐标，避免凭感觉定位：
| 页面类型 | 标题位置 | 内容区 | 图片展示区 |
|---------|---------|-------|-----------|
| 封面 | center(30-60%h, 15-85%w) | center-sub | 四周边缘 |
| 目录 | top-center(0-8%h) | left(5-55%w, 10-88%h) | right(55-100%w) |
| 左文右图 | top-left(0-8%h, 5-50%w) | left(5-48%w, 10-85%h) | right(48-100%w) |
| 右文左图 | top-right(0-8%h, 50-95%w) | right(50-95%w, 10-85%h) | left(0-52%w) |
| 全幅数据 | top-center(0-8%h) | center(10-85%w, 10-85%h) | 背景装饰 |
| 结尾 | center(35-60%h) | center-sub | 四周边缘 |
### 字体大小标准化（最低值，只可更大不可更小）
| 元素 | 封面页 | 内容页 | 最小值 |
|------|-------|-------|--------|
| 主标题 | 72-80px | - | 72px |
| 副标题 | 28-32px | - | 28px |
| 页标题 | - | 42-48px | 42px |
| 卡片标题 | - | 20-24px | 20px |
| 正文/卡片文字 | - | 16-18px | 16px |
| 数据数字 | - | 52-60px | 52px |
| 标签/辅助 | - | 14-16px | 14px |
| 页码 | 12px | 12px | 12px |
| 目录条目 | - | 17-19px | 17px |
| 表格内容 | - | 14-15px | 14px |
### HTML三层模板（内容页）
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<style>
:root {
--backdrop-solid: rgba(245,240,232,0.93);
--backdrop-mid: rgba(245,240,232,0.6);
--title-color: #4A4A4A;
--text-color: #666;
--accent-color: #C9B037;
}
.slide-container {
position: relative; width: 1280px; height: 720px; overflow: hidden;
}
.bg-image {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; object-fit: cover;
}
.text-zone-backdrop {
position: absolute; top: 0; left: 0; width: 55%; height: 100%; z-index: 2;
background: linear-gradient(to right,
var(--backdrop-solid) 0%, var(--backdrop-solid) 55%,
var(--backdrop-mid) 80%, transparent 100%);
pointer-events: none;
}
.text-layer {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none;
}
.text-layer .page-title {
position: absolute; top: 3%; left: 4%;
font-size: 44px; font-weight: 700; color: var(--title-color);
font-family: 'STSong','PingFang SC',serif;
}
.text-layer .content-area {
position: absolute; top: 12%; left: 4%; width: 46%;
}
.page-number {
position: absolute; bottom: 12px; right: 20px; font-size: 12px;
color: rgba(74,74,74,0.4); z-index: 3;
}
</style>
</head>
<body>
<div class="slide-container">
<img class="bg-image" src="{AI图片URL}"/>
<div class="text-zone-backdrop"></div>
<div class="text-layer">
<div class="page-title">标题</div>
<div class="content-area">
<!-- 所有内容元素 -->
</div>
</div>
<div class="page-number">X/Y</div>
</div>
</body>
</html>
```
### 生成后图文和谐检验（追加到质量检验机制）
交付前必须检查：
- [ ] 每页是否有对应的缓冲层（backdrop）div
- [ ] 缓冲层z-index在图(1)和文字(3)之间（z-index:2）
- [ ] 文字元素是否在缓冲层覆盖范围内
- [ ] 字体大小不低于最低值标准
- [ ] 文字与图片装饰元素无重叠冲突
- [ ] 不同页面类型使用了正确的缓冲层类型（封面/目录/内容/结尾）
## 美学原则（高于一切参数）
### 核心认知
参数（色值、字号、百分比）是骨架，**呼吸感**才是灵魂。一张PPT好不好看，差的不在色值差几个数字，差在视觉节奏、层次关系、和"该安静的地方安静"。
### 五条美学铁律
**1. 留白不是空，是呼吸**
- 不要把每一寸都填满。好的设计，留白本身就在说话
- 封面页至少50%留白，内容页至少25%留白
- 留白最忌"均匀分布"——要像国画一样，疏可走马、密不透风
**2. 每页只有一个声音**
- 每页只有一个视觉焦点，其余都是配角
- 如果数据和标题在抢注意力，就是失败
- 大数字/核心结论必须是当页唯一的"大声"，其余都"轻声"
**3. 对比的张力，不在大小在关系**
- 好的对比不是标题80px正文10px这种暴力差距
- 是标题安静沉稳（深色、粗体、少装饰），数据活泼跳脱（强调色、大号、单独存在）
- 装饰元素永远是最低声部——看得见但不抢眼
**4. 节奏感：松紧交替**
- 封面页要"松"——大面积留白+居中标题，像深呼吸
- 目录页要"稳"——节奏均匀，像心跳
- 内容页要"紧"——信息密度高，但文字区有缓冲底色给眼睛喘息
- 章节过渡页要"顿"——突然安静，像一句话说完后的停顿
- 结尾页要"收"——回到封面的呼吸感，但更轻
**5. 风格的灵魂是气质，不是元素**
- 新中式不是"贴水墨画"，是**克制**——一笔朱砂在大量留白里
- 科普风不是"用暖色"，是**亲切**——像朋友在白板上画给你看
- 科技风不是"堆霓虹"，是**想象**——深空里一线光，像宇宙中的信号
- 学术风不是"白底黑字"，是**严谨**——每个像素都经过审稿
- 欧式商务不是"金色线条"，是**从容**——不急不躁，自信的沉默也是力量
### Prompt美学写法
在标准prompt基础上，追加**美学指令**（用比喻和感受词，而非纯参数）：
| 页面类型 | 美学指令示例 |
|---------|------------|
| 封面 | "标题区安静如停顿，装饰区轻如回声，整体感觉像一本精装书翻开的第一页" |
| 目录 | "节奏均匀如心跳，每个条目是平等的，没有谁比谁更重要" |
| 内容页 | "文字区是主角在念台词，装饰区是舞台灯光——看得见但不抢戏" |
| 数据页 | "大数字是页面的唯一高音，其余元素都是和弦伴奏" |
| 章节过渡 | "突然安静，像一句话说完后的停顿，给读者消化上一章的时间" |
| 结尾 | "像一首曲子的余音，安静地结束，不拖泥带水" |
### 检验品味的方法
交付前，不要只检查参数清单，问自己三个问题：
1. **第一眼看到什么？** 如果答案不明确，说明这页没有焦点
2. **哪里让眼睛不舒服？** 如果有，多半是对比不足或元素打架
3. **关掉内容只看版面，还好看吗？** 好的排版，即使文字变成乱码，结构本身也是美的
don't have the plugin yet? install it then click "run inline in claude" again.