Skip to content

Latest commit

 

History

History
947 lines (722 loc) · 40.7 KB

File metadata and controls

947 lines (722 loc) · 40.7 KB

工作流教程

本教程将通过实际案例,手把手教你如何使用 PPT Master 系统创建专业的 SVG 演示文稿。

教程概览

准备工作

1. 理解角色分工

在开始之前,确保你理解每个角色的职责:

角色 输入 输出 何时使用 支持格式
Strategist 源文档 设计规范与大纲 项目开始时 所有格式
Template_Designer 设计规范 页面模板 SVG 使用 /create-template 工作流时 所有格式
Image_Generator 图片资源清单 图片文件 + 提示词 选择 AI 生成图片时 所有格式
Executor_General 设计规范 SVG 代码 通用风格项目 所有格式
Executor_Consultant 设计规范 SVG 代码 一般咨询风格项目 所有格式
Executor_Consultant_Top 设计规范 SVG 代码 顶级咨询风格项目(MBB 级) 所有格式
Optimizer_CRAP SVG 代码 优化后的 SVG 完整初版后需优化时 所有格式

角色协作流程图

┌─────────────────────────────────────────────────────────────────────────────┐
│                           PPT Master 工作流程                                │
└─────────────────────────────────────────────────────────────────────────────┘

                              ┌──────────────┐
                              │   用户输入    │
                              │ PDF/URL/MD   │
                              └──────┬───────┘
                                     │
                                     ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│  阶段 0: 源内容转换(强制触发)                                               │
│  ┌──────────────────────────────────────────────────────────────────────┐   │
│  │   PDF   → python3 tools/pdf_to_md.py <文件路径>                       │   │
│  │   URL   → python3 tools/web_to_md.py <URL>                           │   │
│  │          (微信/高防站点用 node tools/web_to_md.cjs <URL>)            │   │
│  │   MD    → 直接读取                                                    │   │
│  └──────────────────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────────────────┘
                                     │
                                     ▼
                        ┌────────────────────────┐
                        │ 创建项目文件夹 (必须)   │
                        │ project_manager.py init <名称> --format <格式> │
                        └────────────┬───────────┘
                                     │
                                     ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│  模板选项 (二选一) - 必须在策略师之前确认                                     │
│  ┌──────────────────────────────────────────────────────────────────────┐   │
│  │   A) 使用已有模板 → 复制模板到项目 templates/ → 进入策略师(参考模板)│   │
│  │   B) 不使用模板   → 进入策略师                                       │   │
│  └──────────────────────────────────────────────────────────────────────┘   │
│  ⚠️ 策略师需根据模板选项调整设计方案(选A时参考模板配色/布局/风格)           │
│  💡 需要创建新模板?请使用 `/create-template` 工作流,完成后再选择 A              │
└─────────────────────────────────────────────────────────────────────────────┘
                                     │
                                     ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│  阶段 1: 策略规划                                                            │
│  ┌──────────────────────────────────────────────────────────────────────┐   │
│  │                      Strategist (策略师)                              │   │
│  │  ┌─────────────────────────────────────────────────────────────┐     │   │
│  │  │  八项确认 (强制)                                             │     │   │
│  │  │  ├── 1. 画布格式推荐                                         │     │   │
│  │  │  ├── 2. 页数范围建议                                         │     │   │
│  │  │  ├── 3. 目标受众与场景判断                                   │     │   │
│  │  │  ├── 4. 设计风格推荐 (通用/一般咨询/顶级咨询)                 │     │   │
│  │  │  ├── 5. 配色方案建议 (HEX 色值)                              │     │   │
│  │  │  ├── 6. 图标方式 (Emoji/AI生成/图标库/自定义)                │     │   │
│  │  │  ├── 7. 图片使用 (不使用/用户提供/AI生成/占位符)             │     │   │
│  │  │  └── 8. 排版方案 (字体组合 + 字号基准 18-24px)                │     │   │
│  │  └─────────────────────────────────────────────────────────────┘     │   │
│  │  ⚠️ 若图片方案包含「B) 用户提供」,八项确认后需运行             │     │   │
│  │     analyze_images.py,并在输出设计规范前填充图片资源清单         │     │   │
│  └──────────────────────────────────────────────────────────────────────┘   │
│                                     │                                        │
│                                     ▼                                        │
│                        ┌────────────────────────┐                           │
│                        │ 《设计规范与内容大纲》  │                           │
│                        │   保存到项目文件夹      │                           │
│                        └────────────────────────┘                           │
└─────────────────────────────────────────────────────────────────────────────┘
                                     │
                    ┌────────────────┴────────────────┐
                    │   图片使用 = "C) AI 生成"?       │
                    ▼                                  ▼
              ┌─────────┐                      ┌─────────────┐
              │   否    │                      │     是      │
              └────┬────┘                      └──────┬──────┘
                   │                                  │
                   │                                  ▼
                   │         ┌─────────────────────────────────────────┐
                   │         │  阶段 1.6: 图片生成 (条件触发)            │
                   │         │  ┌─────────────────────────────────┐    │
                   │         │  │      Image_Generator            │    │
                   │         │  │      (图片生成师)                │    │
                   │         │  │                                 │    │
                   │         │  │   • 分析图片资源清单             │    │
                   │         │  │   • 生成优化提示词               │    │
                   │         │  │   • 调用 AI 生成图片             │    │
                   │         │  │   • 保存到 images/ 目录          │    │
                   │         │  │   → 图片归集完成后继续           │    │
                   │         │  └─────────────────────────────────┘    │
                   │         └─────────────────────────────────────────┘
                   │                                  │
                   └──────────────────┬───────────────┘
                                      │
                    ┌─────────────────┴─────────────────┐
                    │            风格选择                │
                    ▼                                    ▼
┌────────────────────────────┐ ┌────────────────────────────┐ ┌────────────────────────────┐
│  阶段 2A: 通用灵活风格      │ │  阶段 2B: 一般咨询风格      │ │  阶段 2C: 顶级咨询风格      │
│  ┌────────────────────┐    │ │  ┌────────────────────┐    │ │  ┌────────────────────┐    │
│  │ Executor_General   │    │ │  │ Executor_Consultant│    │ │  │ Executor_Consultant│    │
│  │ (通用执行师)        │    │ │  │ (一般咨询执行师)    │    │ │  │ _Top (顶级咨询)    │    │
│  │                    │    │ │  │                    │    │ │  │                    │    │
│  │ • 灵活布局          │    │ │  │ • 简洁清晰          │    │ │  │ • MBB 级风格       │    │
│  │ • 丰富色彩          │    │ │  │ • 数据可视化        │    │ │  │ • 5 大核心技巧     │    │
│  │ • 创意自由          │    │ │  │ • 专业感            │    │ │  │ • 结论先行         │    │
│  └────────────────────┘    │ │  └────────────────────┘    │ │  └────────────────────┘    │
└────────────────────────────┘ └────────────────────────────┘ └────────────────────────────┘
                    │                                  │
                    └────────────────┬─────────────────┘
                                     │
                                     ▼
                        ┌────────────────────────┐
                        │ 【视觉构建阶段】         │
                        │   SVG 文件 (逐页生成)   │
                        │  保存到 svg_output/    │
                        │   01_封面.svg          │
                        │   02_目录.svg          │
                        │   ...                  │
                        └────────────┬───────────┘
                                     │
                                     ▼
                        ┌────────────────────────┐
                        │ 【逻辑构建阶段】(必须)   │
                        │  生成完整演讲备注文稿    │
                        │  → notes/total.md      │
                        └────────────┬───────────┘
                                     │
                                     ▼
                        ┌────────────────────────┐
                        │ 后处理 (默认AI自动执行) │
                        │ 1. total_md_split.py   │
                        │    • 拆分讲稿           │
                        │ 2. finalize_svg.py     │
                        │    • 修正图片路径       │
                        │    • 优化代码结构       │
                        └────────────┬───────────┘
                                     │
                                     ▼
                        ┌────────────────────────┐
                        │  SVG 最终版本           │
                        │  保存到 svg_final/      │
                        └────────────┬───────────┘
                                     │
                                     ▼
                        ┌────────────────────────┐
                        │ 导出 PPTX (默认AI自动执行)│
                        │ svg_to_pptx.py         │
                        │ • 自动嵌入演讲备注      │
                        └────────────┬───────────┘
                                     │
                                     ▼
                        ┌────────────────────────┐
                        │ Optimizer_CRAP (可选)   │
                        │ 初版不满意再优化        │
                        └────────────┬───────────┘
                                     │
                                     ▼
                        如执行优化:重新运行后处理与导出
                   │                                  │
                   │                                  ▼
                   │         ┌─────────────────────────────────────────┐
                   │         │  阶段 3: 视觉优化 (可选,初版后)           │
                   │         │  ┌─────────────────────────────────┐    │
                   │         │  │      Optimizer_CRAP             │    │
                   │         │  │      (CRAP 优化师)               │    │
                   │         │  │                                 │    │
                   │         │  │   四大原则:                      │    │
                   │         │  │   • 对齐 (Alignment)            │    │
                   │         │  │   • 对比 (Contrast)             │    │
                   │         │  │   • 重复 (Repetition)           │    │
                   │         │  │   • 亲密性 (Proximity)          │    │
                   │         │  │                                 │    │
                   │         │  │   可选补充:                      │    │
                   │         │  │   • 留白 (White Space)          │    │
                   │         │  │   • 降噪 (Noise Reduction)      │    │
                   │         │  └─────────────────────────────────┘    │
                   │         └─────────────────────────────────────────┘
                   │                                  │
                   │                                  ▼
                   │                     ┌────────────────────────┐
                   │                     │   优化后 SVG 文件       │
                   │                     │   yh_slide_xx_xxx.svg  │
                   │                     └────────────┬───────────┘
                   │                                  │
                   └──────────────────┬───────────────┘
                                     │
                                     ▼
                        ┌────────────────────────┐
                        │      SVG 输出           │
                        │  ┌──────────────────┐  │
                        │  │ svg_output/      │  │
                        │  │ ├── 01_xxx.svg   │  │
                        │  │ ├── 02_xxx.svg   │  │
                        │  │ └── ...          │  │
                        │  └──────────────────┘  │
                        └────────────┬───────────┘
                                     │
                                     ▼
                        ┌────────────────────────┐
                        │   后处理(默认AI自动执行)│
                        │  ┌──────────────────┐  │
                        │  │ finalize_svg.py  │  │
                        │  │ • 嵌入图标/图片   │  │
                        │  │ • 文本扁平化      │  │
                        │  │ • 圆角转 Path    │  │
                        │  │ → svg_final/     │  │
                        │  └──────────────────┘  │
                        └────────────┬───────────┘
                                     │
                                     ▼
                        ┌────────────────────────┐
                        │   导出 PPTX(默认AI自动执行)│
                        │  ┌──────────────────┐  │
                        │  │ svg_to_pptx.py   │  │
                        │  │ → output.pptx    │  │
                        │  │ 原生 SVG 矢量嵌入 │  │
                        │  └──────────────────┘  │
                        └────────────────────────┘

流程要点说明

阶段 角色 关键动作 输出物
0. 源内容转换 (自动) PDF/URL 转 Markdown(强制触发) 源内容.md
1. 策略规划 Strategist 八项确认、内容分析、规范编制 《设计规范与内容大纲》
1.5. 图片生成 Image_Generator 生成提示词、AI 生图、归集图片(条件触发) images/*.png
2a. 视觉构建 Executor 逐页生成 SVG 代码 svg_output/*.svg
2b. 逻辑构建 Executor 生成完整演讲备注文稿(必须 notes/total.md
3. 视觉优化 Optimizer CRAP 原则优化(可选,初版后不满意再用) yh_slide_XX_xxx.svg
4. 后处理 (工具) 拆分讲稿、修正路径、导出 PPTX notes/*.md + *.pptx

注意事项

  • 阶段 0 是强制触发:识别到 PDF/URL 后必须立即调用转换工具
  • 阶段 1 的八项确认是强制要求,不可跳过
  • 阶段 1.5 仅当图片方式包含「C) AI 生成」时触发(如 C、B+C、C+D 等组合),是串行环节,图片归集完成后才进入阶段 2
  • 阶段 2a 和 2b 是 Executor 的两阶段,2b(逻辑构建)不可跳过
  • 阶段 3 是可选的,仅在完整初版产出后对关键页面使用;优化后需重新执行阶段 4
  • 阶段 4 由工具自动执行:total_md_split.pyfinalize_svg.pysvg_to_pptx.py

2. 准备你的内容

确保你的源文档包含:

  • ✓ 清晰的标题和章节
  • ✓ 具体的数据和数字
  • ✓ 要点和关键信息
  • ✓ 逻辑结构

3. 选择画布格式

根据使用场景选择合适的格式(详见 画布格式规范):

演示文稿场景:

  • PPT 16:9 (1280×720) - 现代投影设备
  • PPT 4:3 (1024×768) - 传统投影设备

社交媒体场景:

  • 小红书 (1242×1660) - 知识分享、产品种草
  • 朋友圈 (1080×1080) - 活动海报、品牌宣传
  • Story (1080×1920) - 短视频封面、快拍

营销物料场景:

  • 公众号头图 (900×383) - 文章配图
  • 横版海报 (1920×1080) - 网页Banner
  • 竖版海报 (1080×1920) - 手机广告

4. 选择设计风格

思考你的内容特性:

选择高端咨询风格,如果:

  • 面向高管或董事会
  • 需要展示战略分析
  • 数据密集型内容
  • 追求极致专业感

选择通用灵活风格,如果:

  • 一般商业演示
  • 团队内部汇报
  • 教育培训内容
  • 需要更多创意自由

案例 1: 创建季度业务报告

场景设定

你需要为公司高层创建一份 Q3 季度业务回顾演示,包含业绩数据、项目进展和未来规划。

步骤 1: 与 Strategist 对话(初始沟通)

⚠️ 重要: 在开始内容分析之前,Strategist 必须首先完成初始沟通与范围确认。

Strategist 的八项确认:

在开始分析您的内容之前,我需要先完成八项确认:

1. 画布格式:
   [建议] PPT 标准格式 (1280×720, 16:9),适合季度战略会议的投影展示。

2. 页数范围:
   [建议] 8-10 页,确保每个核心议题有充分展示空间,同时保持演示紧凑。

3. 目标受众与场景:
   [建议] 面向董事会和高管团队,季度战略会议汇报场景。
   核心信息聚焦:"Q3业绩稳健增长,Q4战略方向明确"。

4. 设计风格:
   [建议] C) 顶级咨询风格(MBB 级),体现专业性和权威感,
   适合高管层的战略分析演示。

5. 配色方案:
   [建议]
   - 主导色: #0076A8 (德勤蓝) - 专业、可信
   - 辅助色: #F5F5F5 (浅灰) - 背景、留白
   - 强调色: #4CAF50 (成功绿) / #FF9800 (警示橙) - 数据标注

6. 图标方式:
   [建议] C) 内置图标库,专业简洁,与咨询风格匹配。

7. 图片使用:
   [建议] A) 不使用图片,数据报告以图表和数据可视化为主。
   ⚠️ 若选择包含「B) 用户提供」,八项确认后需运行 `python3 tools/analyze_images.py <项目路径>/images`,
   并在输出《设计规范与内容大纲》前完成图片资源清单填充。

8. 排版方案:
   [建议] P1 方案(微软雅黑 + Arial),正文 24px 基准,现代简洁同时保持专业感。

你的回应:

同意你的所有建议,开始生成设计规范。

你的源文档内容:

我需要创建一份Q3季度业务报告的演示文稿。主要内容包括:

1. 核心业绩指标(营收、客户数、满意度、市场份额)
2. 重点项目进展(产品升级、市场拓展、运营优化)
3. 面临的挑战(竞争、人才、成本、合规)
4. Q4战略重点(产品创新、市场深耕、组织建设、风险管控)
5. 财务展望

目标受众是公司高管层。

步骤 2: 获取设计规范

完成初始沟通后,Strategist 将输出:

# Q3 季度业务报告 - 设计规范与内容大纲(精简版)

## 一、项目概述

**源文档主题**: Q3 季度业务回顾与 Q4 战略展望
**设计风格**: 高端咨询风格(数据驱动、结构化)
**目标受众**: 董事会和高管团队
**核心目标**: 展示 Q3 业绩成果,明确 Q4 战略方向
**页面数量**: 9 页

## 二、整体设计规范(精简版)

### 1. 视觉主题提案

建议采用"高端咨询风格(亮色主题)"以突出数据的清晰度和专业性。请您确认。

### 2. 色彩方案提案

建议色彩方案:主导色为德勤蓝 (#0076A8),搭配专业灰度色系。
请您确认,或提供您的品牌主色。

### 3. 核心布局原则

### 视觉主题

建议采用"高端咨询风格(亮色主题)"以突出数据的清晰度和专业性。

### 色彩方案

- 主导色: 德勤蓝 #0076A8
- 辅助色:
  - 成功绿 #4CAF50(正向指标)
  - 警示橙 #FF9800(需关注)
  - 提示红 #F44336(风险项)
- 中性色:
  - 深灰 #333333(主文本)
  - 中灰 #666666(副文本)
  - 浅灰 #E0E0E0(分隔线)

### 核心布局原则

- 画布: 1280×720px
- 边距: 40px
- 标题高度: 80px
- 内容区高度: 600px

## 二、页面序列规划

### 第 1 页: 封面

**主题**: Q3 业务回顾与 Q4 展望
**布局**: 居中式
**元素**:

- 公司 Logo(左上)
- 主标题 "2024 Q3 业务回顾"
- 副标题 "稳健增长 · 持续创新"
- 日期和演讲人

### 第 2 页: 核心业绩指标

**主题**: 超额达成季度目标
**布局**: 2×2 KPI 仪表盘
**数据**:

- 营收: 2.8 亿元 (+35% YoY)
- 客户数: 580 家 (+120 新增)
- NPS: 78 分 (+6 分)
- 市场份额: 18% (+3%)

### 第 3 页: 重点项目进展

**主题**: 三大核心项目全面推进
**布局**: 三栏卡片
**内容**:

- 产品升级: AI 功能上线
- 市场拓展: 华南市场突破
- 运营优化: 效率提升显著

### 第 4 页: 面临的挑战

**主题**: 风险识别与应对
**布局**: 2×2 矩阵
**内容**:

- 市场竞争(高影响-外部)
- 人才招聘(高影响-内部)
- 成本上升(中影响-内部)
- 合规要求(中影响-外部)

### 第 5 页: Q4 战略重点

**主题**: 四维发力实现突破
**布局**: 四象限
**内容**:

- 产品创新、市场深耕
- 组织建设、风险管控

### 第 6 页: 财务展望

**主题**: Q4 目标明确可达
**布局**: 左图右表
**内容**:

- 左侧: 营收趋势折线图
- 右侧: 财务指标表格

### 第 7 页: 结束页

**主题**: 感谢与下一步
**布局**: 居中式
**内容**:

- 感谢语
- 联系方式
- Q&A 提示

步骤 3: 确认并开始生成

你的确认:

规划看起来很好!请先生成第1页:封面页

步骤 4: Executor_Consultant 生成 SVG

Executor_Consultant 将生成类似如下的 SVG 代码:

<svg width="1280" height="720" viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg">
  <!-- 背景 -->
  <rect width="1280" height="720" fill="#FFFFFF"/>

  <!-- Logo区域 -->
  <text x="40" y="50" font-family="system-ui" font-size="18" fill="#0076A8" font-weight="600">
    YOUR COMPANY
  </text>

  <!-- 主标题 -->
  <text x="640" y="300" text-anchor="middle" font-family="system-ui" font-size="56" fill="#333333" font-weight="700">
    2024 Q3 业务回顾
  </text>

  <!-- 副标题 -->
  <text x="640" y="360" text-anchor="middle" font-family="system-ui" font-size="28" fill="#666666" font-weight="400">
    稳健增长 · 持续创新
  </text>

  <!-- 装饰线 -->
  <line x1="440" y1="380" x2="840" y2="380" stroke="#0076A8" stroke-width="3"/>

  <!-- 日期和演讲人 -->
  <text x="640" y="500" text-anchor="middle" font-family="system-ui" font-size="18" fill="#999999">
    2024年10月 | 业务部门汇报
  </text>

  <!-- 页码 -->
  <text x="1240" y="700" text-anchor="end" font-family="system-ui" font-size="14" fill="#CCCCCC">
    1
  </text>
</svg>

步骤 5: 逐页完成

继续请求生成其他页面:

你: 很好!请生成第2页:核心业绩指标
Executor: [生成KPI仪表盘SVG]

你: 请生成第3页:重点项目进展
Executor: [生成三栏卡片SVG]

... (继续其他页面)

步骤 6: 优化关键页面(可选)

仅在完整初版产出后仍不满意时,再请 Optimizer_CRAP 优化关键页面;优化后需重新运行 finalize_svg.pysvg_to_pptx.py 以保持产物一致:

你: 请使用CRAP原则优化第2页的视觉效果

Optimizer_CRAP:
我将分析第2页的SVG并应用CRAP原则进行优化:

1. 对比(Contrast):
   - 增大数字与标签的尺寸对比
   - 使用更鲜明的颜色区分正负趋势

2. 重复(Repetition):
   - 统一四个KPI卡片的样式
   - 保持一致的圆角和阴影

3. 对齐(Alignment):
   - 确保卡片严格对齐网格
   - 文本元素垂直居中

4. 亲密性(Proximity):
   - 将相关数据更紧密地组合
   - 增大卡片间的间距

[输出优化后的SVG代码]

步骤 7: 导出和使用

完成所有页面后:

  1. 保存 SVG 文件

    • 使用统一的命名规则
    • 按页码顺序组织
  2. 验证效果

    • 在浏览器中逐页查看
    • 检查一致性和质量
    • 检查 PPT 兼容性(见下方规则)
  3. 后处理(默认由 AI 自动执行;需要时可手动)

    # 1. 拆分讲稿(将 notes/total.md 拆分为各页独立文件)
    python3 tools/total_md_split.py <项目路径>
    
    # 2. 后处理 SVG(修正路径、嵌入图标)
    python3 tools/finalize_svg.py <项目路径>
  4. 导出为 PPTX(默认由 AI 自动执行)

    # 使用最终版本(推荐)
    python3 tools/svg_to_pptx.py <项目路径> -s final
    
    # 使用原始版本
    python3 tools/svg_to_pptx.py <项目路径>

    生成的 PPTX 文件中,SVG 以原生矢量格式嵌入,需要 PowerPoint 2016+ 查看。

  5. 其他格式转换

    • 转为 PNG 用于其他演示软件
    • 转为 PDF 用于打印
    • 保留 SVG 用于后续编辑

案例 2: 小红书知识分享帖子

场景设定

为小红书平台创建一份知识分享帖子,介绍产品使用技巧,风格需要年轻化、易读性强。

快速流程

1. 准备内容
   - 产品核心功能介绍
   - 5个使用技巧
   - 常见问题解答
   - 推荐理由

2. 与Strategist对话(八项确认)
   你: 我需要为小红书创建一份产品使用技巧分享

   Strategist: 在开始之前,我需要完成八项确认:

   1. 画布格式:[建议] 小红书帖子格式 (1242×1660, 3:4),
      竖屏比例最适合手机端浏览,符合小红书用户阅读习惯。

   2. 页数范围:[建议] 6-8 张,包括封面、逐个技巧展示、
      总结页,形成完整的图文轮播。

   3. 目标受众与场景:[建议] 小红书年轻用户的知识分享,
      采用轻松、易懂的表达方式,突出实用性。

   4. 设计风格:[建议] A) 通用灵活风格,
      更好地适应社交媒体的视觉需求。

   5. 配色方案:[建议]
      - 主导色: #FF6B6B (珊瑚红) - 活力、年轻
      - 辅助色: #FFF5F5 (浅粉) - 温暖背景
      - 强调色: #4ECDC4 (薄荷绿) - 点缀对比

   6. 图标方式:[建议] A) Emoji 表情,
      轻松活泼,符合小红书风格。

   7. 图片使用:[建议] D) 占位符预留,
      后期可添加产品实拍图。

   你: 同意你的建议,开始生成设计规范

3. 确认设计规范
   Strategist: [输出规范,包含:
   - 画布格式: 1242×1660 (3:4)
   - 建议色彩方案(活泼年轻)
   - 竖屏单栏布局
   - 醒目标题设计
   - 适合手机阅读的字号]

4. 逐页生成
   你: 请生成第1张:封面
   Executor_General: [生成小红书格式SVG]
   ... (继续)

5. 完成交付
   导出所有SVG文件,可转为PNG后上传小红书

PPT 兼容性规则

为确保 SVG 导出到 PowerPoint 后效果一致,必须遵守以下透明度规则

❌ 禁止 ✅ 正确
fill="rgba(255,255,255,0.1)" fill="#FFFFFF" fill-opacity="0.1"
<g opacity="0.2">...</g> 每个子元素单独设置透明度
<image opacity="0.3"/> 图片后加遮罩层 <rect fill="背景色" opacity="0.7"/>

📌 记忆口诀:PPT 不认 rgba、不认组透明、不认图片透明、不认 marker

检查清单

  • rgba() 颜色格式
  • <g opacity="..."> 组透明度
  • 图片透明度使用遮罩层实现

高级技巧

技巧 1: 自定义配色

你: 我们公司的品牌色是 #FF6B35(橙色),请使用这个作为主色调

Strategist: 收到!我将围绕 #FF6B35 构建配色方案:
- 主导色: #FF6B35
- 辅助色: #004E89(深蓝,形成对比)
- 点缀色: #FFD23F(黄色,协调暖色系)
- 中性色: 标准灰度

技巧 2: 调整布局密度

你: 第3页内容太多,看起来很挤

Strategist: 建议将第3页拆分为两页:
- 第3页: 前3个项目
- 第3.5页: 后2个项目

或者减少文本描述,只保留核心要点。您选择哪种方案?

技巧 3: 快速迭代

你: 第2页的字体太小了,请调大

Executor: 已将主要数字从48px调整为56px,
标签从18px调整为20px。请查看效果。

技巧 4: 统一风格

如果你已经有一些页面作为参考:

你: 请参考已有的前3页风格,生成第4页

Executor: 我会保持相同的:
- 配色方案
- 字体大小层级
- 卡片样式
- 间距规则
[生成SVG]

技巧 5: 添加数据可视化

你: 第5页需要展示过去6个月的营收趋势

Executor_Consultant: 建议使用折线图,包含:
- X轴: 6个月份
- Y轴: 营收金额
- 数据点标注
- 趋势线
[生成包含图表的SVG]

常见问题

Q1: 生成的代码太长,无法完整显示?

解决方案:

你: 代码被截断了,请只生成SVG的主体部分,
我会自己添加开头和结尾的标签。

或者:请将代码分成几个部分发送

Q2: 某个元素位置不对?

解决方案:

你: 标题与内容重叠了,请调整

Executor: 我将:
1. 标题Y坐标从60px调整为80px
2. 内容区起始Y坐标从100px调整为140px
[重新生成]

Q3: 如何修改已生成的 SVG?

解决方案:

方法1: 重新生成
你: 请重新生成第2页,将主色改为绿色

方法2: 直接编辑
在文本编辑器中打开SVG文件
查找相应的颜色值(如#0076A8)
替换为新颜色(如#4CAF50)

方法3: 使用优化器
你: 请优化第2页,重点调整颜色使用
Optimizer_CRAP: [分析并优化]

Q4: 文本如何换行?

解决方案: SVG 中的文本换行使用 <tspan> 标签:

<text x="100" y="200">
  <tspan x="100" dy="0">第一行文本</tspan>
  <tspan x="100" dy="30">第二行文本</tspan>
  <tspan x="100" dy="30">第三行文本</tspan>
</text>

或者要求:

你: 这段文字太长,请分成3行显示

Executor: 我将使用tspan进行手动换行,
每行约20-25个字符。

Q5: 如何添加图标?

图标使用方式在初次沟通时确认,有四种选项:

A) Emoji 表情 - 最简单,直接使用 Unicode 表情:

Executor: 我将使用 Emoji 图标:
- 产品升级: 🚀
- 市场拓展: 📈
- 运营优化: ⚙️

B) AI 生成 - 用 SVG 基本元素绘制:

你: 请用几何图形绘制一个火箭图标

Executor: 我将使用 circle、rect、path 等元素
绘制一个与配色方案一致的火箭图标。

C) 内置图标库 - 使用 templates/icons/ 中的 640+ 图标:

你: 在第3页使用内置图标库的图标

Executor: 我将使用 templates/icons/ 中的图标:
- 产品升级: rocket.svg
- 市场拓展: arrow-trend-up.svg
- 运营优化: cog.svg

D) 自定义图标 - 使用用户提供的图标文件夹:

你: 请使用 projects/xxx/icons/ 文件夹中的图标

Executor: 收到,我将从您指定的文件夹中引用图标。

💡 提示:查看所有内置图标请参考 templates/icons/README.md

效率提升建议

1. 准备充分

  • ✓ 内容大纲清晰完整
  • ✓ 数据准确可用
  • ✓ 明确目标受众
  • ✓ 确定时间节点

2. 批量操作

  • ✓ 一次性与 Strategist 确认所有规范
  • ✓ 连续生成多页避免上下文丢失
  • ✓ 统一处理相似页面

3. 模板复用

  • ✓ 保存成功的页面作为模板
  • ✓ 记录常用的配色方案
  • ✓ 建立个人风格指南

4. 质量控制

  • ✓ 每完成 3-5 页就整体检查
  • ✓ 确保风格统一
  • ✓ 验证数据准确性

下一步

需要帮助?

  • 📖 查阅文档
  • 💬 提交 Issue
  • 🌟 分享你的作品

祝你创作顺利!如有任何问题,欢迎反馈。

文本扁平化(去 tspan)

在生成阶段,按规范使用 <tspan> 进行手动换行。后处理会自动扁平化:

# 直接运行,无需参数
python3 tools/finalize_svg.py <项目路径>
python3 tools/flatten_tspan.py path/to/input.svg path/to/output.svg

检查要点:

  • 输出中不应存在 <tspan>
  • 文本样式(font-size/font-weight/fill/text-anchor 等)与坐标/变换应与原图一致;
  • 如发现偏差,优先在生成端修正 <tspan>x/dy 与父 <text> 样式,再重跑扁平化。