skills/ppt-station-skill/designer-brief.md

228 lines
9.1 KiB
Markdown
Raw Permalink Normal View History

# PPT 设计师需求 Brief
## 背景
我们有一个 PPT 自动化系统ppt-station用代码从数据生成 PPT 报告。系统用**主题**控制配色/字体,用**布局函数**控制每页的排版。当前只有 4 个主题和 10 种布局,远不够用。
**你的任务**:设计更多主题配色方案和页面布局,我来把它们实现到代码里。
你不需要写代码。你需要交付的是:**每个主题/布局的设计稿 + 标注文档**。
---
## 第一部分:需要更多主题
### 当前有的
| 主题 | 主色 | 辅助色 | 强调色 | 风格 |
|------|------|--------|--------|------|
| midnight | `#1E2761` 藏蓝 | `#CADCFC` 冰蓝 | `#E8B931` 金 | 高端商务 |
| forest | `#2C5F2D` 森林绿 | `#97BC62` 苔藓 | `#E8B931` 金 | 自然清新 |
| coral | `#F96167` 珊瑚 | `#F9E795` 金黄 | `#2F3C7E` 藏蓝 | 活力年轻 |
| charcoal | `#36454F` 炭灰 | `#F2F2F2` 灰白 | `#E8B931` 金 | 极简低调 |
### 需要你设计的新主题
请设计 **4-6 个新主题**,覆盖以下场景:
1. **金融/银行** — 稳重、信赖感,深蓝/深灰为主,金色或红色点缀。参考:招商银行、中金公司年报风格
2. **养老金/保险** — 暖色调,安全感,可以偏暖灰/棕/蓝绿。参考:社保基金、泰康年报
3. **科技/互联网** — 冷色调,未来感,可以用渐变蓝/紫/青。参考:腾讯、字节年报
4. **政府/国企** — 中国红+金,庄重大气。参考:中央汇金、国投年报
5. **ESG/绿色** — 深绿+白+浅绿,可持续发展感
6. **高对比深色** — 纯黑底+亮色文字/图表,适合投屏演示
### 每个主题需要提供
以下 **18 个颜色值**6 位十六进制 RGB不带 `#`
```
primary — 主色标题栏、表头、KPI 数字)
secondary — 辅助色(卡片边框、次要信息)
accent — 强调色(装饰线、高亮、关键数据)
bg_dark — 深色幻灯片背景(用于标题页、结论页)
bg_light — 浅色幻灯片背景(用于内容页、图表页)
card_bg — 卡片/面板背景(通常白色)
text_dark — 浅底上的正文色
text_light — 深底上的文字色
text_muted — 次要文字/说明文字/脚注
border — 卡片边框色
positive — 正向变化色(如 +5.9%
negative — 负向变化色(如 -3.2%
```
加上 **6 个排版参数**
```
header_font — 标题字体名(如"微软雅黑"、"思源黑体"
body_font — 正文字体名
title_size — 标题字号pt
subtitle_size — 副标题字号pt
body_size — 正文字号pt
caption_size — 脚注字号pt
```
### 交付格式
每个主题一张示意图(任意工具),展示以下 4 页效果:
1. 深色标题页bg_dark 背景 + 大标题)
2. KPI 卡片页bg_light 背景 + 4 张卡片)
3. 图表页bg_light 背景 + 一张组合图表)
4. 深色结论页bg_dark 背景 + 评分卡片)
旁边标注所有色值。
---
## 第二部分:需要更多页面布局
### 当前有的 10 种布局
| 布局 | 用途 | 缺什么 |
|------|------|--------|
| `title_dark` | 深色全屏标题页 | 只有居中标题,无图片/logo 支持 |
| `title_light` | 浅色左右分栏标题页 | 左色块+右文字,缺少更多变体 |
| `kpi_cards` | KPI 指标卡片N 等宽) | 只有水平排列,缺竖排/瀑布流 |
| `chart_full` | 整页图表 | 够用 |
| `chart_text` | 左图表+右文字说明 | 只有左图右文,缺反向 |
| `two_charts` | 左右双图表 | 够用 |
| `comparison_table` | 对比表格 | 只有基础表格,缺高亮更丰富的样式 |
| `bullet_points` | 图标+文字要点 | 只有圆形图标,缺更多样式 |
| `section_divider` | 章节分隔页 | 左色块+右大字,缺更多变体 |
| `conclusion_dark` | 深色结论页 | 够用 |
### 需要你设计的新布局
请设计 **8-12 种新布局**,以下是建议方向(选你觉得最有价值的做):
#### 高优先级
**1. `timeline` — 时间线/里程碑**
- 用途:投资历程、项目进度、公司发展史
- 建议水平时间线3-6 个节点,每个节点有日期+标题+简述
- 数据:`items: [{date, title, desc}, ...]`
**2. `waterfall` — 瀑布图/归因分析**
- 用途:收益归因、成本分解、利润桥图
- 建议:不需要真的瀑布图图表,用色块模拟即可(正向绿色上升、负向红色下降)
- 数据:`items: [{label, value, direction: "up"/"down"}, ...]`
**3. `image_text` — 图片+文字(左右可切换)**
- 用途:产品展示、团队介绍、案例分析
- 建议50/50 分栏,左图右文 或 右图左文
- 数据:`image_path, title, body, image_side: "left"/"right"`
**4. `dashboard` — 仪表盘页KPI + 图表混排)**
- 用途:一页内同时展示核心数字和趋势图表
- 建议:顶部 3-4 个小 KPI 卡片 + 下方大图表,或者 2x2 网格
- 数据:`cards: [...], df, series_config, ...`
**5. `quote` — 引用/金句页**
- 用途:管理层观点、投资建议、风险提示
- 建议:大字引号 + 居中引文 + 来源人名
- 数据:`quote, author, title`
**6. `comparison_cards` — 对比卡片A vs B**
- 用途两家公司对比、方案对比、before/after
- 建议:左右两张大卡片,各有标题+若干指标
- 数据:`left: {title, items: [{label, value}]}, right: {...}`
#### 中优先级
**7. `icon_grid` — 图标网格2x3 或 3x3**
- 用途:能力矩阵、特征展示、产品功能
- 建议:每格一个图标+标题+一句话描述
- 数据:`items: [{icon, title, desc}, ...]`
**8. `progress_bars` — 进度条/评分页**
- 用途:评分展示、完成度、指标达标率
- 建议5-8 行,每行一个标签 + 一个水平进度条 + 数值
- 数据:`items: [{label, value, max_value}, ...]`
**9. `three_columns` — 三栏内容**
- 用途:三个方案对比、三大优势、三个阶段
- 建议:三等宽栏,每栏有标题+图标+正文
- 数据:`columns: [{title, icon, body}, ...]`
**10. `chart_table` — 上图表+下表格**
- 用途:图表和明细数据一页展示
- 建议:上半页图表,下半页简表
- 数据:图表参数 + `headers, rows`
**11. `highlight_number` — 大数字强调页**
- 用途:单一核心数据的全屏展示(如"年化收益率 12.3%"
- 建议:超大字号居中 + 小标签 + 一行说明
- 数据:`number, label, description`
**12. `agenda` — 议程/目录页**
- 用途:报告目录、会议议程
- 建议:左侧章节编号+标题列表,当前章节高亮
- 数据:`items: [{number, title}], active_index`
### 每种布局需要提供
1. **设计稿**13.333 x 7.5 英寸16:9 比例)
2. **标注文档**,包括:
- 每个元素的 x, y, w, h英寸
- 字号、字体、颜色(用主题变量名,如 `primary`、`text_dark`,不要写死色值)
- 对齐方式(左/中/右,上/中/下)
- 元素之间的间距
3. **数据接口**说明:这个布局需要哪些输入数据字段
### 设计约束(必须遵守)
- **幻灯片尺寸**: 13.333 x 7.5 英寸16:9 宽屏)
- **左右页边距**: 0.6 英寸
- **所有颜色用主题变量名**,不要写死具体色值。这样同一个布局换个主题就能换色
- **内容页统一"开头"**:标题在 y=0.25-0.35,下方 2 英寸金色装饰线在 y≈0.9-1.1,内容区从 y≈1.2-1.5 开始
- **标题字号**: `title_size - 2`(即比主题标题小 2pt
- **元素最小间距**: 0.3 英寸
- **不要标题下装饰线** — 我们用的是短的金色强调线2 英寸宽 × 0.04 英寸高),不是全宽下划线
### 需要适配的数据特点
这些布局主要用在**金融/养老金/投资报告**中,常见数据特点:
- 日期范围:日/周/月/季/年
- 数值类型:收益率(-5%~30%、指数点位3000~5000、金额亿元级
- 中文列名,常见:收益率、指数、市值、净值、波动率、规模
- 公司数量:通常 2-6 家对比
- KPI 卡片:通常 3-6 个
---
## 第三部分:图表配色方案
当前图表配色 8 种,但都是通用色,缺少与主题匹配的系列颜色。
### 需要你提供
为每个新主题提供一套 **4-8 色的图表系列颜色序列**
```
第 1 色 — 用于柱状图/面积图(通常较浅或中性)
第 2 色 — 用于折线图(通常较深或醒目)
第 3 色 — 备选第二系列
第 4 色 — 备选第三系列
...
```
规则:
- 相邻颜色要有足够区分度(不要两个接近的蓝)
- 第 1 色通常是柱状图(面积大),用中性色/浅色
- 第 2 色通常是折线(线条细),用饱和度高的颜色以保证可见性
- 所有颜色在白底和深底都要可辨识
---
## 交付清单
| 交付项 | 数量 | 格式 |
|--------|------|------|
| 新主题配色方案 | 4-6 套 | 色值表 + 4 页示意图 |
| 新布局设计 | 8-12 种 | 标注设计稿(含 x/y/w/h |
| 图表系列配色 | 每个主题 1 套 | 4-8 色序列 |
**优先级**:先交主题 + 图表配色(我可以直接用),布局设计可以分批交。
有问题随时问我,我可以给你看现有的 PPT 输出效果做参考。