html-slides

前端幻灯片

创建零依赖、动画丰富的 HTML 演示文稿，完全在浏览器中运行。

Agent 兼容性

此技能针对 Claude Code 进行了优化，并使用 AskUserQuestion 进行交互式提问。如果 AskUserQuestion 不可用（Gemini CLI、GitHub Copilot、OpenAI Codex 或其他 Agent），请在对话中以纯文本提出相同的问题，并等待用户回复后再继续。

核心原则

1. 零依赖 — 使用包含内联 CSS/JS 的单个 HTML 文件。不需要 npm 或构建工具。
2. 展示，而非讲述 — 生成视觉预览，而不是抽象选项。人们通过亲眼看到来发现自己想要什么。
3. 独特设计 — 杜绝千篇一律的“AI 垃圾感”。每份演示文稿都必须有量身定制的感觉。
4. 内容驱动的设计 — 由内容决定视觉呈现方式。根据每张幻灯片要表达的内容进行设计，而不是轮流套用组件目录中的样式。
5. 适配视口（不可妥协） — 每张幻灯片都必须恰好适配 100vh。幻灯片内绝不允许滚动。内容溢出？拆分成多张幻灯片。

设计美学

你往往会趋向生成通用、“符合常规分布”的作品。在前端设计中，这会形成用户所说的“AI 垃圾感”美学。请避免这种情况：打造富有创意、独具特色、令人惊喜且愉悦的前端作品。

重点关注：

• 字体排印：选择优美、独特、有趣的字体。避免使用 Arial 和 Inter 这类通用字体，转而选择能提升前端美感的独特字体。
• 色彩与主题：坚持统一的美学风格。使用 CSS 变量保持一致性。大胆的主色搭配鲜明的点缀色，胜过怯弱且平均分配的调色板。可从 IDE 主题和文化美学中汲取灵感。
• 动效：使用动画呈现效果和微交互。对于 HTML，优先采用纯 CSS 方案；如果可用，在 React 中使用 Motion 库。聚焦于有影响力的时刻：通过精心编排、错落呈现（animation-delay）打造的单次页面加载动画，比零散的微交互更能带来愉悦感。
• 背景：营造氛围与层次感，而不是默认使用纯色。叠加 CSS 渐变、使用几何图案，或添加与整体美学相符的情境效果。

避免通用的 AI 生成美学：

• 滥用的字体系列（Inter、Roboto、Arial、系统字体）
• 陈词滥调的配色方案（尤其是白色背景上的紫色渐变）
• 可预见的布局和组件样式
• 缺乏情境特色的模板化设计

发挥创意，做出出人意料的选择，让设计真正贴合具体情境。尝试不同的明暗主题、字体和美学风格。不过，你仍然容易在多次生成中趋向常见选择（例如 Space Grotesk）。请避免这种情况：跳出思维定式至关重要！

视口适配规则

以下约束适用于每份演示文稿中的每张幻灯片：

• 每个 .slide 都必须设置 height: 100vh; height: 100dvh; overflow: hidden;
• 所有字号和间距都必须使用 clamp(min, preferred, max)，绝不能使用固定的 px/rem
• 内容容器需要设置 max-height 约束
• 图片：max-height: min(50vh, 400px)
• 必须针对 700px、600px、500px 高度设置断点
• 包含 prefers-reduced-motion 支持
• 绝不能直接对 CSS 函数取反（-clamp()、-min()、-max() 会被静默忽略）——应改用 calc(-1 * clamp(...))

生成时，请阅读 viewport-base.css，并将其全部内容包含在每份演示文稿中。

每页内容密度限制

幻灯片类型	内容上限
标题页	1 个标题 + 1 个副标题 + 可选标语
内容页	1 个标题 + 4-6 个要点，或 1 个标题 + 2 段文字
特性网格	1 个标题 + 最多 6 张卡片（2x3 或 3x2）
代码页	1 个标题 + 8-10 行代码
引言页	1 条引言（最多 3 行）+ 署名
图片页	1 个标题 + 1 张图片（高度最多为 60vh）
图表页	1 个标题 + 1 张图表（高度最多为 50vh）+ 可选副标题

内容超过限制？拆分为多张幻灯片。切勿塞得过满，也不要滚动。

---

阶段 0：检测模式

确定用户的需求：

• 模式 A：新建演示文稿 — 从头开始创建。转到阶段 1。
• 模式 B：PPT 转换 — 转换 .pptx 文件。转到阶段 4。
• 模式 C：增强 — 改进现有的 HTML 演示文稿。阅读并理解后进行增强。遵循下方的模式 C 修改规则。
• 模式 D：HTML 转换 — 将任意 HTML 文件（reveal.js、Marp、Google Slides 导出文件、文章、通用页面）转换为 HTMLSlides 格式。转到阶段 5。

模式 C：修改规则

修改现有演示文稿时，应进行最小幅度的更改——仅修改用户要求的内容。

编辑幻灯片：

• 先阅读现有 HTML 文件
• 仅修改用户要求的幻灯片，其余内容保持原样
• 如果添加或删除幻灯片，从 0 开始按顺序重新编号所有 data-slide 属性
• 如果更改组件类型（例如，将代码块改为表格），使用 component-templates.md 中的模板
• 更新内联 <script class="slide-notes"> 块，使其与内容更改相符

适配视口（始终检查）：

• 添加内容前，检查是否符合内容密度限制
• 添加图片时：必须设置 max-height: min(50vh, 400px)
• 添加文本时：每张幻灯片最多 4-6 个要点。超出？拆分为多张幻灯片
• 如果修改会导致内容溢出，拆分内容并告知用户

任何修改后，都要验证全部 8 项规范：

1. 存在 <div class="deck" id="deck">
2. 所有幻灯片均为 <div class="slide">，且 data-slide="0" 至 data-slide="N" 连续编号
3. 第一张幻灯片具有 class="slide active"，其他幻灯片均不带 active
4. 存在全局 goTo()、next()、prev() 函数
5. 所有 CSS 均为内联（字体导入除外）
6. 所有 JS 均为内联（CDN 库除外：Chart.js、Mermaid、anime.js）
7. 插入或删除后没有编号断档
8. <head> 中存在 <meta name="generator" content="html-slides vX.Y.Z">

如果编辑后有任何一项不符合要求，保存前先修复。

---

阶段 1：选择模式

除非用户已在提示中指定模式（或特定主题），否则始终询问用户选择模式。

询问用户想选择哪种模式（标题：“模式”）：

• Vibe（创意主题）— AI 可自由诠释你的内容，并采用鲜明独特的视觉风格。适合路演演示文稿、主题演讲和非技术类演示。
• Pro — 采用结构化交互组件：翻转卡片、图表、表格、代码块、架构流程、图片页等。提供多种主题。支持用户提供图片。适合技术演讲、产品演示和数据丰富的演示。

如果用户已在提示中指定模式或主题，则跳过此问题。

**如果选择 Pro：**转到阶段 2A。
**如果选择 Vibe：**转到阶段 2B。

---

阶段 2A：专业版 — 内容与主题

在一次 AskUserQuestion 调用中询问所有问题：

问题 1 — 内容（标题：“内容”）： 你准备好内容了吗？选项：所有内容都已准备好 / 只有粗略笔记 / 只有主题

问题 2 — 编辑（标题：“编辑”）： 生成后，你是否需要直接在浏览器中编辑文本？选项：

• “是（推荐）” — 可在浏览器中编辑文本，自动保存到 localStorage，并导出文件
• “否” — 仅用于演示，文件更小

问题 3 — 主题（标题：“主题”）：

• Obsidian（默认） — 深色背景，蓝色／绿色／橙色点缀
• Excalidraw Light — 手绘风格，白色背景，草图边框
• Excalidraw Dark — 手绘风格，深色背景，草图边框
• Binary Architect — 黑客精英风格，锐利棱角，虚空黑背景上的霓虹色

如果用户已在提示词中指定主题，请跳过问题 3 并使用该主题。如果用户没有偏好，默认使用 Obsidian。

问题 4 — 图片（标题：“图片”）： 你有要加入的图片吗？选项：

• “没有图片” — 仅使用 CSS 生成视觉效果
• “有，我有一个图片文件夹” — 提供要扫描的文件夹路径
• “有，我会粘贴／提供图片” — 在内容审核期间直接分享图片

如果用户已在提示词中提供或粘贴图片，请跳过此问题，并记下这些图片，供阶段 3 使用。

请记住用户对编辑的选择 — 这决定了阶段 3 是否包含与编辑相关的代码。

如果用户已有内容，请让他们分享。

如果用户提供了图片（文件夹或内嵌图片）：

1. 查看每张图片 — 使用 Read 工具（Claude 支持多模态）
2. 评估 — 对每张图片说明其内容、是否可用（并说明理由）以及主色调
3. 规划放置位置 — 使用 图片幻灯片组件模板，将图片匹配到幻灯片。Logo 放在标题页／结束页。屏幕截图和示意图使用专门的图片幻灯片。
4. 按需处理 — 超大图片（>1MB）：调整尺寸。圆角主题中的 Logo：裁剪为圆形。参见 references/html-template.md 中的图片处理流程。
5. 复制到 assets/ — 将图片放在 HTML 文件旁边的 assets/ 文件夹中。使用相对 src="assets/..." 路径。

然后进入阶段 3。

每种主题使用相同的组件和导航 — 只有视觉风格不同。主题文件位于 assets/themes/。

---

阶段 2B：氛围探索 — 内容与风格探索

**这是一个“展示而非讲述”的阶段。**大多数人无法用语言清楚描述自己的设计偏好。

步骤 2B.1：探索内容

在一次 AskUserQuestion 调用中询问所有问题：

问题 1 — 用途（标题：“用途”）： 这份演示文稿的用途是什么？选项：推介演示文稿 / 教学教程 / 会议演讲 / 内部演示文稿

问题 2 — 长度（标题：“长度”）： 大约需要多少张幻灯片？选项：短，5-10 张 / 中，10-20 张 / 长，20 张以上

问题 3 — 内容（标题：“内容”）： 你准备好内容了吗？选项：所有内容都已准备好 / 只有粗略笔记 / 只有主题

问题 4 — 编辑（标题：“编辑”）： 生成后，你是否需要直接在浏览器中编辑文本？选项：

• “是（推荐）” — 可在浏览器中编辑文本，自动保存到 localStorage，并导出文件
• “否” — 仅用于演示，文件更小

请记住用户对编辑的选择 — 这决定了阶段 3 是否包含与编辑相关的代码。

如果用户已有内容，请让他们分享。

步骤 2B.2：图像评估（如果提供了图像）

如果用户选择了“No images” → 跳到步骤 2B.3。

如果用户提供了图像文件夹：

1. 扫描 — 列出所有图像文件（.png、.jpg、.svg、.webp 等）
2. 查看每张图像 — 使用 Read 工具（Claude 支持多模态）
3. 评估 — 对每张图像说明其内容、是否可用（USABLE 或 NOT USABLE，并说明原因）、所代表的概念以及主色调
4. 共同设计大纲 — 精选图像与文本一起决定幻灯片结构。这不是“先规划幻灯片，再添加图像”，而是从一开始就围绕两者进行设计（例如：3 张截图 → 3 张功能幻灯片，1 个徽标 → 标题/结束幻灯片）
5. 通过 AskUserQuestion 确认（标题：“Outline”）：“这份幻灯片大纲和图像选择看起来合适吗？”选项：看起来不错 / 调整图像 / 调整大纲

预览中的徽标： 如果识别出可用的徽标，请在步骤 2B.4 的每个样式预览中嵌入该徽标（base64）。

步骤 2B.3：样式选择路径

询问用户想如何选择（标题：“Style”）：

• “Show me options”（推荐）— 根据氛围生成 3 个预览
• “I know what I want” — 直接从预设列表中选择

如果直接选择： 显示预设选择器并跳到阶段 3。可用预设定义在 STYLE_PRESETS.md 中。

步骤 2B.4：氛围选择

询问（标题：“Vibe”，多选：true，最多 2 项）： 希望观众有什么感受？选项：

• 印象深刻/自信 — 专业、可信赖
• 兴奋/充满活力 — 创新、大胆
• 平静/专注 — 清晰、深思熟虑
• 受到启发/感动 — 富有情感、令人难忘

步骤 2B.5：匹配预设并预览

展示出来，而不是只用语言描述。 不要只列出预设名称，而是生成视觉预览。

1. 阅读 STYLE_PRESETS.md，了解可用预设及其规格。
2. 从下方与氛围匹配的预设中，随机选择 3 个，并为每个预设生成单页 HTML 预览。将预览保存到 .claude-design/slide-previews/ 并打开。
3. 请用户选择一个（标题：“Pick a Style”）：
   • 选项：“1” / “2” / “3” / “再展示 3 个” / “I know what I want”

氛围 → 预设池：

印象深刻 / 自信： Obsidian、Bold Signal、Electric Studio、Dark Botanical、Editorial Light

兴奋 / 充满活力： Creative Voltage、Neon Cyber、Binary Architect、Terminal Green、Split Pastel

平静 / 专注： Notebook Tabs、Paper & Ink、Swiss Modern、Excalidraw Light、Pastel Geometry

受到启发 / 感动： Dark Botanical、Vintage Editorial、Excalidraw Dark、Pastel Geometry

如果选择“再展示 3 个” — 从同一预设池中选择 3 个不同的预设（避免重复上一轮的预设）。如果预设池已用尽，则展示剩余预设。

如果选择“I know what I want” — 展示其氛围类别下的完整预设列表，并让用户按名称选择。

如果选择“Mix elements” — 询问具体想混合哪些元素。

---

阶段 3：生成演示文稿

使用阶段 1 的内容（文本，或文本 + 精选图像）和阶段 2 的样式，生成完整演示文稿。

如果提供了图像，幻灯片大纲已在步骤 1.2 中将其纳入。如果没有提供图像，则通过 CSS 生成的视觉元素（渐变、形状、图案）增添视觉趣味——这是得到全面支持的首选方案。

内容分析（专业版和氛围版）

在编写任何 HTML 之前，分析内容并规划每张幻灯片。对于每张幻灯片，确定：

1. 目的 — 这张幻灯片要传达什么？
2. 内容元素 — 这张幻灯片包含哪些具体内容？
3. 视觉呈现 — 以什么方式进行视觉呈现效果最好？

关键原则： 如果两张幻灯片的内容相似（例如，四个路线图主题都包含状态项），不要用相同的方式呈现。要改变视觉呈现方式——使用不同布局、不同组件类型和不同视觉隐喻。重复会降低观众的参与度。

此分析仅供内部使用——不要向用户展示规划内容。

支持文件

生成前，请根据选定的样式阅读以下支持文件：

创意预设（预设 1-12）：

• html-template.md — HTML 架构和 JS 功能
• viewport-base.css — 必须使用的 CSS（完整包含）
• animation-patterns.md — 所选风格的动画参考
• libraries.md — 用于图表和动画的 CDN 库（内容需要时使用）

Pro 模式（结构化组件模式）：

• component-templates.md — 图表、代码块、卡片、表格和图像的组件样式参考。当设计需要这些元素时，将其用作样式指南，而不是轮流套用的菜单。
• components.css — 共享组件 CSS（原样复制到 <style> 中）
• assets/themes/ 中的主题 CSS — 原样复制到 <style> 中，放在 components.css 之前
• slides-runtime.js — 导航 JS（原样复制到 <script> 中）
• Excalidraw 主题仅使用 CSS 实现手绘风格。主题 CSS（excalidraw.css / excalidraw-dark.css）通过纯 CSS 处理排线填充、错位阴影和圆角，无需 JavaScript。
• libraries.md — 用于图表（Mermaid.js）和编排动画（anime.js）的 CDN 库。内容需要时使用。
• 如果任何幻灯片使用 Chart 组件，请在 <style> 之前将 Chart.js CDN 添加到 <head> 中：<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>

可用的 Pro 主题（用户会在提示词中指定，默认：Obsidian）：

主题	文件	风格
Obsidian（默认）	assets/themes/dark-interactive.css	深色背景，蓝色／绿色／橙色点缀
Excalidraw Light	assets/themes/excalidraw.css	手绘风格、白色背景、草图边框
Excalidraw Dark	assets/themes/excalidraw-dark.css	手绘风格、深色背景、草图边框
Editorial Light	assets/themes/editorial-light.css	明亮、编辑风格、面向技术的极简主义
Binary Architect	assets/themes/binary-architect.css	黑客精英风格、锐利边角、虚空黑底上的霓虹色

关键要求：

• 使用单个自包含 HTML 文件，所有 CSS/JS 均内联
• 对于 Vibe 模式：在 <style> 块中完整包含 viewport-base.css 的内容。重要：粘贴 viewport-base.css 后，不要重新定义 .slide 的定位或布局——该文件已通过 position: relative、scroll-snap-align 和 flex 布局定义了 .slide。再添加 .slide { position: absolute; opacity: 0; } 会造成冲突，导致幻灯片空白或重叠。只需在此基础上添加视觉样式（颜色、背景、排版、动画）。
• 对于 Pro 模式：在 <style> 块中包含所选主题 CSS 和 components.css，并在 <script> 块中包含 slides-runtime.js
• 使用 Fontshare 或 Google Fonts 中的字体，不要使用系统字体
• 添加详细注释，解释各个部分
• 每个部分都需要清晰的 /* === SECTION NAME === */ 注释块
• 始终生成演讲者备注——参见下文“演讲者备注”

演讲者备注（必填）

演讲者备注以内嵌形式包含在每张幻灯片中，作为隐藏的 JSON 块。浏览幻灯片时，它们会显示在浏览器的开发者控制台中——打开 DevTools，将其分离到单独的窗口，即可获得演讲者视图。

每张幻灯片都必须将 <script type="application/json" class="slide-notes"> 块作为最后一个子元素：

<div class="slide" data-slide="0">
  
  <script type="application/json" class="slide-notes">
  {"title":"Introduction","script":"HTML Slides lets you create beautiful presentations without design skills.","notes":["Zero dependencies","Works with 4 AI agents"]}
  </script>
</div>

格式： 每个幻灯片备注块都包含：

• title — 幻灯片标题（用于控制台显示和演讲者应用）
• script — 演讲者在这张幻灯片上会朗读的内容。语气自然、 conversational、专业。不是对组件的元描述，而是演讲者实际对观众说的话。
• notes — 总结幻灯片所传达要点的项目符号。每条备注对应幻灯片内容中的一个要点。

演讲稿语气： 像演讲者在自然地向观众讲话一样。轻松但专业。示例：

• 好："这就是它与众不同的地方——所有内容都放在一个 HTML 文件中。不需要构建步骤，也不需要框架。打开文件就能演示。"
• 不好："这张幻灯片使用 Statement 组件和发光背景 blob 来展示核心价值主张。"

备注内容： 总结幻灯片实际表达的内容，而不是它的构建方式。示例：

• 好：["单个独立的 HTML 文件", "无需构建工具或框架", "可在任何设备上离线使用"]
• 不好：["居中的大号文本", "背景中的发光 blob", "fadeInUp 动画"]

控制台输出： 每次切换幻灯片时，导航 JS 都会使用带样式的格式将备注记录到控制台。演讲者打开 DevTools（F12），将其分离到单独的窗口，并在演讲时阅读备注。系统还会显示 HTML Slides 演讲者应用的链接，提供更丰富的体验。

绝不要包含：

• 演讲指示（"在这里停顿"、"放慢速度"）
• 转场提示（"进入下一张幻灯片"）
• 演讲建议（"强调这一点"、"时间不够时跳过"）
• 元评论（"这是总结页"）

示例 — 关于 AI Agent 能力、带有 4 张翻转卡片的幻灯片：

{
  "title": "Four Core Capabilities",
  "script": "Agents need four things working together: reasoning, memory, tools, and evaluation.",
  "notes": [
    "Reasoning — choose the next step",
    "Memory — carry context across steps",
    "Tools — take actions in the real world",
    "Evaluation — detect errors, confirm completion"
  ]
}

示例 — 显示“快 3.2 倍、事故减少 47%、满意度 89%”的统计数据幻灯片：

{
  "title": "By the Numbers",
  "script": "AI-assisted development delivers measurable improvements across speed, quality, and satisfaction.",
  "notes": [
    "3.2x faster code review",
    "47% fewer production incidents",
    "89% developer satisfaction"
  ]
}

---

第 4 阶段：PPT 转换

转换 PowerPoint 文件时：

1. 提取内容 — 运行 python scripts/extract-pptx.py <input.pptx> <output_dir>（如有需要，安装 python-pptx：pip install python-pptx）
2. 与用户确认 — 展示提取出的幻灯片标题、内容摘要和图片数量
3. 选择样式 — 进入第 2 阶段，探索样式
4. 生成 HTML — 转换为选定的样式，保留所有文本、图片（来自 assets/）、幻灯片顺序和演讲者备注（作为 HTML 注释）

---

第 5 阶段：HTML 转换（模式 D）

将现有 HTML 文件转换为符合规范的 HTMLSlides 演示文稿。

第 5.1 步：分析输入

读取 HTML 文件并对源文件进行分类。阅读 conversion-patterns.md，了解框架检测模式。

源类型	检测方式	提取策略
reveal.js	<div class="reveal"> + <section> 元素	将各个 section 一对一映射为幻灯片
Marp	`` 或 class="marpit"	将 Marp 幻灯片一对一映射
impress.js	<div id="impress"> + div.step	将各个 step 一对一映射为幻灯片
Slidev	class="slidev-layout" 或 Slidev 专用类	将各个布局一对一映射
Google Slides	带有 Google 专用类的深层嵌套 div	从结构中提取文本/图片
HTMLSlides（部分符合）	符合 7 条规范中的部分规则，但并非全部	仅修复不符合规范之处
文章/博客	<article>、<main> 或按标题组织的 HTML	按标题拆分
通用 HTML	不符合以上任何类型	按标题拆分并分析结构

根据 7 条规范规则进行合规性审查。如果全部通过，告知用户该文件已符合规范，无需转换。如果部分符合，提出仅修复不通过规则。

向用户报告内容清单：幻灯片数量、内容类型、外部依赖项、预计生成的幻灯片数量。继续之前请征求确认。

第 5.2 步：提取内容

对于幻灯片框架（reveal.js、Marp、impress.js、Slidev）：

• 将现有幻灯片一对一映射为 HTMLSlides 幻灯片
• 提取每张幻灯片的标题、正文内容、图片和代码块
• 保留幻灯片顺序
• 如果源幻灯片超出内容密度限制，则进行拆分

对于文章/博客文章/通用 HTML：

• 在标题边界处拆分内容（h1/h2 = 新幻灯片）
• 第一个标题作为标题幻灯片
• 将相关段落、列表和图片归入其最近的标题下
• 代码块 → 代码幻灯片，表格 → 表格幻灯片，引用块 → 引用幻灯片
• 将较长的列表拆分到多张幻灯片中（每张最多 6 项）

对于部分符合规范的 HTMLSlides 文件：

• 保持现有幻灯片结构不变
• 仅修复未通过的具体规则

处理依赖项：

• 外部 CSS → 内联。外部 JS → 移除框架 JS，保留内容 JS。
• 图片 → 保留 URL，应用 max-height: min(50vh, 400px)。
• 字体 → 保留 Google Fonts / Fontshare，替换其他字体。

第 5.3 步：选择样式

与第 1 阶段相同——询问选择 Vibe 还是 Pro。默认选择 Pro。然后根据选择遵循第 2A 或第 2B 阶段。

第 5.4 步：生成

与第 3 阶段相同——阅读相应的参考文件并生成。根据每张幻灯片的内容进行设计；合适时可将组件模板作为样式参考。

始终在每张幻灯片中嵌入内联演讲者备注。如果源文件包含演讲者备注，请将其保留为内联 <script class="slide-notes"> 块。

第 5.5 步：验证并保存

保存前，确认 8 条规范规则全部通过。修复任何未通过的规则。保存 HTML 文件。

---

第 6 阶段：交付

1. 清理 — 如果 .claude-design/slide-previews/ 存在，则将其删除
2. 打开 — 使用 open [filename].html 在浏览器中打开
3. 总结 — 告知用户：
   • 文件位置、样式名称、幻灯片数量
   • 导航方式：方向键、空格键、滚动/滑动、点击导航圆点
   • 演讲者备注：打开 DevTools（F12），并将其分离到单独的窗口——每次切换幻灯片时，备注都会显示在控制台中
   • 自定义方法：使用 :root CSS 变量设置颜色、字体链接设置排版、.reveal 类设置动画
   • 如果启用了内联编辑：将鼠标悬停在左上角或按 E 进入编辑模式，点击任意文本即可编辑，按 Ctrl+S 保存

---

第 7 阶段：分享与导出（可选）

交付后询问：“您想分享这份演示文稿吗？我可以将其部署到在线 URL，或导出为 PDF。”

选项：部署到 URL / 导出为 PDF / 两者都要 / 不用了，谢谢

如果用户拒绝，请到此为止。

7A：部署到在线 URL（Vercel）

将演示文稿部署到永久可分享的 URL。可在任何设备上使用。

1. 检查前置条件 — 运行 npx vercel --version。如果未找到，用户需要先安装 Node.js。
2. 检查登录状态 — 运行 npx vercel whoami。如果尚未登录，引导用户完成以下步骤：
   • 在 https://vercel.com/signup 注册（免费）
   • 运行 vercel login 进行授权
3. 部署 — 运行：

   bash scripts/deploy.sh <path-to-presentation>
   

   接受单个 HTML 文件或包含 index.html 的文件夹。
4. 分享 URL — 告知用户在线 URL、该 URL 可在任何设备上使用，以及之后可以从 https://vercel.com/dashboard 删除它。

需要： Node.js + Vercel 账号（免费套餐）

7B：导出为 PDF

将每张幻灯片截取为屏幕截图，并合并为一个 PDF。动画不会保留（静态快照）。

1. 运行：

   bash scripts/export-pdf.sh <path-to-html> [output.pdf]
   

   如果未提供输出路径，则保存到 HTML 文件所在位置。
2. 运行过程： Playwright 会打开无头浏览器，以 1920x1080 的分辨率截取每张幻灯片，并生成 PDF。首次运行时会自动安装 Playwright + Chromium。
3. 大文件： 如果 PDF 超过 10MB，提供精简模式：

   bash scripts/export-pdf.sh <path-to-html> [output.pdf] --compact
   

   以 1280x720 的分辨率渲染，文件通常会缩小 50-70%。

需要： Node.js（Playwright 会自动安装）

---

支持文件

文件	用途	何时阅读
STYLE_PRESETS.md	精选视觉预设，包含颜色、字体和标志性元素	阶段 2（样式选择）
viewport-base.css	必需的响应式 CSS — 复制到每个演示文稿中（预设 1-12）	阶段 3（生成）
html-template.md	HTML 结构、JS 功能、代码质量标准（预设 1-12）	阶段 3（生成）
animation-patterns.md	CSS/JS 动画片段及效果与感受指南（预设 1-12）	阶段 3（生成）
component-templates.md	组件样式参考 — 设计需要这些元素时使用	阶段 3（Pro）
components.css	所有 Pro 主题共用的组件 CSS — 原样复制	阶段 3（Pro）
themes/	主题 CSS 文件（dark-interactive、excalidraw、excalidraw-dark、editorial-light、binary-architect）— 任选其一	阶段 3（Pro）
slides-runtime.js	导航 JS — 原样复制	阶段 3（Pro）
libraries.md	CDN 库：Mermaid.js（图表）、anime.js（动画）、Chart.js（图表）	阶段 3（内容需要时）
presentation-layer.md	共享规范：幻灯片结构、演讲者备注、8 项验证规则、导航	阶段 3（参考）
scripts/extract-pptx.py	用于提取 PPT 内容的 Python 脚本	阶段 4（PPT 转换）
conversion-patterns.md	框架检测模式和提取规则	阶段 5（HTML 转换）
scripts/deploy.sh	将幻灯片部署到 Vercel，以便即时分享	阶段 7（分享）
scripts/export-pdf.sh	将幻灯片导出为 PDF	阶段 7（分享）