AI PPT自动排版方案

运维 流程化
发布时间 :
  1. 面向技术汇报的 AI 协同 PPT 智能排版系统
    1. 摘要
    2. 一、要解决的问题
    3. 二、总体架构
    4. 三、最重要的设计边界
      1. 1. 人工确定页面边界
      2. 2. 人工确定原子关系
      3. 3. AI 只提供高层构图建议
    5. 四、内容模型：页面、内容块和原子块
    6. 五、图片与说明文字的组合策略
    7. 六、AI 建议与程序执行的协作方式
      1. AI 提供什么
      2. 程序负责什么
    8. 七、动态图片缩放逻辑
    9. 八、候选布局生成
    10. 九、质量控制闭环
      1. 硬约束
      2. 视觉检查
    11. 十、输入入口与输出方式
    12. 十一、当前成果
    13. 十二、成果截图
      1. 图片—说明视觉卡片与 2×2 网格
      2. 双图左右对齐
      3. 图片和表格的空间约束
    14. 十三、设计取舍
      1. 为什么不让 AI 直接生成 HTML
      2. 为什么接受失败而不是无限降级
    15. 十四、后续演进方向

面向技术汇报的 AI 协同 PPT 智能排版系统

摘要

这是一个基于 Obsidian、Markdown、QuickAdd 和 Slidev 的技术汇报自动生成系统。

它没有把 PPT 排版交给 AI 直接生成，也没有让程序使用大量固定的 if-else 规则硬拼页面，而是采用一种分层协作方式：

人负责内容边界和内容关系，AI 负责页面构图建议，程序负责空间计算和最终排版，浏览器负责真实结果验证。

这套设计的重点不是“任何输入都能成功生成 PPT”，而是优先保证内容不丢失、页面关系不被破坏、图片不变形、排版结果可验证。

一、要解决的问题

技术笔记天然不是 PPT 内容，通常同时包含：

  • 多级标题和正文说明；
  • 代码、表格和列表；
  • 原图尺寸不同的截图、架构图和流程图；
  • 图片与说明文字之间的绑定关系；
  • 用户明确限定的分页结构。

简单的 AI 排版容易出现几类问题：

  1. AI 直接输出 HTML 或 CSS，结果不可控；
  2. 图片与说明文字被拆开，页面语义丢失；
  3. 图片按固定高度缩放，无法适应不同网格结构；
  4. 页面看似生成成功，但文字或图片实际溢出；
  5. 为保证成功率而隐藏内容、裁剪图片或无限缩小字体。

因此，系统把“内容结构”“页面构图”和“视觉实现”拆成不同层次。

二、总体架构

Obsidian Markdown
        │
        ▼
确定性解析器
主题 / 页面 / 标题 / 文本 / 图片 / 表格 / 原子块 / 稳定 ID
        │
        ▼
结构预检与视觉特征提取
分页边界 / 原子关系 / 字数 / 层级 / 图片原始尺寸 / 宽高比
        │
        ▼
AI 构图建议器
页面意图 / 视觉重点 / 图片组合 / 行列边界 / 主辅关系 / 软比例
        │
        ▼
程序候选生成器
有限布局族 / 原子完整性 / 内容完整性 / 可行的区域分配
        │
        ▼
动态排版执行器
根据标题、说明文字和区域剩余空间计算图片尺寸
        │
        ▼
Slidev 渲染
        │
        ▼
浏览器 DOM 校验与视觉验收
溢出 / 裁切 / 最小字号 / 图片显示 / 留白 / 对齐

这是一条“约束优先”的流水线，而不是“生成优先”的流水线。

三、最重要的设计边界

1. 人工确定页面边界

Markdown 中的 --- 是硬分页边界。系统不会让 AI 自动跨页移动内容，也不会为了追求页面密度而擅自合并页面。

2. 人工确定原子关系

用户可以使用原子块标记固定内容关系：

<!-- ppt:block:start -->

![](/img/obsidian-posts/game-state.png)

这是游戏状态机的说明。

<!-- ppt:block:end -->

原子块表达的是：

这些内容必须保持在同一页面，并作为一个视觉组合出现。

原子块不是最终布局。AI 仍然可以建议图片在上、说明在下，或者图片占主要区域、文字作为图注；程序则保证这个组合不会被拆散。

3. AI 只提供高层构图建议

AI 不输出像素坐标、HTML、CSS 或底层区域 ID 分配，而是提供类似下面的信息：

{
  "pageIntent": "process",
  "visualFocus": "images",
  "imagePlan": {
    "mode": "four-grid",
    "columns": 2,
    "rows": 2,
    "alignment": "center",
    "gap": "normal"
  }
}

这些字段描述的是构图边界和表达意图，不是最终排版结果。

四、内容模型：页面、内容块和原子块

解析后的页面会形成稳定的数据结构：

PageTree
 └── Theme
      └── Page
           ├── titleHint
           ├── contentBlocks
           │    ├── text
           │    ├── list
           │    ├── code
           │    ├── table
           │    └── image
           └── atomicBlocks

图片内容除了引用路径，还会记录原始宽度、高度和宽高比。流程图和架构图在本系统中统一作为图片处理，不再额外引入 Mermaid 布局引擎。

这种模型带来三个好处：

  • 分页由输入结构控制；
  • AI 能理解内容关系，但不能修改原文；
  • 程序可以对每个内容块进行完整性校验。

五、图片与说明文字的组合策略

图片和说明文字是系统中最常见的绑定关系。程序不会把图片和文字分别放进 CSS Grid，而是先生成视觉卡片：

image-grid
 ├── image-grid-card
 │    ├── 标题或说明文字
 │    └── image-grid-media
 │         └── image
 └── image-grid-card
      ├── 标题或说明文字
      └── image-grid-media
           └── image

这样可以保证：

  • 图片和说明不会被网格拆开；
  • 每个卡片可以独立计算文字高度；
  • 图片只使用卡片剩余空间；
  • 不同原图比例可以在同一个网格中保持原比例。

六、AI 建议与程序执行的协作方式

AI 提供什么

AI 适合提供：

  • 页面是总结、过程、对比还是证据页；
  • 页面主要关注文字、图片、代码还是数据；
  • 图片应该并列、分组还是主辅排列；
  • 建议的行列数量；
  • 主图与辅助图的关系；
  • 区域之间的软性占比和对齐方式。

程序负责什么

程序负责：

  • 保持用户的分页结构；
  • 保持原子块完整；
  • 保证每个内容块恰好出现一次；
  • 根据真实文字高度计算剩余空间；
  • 根据原图宽高比等比例缩放；
  • 判断某种行列结构是否可行；
  • 处理溢出、最小显示尺寸和空白区域。

核心原则是：

AI 提供区域边界和空间关系，程序根据真实尺寸完成排版。

七、动态图片缩放逻辑

系统不再依赖单一的固定图片高度。当前动态排版逻辑是：

页面可用高度
 - 页面标题高度
 - 卡片标题高度
 - 卡片说明文字高度
 - 网格间距
 = 图片媒体区可用高度

图片被放入 image-grid-media 容器，由容器剩余空间决定显示大小：

.image-grid-media {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.image-grid-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

object-fit: contain 只允许等比例缩放，不裁剪、不拉伸。

固定的最大尺寸仍然可以作为安全边界，但它不再是主要排版逻辑。主要尺寸由页面区域、文字占用和网格行列共同决定。

八、候选布局生成

程序不让 AI 直接决定底层 DOM，而是维护有限的布局族：

full          全宽顺序
top-bottom    上下分区
left-right    左右分区
cards         卡片或网格
media-focus   图片主体

例如：

内容特征 可生成候选
两张图片 左右并列、上下排列、主辅关系
三张图片 三列网格、两列主辅网格、分组排列
四张图片 2×2 网格、主图加辅助图
图片加说明 视觉卡片、左右组合、上下组合
代码或表格 上方总结、下方数据或代码

候选必须先通过结构校验，再进入视觉选择。即使 AI 认为某种布局最美，只要它会拆原子块、遗漏内容或导致溢出，就不能被采用。

九、质量控制闭环

排版质量不以“是否生成了文件”为标准，而以页面是否满足硬约束为标准。

硬约束

  • 页面边界不变；
  • 原子块不拆分；
  • 所有内容出现且只出现一次；
  • 图片不裁剪、不变形；
  • 正文字号不低于底线；
  • 图片和说明处于同一视觉组合；
  • 页面不出现明显溢出。

视觉检查

浏览器实际渲染后，还需要检查：

  • 图片是否真正加载；
  • 图片是否被高度为 0 的容器隐藏；
  • 网格是否出现异常空列或空行；
  • 标题、正文和图片是否均匀分布；
  • 留白是否集中在某个区域；
  • 表格边框是否延伸到无内容区域。

这一步很重要，因为 Markdown 结构正确并不代表浏览器中的视觉结果正确。

十、输入入口与输出方式

系统通过 QuickAdd 接入 Obsidian：

QuickAdd 快捷键
      ↓
读取带有 #汇报 的工作笔记
      ↓
解析固定页面和原子块
      ↓
调用 AI 构图建议
      ↓
生成 Slidev Markdown
      ↓
写入 .presentation/slides.md
      ↓
Slidev 实时预览或导出

同时保留归档文件，便于审计和复现：

  • 生成后的日报 Markdown；
  • 页面树数据；
  • AI 构图建议；
  • 最终布局计划；
  • 图片归档副本。

十一、当前成果

当前系统已经完成以下能力：

  • Obsidian #汇报 内容采集；
  • QuickAdd 和 CLI 入口；
  • Markdown 确定性解析；
  • 手工分页和原子块保护；
  • 图片原始尺寸提取；
  • AI 页面构图建议；
  • 图片—说明视觉卡片；
  • 三图和四图网格候选；
  • 动态图片媒体区缩放；
  • 双图左右对齐；
  • 表格内容边界控制；
  • 标题重复消除；
  • Slidev 实时预览和构建验证；
  • 失败时记录原因，不使用静默保底布局。

十二、成果截图

图片—说明视觉卡片与 2×2 网格

四张状态机截图被组织为四个独立卡片，每个卡片内部包含阶段说明和对应图片。

图片说明视觉卡片与 2×2 网格

双图左右对齐

两张图片分别在左右区域内独立居中，避免因为原图尺寸不同而全部挤向一侧。

双图左右对齐

图片和表格的空间约束

图片限制在内容区域内等比例缩放，表格边框收缩到实际内容宽度，减少无意义的延伸留白。

图片与表格空间约束

十三、设计取舍

为什么不让 AI 直接生成 HTML

HTML 和 CSS 是实现层细节，AI 直接生成会导致：

  • 结构不稳定；
  • 原子关系容易丢失；
  • 难以验证内容是否完整；
  • 不同页面之间风格和尺寸不一致。

因此 AI 只提供受控的构图建议，程序使用固定模板和真实尺寸实现。

为什么接受失败而不是无限降级

如果页面无法在当前约束下正常呈现，系统应该明确报告失败原因，而不是：

  • 自动隐藏内容；
  • 自动裁剪图片；
  • 无限缩小字体；
  • 使用看似成功但实际不可读的保底页面。

这使系统更适合技术汇报：宁可要求用户修正输入，也不静默改变事实和表达关系。

十四、后续演进方向

后续可以继续增加：

  1. 更精确的页面内容占用率评估；
  2. 基于 DOM 实际测量的候选自动淘汰；
  3. 主图、辅助图和说明区域的软比例优化；
  4. 多模态模型对最终截图进行审美建议；
  5. 将 AI 候选排序与程序硬校验进一步解耦；
  6. 将稳定内容 ID 从单次递增 ID 升级为跨版本稳定 ID。

但无论如何演进，系统的核心边界不变：

人决定内容结构，AI 提供表达建议，程序执行空间计算，浏览器验证最终结果。

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 kipleyarch@gmail.com

浙ICP备2025181060号-2 © litearch

Built with Hexo and 3-hexo theme