AI Skills
slide-creator

slide-creator

构建 16:9 幻灯片演示文稿，以 HTML 格式制作并导出为 PDF（非 PowerPoint 格式）。 适用于制作演示文稿、演讲或路演（例如：X 产品的 10 页路演幻灯片、Y 主题的培训课程、季度业绩汇报演示）。

18Star
9Fork
更新于 2026/7/20
获取 Skill源代码

相关 Skills

design11万algorithmic-art15万frontend-ui-engineering7.7万
SKILL.md
readonly只读
name
slide-creator
description

构建 16:9 幻灯片演示文稿，以 HTML 格式制作并导出为 PDF（非 PowerPoint 格式）。 适用于制作演示文稿、演讲或路演（例如：X 产品的 10 页路演幻灯片、Y 主题的培训课程、季度业绩汇报演示）。

version
2.1.7

Slide Creator — HTML → PDF 演示文稿

将幻灯片演示文稿构建为 HTML，通过无头 Chromium 导出为像素完美的 16:9 PDF。

输出格式：PDF — 非 Microsoft PowerPoint (.pptx)。PDF 在所有设备上保留精确的布局、字体和颜色。

为什么选择 HTML → PDF

  • CSS 布局（Grid/Flexbox）比任何 PPT 编辑器都灵活得多
  • 完整的网页排版、渐变、SVG、动画（打印时优雅降级）
  • 适合 Git 管理、可重现、可脚本化
  • 一条命令 → 生成具有精确 16:9 页面尺寸的 PDF

工作流程

0. 识别场景（新增）

在任何其他步骤之前，先识别演示场景。阅读 references/content-scaffolding.md 获取完整模板。

场景关键词 使用的模板
pitch / investor / fundraising pitch-deck
conference / keynote / summit / talk conference-keynote
product launch / launch event product-launch
report / research / analysis research-report
（以上均不适用） 询问用户哪个场景最合适

每个模板定义：幻灯片数量、页面标题、每页所需内容。

0.5 双语布局（如需）

如果受众是双语（例如香港、新加坡、全球中文会议），或者用户提到中文 + 英文：

  • 使用 references/content-scaffolding.md 中的 bilingual 布局模式
  • 标题：英文（大号）+ 中文副标题（较小，--text-muted）
  • 正文要点：中文在前，英文括号可选
  • 避免为香港/台湾/新加坡受众使用纯英文演示文稿

1. 规划演示文稿

根据场景模板定义幻灯片数量和每页内容。每张幻灯片 = 一个 <section class="slide">。

1.5 美术指导（在构建之前执行）

当用户未提供具体视觉风格时，执行此步骤。
阅读 skills/slide-creator/references/art-direction.md 获取完整的风格分类、CSS 令牌模板和风格简报输出格式。

步骤 A — 询问 4 个问题：

  1. 受众与场合：这是为谁准备的，在什么背景下（投资者/内部团队/公开演讲）？
  2. 情绪关键词：希望受众感受到什么（权威/充满活力/友好/极客现代）？
  3. 品牌约束：是否有要求的品牌颜色、标志或字体？
  4. 参考资料：是否有需要对齐的模板参考（图片、网页链接、现有演示文稿截图）？

步骤 B — 生成视觉风格选择页面：
不要以文字描述呈现风格选项——用户无法仅凭文字评估风格。

参考资料处理规则：

  • 如果用户提供图片文件/截图：从视觉中采样调色板（主色/表面色/强调色），检查布局密度、圆角半径、排版风格。
  • 如果用户提供网页 URL：使用 web_fetch 提取设计线索。关键——遵循此提取协议以避免误读风格：
    1. 忽略品牌名称/域名——切勿从产品行业或名称推断视觉风格（例如“Neo”并不意味着霓虹，“Opera”并不意味着欧洲奢华）。
    2. 阅读文案语气和词汇——页面上使用的词语揭示情绪（例如“外科手术般的精准”、“安静的自信”→克制；“释放”、“彻底”→大胆/激进）。
    3. 提取明确的颜色词汇——在获取的文本中查找 CSS 关键词，或正文/alt 标签中提到的颜色名称。暖色与冷色、浅色与深色、柔和与饱和。
    4. 推断布局密度——统计每部分的字数；稀疏=编辑/奢华，密集=技术/功能。
    5. 识别装饰主题——提到或暗示的（例如几何、渐变、摄影、插图、线条艺术、粗野主义）。
    6. 与 art-direction.md 交叉检查——找到最接近的匹配模板，然后描述差异（例如“风格 G 但更温暖，将蓝色替换为焦橙色，添加微妙的网格线”）。
    7. 不确定时：保守——对风格匹配程度保守承诺，并提供 3 个选项，其中选项 A 是最佳解读，B 更安全/更简洁，C 更具实验性。切勿自信地断言与实际视觉证据相矛盾的风格。
  • 如果用户同时提供两者：优先考虑图片线索，其次是 URL 线索。
  • 如果未提供任何参考：使用内置风格分类默认值。

然后：

  1. 创建 output/style-picker/index.html — 一个包含 3 个并排迷你幻灯片预览的页面（16:9 宽高比），每个预览使用真实 CSS（颜色、字体、布局、装饰元素）完全渲染。每个预览必须看起来像真实的幻灯片，而不是色块。
  2. 构建这 3 个选项为：(A) 忠实于参考、(B) 更安全的公司变体、(C) 更大胆的创意变体。
  3. 使用 preview(action='serve') 提供目录并显示预览 URL。
  4. 每张卡片下方有标签：风格名称 + 一行描述。
  5. 添加 onclick 高亮，以便用户点击表示选择。

用户通过说“选择 A”/“我要 B”/“混合 A+C”等来选择。

步骤 C — 生成 style-brief.md：
一旦用户选择了风格，在项目目录中编写 style-brief.md（模板在 art-direction.md 中）。
所有后续的 HTML/CSS 工作必须遵循此简报。

步骤 D — 询问品牌资产（标志/颜色）：
用户选择风格后，询问：

“您有要包含的标志或品牌颜色吗？您可以上传图片文件，我会将标志嵌入到幻灯片中。”

如果上传了标志：在 HTML 中嵌入为 base64（在 bash 中使用 base64.b64encode），放置在左上角或右上角，高度 ≤60px。
如果提供了品牌颜色：在 CSS 令牌块中将 --accent 覆盖为用户颜色。

2. 选择主题

如果已完成美术指导，则 style-brief.md 是主题规范——跳过此表。
否则，作为快速后备使用：

风格 背景 强调色 字体 情绪
深色科技 #000 / #0a0a0a 亮橙色/蓝色/绿色 Inter, Space Grotesk 大胆、现代
浅色简洁 #fff / #f8f8f8 海军蓝、青绿、珊瑚色 Inter, DM Sans 专业、极简
渐变 深色渐变 鲜艳强调色 任意无衬线字体 创意、充满活力
公司 #1a1a2e / 白色 品牌颜色 系统字体 可信、正式
俏皮 柔和粉彩 温暖流行色 Nunito, Poppins 友好、休闲

3. 构建 HTML + CSS

创建项目目录，包含 index.html + styles.css。

从 assets/base.css 开始 — 结构骨架（幻灯片尺寸、打印规则、布局辅助），不包含颜色或字体。在其上叠加主题：

/* 示例主题层 — 可自由定制 */
body {
  font-family: 'Inter', sans-serif;
  color: #fff;
  background: #000;
}
.slide { background: #0a0a0a; }
.slide-tag { background: rgba(0,120,255,0.15); color: #0078ff; }
.card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }

强制结构规则（在 base.css 中 — 不要移除）：

.slide { width: 1280px; height: 720px; page-break-after: always; overflow: hidden; }
@page { size: 1280px 720px; margin: 0; }

关键规则：

  • 使用 px 单位 — 幻灯片尺寸切勿使用 vh/vw/rem/%
  • Google 字体：在 <head> 中使用 <link>，导出脚本等待网络空闲
  • 视口 meta：<meta name="viewport" content="width=1280">
  • 内容必须适应 720px 高度 — 溢出将被裁剪

4. 预览（可选）

在导出前，使用 preview(action='serve') 在浏览器中预览。

5. 导出为 PDF

python3 skills/slide-creator/scripts/export_pdf.py --dir <project-dir> --output output/<name>.pdf

选项：

  • --dir — 包含 index.html 的目录（必需）
  • --output / -o — 输出 PDF 路径（默认：<dir>/deck.pdf）
  • --width — 幻灯片宽度，单位 px（默认：1280）
  • --height — 幻灯片高度，单位 px（默认：720）

6. 验证

脚本打印幻灯片数量并确认输出路径。额外检查：

import fitz
doc = fitz.open("output/deck.pdf")
print(f"Pages: {doc.page_count}")
for p in doc:
    r = p.rect
    print(f"  {r.width*96/72:.0f}x{r.height*96/72:.0f}px")

风格指南

  • 无默认品牌 — 每份演示文稿都获得适合其内容的主题
  • 优先采用美术指导优先的工作流程（问题 → 参考 → 用户选择 → style-brief.md）
  • 询问用户偏好：深色/浅色、强调色、字体、情绪
  • 每张幻灯片应有清晰的视觉层次：标签 → 标题 → 内容
  • 保持文本简洁 — 幻灯片是视觉性的，不是文档
  • 使用 .bg-glow 配合主题色径向渐变增加深度
  • 默认情况下不要使用 web_search 进行风格探索；优先使用用户提供的参考图片/链接以及 art-direction.md 中的模板。
  • 当用户提供参考链接时，使用 web_fetch 提取设计线索（色调/语气/布局），但使用本地模板和令牌变量实现最终 CSS。
  • 当用户要求“美术指导建议/风格建议”时，始终生成视觉风格选择预览页面（3 个选项）——切勿仅依赖纯文本描述。
  • 严格根据所选风格简报构建 HTML，然后导出 PDF（除非用户明确选择退出，否则不要跳过简报）
  • 选择风格后，在构建之前始终询问标志/品牌资产
  • 对于香港/台湾/新加坡/双语受众，默认使用双语布局，除非用户明确要求仅英文

风格微调（选择风格后）

如果用户说“将主色改为红色”/“切换字体”/“增加圆角半径”，不要重新开始美术指导。
而是直接在 styles.css 中修补 --accent / --font-head / --radius CSS 变量。
仅当用户想要完全不同的风格时才重新开始美术指导。

注意事项

  • Chromium：容器启动时通过 workspace/setup.sh 预安装（约 641 MB 缓存于 ~/.cache/ms-playwright/）。不要在每次导出时运行 playwright install — 它会重新下载相同的浏览器。仅当 export_pdf.py 失败并显示 Executable doesn't exist 时才运行它，并且在这种情况下也将命令附加到 workspace/setup.sh 以使其持久化。

  • 字体：Google 字体需要 HTTP — 导出脚本自动启动本地服务器

  • 表情符号渲染：无头 Chromium 可能缺少表情符号字体 — 改用 SVG 图标

  • 大图片：嵌入为 base64 或使用相对路径（本地服务器提供项目目录）

  • 幻灯片溢出：超过 720px 高度的内容将被裁剪 — 在边界内设计

  • ⚠️ PDF 文本不可选择（2026 年验证）：在包含文本的任何祖先元素上使用 filter / backdrop-filter CSS 会导致 Chromium 在 PDF 导出期间将该层栅格化为位图 — 所有子文本变为像素，不可选择。修复：切勿对包含文本的容器应用 filter/backdrop-filter。仅对空的装饰性 <div> 元素（例如 .blur-layer、.glow-overlay）应用，且这些元素没有文本子元素。相同规则适用于文本父元素上的 mix-blend-mode。导出前检查清单：在 HTML 中搜索非装饰元素上的 filter/backdrop-filter 并将其移除。

  • ⚠️ 页脚/来源归属 — 使用标准组件 + 严格底部安全区域约定（2026 年验证）：临时页脚标记会导致幻灯片之间定位不一致。始终使用此 .slide-footer 模式处理所有来源引用、页码和免责声明。

    硬布局约定（不要跳过）：

    • 每个非封面幻灯片必须有一个专用的内容包装器（例如 .slide-body），为页脚预留空间。
    • 硬性规则： .slide-body 必须通过底部安全区域 >= 96px（默认 96px）预留页脚空间。示例：.slide-body { padding: 52px 72px 96px; }。
    • 页脚必须在正常流之外：position: absolute; bottom: 24px，作为 .slide-body 的兄弟元素，直接位于 .slide 下。
    • 切勿将来源/免责声明文本放在 .slide-body 内。
    • 封面页可以例外，仅当它没有 .slide-footer 时。

    这强制了物理分离：正文内容区域在预留的页脚通道上方结束，页脚保持在画布底部通道，因此无论内容密度如何，它们都不会重叠。

    <footer class="slide-footer">
  <span class="footer-source">来源：CoinGecko · Coinglass · DefiLlama</span>
  <span class="footer-page">03 / 12</span>
</footer>

    .slide-footer {
  position: absolute;
  bottom: 24px; left: 48px; right: 48px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: rgba(255,255,255,0.35);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 8px;
  z-index: 2;
}
.slide > *:not(.bg-glow):not(.slide-footer) {
  position: relative;
  z-index: 1;
}
.slide-body { padding-bottom: 96px; }

    切勿使用流内 / position: relative 页脚 — 当幻灯片内容高度变化时它们会移动。同时将 .slide-footer 排除在通用 .slide > * 堆叠规则之外，否则 CSS 顺序可能意外覆盖页脚分层。
    验证检查清单（导出前必需）：

    1. 每个非封面幻灯片都有 .slide-body 和 .slide-footer 作为兄弟元素；
    2. .slide-body 底部内边距 >=96px；
    3. 来源/免责声明文本仅出现在 .slide-footer 内，绝不在正文容器中。

  • ⚠️ z-index / 装饰覆盖层错误（2026 年验证）：.bg-glow 和其他装饰性伪层必须使用 z-index: 0 定位，并且所有真实幻灯片内容显式赋予 z-index: 1。如果 .bg-glow 是 .slide > * 的兄弟元素（而不是 ::before/::after 伪元素），添加此规则以确保内容永远不会被视觉埋没：

    .slide > *:not(.bg-glow) { position: relative; z-index: 1; }
.bg-glow { position: absolute; z-index: 0; pointer-events: none; }

    故障模式：PDF 导出显示内容被推到底部或不可见，即使浏览器预览看起来正常（浏览器合成处理 z 顺序比 Chromium 的打印路径更宽容）。