ppt-design

PPT 设计

将每张幻灯片设计为独立的 1600x900 HTML 文件，只有在用户提出要求时才导出为 PPT。

在此仓库中，可执行的幻灯片规范位于 ./scripts/slide_engine/。 共享 JS 清单和共享渲染器是运行时的事实来源。 ./styles/style_[a-j].md 中的文件仍是面向人工的设计参考，必须与可执行清单保持手动同步。

工作流

1. 确定主题、受众和交付内容。
2. 如果用户提供了 Markdown 文档，除非文档明确指出采用不同的页面结构，否则将每个 Page X 章节视为一张幻灯片。
3. 选择样式前，先阅读 style-selector.md。
4. 如果演示文稿为中文或中英混排，请阅读 bilingual-typography.md。
5. 如果用户尚未选择样式，则推荐 2-3 种样式。
6. 用通俗的语言说明每种推荐样式：
   • 样式名称
   • 一句话描述视觉效果
   • 最适合哪类内容
   • 默认使用英语说明这些样式并给出推荐
7. 确认或推断 background_mode：
   • 默认使用 paper
   • 仅对兼容的浅色样式使用 white
   • 如果所选样式不支持 white，请说明这一点，并保留 paper 或推荐兼容的样式
8. 阅读 background-modes.md。
9. 阅读 presentation-layout-rules.md。
10. 阅读 html-review-checklist.md。
11. 如果演示文稿面向 client-facing 或 public-stage，请阅读 presentation-quality-rubric.md。
12. 阅读 layout-prototypes.md。编写 HTML 前，先判断每张幻灯片的内容类型并选择布局原型。不要在连续的幻灯片上重复使用相同布局。
13. 阅读 safe-zone.md。每张幻灯片都必须遵守内容边界：所有主要内容必须位于主框架区域内（y = 108px 至 y = 804px）。仅当 chrome=bookend 时，才在封面和结束页上添加边框装饰标签。
14. 如果幻灯片包含严格表格、组织结构图、框架图或其他对几何布局敏感的结构，请在编写该幻灯片前阅读 geometry-preserve.md。
15. 编写 HTML 前，先阅读 ./styles/style_[a-j].md 中所选样式的文件。将其作为氛围、字体排印和装饰逻辑的设计参考；运行时行为由共享幻灯片引擎统一执行。
16. 保留所选样式原有的留白、装饰密度、对比度和节奏。不要将所有样式都统一成相同的布局密度。
17. 幻灯片文案为中文或中英双语时，请遵循该样式针对中英文搭配的指导，不要在所有地方重复使用英文展示字体。
18. 将页面内容重新组织为幻灯片层级，而不是照搬原始 Markdown 格式；但对几何布局敏感的结构除外。
19. 在 ./outputs/html/ 中为每张幻灯片生成一个 HTML 文件。
20. 交付前审查每张生成的 HTML 幻灯片。审查是必须步骤，不可省略。
21. 使用最小幅度的修改，修复审查中发现的布局、间距、字体排印、层级和几何问题，同时确保幻灯片忠实于所选样式。
22. 启用 speaker_notes_mode 时，生成供演讲者使用的配套备注文件。
23. 如果用户需要 PPT，则将 HTML 幻灯片渲染为 PNG，并打包为 PPTX。

对于 public-stage 项目，请将整个流程视为任务流水线：

1. 初稿生成
2. 润色
3. 审核关卡
4. 渲染 / 导出

不得跳过润色，也不得在通过审核关卡前导出。

输入

用户提供这些字段时，或你需要在自己的推理中明确这些字段时，请使用它们：

• input_markdown：演示文稿的源 Markdown，最好按 Page 1、Page 2 等分组
• style：A-J 或某个具名样式
• background_mode：paper 或 white
• chrome：all、bookend 或 none
• geometry_mode：auto、preserve 或 recompose
• presentation_scenario：brand-launch、investor-board、client-pitch 或 research-brief
• quality_tier：internal、client-facing 或 public-stage
• speaker_notes_mode：none、outline 或 full
• brand_profile：用于锁定徽标、页脚、调色板和字体策略的品牌配置
• deliverable：html、ppt 或 both

默认行为：

• input_markdown：尽可能根据标题推断页面结构
• style：未指定时，先推荐候选样式
• background_mode：paper
• chrome：bookend
• geometry_mode：auto
• presentation_scenario：brand-launch
• quality_tier：public-stage
• speaker_notes_mode：outline
• deliverable：html

仓库说明：

• ./scripts/build_template_style_cases.mjs 和 ./scripts/build_twitter_style_cases.mjs 中捆绑的演示构建器是固定的内部基准测试流水线。
• 它们目前使用 chrome=bookend 渲染，并在导出 PNG/PPT 前验证 HTML。
• 它们不会将所有技能输入都作为 CLI 标志公开。

样式选择

请先阅读 style-selector.md。

用户尚未选择样式时：

• 只推荐 2-3 种样式，不要推荐全部 10 种。
• 根据内容匹配推荐样式，而非依据“好看”或“酷”等主观偏好词。
• 说明样式的视觉特点，以及适合哪类材料。
• 即使工作对话使用其他语言，样式推荐默认使用英文。
• 除非用户明确要求翻译，否则生成的幻灯片文案应使用用户的源语言。

示例：

• 商业报告、金融、政策、研究摘要：优先考虑 A、D 或 I。
• 品牌故事、文化、展览、哲学、编辑出版：优先考虑 B、E 或 F。
• 创意提案、活动、年轻品牌、营销活动、娱乐：优先考虑 C、G、H 或 J。

背景模式

请阅读 background-modes.md。

请遵循以下规则：

• paper 在样式适用时保留纸张颗粒、印刷质感和暖调米白纸色。
• white 将幻灯片画布切换为纯白，并移除纸张专属纹理、折痕标记和纸张质感模拟。
• white 不会移除样式特征。请保留字体排版、网格、装饰、对比系统和非纸张类装饰元素。
• 只有样式 A、B、C、D、E、G 和 J 支持 white。
• 样式 F、H 和 I 原生采用深色设计。请勿将它们改为白色。

HTML 规则

• 每张幻灯片创建一个文件：slide_01.html、slide_02.html 等。
• 画布固定为 1600x900。
• 仅使用静态 HTML、CSS 和内联 SVG。
• 幻灯片文件中不得使用 JavaScript。
• 除 Google Fonts 外，不得使用外部图片。
• 将输出保存到 ./outputs/html/。
• 优先针对投影和演示进行设计，而非针对密集的文档阅读。

除非样式文件覆盖某项具体细节，否则请使用以下基本结构：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=1600">
  <title>Slide Title</title>
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #e0e0e0;
      overflow: hidden;
    }
    .slide {
      position: relative;
      width: 1600px;
      height: 900px;
      overflow: hidden;
    }
    .slide::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 50;
      pointer-events: none;
    }
    .chrome-top, .chrome-bottom {
      position: absolute;
      left: var(--edge, 96px);
      right: var(--edge, 96px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted, #999);
      z-index: 2;
    }
    .chrome-top { top: 28px; }
    .chrome-bottom { bottom: 24px; }
    .main-frame {
      position: absolute;
      left: var(--edge, 96px);
      right: var(--edge, 96px);
      top: 108px;
      bottom: 96px;
      z-index: 3;
    }
  </style>
</head>
<body>
  <div class="slide">
    
    <div class="chrome-top">
      <div class="style-id">STYLE A / Swiss International</div>
      <div class="meta-id">Cover</div>
    </div>
    <div class="chrome-bottom">
      <div class="meta-id">cover-swiss-rail</div>
      <div class="page-id">01 / 05</div>
    </div>
    
    <main class="main-frame">
      
    </main>
  </div>
</body>
</html>

页眉页脚标签

请阅读 safe-zone.md。

请遵循以下规则：

• chrome=bookend：仅在封面和结束页显示 .chrome-top 和 .chrome-bottom。
• chrome=all：在每张幻灯片上显示 .chrome-top 和 .chrome-bottom。
• chrome=none：完全省略页眉页脚标签。
• 页眉页脚的显示状态变化时，主内容框的位置保持不变。

风格一致性

在每张幻灯片上应用以下规则：

• 共享引擎清单是可执行的事实来源；选定的样式文件是人工设计参考。
• 保留样式原生的留白策略。极简和编辑风格应保持克制。
• 保留装饰元素的逻辑。装饰线条、边框和强调元素应服务于构图，而非喧宾夺主。
• 修复信息密度或元素冲突时，优先编辑内容、调整卡片数量或局部间距，而不是把每种风格都改成同一种模板。
• 成功的修订仍应一眼看出属于选定的风格系列。

演示文稿排版

阅读 presentation-layout-rules.md。

在每张幻灯片上应用以下规则：

• 优先确保演示距离下的可读性。
• 不要让文本块、标签或数字彼此冲突。
• 与其添加许多小型注释，不如采用更少、更大的文本组。
• 标题与正文在字号、字重和间距上应有明显对比。
• 如果幻灯片文字过多，应重新设计层级，而不是把所有内容都缩小。
• 如果幻灯片包含类似表格的信息，除非用户明确要求使用密集的原始表格，否则应将其转换为适合演示的结构。

用于演示时，请采用 presentation-layout-rules.md 中的完整排版比例。八种角色及其硬性最小值如下：

角色	EN 最小值	CN 最小值
展示标题	44px	40px
章节标题	28px	28px
正文	22px	24px
表头	20px	22px
表格单元格	18px	20px
辅助文本	18px	20px
标签／说明文字	16px	18px
页码（仅限界面元素）	14px	14px

任何角色都不得缩小到低于其最小值。如果内容无法放下，请精简内容、拆分幻灯片或重建层级。若选定的风格有意采用华丽或实验性的设计，应保留该风格，同时确保可读性。

表格与文字密集内容

阅读 presentation-layout-rules.md。

当用户要求呈现表格、比较内容或大量文字时：

• 默认采用重新设计的对比区块、指标卡片、时间线行或带标签的列，而不是原始电子表格。
• 只有当行列对比是主要目的，且简化会导致信息丢失时，才使用真正的表格。
• 必要时将大型表格拆分到多张幻灯片中。
• 仅突出显示少数关键数值或行组。
• 在单元格或卡片内留出充足的内边距，避免文字显得拥挤。
• 对于密集内容，每张幻灯片优先呈现 3-6 个要点，而不是把所有内容挤在一页上。

对几何结构敏感的内容

当幻灯片包含图表、框架图、组织结构图、框与箭头结构或严格表格时，请阅读 geometry-preserve.md。

应用以下规则：

• geometry_mode=auto：当框的尺寸、连接线位置或表格结构承载含义时，保留几何结构。
• geometry_mode=preserve：保持结构骨架完整，即使这意味着精简文字或将图拆分到多张幻灯片中。
• geometry_mode=recompose：仅当用户明确提出要求时，才将内容重新诠释为适合幻灯片的卡片或色带。
• 对几何结构敏感的幻灯片，风格更改仅限于表面处理。不要仅为迎合偏好的布局原型而扭曲图表的核心比例。
• 使用明确的轨道、坐标或有界框尺寸来定义图表骨架，不要完全由文本长度决定框的比例。
• 如果内容无法整齐地放入图表中，请缩短标签、拆分图表，或将详细信息移至备注。不要压缩几何结构，以免造成误导。

必须进行 HTML 审查

阅读 html-review-checklist.md。

生成每张幻灯片后，请在交付前进行第二轮审查：

1. 检查是否存在重叠、碰撞、裁切或拥挤。
2. 检查字体大小是否适合演示。
3. 检查文字密集或表格密集的内容是否已重新排版，以适应幻灯片。
4. 检查对几何比例敏感的图表或表格是否仍保留预期比例。
5. 检查调整可读性后是否仍保持所选风格。
6. 如果工具支持，请渲染 HTML 并检查实际视觉效果，不要只审查源代码。
7. 如果导出为 PPT，请确认渲染后 PNG 的宽高比与最终 PPT 幻灯片一致。
8. 如果任何项目未通过，请修改 HTML。

未经这轮审查，绝不能交付未经复核的初稿 HTML。

PPT 导出

当用户需要 ppt 或 both 时，请使用捆绑脚本：

1. 运行 npm install，确保依赖项已安装。
2. 将 HTML 幻灯片渲染为 PNG：

node .\scripts\render_slides.mjs --input .\outputs\html --output .\outputs\rendered

3. 构建 PPTX：

node .\scripts\export_ppt.mjs --input .\outputs\rendered --output .\outputs\ppt\deck.pptx

为了保证保真度，PPT 导出有意采用基于图像的方式。每张幻灯片都会作为一张全出血 PNG 放入 16:9 演示文稿中。

质量检查

• 所选风格与内容类型和语气相符。
• 用户能够理解选择该风格的原因。
• background_mode 得到正确遵循。
• 兼容的浅色风格可以在 paper 和 white 之间切换。
• 不兼容的深色风格会明确拒绝 white。
• 每张幻灯片在同一风格系列中都保持视觉协调。
• 文字不会与附近元素重叠、碰撞、裁切或拥挤。
• 字体大小适合投影和演示使用。
• 文字密集和类似表格的内容已在适当情况下重新排版，以形成更清晰的幻灯片层级。
• 生成后进行了第二轮 HTML 审查，而不只是生成前审查。
• PPT 页面保留 HTML 的构图，没有裁切或缩放错误。
• 装饰块，尤其是深色或高饱和度的装饰块，不会侵入主要阅读区域，除非这种重叠是刻意设计的、留有足够间距且适合演示。
• 所有主要内容都位于主框架区域内（垂直方向 108px 至 804px）。
• 顶部保留区域（0-96px）或底部保留区域（804-900px）内不得出现任何文字内容，当前 chrome 模式允许的界面标签除外。
• 相邻幻灯片使用不同的布局原型。
• 10 张幻灯片的演示文稿至少使用 5 种不同的布局原型。
• 调整应保留原有风格，避免所有演示文稿都趋向相同的密度或装饰模式。