5e23feacad
模拟顶级 PPT 设计公司的完整工作流，输出高质量 HTML 演示文稿 + 可编辑矢量 PPTX。 - 6步Pipeline: 需求调研->资料搜集->大纲策划->策划稿->风格+配图+HTML设计稿->后处理 - 8种预置风格 + 7种Bento Grid布局 + 6种卡片类型 - 专业排版系统(7级字号) + 色彩比例法则(60-30-10) + 跨页视觉叙事 - 8种纯CSS数据可视化 + 5种配图融入技法 - HTML->SVG->PPTX 全自动转换管线
374 lines
12 KiB
Markdown
374 lines
12 KiB
Markdown
# 风格系统
|
||
|
||
## 风格数据模型
|
||
|
||
每套风格由以下字段定义：
|
||
|
||
```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. 其他字段保持预置风格的值
|