feat: PPT Agent Skill - 专业演示文稿全流程 AI 生成助手
模拟顶级 PPT 设计公司的完整工作流，输出高质量 HTML 演示文稿 + 可编辑矢量 PPTX。 - 6步Pipeline: 需求调研->资料搜集->大纲策划->策划稿->风格+配图+HTML设计稿->后处理 - 8种预置风格 + 7种Bento Grid布局 + 6种卡片类型 - 专业排版系统(7级字号) + 色彩比例法则(60-30-10) + 跨页视觉叙事 - 8种纯CSS数据可视化 + 5种配图融入技法 - HTML->SVG->PPTX 全自动转换管线
This commit is contained in:
sunbigfly
204
references/bento-grid.md
Normal file
204
references/bento-grid.md
Normal file
@@ -0,0 +1,204 @@
|
||||
# Bento Grid 布局系统
|
||||
|
||||
## 画布参数
|
||||
|
||||
```
|
||||
固定画布: width=1280px, height=720px
|
||||
标题区: x=40, y=20, w=1200, h=50
|
||||
内容区: x=40, y=80, w=1200, h=580
|
||||
卡片间距: gap=20px
|
||||
卡片圆角: border-radius=12px
|
||||
卡片内边距: padding=24px
|
||||
```
|
||||
|
||||
## CSS Grid 实现
|
||||
|
||||
所有布局通过 CSS Grid 精确实现。内容区容器统一定义：
|
||||
|
||||
```css
|
||||
.content-area {
|
||||
position: absolute;
|
||||
left: 40px; top: 80px;
|
||||
width: 1200px; height: 580px;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
## 页面类型布局
|
||||
|
||||
### 封面页 (cover)
|
||||
- 大标题居中或左对齐, font-size=48-56px, accent-primary 色
|
||||
- 副标题 font-size=24px
|
||||
- 演讲人/日期/公司 底部小号文字 font-size=16px
|
||||
- 装饰: 品牌色块、几何线条、配图（渐隐融合技法）
|
||||
- **不使用 Bento Grid**，自由排版
|
||||
|
||||
### 目录页 (toc)
|
||||
- 2-5 个等大卡片网格
|
||||
|
||||
| 卡片数 | grid-template-columns | 单卡尺寸 |
|
||||
|-------|----------------------|---------|
|
||||
| 2 | 1fr 1fr | 590x540 |
|
||||
| 3 | repeat(3, 1fr) | 387x540 |
|
||||
| 4 | 1fr 1fr / 1fr 1fr (2x2) | 590x260 |
|
||||
| 5 | repeat(3, 1fr) / repeat(2, 1fr) (3+2) | 混合 |
|
||||
|
||||
### 章节封面 (section)
|
||||
- "PART 0X" font-size=20px, accent-primary, letter-spacing=2px
|
||||
- 标题 font-size=44px, font-weight=700
|
||||
- 导语 font-size=18px, color=text-secondary
|
||||
- 大量留白，营造呼吸感
|
||||
- **不使用 Bento Grid**，居中排版
|
||||
|
||||
### 结束页 (end)
|
||||
- 标题 font-size=44px 居中
|
||||
- 核心要点 3-5 个, font-size=18px
|
||||
- 联系方式/CTA 底部
|
||||
|
||||
---
|
||||
|
||||
## 7 种内容页布局
|
||||
|
||||
所有基于内容区 (1200x580px, 起始坐标 40,80)。
|
||||
|
||||
### 1. 单一焦点
|
||||
|
||||
适用: 1个核心论点/大数据全屏展示
|
||||
|
||||
```css
|
||||
.content-area { grid-template: 1fr / 1fr; }
|
||||
/* 卡片: 1200x580 */
|
||||
```
|
||||
|
||||
### 2. 50/50 对称
|
||||
|
||||
适用: 对比、并列概念
|
||||
|
||||
```css
|
||||
.content-area { grid-template: 1fr / 1fr 1fr; }
|
||||
/* 左: 590x580 | 右: 590x580 */
|
||||
```
|
||||
|
||||
### 3. 非对称两栏 (2/3 + 1/3)
|
||||
|
||||
适用: 主次关系。**最常用的布局。**
|
||||
|
||||
```css
|
||||
.content-area { grid-template: 1fr / 2fr 1fr; }
|
||||
/* 主: 790x580 | 辅: 390x580 */
|
||||
```
|
||||
|
||||
### 4. 三栏等宽
|
||||
|
||||
适用: 3个并列比较
|
||||
|
||||
```css
|
||||
.content-area { grid-template: 1fr / repeat(3, 1fr); }
|
||||
/* 卡1: 387x580 | 卡2: 387x580 | 卡3: 386x580 */
|
||||
```
|
||||
|
||||
### 5. 主次结合 (大 + 两小)
|
||||
|
||||
适用: 层级关系。**推荐：信息层次丰富时优先选择。**
|
||||
|
||||
```css
|
||||
.content-area { grid-template: 1fr 1fr / 2fr 1fr; }
|
||||
/* 主: 790x580 (span 2 rows) | 辅1: 390x280 | 辅2: 390x280 */
|
||||
```
|
||||
|
||||
主卡片需设置 `grid-row: 1 / -1;` 跨两行。
|
||||
|
||||
### 6. 顶部英雄式
|
||||
|
||||
适用: 总分关系。**推荐：总分结构清晰时优先选择。**
|
||||
|
||||
**3子项版（最常用）**：
|
||||
```css
|
||||
.content-area { grid-template: auto 1fr / repeat(3, 1fr); }
|
||||
/* 英雄: 1200x260 (span 3 cols) | 子1-3: 387x300 */
|
||||
```
|
||||
|
||||
**4子项版**：
|
||||
```css
|
||||
.content-area { grid-template: auto 1fr / repeat(4, 1fr); }
|
||||
/* 英雄: 1200x260 (span 4 cols) | 子1-4: 285x300 */
|
||||
```
|
||||
|
||||
**2子项版**：
|
||||
```css
|
||||
.content-area { grid-template: auto 1fr / 1fr 1fr; }
|
||||
/* 英雄: 1200x280 (span 2 cols) | 子1-2: 590x280 */
|
||||
```
|
||||
|
||||
英雄卡片需设置 `grid-column: 1 / -1;` 跨所有列。
|
||||
|
||||
### 7. 混合网格
|
||||
|
||||
适用: 高信息密度, 4-6个异构块。**推荐：信息密度最高时优先选择。**
|
||||
|
||||
**2x3 网格**：
|
||||
```css
|
||||
.content-area { grid-template: repeat(3, 1fr) / 1fr 1fr; }
|
||||
/* 6个卡片: 各 590x180 */
|
||||
```
|
||||
|
||||
可通过 `grid-row`/`grid-column` 的 span 让个别卡片跨行/跨列，形成大小混搭效果。
|
||||
|
||||
**关键约束**: 所有卡片不得超出内容区边界（x+w<=1240, y+h<=660），间距>=20px，禁止重叠。
|
||||
|
||||
---
|
||||
|
||||
## 布局决策矩阵
|
||||
|
||||
| 内容特征 | 推荐布局 | 卡片数 |
|
||||
|---------|---------|-------|
|
||||
| 1 个核心论点/数据 | 单一焦点 | 1 |
|
||||
| 2 个对比/并列 | 50/50 对称 | 2 |
|
||||
| 主概念 + 补充 | 非对称两栏 | 2 |
|
||||
| 3 个并列要素 | 三栏等宽 | 3 |
|
||||
| 1 核心 + 2 辅助 | 主次结合 | 3 |
|
||||
| 综述 + 3-4 子项 | 顶部英雄式 | 4-5 |
|
||||
| 4-6 异构块 | 混合网格 | 4-6 |
|
||||
|
||||
**选择优先级**：避免"单一焦点"（除非确实只有一个全屏内容）。内容>=3块时，优先选择主次结合/英雄式/混合网格。
|
||||
|
||||
---
|
||||
|
||||
## 6 种卡片内容类型
|
||||
|
||||
### text（文本卡片）
|
||||
- 标题: h3, 18-20px, 700 weight
|
||||
- 正文: p, 13-14px, line-height 1.8
|
||||
- 关键词用 `<strong>` 或 `<span class="highlight">` 高亮
|
||||
- **最低要求**: 标题 + 至少 2 段正文（每段 30-50 字）
|
||||
|
||||
### data（数据卡片）
|
||||
- 核心数字: 36-48px, 800 weight, accent 色
|
||||
- 单位/标签: 14-16px, text-secondary
|
||||
- 补充解读: 13px
|
||||
- 推荐搭配一个 CSS 可视化（进度条/对比柱/环形图）
|
||||
- **最低要求**: 核心数字 + 单位 + 趋势 + 解读 + 可视化
|
||||
|
||||
### list（列表卡片）
|
||||
- 圆点: 6-8px 圆点, accent 色
|
||||
- 文字: 13px, line-height 1.6
|
||||
- 交替使用不同 accent 色圆点增加层次感
|
||||
- **最低要求**: 至少 4 条列表项，每条 15-30 字
|
||||
|
||||
### tag_cloud（标签云）
|
||||
- 容器: flex-wrap, gap=8px
|
||||
- 标签: 圆角胶囊形, 12px, accent 色边框
|
||||
- **最低要求**: 至少 5 个标签
|
||||
|
||||
### process（流程卡片）
|
||||
- 节点: 32px 圆形, accent 色, 居中步骤数字
|
||||
- 连线: **真实 `<div>` 元素**（禁止 ::before/::after）
|
||||
- 箭头: **内联 SVG `<polygon>`**（禁止 CSS border 三角形）
|
||||
- **最低要求**: 至少 3 个步骤，每步标题 + 一句描述
|
||||
|
||||
### data_highlight（大数据高亮区）
|
||||
- 用于封面或重点页的超大数据展示
|
||||
- 数字: 64-80px, 900 weight, accent 色
|
||||
- 副标题 + 补充数据行
|
||||
- **最低要求**: 1 个超大数字 + 副标题 + 补充数据行
|
||||
63
references/method.md
Normal file
63
references/method.md
Normal file
@@ -0,0 +1,63 @@
|
||||
# 核心方法论
|
||||
|
||||
> 来源：LINUX DO 论坛 Sandun 分享（7年PPT教学 + 3年AI产品经验）
|
||||
|
||||
## 核心论断
|
||||
|
||||
> PPT 的灵魂是内容，不是皮囊。
|
||||
|
||||
## 方法论要点
|
||||
|
||||
### 1. 从问题开始，不是从模板开始
|
||||
|
||||
先问清楚：给谁看？为什么做？希望对方记住什么？有哪些不能说错的事实？
|
||||
|
||||
这不是浪费时间 -- 一份精准的需求定义能让后续所有步骤的质量翻倍。专业 PPT 公司收费过万/页，其中至少 30% 的价值来自需求调研。
|
||||
|
||||
### 2. 内容先行，设计随后
|
||||
|
||||
推迟精美视觉，直到故事线经得起推敲。策划稿阶段只验证信息结构。
|
||||
|
||||
为什么这很重要：如果在设计完成后才发现内容逻辑有问题，修改成本是策划阶段的 5-10 倍。先用低成本的文字草稿验证结构，确认无误后再投入设计资源。
|
||||
|
||||
### 3. 插入策划稿中间层
|
||||
|
||||
典型工具从大纲直接跳到成品。本方法插入一个中间产物：
|
||||
- **每页的目的**：这页最想让观众记住什么？
|
||||
- **核心信息**：标题 + 主卡片内容 + 数据亮点
|
||||
- **证据支撑**：来自搜索的真实数据
|
||||
- **布局形式**：几张卡片、什么类型、如何排列
|
||||
- **层级关系**：主次分明，不是所有信息平铺
|
||||
|
||||
这是最大的实际质量提升点。策划稿是"地基"，没有牢固的地基，再华丽的设计也是空中楼阁。
|
||||
|
||||
### 4. 用模型能理解的布局语言
|
||||
|
||||
Bento Grid 卡片式布局是 AI 最容易理解和掌握的设计语言：
|
||||
- 将页面定义为卡片、容器、层级和间距
|
||||
- 让内容驱动布局选择（不是选个模板再往里填字）
|
||||
- 给出明确的尺寸/间距/强调规则
|
||||
|
||||
为什么选 Bento Grid 而不是传统幻灯片布局：传统 PPT 布局过于自由，AI 容易"画歪"。卡片式布局天然带有网格约束，AI 在约束内的发挥反而更出色 -- 就像十四行诗比自由诗更容易写出精品。
|
||||
|
||||
### 5. 阶段间使用结构化输出
|
||||
|
||||
每个步骤用 JSON 作为数据传递格式，而非自然语言：
|
||||
- 需求 -> 需求描述 JSON
|
||||
- 搜索 -> 资料集合 JSON
|
||||
- 大纲 -> PPT_OUTLINE JSON
|
||||
- 策划 -> 策划卡 JSON 数组
|
||||
- 设计 -> HTML 文件
|
||||
|
||||
JSON 的好处是**无歧义**。自然语言在传递过程中会信息损耗，JSON 的每个字段都有确切含义，下一步可以精准读取。
|
||||
|
||||
### 6. 一致性通过共享风格保证
|
||||
|
||||
先定风格（配色/字体/装饰），再像"生产乐高积木"一样批量生成。
|
||||
每页共享同一套 CSS 变量定义，确保 15 页 PPT 的视觉语言完全统一。
|
||||
|
||||
### 7. 真实数据填充，杜绝幻觉
|
||||
|
||||
对 AI PPT 最常见的抱怨是"内容空洞废话多"。根源是没有真实数据支撑。
|
||||
|
||||
本方法通过 Step 2（资料搜集）解决这个问题：先搜索再生成，每个数据点都有来源。宁可少放一条信息，也不编造一个数据。
|
||||
901
references/prompts.md
Normal file
901
references/prompts.md
Normal file
@@ -0,0 +1,901 @@
|
||||
# 可复用 Prompt 模板集
|
||||
|
||||
使用前替换所有 `{{PLACEHOLDER}}` 占位符。
|
||||
|
||||
## 目录
|
||||
|
||||
1. [需求调研 Prompt](#1-需求调研)
|
||||
2. [大纲架构师 v2.0](#2-大纲架构师)
|
||||
3. [内容分配与策划稿 Prompt](#3-内容分配与策划稿)
|
||||
4. [HTML 设计稿生成 Prompt](#4-html-设计稿生成)
|
||||
5. [演讲备注 Prompt](#5-演讲备注)
|
||||
|
||||
---
|
||||
|
||||
## 1. 需求调研
|
||||
|
||||
当用户只给了一个主题时使用。先搜索背景资料，再用专业顾问视角进行深度需求访谈。
|
||||
|
||||
```text
|
||||
你是一名顶级 PPT 咨询顾问（10 年演示设计经验，服务过世界 500 强）。用户给了一个主题，你的任务是通过专业访谈挖掘真实需求，而不是直接问"要多少页"这种浅层问题。
|
||||
|
||||
## 输入
|
||||
- 用户主题：{{TOPIC}}
|
||||
- 背景资料（来自搜索）：
|
||||
{{BACKGROUND_CONTEXT}}
|
||||
|
||||
## 访谈设计原则
|
||||
- 围绕"谁看 -> 为什么看 -> 看完要做什么"递进
|
||||
- 每个问题都直接影响后续内容策略（不问无用的问题）
|
||||
- 选项基于搜索结果动态生成，展示你的专业洞察
|
||||
- 问题之间有逻辑递进，前一题的答案影响后一题的选项
|
||||
|
||||
## 7 个深度问题（分三层递进）
|
||||
|
||||
### 第一层：场景与受众（决定整体策略方向）
|
||||
|
||||
1. **演示场景** -- 决定信息密度、节奏和视觉风格
|
||||
- A. 现场演讲（会议/路演/汇报 -- 观众注意力有限，需要冲击力强的视觉 + 精简文字）
|
||||
- B. 自阅文档（发给领导/客户/合作方 -- 需要信息完整、逻辑自洽、能脱离讲者独立理解）
|
||||
- C. 培训教学（内训/课程/工作坊 -- 需要结构化知识点 + 案例 + 可操作步骤）
|
||||
- D. 其他（请描述场景）
|
||||
|
||||
2. **核心受众** -- 决定专业深度和说服策略
|
||||
- A-D: 根据搜索结果推断的 3-4 种最可能的受众画像（示例："技术决策者（CTO/架构师）" / "投资人/商业决策者" / "一线执行团队" / "非专业公众"）
|
||||
- 每个画像附一句"他们最关心什么"的注释
|
||||
|
||||
3. **看完之后，你最希望观众做什么？** -- 决定内容编排的最终导向
|
||||
- A. 做出决策（审批/购买/投资/合作）
|
||||
- B. 理解并记住核心信息
|
||||
- C. 掌握具体方法/流程并执行
|
||||
- D. 改变认知/态度（对某个议题形成新的看法）
|
||||
- E. 自定义
|
||||
|
||||
### 第二层：内容策略（决定信息架构和深度）
|
||||
|
||||
4. **叙事结构** -- 决定大纲的骨架逻辑
|
||||
- A. 问题 -> 方案 -> 效果（经典 B2B 说服结构）
|
||||
- B. 是什么 -> 为什么重要 -> 怎么做（知识科普/培训结构）
|
||||
- C. 全景 -> 聚焦 -> 行动（先展示大图，再深入核心，最后收敛行动项）
|
||||
- D. 对比论证（现状 vs 方案 / 竞品 vs 我们 / 过去 vs 未来）
|
||||
- E. 时间线/发展史（按时间主线叙事）
|
||||
- F. 自定义结构
|
||||
|
||||
5. **内容侧重** -- 决定每个 Part 的主题权重
|
||||
- A-D: 根据搜索结果中发现的核心维度动态生成 3-4 个选项
|
||||
- 每个选项附带一句从搜索结果中提炼的关键发现
|
||||
- 可多选：选择 2-3 个作为重点，其余作为辅助
|
||||
|
||||
6. **说服力要素** -- 决定卡片内容的类型偏好
|
||||
- A. 硬数据驱动（市场规模/增长率/ROI/性能指标 -- 适合理性决策者）
|
||||
- B. 案例故事（客户成功案例/使用场景/前后对比 -- 适合需要共鸣的场合）
|
||||
- C. 权威背书（行业排名/权威机构认证/媒体报道/专家评价）
|
||||
- D. 流程方法（分步骤的操作指南/实施路径/技术架构图）
|
||||
- 可多选
|
||||
|
||||
### 第三层：执行细节
|
||||
|
||||
7. **补充信息**（自由文本，以下为提示项）：
|
||||
- 演讲人姓名 / 职位
|
||||
- 日期 / 场合名称
|
||||
- 公司/机构名称 / Logo / 品牌色
|
||||
- 页数偏好（留空则由 AI 根据内容量决定）
|
||||
- 必须包含的内容（如特定产品线、某个项目成果）
|
||||
- 必须回避的内容（如敏感竞品、未公开数据）
|
||||
- 视觉风格偏好（如公司有品牌规范）
|
||||
- **AI 配图偏好**：
|
||||
- A. 不需要配图（纯文字/数据驱动）
|
||||
- B. 只在关键页面配图（封面 + 章节封面，约 3-5 张）
|
||||
- C. 每页都配图（全页氛围感最强，生成时间较长）
|
||||
- D. 用户提供图片素材（请提供图片路径）
|
||||
|
||||
## 输出格式
|
||||
以"内容需求单"形式一次性展示所有问题。每题格式：
|
||||
|
||||
**[N/7] 问题标题**
|
||||
问题描述（一句话解释为什么问这个）
|
||||
- A. 选项1（附注释）
|
||||
- B. 选项2
|
||||
- ...
|
||||
|
||||
在问卷前附一段简短的背景分析（2-3 句话，让用户知道你已经做了功课）。
|
||||
|
||||
## 注意事项
|
||||
- 选项必须基于搜索结果动态生成，不能千篇一律
|
||||
- 每个选项的注释体现你的专业洞察（而不是废话）
|
||||
- 保持语气专业、精准、不啰嗦
|
||||
- 问卷总长度控制在一屏可读完（不要写成论文）
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. 大纲架构师
|
||||
|
||||
核心 Prompt。输出 PPT 大纲 JSON。
|
||||
|
||||
```text
|
||||
# Role: 顶级的PPT结构架构师
|
||||
|
||||
## Profile
|
||||
- 版本：2.0 (Context-Aware)
|
||||
- 专业：PPT逻辑结构设计
|
||||
- 特长：运用金字塔原理，结合背景调研信息构建清晰的演示逻辑
|
||||
|
||||
## Goals
|
||||
基于用户提供的 PPT主题、目标受众、演示目的与背景信息，设计一份逻辑严密、层次清晰的PPT大纲。
|
||||
|
||||
## Core Methodology: 金字塔原理
|
||||
1. 结论先行：每个部分以核心观点开篇
|
||||
2. 以上统下：上层观点是下层内容的总结
|
||||
3. 归类分组：同一层级的内容属于同一逻辑范畴
|
||||
4. 逻辑递进：内容按照某种逻辑顺序展开（时间/重要性/因果）
|
||||
|
||||
## 重要：利用调研信息
|
||||
你将获得关于主题的搜索摘要。请参考这些信息来规划大纲，使其切合当前的市场现状或技术事实，而不是凭空捏造。
|
||||
例如：如果调研显示"某技术已过时"，则不要将其作为核心推荐。
|
||||
|
||||
## 输入
|
||||
- PPT主题：{{TOPIC}}
|
||||
- 受众：{{AUDIENCE}}
|
||||
- 目的：{{PURPOSE}}
|
||||
- 风格：{{STYLE}}
|
||||
- 页数要求：{{PAGE_REQUIREMENTS}}
|
||||
- 内容侧重：{{EMPHASIS}}
|
||||
- 竞品对比：{{COMPETITOR}}
|
||||
- 背景信息与搜索资料：
|
||||
{{CONTEXT}}
|
||||
|
||||
## 输出规范
|
||||
请严格按照以下JSON格式输出，结果用 [PPT_OUTLINE] 和 [/PPT_OUTLINE] 包裹：
|
||||
|
||||
[PPT_OUTLINE]
|
||||
{
|
||||
"ppt_outline": {
|
||||
"cover": {
|
||||
"title": "引人注目的主标题（要有冲击力，不超过15字）",
|
||||
"sub_title": "副标题（补充说明，不超过25字）",
|
||||
"presenter": "演讲人（如有）",
|
||||
"date": "日期（如有）",
|
||||
"company": "公司/机构名（如有）"
|
||||
},
|
||||
"table_of_contents": {
|
||||
"title": "目录",
|
||||
"content": ["第一部分标题", "第二部分标题", "..."]
|
||||
},
|
||||
"parts": [
|
||||
{
|
||||
"part_title": "第一部分：章节标题",
|
||||
"part_goal": "这一部分要说明什么（一句话）",
|
||||
"pages": [
|
||||
{
|
||||
"title": "页面标题（有吸引力，不超过15字）",
|
||||
"goal": "这一页的核心结论",
|
||||
"content": ["要点1（含数据支撑）", "要点2", "要点3"],
|
||||
"data_needs": ["需要的数据/案例类型"]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"end_page": {
|
||||
"title": "总结与展望",
|
||||
"content": ["核心回顾要点1", "核心回顾要点2", "行动号召/联系方式"]
|
||||
}
|
||||
}
|
||||
}
|
||||
[/PPT_OUTLINE]
|
||||
|
||||
## Constraints
|
||||
1. 必须严格遵循JSON格式
|
||||
2. 页数要求：{{PAGE_REQUIREMENTS}}
|
||||
3. 每个 part 下至少 2 页内容页
|
||||
4. 封面页标题要有冲击力和记忆点
|
||||
5. 各 part 之间要有递进逻辑，不能只是并列堆砌
|
||||
6. content 中的要点应有搜索数据支撑，标注数据来源
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. 内容分配与策划稿
|
||||
|
||||
将搜索素材精准映射到大纲的每一页，同时生成可执行的策划稿结构。这一步将"内容填充"和"结构设计"合为一体 -- 在思考每页该放什么内容的同时，决定布局和卡片类型，既避免信息在传递中损耗，也减少一轮完整的 LLM 调用。
|
||||
|
||||
```text
|
||||
你是一名资深PPT内容架构师兼策划师。你的任务是将搜索资料精准分配到PPT每一页，并同时设计出每页的结构化策划卡。
|
||||
|
||||
核心目标：每页内容必须"填得满"且结构清晰。一页专业 PPT 不只是一个观点加几行字，而是一个核心论点 + 多维度的支撑 + 印象深刻的数据亮点 + 清晰的布局结构。
|
||||
|
||||
## 输入
|
||||
- PPT主题：{{TOPIC}}
|
||||
- 受众：{{AUDIENCE}}
|
||||
- PPT大纲JSON：
|
||||
{{OUTLINE_JSON}}
|
||||
- 搜索资料集合：
|
||||
{{SEARCH_RESULTS}}
|
||||
|
||||
## 任务
|
||||
|
||||
### 第一步：为每页分配内容
|
||||
|
||||
遍历大纲每页，执行以下操作：
|
||||
1. **匹配**：从搜索结果中找到与该页 content 关键词最相关的资料片段
|
||||
2. **扩展**：围绕核心论点，从搜索资料中挖掘 3-5 个不同维度的支撑内容
|
||||
- 数据维度：具体数字、百分比、排名、对比（如"同比增长 47%"）
|
||||
- 案例维度：具体事例、引用、成功/失败案例
|
||||
- 分类维度：将信息拆分为 3-5 个子分类/步骤/要素
|
||||
- 对比维度：before/after、竞品对比、行业基准
|
||||
3. **改写**：将资料改写为适合PPT展示的精炼文本
|
||||
- 主卡片内容：40-100 字（包含完整论点和关键数据）
|
||||
- 辅助标签/要点：每个 10-30 字
|
||||
- 使用短句和关键词
|
||||
4. **补充**：主动从搜索结果中补充大纲未覆盖但相关的数据点
|
||||
5. **指定卡片类型**：每条内容标注建议的 card_type
|
||||
|
||||
### 第二步：为每页设计策划结构
|
||||
|
||||
在内容分配完成的基础上，为每页设计可供设计执行的策划卡：
|
||||
|
||||
#### 布局选择指南
|
||||
根据内容特征选择最合适的布局（优先选择高信息密度布局）：
|
||||
- 1 个核心论点/数据 -> 单一焦点（仅用于极特殊的全屏展示）
|
||||
- 2 个对比概念 -> 50/50 对称
|
||||
- 主概念 + 补充说明 -> 非对称两栏（2/3 + 1/3）-- 最常用
|
||||
- 3 个并列要素 -> 三栏等宽
|
||||
- 1 个核心 + 2 个辅助数据/列表 -> **主次结合**（推荐：信息层次丰富）
|
||||
- 1 个综述 + 3-4 个子项 -> **顶部英雄式**（推荐：总分结构清晰）
|
||||
- 4-6 个异构信息块 -> **混合网格**（推荐：信息密度最高）
|
||||
|
||||
## 输出格式
|
||||
|
||||
为每页输出一个 JSON 对象，整体组成 JSON 数组。每个对象同时包含"内容"和"策划结构"：
|
||||
|
||||
```json
|
||||
{
|
||||
"page_number": 1,
|
||||
"page_type": "cover | toc | section | content | end",
|
||||
"title": "页面标题",
|
||||
"goal": "这页最想让观众记住什么",
|
||||
"layout_hint": "布局建议（如：主次结合 / 英雄式 + 下方三栏 / 混合网格）",
|
||||
"content_summary": {
|
||||
"core_argument": "一句话核心论点",
|
||||
"main_content": "40-100字的主卡片内容",
|
||||
"data_highlights": [
|
||||
{"value": "具体数字", "label": "标签", "interpretation": "一句解读"}
|
||||
],
|
||||
"supporting_points": ["辅助要点1", "辅助要点2", "辅助要点3"],
|
||||
"quote_or_conclusion": "一句有力的结论或权威引用（可选）"
|
||||
},
|
||||
"cards": [
|
||||
{
|
||||
"position": "位置描述（top-left / top-right / bottom-left 等）",
|
||||
"card_type": "text | data | list | chart_placeholder | tag_cloud | process",
|
||||
"title": "卡片标题（12字内）",
|
||||
"content": "卡片正文（80字内）",
|
||||
"data_points": ["具体数据"],
|
||||
"emphasis_keywords": ["需要强调的关键词"]
|
||||
}
|
||||
],
|
||||
"design_notes": "设计注意事项（哪些内容不能弱化，哪些可做装饰）"
|
||||
}
|
||||
```
|
||||
|
||||
## 硬性要求
|
||||
- 每个内容页 cards[] 数组至少 **3 张卡片**
|
||||
- 每个内容页至少使用 **2 种不同的 card_type**（不能全是 text）
|
||||
- 每个内容页至少 **1 张 data 类型卡片**（突出数字的视觉冲击力）
|
||||
- 每个内容页至少包含 **1 个数据亮点**（content_summary.data_highlights 中具体数字）
|
||||
- >= 70% 的内容页应包含标签/列表类辅助信息
|
||||
- 避免使用"单一焦点"布局，除非该页确实只需要一个全屏图表
|
||||
- 零幻觉：所有数据必须来自搜索结果
|
||||
- 覆盖所有页面（封面到结束页）
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. HTML 设计稿生成
|
||||
|
||||
核心设计 Prompt。每次调用生成一页完整 HTML 页面。调用前必须注入完整的风格定义和策划稿结构 JSON。
|
||||
|
||||
```text
|
||||
你是一名精通信息架构与现代 Web 设计的顶级演示文稿设计师。你的目标是将内容转化为一张高质量、结构化、具备高级感和专业感的 HTML 演示页面 -- 达到专业设计公司 1 万+/页的视觉水准。
|
||||
|
||||
## 全局风格定义
|
||||
{{STYLE_DEFINITION}}
|
||||
|
||||
（示例：
|
||||
{
|
||||
"style_name": "高阶暗黑科技风",
|
||||
"background": { "primary": "#0B1120", "gradient_to": "#0F172A" },
|
||||
"card": { "gradient_from": "#1E293B", "gradient_to": "#0F172A", "border": "rgba(255,255,255,0.05)", "border_radius": 12 },
|
||||
"text": { "primary": "#FFFFFF", "secondary": "rgba(255,255,255,0.7)" },
|
||||
"accent": { "primary": ["#22D3EE", "#3B82F6"], "secondary": ["#FDE047", "#F59E0B"] },
|
||||
"grid_dot": { "color": "#FFFFFF", "opacity": 0.05, "size": 40 }
|
||||
}
|
||||
将这些值必须一一映射为 CSS 变量，确保全部页面风格一致。）
|
||||
|
||||
## 策划稿结构
|
||||
{{PLANNING_JSON}}
|
||||
|
||||
（即 Prompt #3 输出的该页 JSON，包含 page_type、layout_hint、cards[]、每张卡片的 card_type/position/content/data_points。严格按照策划稿的卡片数量、类型和位置关系来设计。）
|
||||
|
||||
## 页面内容
|
||||
{{PAGE_CONTENT}}
|
||||
|
||||
## 配图信息（如有）
|
||||
{{IMAGE_INFO}}
|
||||
|
||||
---
|
||||
|
||||
## 画布规范（不可修改）
|
||||
|
||||
- 固定尺寸: width=1280px, height=720px, overflow=hidden
|
||||
- 标题区: 左上 40px 边距, y=20~70, 最大高度 50px
|
||||
- 内容区: padding 40px, y 从 80px 起, 可用高度 580px, 可用宽度 1200px
|
||||
- 页脚区: 底部 40px 边距内，高度 20px
|
||||
|
||||
## 排版系统（Typography Scale）
|
||||
|
||||
专业 PPT 的排版不是随意选字号，而是遵循严格的层级阶梯。每一级字号都有明确的用途和间距规则：
|
||||
|
||||
| 层级 | 用途 | 字号 | 字重 | 行高 | 颜色 |
|
||||
|------|------|------|------|------|------|
|
||||
| H0 | 封面主标题 | 48-56px | 900 | 1.1 | --text-primary |
|
||||
| H1 | 页面主标题 | 28px | 700 | 1.2 | --text-primary |
|
||||
| H2 | 卡片标题 | 18-20px | 700 | 1.3 | --text-primary |
|
||||
| Body | 正文段落 | 13-14px | 400 | 1.8 | --text-secondary |
|
||||
| Caption | 辅助标注/脚注/来源 | 12px | 400 | 1.5 | --text-secondary, opacity 0.6 |
|
||||
| Overline | PART 标识/标签前缀 | 11-12px | 700, letter-spacing: 2-3px | 1.0 | --accent-1 |
|
||||
| Data | 数据数字 | 36-48px (卡片) / 64-80px (高亮) | 800-900 | 1.0 | --accent-1 |
|
||||
|
||||
### 排版间距层级（卡片内部）
|
||||
|
||||
不同层级的内容之间，间距也分层级。间距体现信息的亲疏关系：
|
||||
|
||||
| 位置 | 间距 | 原因 |
|
||||
|------|------|------|
|
||||
| 卡片标题 -> 正文 | 16px | 标题和内容是不同层级，需要明确分隔 |
|
||||
| 正文段落之间 | 12px | 同级内容，间距较小 |
|
||||
| 数据数字 -> 标签 | 8px | 数字和标签紧密关联 |
|
||||
| 数据标签 -> 解读文字 | 12px | 解读是补充信息 |
|
||||
| 列表项之间 | 10px | 列表项平等并列 |
|
||||
| 最后一个内容块 -> 卡片底部 | >= 16px | 避免内容贴底 |
|
||||
|
||||
### 中英文混排规则
|
||||
|
||||
- 中文和英文/数字之间自动加一个半角空格（如："增长率达到 47.3%"）
|
||||
- 数据数字推荐使用 `font-variant-numeric: tabular-nums` 让数字等宽对齐
|
||||
- 大号数据数字（36px+）建议用 `font-family: 'Inter', 'DIN', var(--font-family)` 让数字更有冲击力
|
||||
|
||||
## 色彩比例法则（60-30-10）
|
||||
|
||||
这是设计界的铁律，决定页面是"高级"还是"花哨"：
|
||||
|
||||
| 比例 | 角色 | 应用范围 | 效果 |
|
||||
|------|------|---------|------|
|
||||
| **60%** | 主色（背景） | 页面背景 `--bg-primary` | 奠定基调 |
|
||||
| **30%** | 辅色（内容区） | 卡片背景 `--card-bg-from/to` | 承载信息 |
|
||||
| **10%** | 强调色（点缀） | `--accent-1` ~ `--accent-4` | 引导视线 |
|
||||
|
||||
### accent 色使用约束
|
||||
|
||||
强调色是"调味料"，用多了就毁了整道菜：
|
||||
|
||||
- **允许使用 accent 色的元素**：标题下划线/竖线（3-4px）、数据数字颜色、标签边框/文字、进度条填充、PART 编号、圆点/节点、图标背景
|
||||
- **禁止使用 accent 色的元素**：大面积卡片背景、正文段落文字、大面积色块填充
|
||||
- **同页限制**：同一页面最多同时使用 2 种 accent 色（--accent-1 和 --accent-2），不要 4 个全用
|
||||
- **每个卡片**：最多使用 1 种 accent 色作为主题色
|
||||
|
||||
## Bento Grid 布局系统
|
||||
|
||||
根据 layout_hint 选择布局，用 CSS Grid 精确实现。所有坐标基于内容区(40px padding)。
|
||||
|
||||
### 布局映射表
|
||||
|
||||
| layout_hint | CSS grid-template | 卡片尺寸 |
|
||||
|-------------|------------------|---------|
|
||||
| 单一焦点 | 1fr / 1fr | 1200x580 |
|
||||
| 50/50 对称 | 1fr 1fr / 1fr | 各 590x580 |
|
||||
| 非对称两栏 (2/3+1/3) | 2fr 1fr / 1fr | 790+390 x 580 |
|
||||
| 三栏等宽 | repeat(3, 1fr) / 1fr | 各 387x580 |
|
||||
| 主次结合 | 2fr 1fr / 1fr 1fr | 790x580 + 390x280x2 |
|
||||
| 英雄式+3子 | 1fr / auto 1fr 然后 repeat(3,1fr) | 1200x260 + 387x300x3 |
|
||||
| 混合网格 | 自定义 grid-row/column span | 尺寸由内容决定 |
|
||||
|
||||
间距: gap=20px | 圆角: border-radius=12px | 内边距: padding=24px
|
||||
|
||||
## 6 种卡片类型的 HTML 实现
|
||||
|
||||
### text（文本卡片）
|
||||
- 标题: h3, font-size=18-20px, font-weight=700, color=text-primary
|
||||
- 正文: p, font-size=13-14px, line-height=1.8, color=text-secondary
|
||||
- 关键词: 用 <strong> 或 <span class="highlight"> 包裹（背景 accent-primary 10% 透明度）
|
||||
|
||||
### data（数据卡片）
|
||||
- 核心数字: font-size=36-48px, font-weight=800, 使用 accent-primary 渐变色(background: linear-gradient; -webkit-background-clip 除外)
|
||||
- SVG 友好替代: 直接用 color=accent-primary，不要用 -webkit-background-clip: text
|
||||
- 单位/标签: font-size=14-16px, color=text-secondary
|
||||
- 补充说明: font-size=13px, 在数字下方
|
||||
|
||||
### list（列表卡片）
|
||||
- 列表项: display=flex, gap=10px
|
||||
- 圆点: min-width=6-8px, height=6-8px, border-radius=50%, background=accent-primary
|
||||
- 文字: font-size=13px, color=text-secondary, line-height=1.6
|
||||
- 交替使用不同 accent 色的圆点增加层次感
|
||||
|
||||
### tag_cloud（标签云）
|
||||
- 容器: display=flex, flex-wrap=wrap, gap=8px
|
||||
- 标签: display=inline-block, padding=4px 12px, border-radius=9999px
|
||||
- 标签边框: border=1px solid accent-primary 30%透明, color=accent-primary, font-size=12px
|
||||
|
||||
### process（流程卡片）
|
||||
- 步骤: display=flex 水平排列，或垂直排列
|
||||
- 节点: width/height=32px, border-radius=50%, background=accent-primary, 居中显示步骤数字
|
||||
- 连线: 节点之间用**真实 `<div>` 元素**作为连接线（height=2px, background=accent-color），**禁止**用 ::before/::after 伪元素画连线
|
||||
- 箭头: 用内联 `<svg>` 三角形（`<polygon>` 或 `<path>`），**禁止**用 CSS border 技巧画三角形
|
||||
- 标签: font-size=12-13px, margin-top=8px
|
||||
|
||||
### data_highlight（大数据高亮区）
|
||||
- 用于封面或重点页的超大数据展示
|
||||
- 数字: font-size=64-80px, font-weight=900
|
||||
- 用 accent 颜色直接上色（避免 -webkit-background-clip: text）
|
||||
|
||||
## 视觉设计原则
|
||||
|
||||
### 渐变使用约束（慎用渐变）
|
||||
渐变用不好比纯色更丑。遵循以下限制：
|
||||
- **允许渐变的场景**：页面背景（大面积微妙过渡）、强调色竖线/横线（3-4px 窄条）、进度条填充
|
||||
- **禁止渐变的场景**：正文文字颜色、小尺寸图标填充、卡片背景（除非暗色系微妙过渡）、按钮
|
||||
- **渐变方向**：同一页面内所有渐变方向保持一致（统一 135deg 或 180deg）
|
||||
- **渐变色差**：两端颜色色相差不超过 60 度（如蓝-青可以，蓝-橙禁止），亮度差不超过 20%
|
||||
- **首选纯色**：当不确定渐变效果时，用 accent 纯色（`var(--accent-1)`）替代
|
||||
|
||||
### 层次感
|
||||
- 页面标题(H1): 28px, 700 weight, 左上固定位，搭配 accent 色的标题下划线或角标
|
||||
- Overline 标记(如"PART 0X"): 11-12px, 700 weight, letter-spacing=2-3px, accent 色
|
||||
- 卡片标题(H2) > 数据数字(Data) > 正文(Body) > 辅助标注(Caption) -- 严格遵循排版阶梯
|
||||
|
||||
### 装饰元素词汇表
|
||||
|
||||
以下是专业 PPT 中常用的装饰元素。每页至少使用 2-3 种装饰元素，但不要过度堆砌。所有装饰必须使用真实 DOM 节点。
|
||||
|
||||
#### 基础装饰（所有风格通用）
|
||||
|
||||
| 装饰 | 实现方式 | 使用时机 |
|
||||
|------|---------|--------|
|
||||
| 背景网格点阵 | radial-gradient(circle, dot-color dot-size, transparent dot-size), background-size=grid-size | grid_pattern.enabled=true 的风格 |
|
||||
| 标题下划线 | `<div>` 4px 高, 40-60px 宽, accent 渐变, 在标题下方 4px 处 | 每页标题 |
|
||||
| 卡片左侧强调线 | `<div>` 3-4px 宽, 100% 高, accent 色, position=absolute, left=0 | 文本卡片/引用 |
|
||||
| 编号气泡 | `<div>` 32-40px 圆形, accent 色背景, 白色数字 | 步骤/列表序号 |
|
||||
| 分隔渐隐线 | `<div>` 1px 高, linear-gradient(90deg, accent 30%, transparent) | 卡片内区域分隔 |
|
||||
|
||||
#### 深色风格专用
|
||||
|
||||
| 装饰 | 实现方式 | 效果 |
|
||||
|------|---------|------|
|
||||
| 角落装饰线 | `<div>` L 形边框（只显示两条边: border-top + border-left），accent 色 20% 透明度 | 页面四角层次感 |
|
||||
| 光晕效果 | `<div>` radial-gradient 超大半透明圆(400-600px)，accent 色 5-8% 透明度 | 关键区域背后的辉光 |
|
||||
| 半透明数字水印 | `<div>` 超大号数字(120-160px), accent 色, opacity 0.03-0.05 | 页面层次感/章节标识 |
|
||||
| 卡片分隔线 | `<div>` 1px solid rgba(255,255,255,0.05) | 卡片间微妙分界 |
|
||||
|
||||
#### 浅色风格专用
|
||||
|
||||
| 装饰 | 实现方式 | 效果 |
|
||||
|------|---------|------|
|
||||
| 渐变色块 | `<div>` 大面积弧形色块, accent 色 5-10% 透明度, border-radius 50% | 卡片一角的活泼感 |
|
||||
| 细边框卡片 | border: 1px solid var(--card-border) | 清晰的区域划分 |
|
||||
| 圆形图标底 | `<div>` 48px 圆形, accent 色 10% 透明度背景 + 内联 SVG 图标 | 替代纯文字列表 |
|
||||
|
||||
#### 统一页脚系统
|
||||
|
||||
每页（封面和章节封面除外）底部必须有统一页脚：
|
||||
|
||||
```html
|
||||
<div style="position:absolute; bottom:20px; left:40px; right:40px;
|
||||
display:flex; justify-content:space-between; align-items:center;">
|
||||
<!-- 左侧：章节信息 -->
|
||||
<span style="font-size:11px; color:var(--text-secondary); opacity:0.5;
|
||||
letter-spacing:1px;">
|
||||
PART 01 - 章节名称
|
||||
</span>
|
||||
<!-- 右侧：页码 + 品牌 -->
|
||||
<span style="font-size:11px; color:var(--text-secondary); opacity:0.5;">
|
||||
07 / 15 | 品牌名
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
页脚规则：
|
||||
- 字号 11px, text-secondary 色, opacity 0.5（极其低调，不抢内容视线）
|
||||
- 左侧显示当前 PART 编号 + 章节名
|
||||
- 右侧显示 当前页/总页数 + 品牌名（如有）
|
||||
- **封面页、章节封面不显示页脚**
|
||||
|
||||
### 配图融入设计（根据用户偏好决定是否配图）
|
||||
|
||||
配图是可选项，在需求调研阶段由用户决定：
|
||||
- **不配图**: 跳过本节
|
||||
- **只关键页**: 仅封面、章节封面、结束页配图
|
||||
- **每页配图**: 所有页面都有图片融入
|
||||
|
||||
当需要配图时，图片不能像贴纸一样硬塞在页面里。必须通过**视觉融入技法**让图片与内容浑然一体。
|
||||
|
||||
**核心原则**：图片是**氛围的一部分**，不是独立的内容块。
|
||||
|
||||
#### 5 种融入技法（全部管线安全）
|
||||
|
||||
##### 1. 渐隐融合 -- 封面页/章节封面的首选
|
||||
|
||||
图片占页面右半部分，左侧边缘用渐变遮罩渐隐到背景色，让图片"消融"在背景中。
|
||||
|
||||
```html
|
||||
<div style="position:absolute; right:0; top:0; width:55%; height:100%; overflow:hidden;">
|
||||
<img src="..." style="width:100%; height:100%; object-fit:cover; opacity:0.35;">
|
||||
<!-- 左侧渐隐遮罩(真实div) -->
|
||||
<div style="position:absolute; left:0; top:0; width:60%; height:100%;
|
||||
background:linear-gradient(90deg, var(--bg-primary) 0%, transparent 100%);"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
##### 2. 色调蒙版 -- 内容页大卡片
|
||||
|
||||
图片上覆盖半透明色调层，让图片染上主题色，同时降低视觉干扰。
|
||||
|
||||
```html
|
||||
<div style="position:relative; overflow:hidden; border-radius:var(--card-radius);">
|
||||
<img src="..." style="width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0;">
|
||||
<!-- 主题色蒙版 -->
|
||||
<div style="position:absolute; top:0; left:0; width:100%; height:100%;
|
||||
background:linear-gradient(135deg, rgba(11,17,32,0.85), rgba(15,23,42,0.6));"></div>
|
||||
<!-- 内容在蒙版之上 -->
|
||||
<div style="position:relative; z-index:1; padding:24px;">
|
||||
<!-- 文字内容 -->
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
##### 3. 氛围底图 -- 章节封面/数据页
|
||||
|
||||
图片作为整页超低透明度背景，营造氛围感。
|
||||
|
||||
```html
|
||||
<img src="..." style="position:absolute; top:0; left:0; width:100%; height:100%;
|
||||
object-fit:cover; opacity:0.08; pointer-events:none;">
|
||||
```
|
||||
|
||||
##### 4. 裁切视窗 -- 小卡片顶部
|
||||
|
||||
图片作为卡片头部的"窗口"，用圆角裁切，底部渐隐到卡片背景。
|
||||
|
||||
```html
|
||||
<div style="position:relative; height:120px; overflow:hidden;
|
||||
border-radius:var(--card-radius) var(--card-radius) 0 0;">
|
||||
<img src="..." style="width:100%; height:100%; object-fit:cover;">
|
||||
<div style="position:absolute; bottom:0; left:0; width:100%; height:50%;
|
||||
background:linear-gradient(0deg, var(--card-bg-from), transparent);"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
##### 5. 圆形/异形裁切 -- 数据卡片辅助
|
||||
|
||||
图片裁切为圆形或其他形状，作为装饰元素。
|
||||
|
||||
```html
|
||||
<img src="..." style="width:80px; height:80px; border-radius:50%;
|
||||
object-fit:cover; border:3px solid var(--accent-1);">
|
||||
```
|
||||
|
||||
#### 按页面类型选择技法
|
||||
|
||||
| 页面类型 | 推荐技法 | opacity 范围 |
|
||||
|---------|---------|-------------|
|
||||
| 封面页 | 渐隐融合 | 0.25-0.40 |
|
||||
| 章节封面 | 氛围底图 或 渐隐融合 | 0.05-0.15 |
|
||||
| 英雄卡片 | 色调蒙版 | 图片0.3 + 蒙版0.7 |
|
||||
| 大卡片(>=50%宽) | 色调蒙版 或 裁切视窗 | 0.15-0.30 |
|
||||
| 小卡片(<400px) | 裁切视窗 或 圆形裁切 | 0.8-1.0 |
|
||||
| 数据页 | 氛围底图 | 0.05-0.10 |
|
||||
|
||||
#### 图片 HTML 规范
|
||||
- 使用真实 `<img>` 标签（禁用 CSS background-image）
|
||||
- 渐变遮罩用**真实 `<div>`**（禁用 ::before/::after）
|
||||
- `object-fit: cover`，`border-radius` 与容器一致
|
||||
- 图片使用**绝对路径**（由 agent 生成图片后填入）
|
||||
|
||||
**禁止**：
|
||||
- 禁止图片直接裸露在卡片角落（无融入效果）
|
||||
- 禁止图片占据整个卡片且无蒙版（文字不可读）
|
||||
- 禁止图片与背景色有明显的矩形边界线
|
||||
|
||||
## 对比度安全规则（必须遵守）
|
||||
|
||||
文字颜色必须与其直接背景形成足够对比度，否则用户看不清：
|
||||
|
||||
| 背景类型 | 文字颜色要求 |
|
||||
|---------|------------|
|
||||
| 深色背景 (--bg-primary 亮度 < 40%) | 标题用 --text-primary（白色/浅色）, 正文用 --text-secondary（70%白） |
|
||||
| 浅色背景 (--bg-primary 亮度 > 60%) | 标题用 --text-primary（深色/黑色）, 正文用 --text-secondary（灰色） |
|
||||
| 卡片内部 | 跟随卡片背景明暗选择文字色 |
|
||||
| accent 色文字 | 只能用于标题/标签/数据数字，不能用于大段正文 |
|
||||
|
||||
**禁止行为**：
|
||||
- 禁止深色背景 + 深色文字（如黑底黑字、深蓝底深灰字）
|
||||
- 禁止浅色背景 + 白色文字
|
||||
- 禁止硬编码颜色值，所有颜色必须通过 CSS 变量引用
|
||||
|
||||
## 纯 CSS 数据可视化（推荐使用）
|
||||
|
||||
数据卡片不要只放一个大数字。用纯 CSS/SVG 实现轻量数据可视化，让数字更有冲击力。以下是 8 种可视化类型，根据数据特征选择：
|
||||
|
||||
### 1. 进度条（表示百分比/完成度）
|
||||
```css
|
||||
.progress-bar {
|
||||
height: 8px; border-radius: 4px;
|
||||
background: var(--card-bg-from);
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-bar .fill {
|
||||
height: 100%; border-radius: 4px;
|
||||
background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
|
||||
/* width 用内联 style 设置百分比 */
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 对比柱（两项对比）
|
||||
```css
|
||||
.compare-bar {
|
||||
display: flex; gap: 4px; align-items: flex-end;
|
||||
height: 60px;
|
||||
}
|
||||
.compare-bar .bar {
|
||||
flex: 1; border-radius: 4px 4px 0 0;
|
||||
/* height 用内联 style 设置百分比 */
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 环形百分比（必须用内联 SVG，禁止 conic-gradient）
|
||||
```html
|
||||
<div style="position:relative; width:80px; height:80px;">
|
||||
<svg width="80" height="80" viewBox="0 0 80 80">
|
||||
<circle cx="40" cy="40" r="32" fill="none"
|
||||
stroke="var(--card-bg-from)" stroke-width="10"/>
|
||||
<circle cx="40" cy="40" r="32" fill="none"
|
||||
stroke="var(--accent-1)" stroke-width="10"
|
||||
stroke-dasharray="180.96 201.06" stroke-linecap="round"
|
||||
transform="rotate(-90 40 40)"/>
|
||||
<text x="40" y="40" text-anchor="middle" dominant-baseline="central"
|
||||
fill="var(--text-primary)" font-size="16" font-weight="700">90%</text>
|
||||
</svg>
|
||||
</div>
|
||||
```
|
||||
计算公式: dasharray 第一个值 = 2 * PI * r * (百分比/100), 第二个值 = 2 * PI * r
|
||||
|
||||
### 4. 指标行（数字+标签+进度条 组合）
|
||||
```html
|
||||
<div style="display:flex; align-items:center; gap:12px; margin-bottom:10px;">
|
||||
<span style="font-size:24px; font-weight:800; color:var(--accent-1);
|
||||
font-variant-numeric:tabular-nums; min-width:60px;">87%</span>
|
||||
<div style="flex:1;">
|
||||
<div style="font-size:12px; color:var(--text-secondary); margin-bottom:4px;">用户满意度</div>
|
||||
<div class="progress-bar"><div class="fill" style="width:87%"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 5. 迷你折线图 Sparkline（趋势方向）
|
||||
```html
|
||||
<svg width="120" height="40" viewBox="0 0 120 40">
|
||||
<!-- 面积填充 -->
|
||||
<path d="M0,35 L20,28 L40,30 L60,20 L80,15 L100,10 L120,5 L120,40 L0,40 Z"
|
||||
fill="var(--accent-1)" opacity="0.1"/>
|
||||
<!-- 折线 -->
|
||||
<polyline points="0,35 20,28 40,30 60,20 80,15 100,10 120,5"
|
||||
fill="none" stroke="var(--accent-1)" stroke-width="2" stroke-linecap="round"/>
|
||||
<!-- 终点圆点 -->
|
||||
<circle cx="120" cy="5" r="3" fill="var(--accent-1)"/>
|
||||
</svg>
|
||||
```
|
||||
用在数据数字旁边，占位小但信息量大。数据点坐标根据实际趋势调整 y 值（高=好 -> y 值小）。
|
||||
|
||||
### 6. 点阵图 Waffle Chart（百分比直觉化）
|
||||
```html
|
||||
<div style="display:grid; grid-template-columns:repeat(10,1fr); gap:3px; width:100px;">
|
||||
<!-- 67 个填充点 + 33 个空点 = 67% -->
|
||||
<div style="width:8px; height:8px; border-radius:2px; background:var(--accent-1);"></div>
|
||||
<!-- 重复填充点... -->
|
||||
<div style="width:8px; height:8px; border-radius:2px; background:var(--card-bg-from);"></div>
|
||||
<!-- 重复空点... -->
|
||||
</div>
|
||||
```
|
||||
10x10 = 100 格，填充数量 = 百分比值。比进度条更直觉。
|
||||
|
||||
### 7. KPI 指标卡（数字+趋势箭头+标签）
|
||||
```html
|
||||
<div style="display:flex; align-items:baseline; gap:8px;">
|
||||
<span style="font-size:40px; font-weight:800; color:var(--accent-1);
|
||||
font-variant-numeric:tabular-nums;">2.4M</span>
|
||||
<!-- 上升箭头（绿色=好） -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16">
|
||||
<polygon points="8,2 14,10 2,10" fill="#16A34A"/>
|
||||
</svg>
|
||||
<span style="font-size:14px; color:#16A34A; font-weight:600;">+12.3%</span>
|
||||
</div>
|
||||
<div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">月活跃用户数</div>
|
||||
```
|
||||
趋势箭头颜色：上升用绿色 #16A34A，下降用红色 #DC2626，持平用 text-secondary。
|
||||
|
||||
### 8. 评分指示器（5分制）
|
||||
```html
|
||||
<div style="display:flex; gap:6px;">
|
||||
<!-- 4 个实心圆 + 1 个空心圆 = 4/5 分 -->
|
||||
<div style="width:12px; height:12px; border-radius:50%; background:var(--accent-1);"></div>
|
||||
<div style="width:12px; height:12px; border-radius:50%; background:var(--accent-1);"></div>
|
||||
<div style="width:12px; height:12px; border-radius:50%; background:var(--accent-1);"></div>
|
||||
<div style="width:12px; height:12px; border-radius:50%; background:var(--accent-1);"></div>
|
||||
<div style="width:12px; height:12px; border-radius:50%; border:2px solid var(--accent-1); background:transparent;"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 可视化选择指南
|
||||
|
||||
| 数据类型 | 推荐可视化 |
|
||||
|---------|----------|
|
||||
| 百分比/完成度 | 进度条 或 环形百分比 |
|
||||
| 两项对比 | 对比柱 |
|
||||
| 时间趋势 | 迷你折线图 |
|
||||
| 比例直觉化 | 点阵图 |
|
||||
| 核心 KPI | KPI 指标卡 |
|
||||
| 多指标并排 | 指标行（多行堆叠） |
|
||||
| 评级/评分 | 评分指示器 |
|
||||
|
||||
## 内容密度要求
|
||||
|
||||
每张卡片不能只有一个标题和一句话，必须信息充实：
|
||||
|
||||
| 卡片类型 | 最低内容要求 |
|
||||
|---------|------------|
|
||||
| text | 标题 + 至少 2 段正文（每段 30-50 字）或 标题 + 3-5 条要点 |
|
||||
| data | 核心数字 + 单位 + 变化趋势(升/降/持平) + 一句解读 + 进度条/对比可视化 |
|
||||
| list | 至少 4 条列表项，每条 15-30 字 |
|
||||
| process | 至少 3 个步骤，每步有标题+一句描述 |
|
||||
| tag_cloud | 至少 5 个标签 |
|
||||
| data_highlight | 1 个超大数字 + 副标题 + 补充数据行 |
|
||||
|
||||
**禁止**：空白卡片、只有标题没有内容的卡片、只有一句话的卡片
|
||||
|
||||
## 特殊字符与单位符号处理（必须遵守）
|
||||
|
||||
专业内容中大量使用特殊字符、单位符号、上下标。这些符号必须正确输出，否则在 SVG/PPTX 中会乱码或丢失：
|
||||
|
||||
| 类型 | 正确写法 | 错误写法 | 说明 |
|
||||
|------|----------|----------|------|
|
||||
| 温度 | `25–40 °C` 或 `25–40 °C` | `25-40 oC` | 用 Unicode 度符号而不是字母 o |
|
||||
| 百分比 | `99.9%` | `99.9 %`（前面加空格） | 数字和 % 之间不加空格 |
|
||||
| ppm | `100 ppm` | `100ppm` | 数字和单位之间加空格 |
|
||||
| 化学式下标 | `H₂O` 或 `H<sub>2</sub>O` | `H2O` | 用 Unicode 下标数字或 sub 标签 |
|
||||
| 化学式上标 | `m²` 或 `m<sup>2</sup>` | `m2` | 用 Unicode 上标或 sup 标签 |
|
||||
| 大于等于 | `≥ 99.9%` 或 `>=99.9%` | `> =99.9%` | 不要在 > 和 = 之间加空格 |
|
||||
| 微米 | `0.22 μm` | `0.22 um` | 用 Unicode mu 而不是字母 u |
|
||||
|
||||
### 规则
|
||||
1. **优先用 Unicode 直接字符**（° ² ³ μ ≥ ≤ ₂ ₃），而不是 HTML 实体，因为 Unicode 在 SVG/PPTX 中渲染最可靠
|
||||
2. **数字与单位之间**：英文单位前加一个半角空格（`100 ppm`），符号单位紧跟（`99.9%`、`25°C`）
|
||||
3. **化学式中的下标数字**：必须用 `<sub>` 标签或 Unicode 下标字符（₀₁₂₃₄₅₆₇₈₉），绝对不能用普通数字代替
|
||||
|
||||
## 页面级情感设计
|
||||
|
||||
不同页面类型有不同的情感目标：
|
||||
|
||||
| 页面类型 | 情感目标 | 设计要求 |
|
||||
|---------|---------|---------|
|
||||
| 封面页 | 视觉冲击、专业信赖 | 大标题+配图、装饰元素要丰富、品牌感要强 |
|
||||
| 目录页 | 清晰导航、预期管理 | 每章有图标/色块标识、章节编号醒目 |
|
||||
| 章节封面 | 过渡、呼吸感 | PART 编号大号显示、引导语、留白充分 |
|
||||
| 内容页 | 信息传递、数据说服 | 卡片密度高、数据可视化、要点清晰 |
|
||||
| 结束页 | 总结回顾、行动号召 | 3-5 条核心要点回顾 + 明确的 CTA（联系方式/下一步） |
|
||||
|
||||
## PPTX 兼容的 CSS/HTML 约束（必须遵守）
|
||||
|
||||
本 HTML 最终会经过 dom-to-svg -> svg2pptx 管线转为 PowerPoint 原生形状。以下规则确保转换不丢失任何视觉元素：
|
||||
|
||||
### 禁止使用的 CSS 特性（dom-to-svg 不支持，会导致元素丢失）
|
||||
|
||||
| 禁止 | 原因 | 替代方案 |
|
||||
|------|------|----------|
|
||||
| `::before` / `::after` 伪元素（用于视觉装饰） | dom-to-svg 无法读取伪元素 | 改用**真实 `<div>`/`<span>` 元素** |
|
||||
| `conic-gradient()` | dom-to-svg 不支持 | 改用**内联 SVG `<circle>` + stroke-dasharray** |
|
||||
| CSS border 三角形（width:0 + border trick） | 转 SVG 后形状丢失 | 改用**内联 SVG `<polygon>`** |
|
||||
| `-webkit-background-clip: text` | 渐变文字不可转换 | 改用 `color: var(--accent-1)` 纯色 |
|
||||
| `mask-image` / `-webkit-mask-image` | SVG 转换后形状丢失 | 改用 `clip-path` 或 `border-radius` |
|
||||
| `mix-blend-mode` | 不被 SVG 支持 | 改用 `opacity` 叠加 |
|
||||
| `filter: blur()` | 光栅化导致模糊区域变位图 | 改用 `opacity` 或 `box-shadow` |
|
||||
| `content: '文字'`（伪元素文本） | 不会出现在 SVG 中 | 改用真实 `<span>` 元素 |
|
||||
| CSS `counter()` / `counter-increment` | 伪元素依赖 | 改用真实 HTML 文本 |
|
||||
|
||||
### 安全可用的 CSS 特性
|
||||
- `linear-gradient` 背景
|
||||
- `radial-gradient` 背景（纯装饰用途）
|
||||
- `border-radius`, `box-shadow`
|
||||
- `opacity`
|
||||
- 普通 `color`, `font-size`, `font-weight`, `letter-spacing`
|
||||
- `border` 属性（用于边框，不是三角形）
|
||||
- `clip-path`
|
||||
- `transform: translate/rotate/scale`
|
||||
- 内联 `<svg>` 元素（**推荐用于图表/箭头/图标**）
|
||||
|
||||
### 核心原则
|
||||
> **凡是视觉上可见的元素，必须是真实的 DOM 节点。** 伪元素仅可用于不影响视觉输出的用途（如 clearfix）。
|
||||
> **需要图形（箭头/环图/图标/三角形）时，优先用内联 SVG。**
|
||||
|
||||
## CSS 变量模板
|
||||
|
||||
所有颜色值必须通过 CSS 变量引用，禁止硬编码 hex/rgb 值（唯一例外：transparent 和白色透明度 rgba(255,255,255,0.x)）。
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bg-primary: {{background.primary}};
|
||||
--bg-secondary: {{background.gradient_to}};
|
||||
--card-bg-from: {{card.gradient_from}};
|
||||
--card-bg-to: {{card.gradient_to}};
|
||||
--card-border: {{card.border}};
|
||||
--card-radius: {{card.border_radius}}px;
|
||||
--text-primary: {{text.primary}};
|
||||
--text-secondary: {{text.secondary}};
|
||||
--accent-1: {{accent.primary[0]}};
|
||||
--accent-2: {{accent.primary[1]}};
|
||||
--accent-3: {{accent.secondary[0]}};
|
||||
--accent-4: {{accent.secondary[1]}};
|
||||
--grid-dot-color: {{grid_dot.color}};
|
||||
--grid-dot-opacity: {{grid_dot.opacity}};
|
||||
--grid-size: {{grid_dot.size}}px;
|
||||
}
|
||||
```
|
||||
|
||||
## 输出要求
|
||||
- 输出完整 HTML 文件（含 <!DOCTYPE html>、<head>、<style> 全内嵌）
|
||||
- body 固定 width=1280px, height=720px
|
||||
- 不使用外部 CSS/JS（全部内嵌）
|
||||
- 不添加任何解释性文字
|
||||
- 确保每张卡片的内容完整填充（不留空卡片）
|
||||
- 数据卡片的数字要醒目突出（最大视觉权重）
|
||||
- 所有颜色都通过 var(--xxx) 引用，不硬编码
|
||||
- 浅色背景的卡片内文字必须是深色，深色背景的卡片内文字必须是浅色
|
||||
- 数据卡片至少配一个 CSS 可视化元素（进度条/对比柱/环形图）
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 演讲备注
|
||||
|
||||
为每页生成演讲提示（可选步骤）。
|
||||
|
||||
```text
|
||||
你是一名演讲教练。请为以下 PPT 页面生成简洁的演讲备注。
|
||||
|
||||
## 页面标题
|
||||
{{SLIDE_TITLE}}
|
||||
|
||||
## 页面内容
|
||||
{{SLIDE_CONTENT}}
|
||||
|
||||
## 演讲备注要求
|
||||
1. 每页 3-5 句话的演讲提示
|
||||
2. 包括：开场过渡语、核心要传达的信息、可以用的比喻/故事/互动
|
||||
3. 标注关键数据的口述表达（如："这个数字意味着..."）
|
||||
4. 提示与下一页的衔接语
|
||||
5. 整体风格：自然、自信、有节奏感
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Prompt 使用流程
|
||||
|
||||
```
|
||||
Step 1 -> 使用 Prompt #1（需求调研）
|
||||
Step 2 -> 搜索（不需要专门 Prompt，直接使用搜索工具）
|
||||
Step 3 -> 使用 Prompt #2（大纲架构师）
|
||||
Step 4 -> 使用 Prompt #3（内容分配与策划稿）
|
||||
Step 5a -> 使用 style-system.md 选择风格
|
||||
Step 5b -> 如有 generate_image，为每页生成配图
|
||||
Step 5c -> 使用 Prompt #4（HTML 设计稿），逐页生成
|
||||
后处理 -> scripts/html_packager.py 合并预览 + scripts/html2svg.py 转 SVG
|
||||
可选 -> 使用 Prompt #5（演讲备注）
|
||||
```
|
||||
373
references/style-system.md
Normal file
373
references/style-system.md
Normal file
@@ -0,0 +1,373 @@
|
||||
# 风格系统
|
||||
|
||||
## 风格数据模型
|
||||
|
||||
每套风格由以下字段定义：
|
||||
|
||||
```json
|
||||
{
|
||||
"style_name": "风格名称",
|
||||
"style_id": "dark_tech | xiaomi_orange | blue_white | royal_red | fresh_green | luxury_purple | minimal_gray | vibrant_rainbow",
|
||||
"background": {
|
||||
"primary": "#色值",
|
||||
"gradient_to": "#色值"
|
||||
},
|
||||
"card": {
|
||||
"gradient_from": "#色值",
|
||||
"gradient_to": "#色值",
|
||||
"border": "rgba(...)",
|
||||
"border_radius": 12
|
||||
},
|
||||
"text": {
|
||||
"primary": "#色值",
|
||||
"secondary": "rgba(...)",
|
||||
"title_size": 28,
|
||||
"body_size": 14,
|
||||
"card_title_size": 20
|
||||
},
|
||||
"accent": {
|
||||
"primary": ["#渐变起", "#渐变止"],
|
||||
"secondary": ["#渐变起", "#渐变止"]
|
||||
},
|
||||
"font_family": "字体族",
|
||||
"grid_pattern": {
|
||||
"enabled": true,
|
||||
"size": 40,
|
||||
"dot_radius": 1,
|
||||
"dot_color": "#色值",
|
||||
"dot_opacity": 0.05
|
||||
},
|
||||
"decorations": {
|
||||
"corner_lines": false,
|
||||
"glow_effects": false,
|
||||
"description": "装饰元素描述"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 预置风格库
|
||||
|
||||
### 1. 暗黑科技 (dark_tech)
|
||||
|
||||
适用场景：技术产品介绍、AI/SaaS 平台、数据平台、开发者工具
|
||||
|
||||
```json
|
||||
{
|
||||
"style_name": "高阶暗黑科技风 (Premium Dark Mode)",
|
||||
"style_id": "dark_tech",
|
||||
"background": { "primary": "#0B1120", "gradient_to": "#0F172A" },
|
||||
"card": { "gradient_from": "#1E293B", "gradient_to": "#0F172A", "border": "rgba(255,255,255,0.05)", "border_radius": 12 },
|
||||
"text": { "primary": "#FFFFFF", "secondary": "rgba(255,255,255,0.7)", "title_size": 28, "body_size": 14, "card_title_size": 20 },
|
||||
"accent": { "primary": ["#22D3EE", "#3B82F6"], "secondary": ["#FDE047", "#F59E0B"] },
|
||||
"font_family": "PingFang SC, Microsoft YaHei, system-ui, sans-serif",
|
||||
"grid_pattern": { "enabled": true, "size": 40, "dot_radius": 1, "dot_color": "#FFFFFF", "dot_opacity": 0.05 },
|
||||
"decorations": { "corner_lines": true, "glow_effects": true, "description": "角落装饰线条 + 强调色模糊光晕" }
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bg-primary: #0B1120;
|
||||
--bg-secondary: #0F172A;
|
||||
--card-bg-from: #1E293B;
|
||||
--card-bg-to: #0F172A;
|
||||
--card-border: rgba(255,255,255,0.05);
|
||||
--card-radius: 12px;
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: rgba(255,255,255,0.7);
|
||||
--accent-1: #22D3EE;
|
||||
--accent-2: #3B82F6;
|
||||
--accent-3: #FDE047;
|
||||
--accent-4: #F59E0B;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. 小米橙 (xiaomi_orange)
|
||||
|
||||
适用场景：硬件产品、IoT 设备、消费电子、智能家居
|
||||
|
||||
```json
|
||||
{
|
||||
"style_name": "小米橙 (Xiaomi Orange)",
|
||||
"style_id": "xiaomi_orange",
|
||||
"background": { "primary": "#1A1A1A", "gradient_to": "#111111" },
|
||||
"card": { "gradient_from": "#2A2A2A", "gradient_to": "#1A1A1A", "border": "rgba(255,105,0,0.15)", "border_radius": 16 },
|
||||
"text": { "primary": "#FFFFFF", "secondary": "rgba(255,255,255,0.65)", "title_size": 28, "body_size": 14, "card_title_size": 20 },
|
||||
"accent": { "primary": ["#FF6900", "#FF8C00"], "secondary": ["#FFFFFF", "#E0E0E0"] },
|
||||
"font_family": "PingFang SC, Microsoft YaHei, system-ui, sans-serif",
|
||||
"grid_pattern": { "enabled": false },
|
||||
"decorations": { "corner_lines": false, "glow_effects": false, "description": "纯净简约，大面积留白，圆形图标元素" }
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bg-primary: #1A1A1A;
|
||||
--bg-secondary: #111111;
|
||||
--card-bg-from: #2A2A2A;
|
||||
--card-bg-to: #1A1A1A;
|
||||
--card-border: rgba(255,105,0,0.15);
|
||||
--card-radius: 16px;
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: rgba(255,255,255,0.65);
|
||||
--accent-1: #FF6900;
|
||||
--accent-2: #FF8C00;
|
||||
--accent-3: #FFFFFF;
|
||||
--accent-4: #E0E0E0;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3. 蓝白商务 (blue_white)
|
||||
|
||||
适用场景：企业介绍、培训课件、教育材料、医疗/金融行业
|
||||
|
||||
```json
|
||||
{
|
||||
"style_name": "蓝白商务 (Blue White Business)",
|
||||
"style_id": "blue_white",
|
||||
"background": { "primary": "#FFFFFF", "gradient_to": "#F8FAFC" },
|
||||
"card": { "gradient_from": "#F1F5F9", "gradient_to": "#E2E8F0", "border": "rgba(37,99,235,0.12)", "border_radius": 12 },
|
||||
"text": { "primary": "#1E293B", "secondary": "#64748B", "title_size": 28, "body_size": 14, "card_title_size": 20 },
|
||||
"accent": { "primary": ["#2563EB", "#1D4ED8"], "secondary": ["#059669", "#047857"] },
|
||||
"font_family": "PingFang SC, Microsoft YaHei, system-ui, sans-serif",
|
||||
"grid_pattern": { "enabled": false },
|
||||
"decorations": { "corner_lines": false, "glow_effects": false, "description": "清爽简洁，蓝色标题装饰条，卡片带浅色背景和细边框" }
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bg-primary: #FFFFFF;
|
||||
--bg-secondary: #F8FAFC;
|
||||
--card-bg-from: #F1F5F9;
|
||||
--card-bg-to: #E2E8F0;
|
||||
--card-border: rgba(37,99,235,0.12);
|
||||
--card-radius: 12px;
|
||||
--text-primary: #1E293B;
|
||||
--text-secondary: #64748B;
|
||||
--accent-1: #2563EB;
|
||||
--accent-2: #1D4ED8;
|
||||
--accent-3: #059669;
|
||||
--accent-4: #047857;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. 朱红宫墙 (royal_red)
|
||||
|
||||
适用场景：文化/历史主题、政务汇报、品牌故事、中国风
|
||||
|
||||
```json
|
||||
{
|
||||
"style_name": "朱红宫墙 (Royal Red)",
|
||||
"style_id": "royal_red",
|
||||
"background": { "primary": "#8B0000", "gradient_to": "#5C0000" },
|
||||
"card": { "gradient_from": "#A52A2A", "gradient_to": "#7A0000", "border": "rgba(255,215,0,0.15)", "border_radius": 8 },
|
||||
"text": { "primary": "#FFF8E7", "secondary": "rgba(255,248,231,0.75)", "title_size": 28, "body_size": 14, "card_title_size": 20 },
|
||||
"accent": { "primary": ["#FFD700", "#FFA500"], "secondary": ["#FFF8E7", "#F5E6C8"] },
|
||||
"font_family": "PingFang SC, STSong, SimSun, Microsoft YaHei, serif",
|
||||
"grid_pattern": { "enabled": false },
|
||||
"decorations": { "corner_lines": true, "glow_effects": false, "description": "金色角饰、祥云纹理，传统纹样装饰边框" }
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bg-primary: #8B0000;
|
||||
--bg-secondary: #5C0000;
|
||||
--card-bg-from: #A52A2A;
|
||||
--card-bg-to: #7A0000;
|
||||
--card-border: rgba(255,215,0,0.15);
|
||||
--card-radius: 8px;
|
||||
--text-primary: #FFF8E7;
|
||||
--text-secondary: rgba(255,248,231,0.75);
|
||||
--accent-1: #FFD700;
|
||||
--accent-2: #FFA500;
|
||||
--accent-3: #FFF8E7;
|
||||
--accent-4: #F5E6C8;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. 清新自然 (fresh_green)
|
||||
|
||||
适用场景：环保/可持续发展、健康/医疗/养生、食品/农业、美妆/护肤
|
||||
|
||||
```json
|
||||
{
|
||||
"style_name": "清新自然 (Fresh Green)",
|
||||
"style_id": "fresh_green",
|
||||
"background": { "primary": "#F0FDF4", "gradient_to": "#ECFDF5" },
|
||||
"card": { "gradient_from": "#FFFFFF", "gradient_to": "#F0FDF4", "border": "rgba(22,163,74,0.12)", "border_radius": 16 },
|
||||
"text": { "primary": "#14532D", "secondary": "#4B5563", "title_size": 28, "body_size": 14, "card_title_size": 20 },
|
||||
"accent": { "primary": ["#16A34A", "#059669"], "secondary": ["#F59E0B", "#D97706"] },
|
||||
"font_family": "PingFang SC, Microsoft YaHei, system-ui, sans-serif",
|
||||
"grid_pattern": { "enabled": false },
|
||||
"decorations": { "corner_lines": false, "glow_effects": false, "description": "轻柔圆角、叶片图标、自然渐变色块，清新透气感" }
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bg-primary: #F0FDF4;
|
||||
--bg-secondary: #ECFDF5;
|
||||
--card-bg-from: #FFFFFF;
|
||||
--card-bg-to: #F0FDF4;
|
||||
--card-border: rgba(22,163,74,0.12);
|
||||
--card-radius: 16px;
|
||||
--text-primary: #14532D;
|
||||
--text-secondary: #4B5563;
|
||||
--accent-1: #16A34A;
|
||||
--accent-2: #059669;
|
||||
--accent-3: #F59E0B;
|
||||
--accent-4: #D97706;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 紫金奢华 (luxury_purple)
|
||||
|
||||
适用场景：时尚/奢侈品、高端服务/地产、设计/创意行业、品牌发布会
|
||||
|
||||
```json
|
||||
{
|
||||
"style_name": "紫金奢华 (Luxury Purple)",
|
||||
"style_id": "luxury_purple",
|
||||
"background": { "primary": "#120A2E", "gradient_to": "#1A0B3D" },
|
||||
"card": { "gradient_from": "#2D1B69", "gradient_to": "#1A0B3D", "border": "rgba(192,132,252,0.1)", "border_radius": 12 },
|
||||
"text": { "primary": "#F5F3FF", "secondary": "rgba(245,243,255,0.7)", "title_size": 28, "body_size": 14, "card_title_size": 20 },
|
||||
"accent": { "primary": ["#A855F7", "#7C3AED"], "secondary": ["#F59E0B", "#D97706"] },
|
||||
"font_family": "PingFang SC, Microsoft YaHei, system-ui, sans-serif",
|
||||
"grid_pattern": { "enabled": true, "size": 50, "dot_radius": 1, "dot_color": "#A855F7", "dot_opacity": 0.03 },
|
||||
"decorations": { "corner_lines": true, "glow_effects": true, "description": "紫色光晕、金色点缀、钻石切割线条装饰，极致奢华感" }
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bg-primary: #120A2E;
|
||||
--bg-secondary: #1A0B3D;
|
||||
--card-bg-from: #2D1B69;
|
||||
--card-bg-to: #1A0B3D;
|
||||
--card-border: rgba(192,132,252,0.1);
|
||||
--card-radius: 12px;
|
||||
--text-primary: #F5F3FF;
|
||||
--text-secondary: rgba(245,243,255,0.7);
|
||||
--accent-1: #A855F7;
|
||||
--accent-2: #7C3AED;
|
||||
--accent-3: #F59E0B;
|
||||
--accent-4: #D97706;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 7. 极简灰白 (minimal_gray)
|
||||
|
||||
适用场景：学术/研究报告、法务/合规、咨询/顾问报告、数据分析
|
||||
|
||||
```json
|
||||
{
|
||||
"style_name": "极简灰白 (Minimal Gray)",
|
||||
"style_id": "minimal_gray",
|
||||
"background": { "primary": "#FAFAFA", "gradient_to": "#F5F5F5" },
|
||||
"card": { "gradient_from": "#FFFFFF", "gradient_to": "#FAFAFA", "border": "rgba(0,0,0,0.08)", "border_radius": 8 },
|
||||
"text": { "primary": "#171717", "secondary": "#737373", "title_size": 28, "body_size": 14, "card_title_size": 20 },
|
||||
"accent": { "primary": ["#171717", "#404040"], "secondary": ["#DC2626", "#B91C1C"] },
|
||||
"font_family": "'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif",
|
||||
"grid_pattern": { "enabled": false },
|
||||
"decorations": { "corner_lines": false, "glow_effects": false, "description": "纯净无装饰、大量留白、精确排版、红色仅用于关键数据强调" }
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bg-primary: #FAFAFA;
|
||||
--bg-secondary: #F5F5F5;
|
||||
--card-bg-from: #FFFFFF;
|
||||
--card-bg-to: #FAFAFA;
|
||||
--card-border: rgba(0,0,0,0.08);
|
||||
--card-radius: 8px;
|
||||
--text-primary: #171717;
|
||||
--text-secondary: #737373;
|
||||
--accent-1: #171717;
|
||||
--accent-2: #404040;
|
||||
--accent-3: #DC2626;
|
||||
--accent-4: #B91C1C;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 8. 活力彩虹 (vibrant_rainbow)
|
||||
|
||||
适用场景：社交/娱乐平台、营销/推广材料、年轻品牌、创意方案
|
||||
|
||||
```json
|
||||
{
|
||||
"style_name": "活力彩虹 (Vibrant Rainbow)",
|
||||
"style_id": "vibrant_rainbow",
|
||||
"background": { "primary": "#FFFFFF", "gradient_to": "#FFF7ED" },
|
||||
"card": { "gradient_from": "#FFFFFF", "gradient_to": "#FFF1E6", "border": "rgba(251,146,60,0.15)", "border_radius": 20 },
|
||||
"text": { "primary": "#1C1917", "secondary": "#57534E", "title_size": 28, "body_size": 14, "card_title_size": 20 },
|
||||
"accent": { "primary": ["#F97316", "#EC4899"], "secondary": ["#8B5CF6", "#06B6D4"] },
|
||||
"font_family": "'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif",
|
||||
"grid_pattern": { "enabled": false },
|
||||
"decorations": { "corner_lines": false, "glow_effects": false, "description": "多彩渐变色块、圆润大圆角、活力四溢的卡片配色（每张卡片可用不同 accent 色）" }
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bg-primary: #FFFFFF;
|
||||
--bg-secondary: #FFF7ED;
|
||||
--card-bg-from: #FFFFFF;
|
||||
--card-bg-to: #FFF1E6;
|
||||
--card-border: rgba(251,146,60,0.15);
|
||||
--card-radius: 20px;
|
||||
--text-primary: #1C1917;
|
||||
--text-secondary: #57534E;
|
||||
--accent-1: #F97316;
|
||||
--accent-2: #EC4899;
|
||||
--accent-3: #8B5CF6;
|
||||
--accent-4: #06B6D4;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 风格自动推断
|
||||
|
||||
当用户未指定风格时，根据主题关键词自动推断：
|
||||
|
||||
| 关键词匹配 | 推荐风格 |
|
||||
|-----------|---------|
|
||||
| AI、机器学习、深度学习、SaaS、云、平台、API、开发者、大模型、LLM、数据、算法 | dark_tech |
|
||||
| 手机、硬件、IoT、智能家居、芯片、穿戴、电子、家电、机器人 | xiaomi_orange |
|
||||
| 企业、公司、培训、教育、医疗、金融、银行、保险、制药、GLP、GMP、质量 | blue_white |
|
||||
| 文化、历史、国风、中国、政务、党建、品牌故事、非遗、传统 | royal_red |
|
||||
| 环保、绿色、可持续、健康、养生、食品、农业、有机、美妆、护肤、自然 | fresh_green |
|
||||
| 时尚、奢侈品、高端、地产、设计、创意、艺术、珠宝、定制 | luxury_purple |
|
||||
| 学术、研究、论文、报告、法务、合规、咨询、审计、数据分析、白皮书 | minimal_gray |
|
||||
| 社交、娱乐、营销、推广、年轻、潮流、游戏、直播、短视频、电商 | vibrant_rainbow |
|
||||
| 其他未匹配 | blue_white（最通用的默认风格） |
|
||||
|
||||
## 自定义风格
|
||||
|
||||
用户可以在 Step 1 的"补充需求"中指定品牌色：
|
||||
|
||||
> "品牌主色 #1DA1F2，背景用深色"
|
||||
|
||||
此时基于最接近的预置风格，替换对应的色值字段：
|
||||
1. 将 accent.primary 替换为用户品牌色
|
||||
2. 根据品牌色明度自动选择 background 深/浅
|
||||
3. 其他字段保持预置风格的值
|
||||
Reference in New Issue
Block a user