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.