ppt-maker

SKILL.md

HTML PPT Maker

目标:将受约束的 HTML/XML 转换为原生 PPTX(文本/形状/表格/图表均为可编辑元素)。

1. 核心约束 (Core Constraints)

  1. 根节点:每个文件必须包含 <ppt-slide>
  2. 坐标系统:使用英寸 (Inches),默认 13.333 x 7.5 (16:9)。
  3. 组件多样性 (Component Diversity)整套 PPT (Presentation) 必须包含除图片外的所有组件类型(即必须至少出现一次 ppt-text, ppt-rect, ppt-table, ppt-chart, ppt-notes)。图片 ppt-image 是可选的。
  4. 布局平衡 (Layout Balance)严禁右侧大面积留白。使用 ppt-rect (色块/卡片) 或 ppt-chart 平衡视觉重心。
  5. 字数限制 (Text Limits):每页 PPT 中文不超过 100 字,英文不超过 50 个单词。
  6. 标题一致性 (Title Consistency):有标题的页面必须使用一致的标题位置与字号,不得在同一套 PPT 中随意变化。
  7. 阅读顺序 (Reading Order):文字阅读顺序从左到右,整体尽量居中或左对齐,不接受右对齐;列表文字尽量左对齐。
  8. 模板与占位 (Template & Placeholder):模板仅作参考,必须结合实际内容灵活调整;不允许保留任何占位文字或占位图片。
  9. 每个PPT页面单独一个文件:不要把所有的xml 都放到一个文件中。必须使用 ppt_manager.py add 命令逐个添加页面,不要直接写入文件

2. 组件参考 (Component Reference)

Agent 必须严格参考以下 XML 结构生成代码。

2.1 页面容器 (Slide)

<!-- 推荐使用 tech-dark 主题,开启自动背景 -->
<ppt-slide width="13.333" height="7.5" theme="tech-dark" auto-bg="true">
  <!-- 内容组件 -->
</ppt-slide>
  • Themes: tech-dark (默认), corporate, minimal-swiss, academic, data-future, luxury-gold, soft-pastel.

2.2 文本 (Text) - 支持 Markdown

<ppt-text x="1" y="0.8" w="11.333" h="1"
          font-size="32" bold="true" align="left" color="#111827"
          font-name="Aptos" class="title">
  这里是标题,支持 **加粗** 和 *斜体*。
</ppt-text>
  • Attrs: x, y, w, h, font-size, bold, italic, underline, color, align (left/center/right), valign (top/middle/bottom), line-spacing.
  • 约束: ppt-text 若叠放在 ppt-rect 上,必须完全位于矩形边框内。

2.3 形状 (Rect/Shape) - 用于卡片背景或装饰

<!-- 卡片背景示例:先画背景,再在上面画文字 -->
<ppt-rect x="1" y="2" w="5" h="4"
          fill="#1F2937" fill-opacity="1"
          line="#374151" line-width="1"
          shape="rounded" radius="0.2" class="card"/>
  • Attrs: fill (hex), fill-opacity, line (hex), line-width, shape (rounded/rect/oval).

2.4 表格 (Table) - 原生可编辑

<ppt-table x="1" y="2" w="11" h="4" font-size="14"
           header-fill="#111827" cell-fill="#0F172A"
           col-widths="3,4,4">
  <ppt-row>
    <ppt-cell>Header 1</ppt-cell>
    <ppt-cell>Header 2</ppt-cell>
  </ppt-row>
  <ppt-row>
    <ppt-cell>Value A</ppt-cell>
    <ppt-cell>Value B</ppt-cell>
  </ppt-row>
</ppt-table>

2.5 图表 (Chart) - 原生可编辑

<ppt-chart x="7" y="2" w="5.3" h="4" type="column" title="Quarterly Sales">
  Region, Q1, Q2, Q3, Q4
  North, 20, 35, 30, 45
  South, 25, 32, 34, 20
</ppt-chart>
  • Attrs: type (column/bar/line/pie/area/scatter/radar), title, legend (true/false).
  • Data: CSV 格式,第一行为表头。

2.6 图片 (Image)

<ppt-image x="9" y="0.5" w="3" h="1" src="assets/logo.png"/>

2.7 演讲备注 (Notes)

<ppt-notes>
  本页重点讲解市场增长率,强调 Q3 的转折点。
</ppt-notes>

3. 布局与视觉高级指南 (Advanced Layout & Visuals)

为了打造内容饱满、每一页都不单调的专业级 PPT,请遵循以下原则:

3.1 核心原则:饱满与差异 (Fullness & Variety)

  1. 拒绝空洞:每一页都必须有“视觉锚点”(Visual Anchors)。如果内容较少,使用大尺寸的 ppt-chart、高质量 ppt-image 或装饰性 ppt-rect 卡片来占据空间。
  2. 布局轮换相邻的两页严禁使用完全相同的布局结构。必须在以下几种布局模式中切换,以保持观众的注意力。

3.2 推荐的高级布局模式 (Premium Layout Patterns)

A. 黄金分割/不对称布局 (Asymmetric Split)

  • 结构:左 60% 内容 + 右 40% 视觉(或反之)。
  • 用法:主内容区放置核心论点,侧边栏使用深色背景 (ppt-rect) 放置补充数据、引用或图标。
  • 效果:打破对称的沉闷感,显得现代且高级。

B. 悬浮卡片网格 (Floating Cards Grid)

  • 结构:背景层 (ppt-rect 全屏或半屏) + 浮动的白色卡片 (ppt-rect with shadow)。
  • 配置
    • 3列布局:用于展示三个核心特性。
    • 2x2 矩阵:用于 SWOT 分析或四象限对比。
    • Bento Grid (便当盒布局):一大配两小,错落有致。

C. 沉浸式数据 (Immersive Data)

  • 结构:全宽图表 (ppt-chart) 占据下半部分或右半部分,标题和关键结论悬浮在图表上方或旁侧。
  • 要点:图表不要做太小,大胆地撑满区域。

D. 图文穿插 (Interleaved Flow)

  • 结构
    • Page N: 左文右图。
    • Page N+1: 上图下文(或右文左图)。
  • 目的:创造阅读的节奏感。

3.3 视觉微调技巧 (Visual Polish)

  • 容器化 (Containerize)不要让文本直接漂浮在背景上。总是使用 <ppt-rect> 创建半透明或实色的容器来承载文本,增加层级感。
  • 留白控制:虽然要求“饱满”,但是指视觉元素的饱满,而非文字堆砌。保持元素间距 (Padding) 至少 0.3 英寸。
  • 装饰元素:在空白处添加细线条 (ppt-rect height="0.05")、半透明圆点或页码标记,增加精致感。

4. 最佳实践流程 (Best Practice Workflow)

为了确保 PPT 的专业度和美观度,Agent 必须遵循以下流程

Step 0: 初始化项目

获取到项目后,优先初始化PPT项目的文件夹,这个过程需要确定主题

python {ppt-maker-folder-path}/scripts/ppt_manager.py init /path/to/project --theme tech-dark

Step 1: 编写 PPT 大纲 (Outline First)

在开始写 XML 之前,必须先编写 PPT 大纲文档。这是确保 PPT 结构清晰、内容完整的关键步骤。

大纲文档应包含:

  1. 文档信息: 主题、标题、目标受众、预计时长
  2. 每页规划:
    • Slide 编号和页面类型 (cover/agenda/content/etc.)
    • 使用的布局 (layout) 和变种 (variant)
    • 页面标题和核心内容
    • 数据/图表信息
    • 设计要点和特殊要求
  3. 设计规范: 配色方案、字体规范、布局原则

大纲示例格式:

## Slide 1: 封面 (cover)
**布局**: cover - variant1
**内容**:
- 标题: Q4 产品发布计划
- 副标题: 战略升级 · 用户体验革新
- 作者: 产品部
- 日期: 2024年12月

**设计要点**:
- 使用深色科技风格
- 标题居中,大号字体

为什么先写大纲?

  • ✅ 提前规划内容结构,避免遗漏关键信息
  • ✅ 确保页面之间的逻辑连贯性
  • ✅ 合理分配布局类型,避免单调重复
  • ✅ 减少 XML 编写时的反复修改

Step 2 逐页生成PPT页面

Step 2.1: 获取对应页面的高质量模板

不要从零开始写 XML。使用 get_template.py 工具获取预设的、经过验证的优秀布局模板。

可用主题 (Themes)
  • academic (学术/教育)
  • corporate (企业/商务)
  • data-future (数据/科技)
  • eco-nature (生态/自然)
  • luxury-gold (高端/黑金)
  • minimal-swiss (极简/瑞士风格)
  • soft-pastel (柔和/粉彩)
  • tech-dark (深色科技 - 默认)
  • vibrant-creative (活力/创意)
  • warm-retro (复古/暖色)
可用布局 (Layouts)
  • cover (封面), agenda (目录), section_header (章节页)
  • content_split (图文分栏), content_cards (卡片布局)
  • data_chart (数据图表), comparison (对比分析), timeline (时间轴)
  • steps (步骤/流程), process (循环/进程), table (表格)
  • team (团队介绍), gallery (图片展示), pricing (价格表)
  • budget (预算/财务), quote (引用/金句), thank_you (封底)
# 获取特定布局的模板代码 (例如 tech-dark 主题的封面)
python {ppt-maker-folder-path}/scripts/get_template.py --theme tech-dark --layout cover

# 获取双栏内容页模板
python {ppt-maker-folder-path}/scripts/get_template.py --theme tech-dark --layout content_split

Step 2.2: 基于大纲和模板生成该页面的 XML (Generate from Outline)

重要:必须使用 ppt_manager.py 工具添加页面,不要直接写入文件!

工作流程:

  1. 选择模板:根据大纲选择合适的布局模板
  2. 生成 XML:参考模板结构,编写符合内容的页面 XML
  3. 添加页面:使用 ppt_manager.py add 命令添加页面(自动验证和修复)
  4. 检查结果
    • 如果成功,继续下一页
    • 如果失败,根据返回的错误信息调整 XML,然后重试
# 添加页面(自动验证,失败会返回详细错误信息)
python {ppt-maker-folder-path}/scripts/ppt_manager.py add /path/to/project \
  --name "slide_name" \
  --xml '<ppt-slide>...</ppt-slide>'

注意事项

  • 不要直接写入 slides/ 目录下的文件
  • 每个页面必须通过 ppt_manager.py add 添加
  • 验证失败时根据错误提示调整,而不是跳过验证

Step 3: 自我检查 (Self-Check)

  • 是否包含了 ppt-rect 等装饰元素?(拒绝裸奔)
  • 这一页的布局是否和上一页明显不同?(拒绝单调)
  • 右侧是否过于空旷?(拒绝留白)

5. 快速使用 (Quick Start)

# 初始化
python {ppt-maker-folder-path}/scripts/ppt_manager.py init /path/to/project --theme tech-dark

# 添加新页面(自动验证和修复,返回详细结果)
python {ppt-maker-folder-path}/scripts/ppt_manager.py add /path/to/project --name "content" --xml '<ppt-slide>...</ppt-slide>'

# 更新第 3 页(自动验证和修复,返回详细结果)
python {ppt-maker-folder-path}/scripts/ppt_manager.py update /path/to/project --position 3 --xml '<ppt-slide>...</ppt-slide>'

# 删除第 5 页
python {ppt-maker-folder-path}/scripts/ppt_manager.py remove /path/to/project --position 5

# 查看第 2 页内容
python {ppt-maker-folder-path}/scripts/ppt_manager.py view /path/to/project --position 2

# 列出所有页面
python {ppt-maker-folder-path}/scripts/ppt_manager.py list /path/to/project

# 生成 PPT
python {ppt-maker-folder-path}/scripts/ppt_manager.py build /path/to/project --out result.pptx

# 反向解析 PPTX 为项目
python {ppt-maker-folder-path}/scripts/ppt_to_project.py input.pptx output_dir

5.1 自动验证和修复

ppt_manager.py 会在添加/更新页面时自动进行:

  1. XML 格式验证:检查根节点、内容元素、语法
  2. 自动修复
    • 缺失 width/height → 添加默认值 (13.333 x 7.5)
    • 负数坐标 → 调整为 0
    • 坐标超出边界 → 调整为合理值
    • 尺寸溢出 → 调整为合适值
    • 缺少文本颜色 → 添加主题默认颜色
  3. 渲染验证:使用 HtmlPptConverter 验证最终效果

如果验证失败,会返回详细的错误信息和调整建议。

Weekly Installs
1
GitHub Stars
835
First Seen
5 days ago
Installed on
amp1
cline1
opencode1
cursor1
kimi-cli1
codex1