# 一个 PPT Agent 的完整拆解：从需求调研到 SVG 出图


先说结论：这不是又一个"输入主题 → 硬套模板 → 输出垃圾"的 AI PPT 工具。

它跑完了一条完整的专家工作流——需求调研、资料检索、大纲策划、版面规划、视觉设计——每一步都可以人工介入精调，也可以全程自动跑通。效果上，用 Gemini 3 Flash 生成的页面，已经能到商业交付水准。

{{< image src="/pictures/posts/ppt-agent-workflow-pipeline.svg" caption="PPT Agent 四阶段流水线" alt="PPT Agent 工作流" title="四阶段流水线" width="800" class="center" >}}

<!-- more -->

整个思路来自三顿（sandun）在 Linux.do 上的分享，他做了 7 年 PPT 教学、3 年 AI 产品。下面按阶段拆解。

## 为什么市面上的 AI PPT 都不好用

几乎所有的 AI PPT 工具，流程都是一样的：你输入一个主题，它马上吐一个大纲，然后往模板里塞内容。整个过程没有任何"理解需求"的环节。

但真正做 PPT 的专业流程不是这样的。专业设计公司有专门的策划师岗位，他们会先搞清楚三个问题：给谁看？说什么？达到什么目的？然后才动笔。

这个 Agent 把这条专业流程搬了过来。

## 第一阶段：需求调研，先问再做

Agent 拿到主题后，第一件事不是生成大纲，而是去搜索相关资料，然后像顾问一样向用户提问：

- 这份 PPT 的受众是谁？
- 核心要传达的信息是什么？
- 有没有必须包含的数据或案例？

这一步用的是一个结构化的提示词，让 AI 扮演"PPT 结构架构师"的角色，核心方法论是金字塔原理——结论先行、以上统下、归类分组、逻辑递进。

完整提示词如下：

```markdown
# Role: 顶级的PPT结构架构师

## Profile
- 版本：2.0 (Context-Aware)
- 专业：PPT逻辑结构设计
- 特长：运用金字塔原理，结合**背景调研信息**构建清晰的演示逻辑

## Goals
基于用户提供的 **PPT主题** 和 **背景调研信息 (Context)**，设计一份逻辑严密、层次清晰的PPT大纲。

## Core Methodology: 金字塔原理
1. 结论先行：每个部分以核心观点开篇
2. 以上统下：上层观点是下层内容的总结
3. 归类分组：同一层级的内容属于同一逻辑范畴
4. 逻辑递进：内容按照某种逻辑顺序展开

## 重要：利用调研信息
你将获得一些关于主题的搜索摘要。请务必参考这些信息来规划大纲，使其切合当前的市场现状或技术事实，而不是凭空捏造。
例如：如果调研显示"某技术已过时"，则不要将其作为核心推荐。

## 输出规范
请严格按照以下JSON格式输出，结果用[PPT_OUTLINE]和[/PPT_OUTLINE]包裹：

[PPT_OUTLINE]
{
  "ppt_outline": {
    "cover": {
      "title": "引人注目的主标题",
      "sub_title": "副标题",
      "content": []
    },
    "table_of_contents": {
      "title": "目录",
      "content": ["第一部分标题", "第二部分标题", "..."]
    },
    "parts": [
      {
        "part_title": "第一部分：章节标题",
        "pages": [
          { "title": "页面标题1", "content": [] },
          { "title": "页面标题2", "content": [] }
        ]
      }
    ],
    "end_page": {
      "title": "总结与展望",
      "content": []
    }
  }
}
[/PPT_OUTLINE]

## Constraints
1. 必须严格遵循JSON格式。
2. **页数要求**：{{PAGE_REQUIREMENTS}}
```

输出是一个结构化的 JSON 大纲，每页都有标题，但还没有具体内容。

## 第二阶段：资料检索，给骨架填血肉

大纲是骨架，内容是血肉。这一步把大纲里每一页的标题拆开，逐个去做搜索和信息整理。

项目用的是国内搜索接口，但如果你自己 DIY，三顿推荐的方案是直接用 Grok——把大纲标题逐个丢进去，它会自动搜索、整理、总结。

关键点：**不要让 AI 凭空编内容**。每一条信息都应该有来源，无论是财报数据、技术文档还是行业报告。这一步做得好不好，直接决定最终 PPT 的可信度。

## 第三阶段：策划稿，先定版面再上设计

这是大多数 AI PPT 工具缺少的环节，也是专业设计公司报价 1 万+/页的核心差异。

策划稿是一个简化版的页面初稿——没有花哨的样式，只有内容的位置和版式规划。每页什么位置放什么元素，用什么样的布局，都固定下来。

{{< image src="/pictures/posts/ppt-agent-bento-grid-concept.svg" caption="Bento Grid 布局概念" alt="Bento Grid 布局" title="Bento Grid" width="800" class="center" >}}

实测下来，把策划和设计分成两步给 AI，比一步到位的效果好得多。策划部分负责内容组织和版面规划，设计部分负责风格和视觉，各司其职。

用户可以在这个阶段精调内容，确认后再跑设计。也可以全程不干预，让 AI 自动走完。

## 第四阶段：SVG 出图，Bento Grid 是关键

这一步是最有意思的部分。

布局方案用的是 **Bento Grid**（便当盒布局）——把内容装进不同大小的卡片里，像日式便当一样排列。苹果发布会、小米年报的可视化网页，用的都是这个思路。

选 Bento Grid 有三个原因：

1. **信息密度高**：一页能承载大量内容，不会显得空或挤
2. **布局灵活**：卡片数量、大小、位置可以自由组合，不依赖固定模板
3. **AI 能理解**：这是最关键的。"卡片"是 AI 最容易掌握的设计语言，比自由排版可控得多

Bento Grid 布局的完整规范：

```markdown
内容页的便当网格 (Bento Grid) 布局
这是一种灵活的网格系统，其布局应由内容本身的需求驱动，而非僵硬的模板。通过组合不同尺寸的卡片，创造出动态且视觉有趣的布局。
- 核心原则:
    - 灵活性: 卡片数量不固定。可以是 1, 2, 3, 4, 5 或更多个，取决于如何更好地呈现信息。
    - 层级感: 使用卡片尺寸建立视觉层级。最重要的信息放在最大的卡片上。
    - 留白: 在所有卡片之间保持至少 20px 的间距。
- 布局组合示例:
    - 单一焦点: 一张大卡片覆盖大部分区域 (w=1200, h=580)。适用于单一、有力的信息或详细的图表。
    - 两栏布局:
        - 50/50 对称: 两张等宽的卡片。
        - 非对称: 一张较宽的卡片（如 2/3 宽度）用于主内容，一张较窄的（1/3 宽度）用于辅助信息、数据或图片。
    - 三栏布局: 三张等宽的卡片，适合并列比较三项内容。
    - 主次结合: 一张大的居中卡片，两侧各一张小的垂直卡片。
    - 顶部英雄式: 顶部一张宽幅"英雄"卡片，下方是 2-4 个较小的等宽卡片网格。
    - 混合网格 (自由度最高): 自由混合各种尺寸的卡片，例如一个中等方块、两个小的水平矩形和一个垂直矩形。这种方式可以极大地适应不同内容的需求。
```

SVG 出图的完整提示词：

```markdown
作为精通信息架构与 SVG 编码的专家，你的任务是将完整的文字内容转化为一张高质量、结构化、具备高级感、简洁感和专业感的 SVG 演示文稿页面。要求如下：

1.画布: SVG viewBox 必须是 0 0 1280 720。

2.内容页的便当网格 (Bento Grid) 布局
这是一种灵活的网格系统，其布局应由内容本身的需求驱动，而非僵硬的模板。通过组合不同尺寸的卡片，创造出动态且视觉有趣的布局。
- 核心原则:
    - 灵活性: 卡片数量不固定。可以是 1, 2, 3, 4, 5 或更多个，取决于如何更好地呈现信息。
    - 层级感: 使用卡片尺寸建立视觉层级。最重要的信息放在最大的卡片上。
    - 留白: 在所有卡片之间保持至少 20px 的间距。
- 布局组合示例:
    - 单一焦点: 一张大卡片覆盖大部分区域 (w=1200, h=580)。适用于单一、有力的信息或详细的图表。
    - 两栏布局:
        - 50/50 对称: 两张等宽的卡片。
        - 非对称: 一张较宽的卡片（如 2/3 宽度）用于主内容，一张较窄的（1/3 宽度）用于辅助信息、数据或图片。
    - 三栏布局: 三张等宽的卡片，适合并列比较三项内容。
    - 主次结合: 一张大的居中卡片，两侧各一张小的垂直卡片。
    - 顶部英雄式: 顶部一张宽幅"英雄"卡片，下方是 2-4 个较小的等宽卡片网格。
    - 混合网格 (自由度最高): 自由混合各种尺寸的卡片，例如一个中等方块、两个小的水平矩形和一个垂直矩形。这种方式可以极大地适应不同内容的需求。

请你根据我的内容输出SVG代码，我的内容是：
```

布局组合可以是单一焦点、两栏对称/非对称、三栏并列、顶部英雄式、混合网格等，完全由内容驱动。

输出格式选了 SVG 而不是 HTML。原因：

- SVG 在 Office 2016+ 可以直接导入，完全可编辑
- 各种设计软件（Figma、Sketch、Illustrator）都支持
- 矢量格式，无限放大不糊
- 代价是 SVG 的解析和渲染需要大量工程工作，因为没人做过，一切都从零开始

如果不需要可编辑性，HTML 格式更容易生成，Gemini 对 HTML 的输出质量也很高。

## 实际效果和成本

文章开头的截图都是 Gemini 3 Flash 的输出。如果对质量有更高要求，可以上 Gemini 3.1 Pro。

成本方面，Flash 版本的价格足够低，跑完整套流程的成本在可接受范围内。Pro 版本效果更好但成本翻倍，适合重要场景。

## 自己复现的最短路径

如果你想自己跑通这个流程：

1. 用金字塔原理的提示词生成结构化大纲（上面有完整提示词）
2. 用 Grok 逐页检索资料
3. 让 AI 生成简化版策划稿
4. 用 Bento Grid + SVG 的提示词生成最终设计

整个过程不需要写代码，只需要把每一步的输出作为下一步的输入。关键是每一步都不要跳过——尤其是策划稿环节。

## 几个观察

这套流程能跑通，核心不是某个提示词多厉害，而是**把人类专家的工作流拆解清楚，再让 AI 逐步执行**。策划师、设计师的分工，在 AI 这里同样适用。

目前这个方案大概只用了 AI 做 PPT 5% 的能力。SVG 格式本身还有很多限制，多页之间的风格一致性、复杂动画、图表渲染都是待解决的问题。但作为 2026 年中期的方案，已经能到商业可用的水平了。

参考来源：[三顿在 Linux.do 的原文分享](https://linux.do/t/topic/1782304)