editorial-pptx-deck

Editorial PPTX Deck

制作一套精致、简约的编辑风格幻灯片，并导出为可编辑的 PPTX。最终交付内容仅包含 .pptx——HTML 幻灯片仅用作构建源文件，不会生成 PDF/HTML 查看器。

工作原理

幻灯片以受约束的 HTML 编写（每张幻灯片一个文件），然后由 scripts/html2pptx.js 将每个 DOM 元素转换为原生 PowerPoint 对象（可双击编辑的真实文本框）。正文固定为 1280px × 720px = 960pt × 540pt（LAYOUT_WIDE）。

构建工作流

复制此清单并跟踪进度：

- [ ] 1. Scaffold project (shared/ assets/ slides/ output/)
- [ ] 2. Plan narrative → map each slide to a template type
- [ ] 3. Write slides/NN-name.html from templates (edit text only)
- [ ] 4. check_overflow → fix any slide that isn't exactly 1280x720
- [ ] 5. Export PPTX (only)
- [ ] 6. Clean up build source (keep only the .pptx)

1. 搭建框架。 在工作项目中创建 shared/、assets/、slides/、output/。将此技能中的 shared/tokens.css 复制到项目的 shared/ 中。只将此技能 assets/ 中会用到的照片复制到项目的 assets/ 中。确保依赖只需安装一次：

npm i pptxgenjs playwright sharp && npx playwright install chromium

2. 规划。 将源内容整理为幻灯片列表。每张幻灯片都应属于模板类型之一。典型的幻灯片组结构为：封面 →（章节分隔页 → 1–3 张内容页）× 多个章节 → 结束页。文字应简洁；这种风格留白较多。

3. 编写幻灯片。 从 templates/ 中复制最接近的模板到 slides/NN-name.html，然后替换文字。规则：

• 保留 <link rel="stylesheet" href="../shared/tokens.css">。
• 标题使用衬线字体；其他内容全部使用无衬线字体（tokens 中已配置）。
• 只使用一种红色强调色。深色面板（--ink-panel）应谨慎使用以形成对比，并且只能搭配金色 #C9A24B 作为强调色。
• 使用 <img> 插入照片（绝不使用 CSS background-image）。参见照片库。

4. 验证适配。 溢出的幻灯片会在 PPTX 中被裁切：

node scripts/check_overflow.mjs --slides slides

修复所有标记为 OVERFLOW 的问题（缩短文字或微调位置），直到全部报告 1280x720。

5. 仅导出 PPTX。

node scripts/export_deck_pptx.mjs --slides slides --out output/DeckName.pptx

幻灯片按文件名排序（01-…、02-…）。请勿运行任何 PDF/HTML 导出——PPTX 是唯一交付物。

6. 清理。 删除 slides/ 中的 HTML 文件和所有临时文件，只保留 output/DeckName.pptx（如果用户希望继续迭代，也可保留可复用的 shared/ 和 assets/）。

设计系统

定义于 shared/tokens.css。不要自行添加颜色。

Token	HEX	用途
--ink	#1A1A1A	标题和正文
--soft	#555555	次要正文
--muted	#8C8C8C	标签、注释、页码
--red	#C8102E	唯一强调色：色条、眉题、关键词、下划线
--red-deep	#A00C24	表格中的负向强调
--red-pale	#FBE9EC	连接元素标签（例如“→”圆形）
--box	#F4F3F1	浅色卡片／斑马纹行
--line	#E4E2DE	细分隔线
--ink-panel	#1C1C1C	深色对比面板
gold	#C9A24B	仅用于深色面板的强调色
background	#FFFFFF	页面

• 字体： h*/标题使用 Georgia 衬线字体；其他内容使用 Arial/Helvetica 无衬线字体。
• 标志性元素： 标题左侧的细红色竖条 + 标题上方红色小字眉题（字间距较大）；底部居中的极小页码。
• 品牌替换： 如需匹配其他公司，只需在 tokens.css 中更改 --red（也可选择更改 --ink-panel/gold）——其他内容无需调整。

照片库

照片存放在此技能的 assets/ 中。竖版图片适合填充右侧约 40% 的分隔页／封面面板（object-fit:cover）；横版图片适合用作满版封面。

文件	方向	最适用途
sail.png	竖版 589×1024	分隔页／封面右侧面板（默认）
lighthouse-cliff.png	竖版 627×1024	分隔页／封面右侧面板
staircase.png	高竖版 312×1024	宁静／抽象风格的分隔条
mast.png	窄版 208×1024	窄分隔条
hiker-clouds.png	窄版 225×1024	窄分隔条
lighthouse-sunset.png	横版 1024×721	满版封面／顶部横幅
sailboat-deck.png	横版 1024×721	满版封面／顶部横幅

更换照片时，修改 <img src="../assets/….png">。所有分隔页请使用同一张照片（或同一主题），以保持整体协调。用户也可以将自己的图片放入 assets/。

模板目录

templates/ 中的每个模板都是完整的 1280×720 幻灯片，并可安全处理溢出：

文件	类型
01-cover.html	分栏封面：左侧衬线标题，右侧竖版照片
02-divider.html	章节分隔页：引导语 + 衬线标题 + 红色横条，右侧竖版照片
03-three-column.html	引导语／标题 + 核心语句 + 3 栏内容 + 结果条
04-mapping.html	双栏“他们想要什么 → 我们怎么做”，带连接标签
05-compare-table.html	3 栏对比表，隔行着色
06-dark-contrast.html	两个面板（浅色与深色）+ 衬线页脚语句
07-pipeline.html	横向编号步骤流程 + 深色输出条
08-closing.html	结束推介：编号衬线语句 + 右侧竖版照片

硬性约束

如果违反以下要求，HTML→PPTX 转换会失败或出现错误渲染。完整说明和修复方法请参阅 reference.md：

1. 文本只能放在 <p>／<h1>–<h6> 内（绝不能在 <div> 中直接放置文本）。
2. 不使用 CSS 渐变。
3. background／border／box-shadow 只能用于 <div>，不能用于文本标签。
4. 不使用 background-image；请改用 <img>。
5. 行内标签（span／em／strong）不能设置外边距。
6. 正文区域保持 1280×720；任何内容都不得溢出。