slidekit-create

SlideKit Create

与用户的所有沟通 MUST 使用日语。 提问、确认、进度更新以及任何其他消息——始终使用日语。

生成构成完整演示文稿的 HTML 文件。每个文件都是独立的 HTML 文档，渲染尺寸为 1280 x 720 px。所有内容均为纯 HTML + CSS。当数据可视化需要图表（折线图、雷达图等）时，将自动使用 Chart.js——不允许使用其他 JavaScript。

DOM 代码片段和组件模式请参阅 references/patterns.md。 用户提供的自定义模板请参阅 references/templates/。

---

工作流概览

阶段	名称	说明
0	检测并加载模板	检查 templates/，确定使用模板模式还是常规模式
1	需求访谈	根据模式提问，确认幻灯片需求
2	确定设计	确定调色板、字体和图标
3	设计幻灯片结构	规划每张幻灯片的用途和布局模式
4	生成 HTML	将所有幻灯片输出为 001.html 至 NNN.html
5	生成 index.html	输出带导航的查看器兼打印页面
6	检查清单核对	验证是否符合限制和质量标准
7	转换为 PPTX（可选）	使用 /pptx 技能转换为 PowerPoint

---

阶段 0：检测并加载模板

开始需求访谈前，检查 references/templates/ 中是否有用户提供的 HTML 模板文件。

0-1. 检测模板

扫描 references/templates/ 中的子目录和直接包含的 .html 文件。

• 子目录 — 每个子目录均视为一个独立的模板集（例如，templates/navy-gold/、templates/modern-tech/）
• 直接包含的 HTML 文件 — references/templates/ 下的 .html 文件视为名为“default”的单个模板集
• 图像目录 — 检查每个模板集是否有 images/ 子目录（例如，templates/navy-gold/images/）。如果存在，这些图像可用作模板素材

如果没有找到任何内容（没有子目录，也没有 HTML 文件）→ 以常规模式进入阶段 1。

0-2. 选择模板

如果找到了模板，向用户展示并询问要使用哪一个。

存在多个模板集（子目录）时：

「以下のカスタムテンプレートが見つかりました。どのテンプレートを使用しますか？番号で選択してください。」

1. {directory-name-1}/（{N}ファイル）
2. {directory-name-2}/（{N}ファイル）
3. 使用しない（通常モードで作成）

• 1 或 2（目录编号） → 将对应目录中的 HTML 文件作为模板集。进入 0-3
• 3（不使用） → 以常规模式进入阶段 1

仅存在一个模板集（一个子目录，或只有直接包含的 HTML 文件）时：

「以下のカスタムテンプレートが見つかりました。使用しますか？番号で選択してください。」

• {file1.html}, {file2.html}, ...

1. はい — このテンプレートを使用する
2. いいえ — 使用しない（通常モードで作成）

• 1 → 进入 0-3
• 2 → 以常规模式进入阶段 1

0-3. 加载模板

读取选定的模板文件并提取：

• 调色板（CSS 自定义属性 / Tailwind 类）
• 字体搭配（主要日文字体 + 拉丁文字体点缀）
• 页眉/页脚结构与样式
• 装饰元素与视觉主题
• 使用的布局模式
• 模板图像 — 解析每个模板 HTML 中的 <img> 标签并记录：
  • src 路径、定位属性（position、z-index、width、height）及父元素位置
  • 根据属性推断用途：
    • 背景图（Background） — position: absolute + 较低的 z-index（0 或更低）+ 尺寸较大（width > 400px 或 height > 400px）
    • 徽标（Logo） — 尺寸较小 + 位于页眉/页脚区域 + 出现在多张幻灯片中
    • 内容图像（Content） — 所有其他图像（主要内容区域、中等尺寸）
  • 每张图像用于哪种幻灯片类型（封面 / 议程 / 内容 / 结束页）
  • 同时扫描模板的 images/ 子目录，识别未在 HTML 中引用的可用图像素材

以模板模式进入阶段 1。

注意事項

• 仍须遵守强制约束。 即使自定义模板使用了 <table> 或非 CDN 资源，生成的输出也必须遵循下方「强制约束」部分中的所有规则。只提取视觉设计（颜色、字体、间距、装饰风格），不要提取不合规的实现细节。
• 幻灯片尺寸必须保持为 1280x720px。 忽略自定义模板中的任何其他尺寸。
• 不要复制文本内容。 自定义模板仅供参考样式。所有文本内容均来自第 1 阶段访谈。
• 每组最多 5 个模板文件。 如果模板组包含超过 5 个 HTML 文件，只读取按字母顺序排序后的前 5 个，以限制上下文用量。告知用户已跳过其余文件。
• 支持的格式：HTML 和图像。 模板的 images/ 子目录中的图像文件（.jpg、.png、.webp、.svg）将作为模板资源纳入。其他非 HTML 文件（PDF 等）将被忽略。

---

第 1 阶段：访谈

生成任何文件之前，先向用户提问以了解其意图。所有问题都必须用日语提问。

重要规则：

• 每轮只问 1 个问题：每条消息只问一个问题。等待用户回答后再问下一个问题。
• 编号选择：所有带预设选项的问题都必须以编号列表呈现。用户只需输入编号作答。需要自由文本输入的问题（目录路径、标题、公司名称等）除外。

访谈问题因第 0 阶段确定的模式而异。

模板模式（有模板）

第 0 阶段加载自定义模板后，跳过所有与设计相关的问题，只询问以下内容：

1. 输出目录——与下方 1-1 相同
2. 幻灯片内容来源——与下方 1-4 相同
3. 演示标题——与下方 1-5 相同
4. 幻灯片数量——与下方 1-6 相同
5. 公司名称、品牌名称——与下方 1-7 相同
6. 确认模板设计——向用户展示提取出的设计（颜色、字体、装饰风格），并询问：

「从模板中检测到了以下设计。」

• 颜色：{提取出的颜色}
• 字体：{提取出的字体}
• 页眉/页脚：{提取出的结构}

「要如何处理此设计？请选择编号。」

1. 保持原样使用
2. 想要进行部分修改

• 1 → 在第 2 阶段中确认直接使用模板设计
• 2 → 询问想修改的项目（颜色、字体等），并部分覆盖模板设计

普通模式（无模板）

询问以下所有问题（1-1 至 1-9）。

1-1. 输出目录

「请选择输出目录。请输入编号，或直接输入路径。」

1. 默认（output/slide-page{NN}/）
2. 指定路径

• 1 → 使用 output/slide-page{NN}/（NN = 根据现有目录确定的下一个顺序编号）
• 2 → 追问路径（文本输入）
• 直接输入路径 → 如果用户直接输入路径而不是编号，则使用该路径

1-2. 风格选择

「请选择风格。请输入编号。」

1. Creative——大胆的配色、装饰元素、渐变、富有趣味的版式
2. Elegant——沉稳的配色（偏金色系）、偏衬线的字体排版、宽松的留白
3. Modern——扁平化设计、鲜明的强调色、利落的边缘、科技感
4. Professional——海军蓝/灰色系、结构化版式、较高的信息密度
5. Minimalist——少量色彩、大量留白、以字体排版为主、尽量减少装饰

1-3. 主题选择

「请选择主题。请输入编号。」

1. Marketing——产品发布、营销活动提案、市场分析
2. Portfolio——案例研究、成果介绍、作品集
3. Business——业务计划、经营报告、战略提案、投资者路演
4. Technology——SaaS 介绍、技术提案、数字化转型、AI/数据分析
5. Education——培训资料、研讨会、工作坊、内部学习会

1-4. 幻灯片内容来源

询问用户希望如何提供幻灯片内容。这将决定演示文稿中呈现的文本、数据和结构。

「您希望如何提供幻灯片内容？请用数字回答。」

1. 参考文件 — 指定文件（Markdown、文本、Word 等）
2. 直接输入 — 在聊天中输入文本
3. 仅提供主题 — 只指定主题，由 Claude 生成内容

提供参考文件时：

1. 阅读整个文件
2. 提取逻辑结构（标题、章节、项目符号、数据）
3. 将结构映射到幻灯片顺序中——每个主要章节对应一张章节分隔页和若干内容页
4. 忠实保留关键信息、数字和数据点
5. 调整内容以适应幻灯片格式（使用简洁的项目符号，而非完整段落）

提供直接输入的文本时：

1. 按照逻辑顺序组织文本，形成演示流程
2. 如果结构不明确，则提出澄清问题

仅提供主题时：

1. 询问目标受众（高管、工程师、客户等）
2. 询问用户希望传达的关键信息或要点
3. 根据用户的回答生成内容

1-5. 演示文稿标题

询问演示文稿标题。如果从 1-4 中的内容来源已能明确标题，则跳过。

1-6. 幻灯片数量

「请选择幻灯片数量。请用数字回答。」

1. 10 张
2. 15 张
3. 20 张（推荐）
4. 25 张
5. 自动（根据内容确定最合适的数量）

• 选择 5（自动） 时的判断标准：
  • 参考文件：统计主要章节／标题的数量 → 每个章节约 1 张分隔页和 2-3 张内容页，另加封面、议程、总结和结束页
  • 直接输入的文本：根据所提供文本的篇幅和结构估算
  • 仅提供主题：根据主题复杂度，默认制作 15-20 张
• 选择 5 时，在继续之前告知用户确定的数量（例如：「根据内容，我将制作 18 张幻灯片。可以吗？」）

1-7. 公司名称／品牌名称

询问要显示在页眉／页脚中的公司或品牌名称。

1-8. 颜色偏好

「您对颜色有偏好吗？请用数字回答。」

1. 由我决定（根据风格 × 主题自动推荐）
2. 自行指定（在下一个问题中输入颜色代码或颜色名称）

• 1 → 根据所选的风格 × 主题组合自动推荐
• 2 → 继续询问具体的颜色代码或颜色名称（文本输入）

1-9. 是否使用背景图片

「您要使用背景图片吗？请用数字回答。」

1. 不使用（仅使用 CSS 渐变）
2. 使用（在下一个问题中指定图片）

• 1 → 不使用背景图片（仅使用 CSS 渐变）
• 2 → 继续请用户提供或确认特定图片

---

阶段 2：确定设计

在生成任何 HTML 之前，确定以下内容：

模板模式

如果在阶段 0 中已加载自定义模板：

1. 调色板 — 使用从模板中提取的调色板（或根据阶段 1 中用户提出的修改进行调整）
2. 字体组合 — 使用从模板中提取的字体（或根据阶段 1 中用户提出的修改进行调整）
3. 品牌图标（1 个 Font Awesome 图标）

如果用户在阶段 1 中确认采用模板原样设计，则简要总结并继续。如果用户要求部分修改，则应用这些修改，并展示更新后的设计供用户确认。

普通模式

根据阶段 1 的沟通结果，确定：

1. 调色板（3-4 种自定义颜色）
2. 字体组合（1 种日文字体 + 1 种拉丁字体）
3. 品牌图标（1 个 Font Awesome 图标）

继续之前，将设计方案展示给用户确认。

已验证的调色板示例

模板	风格	深色主色	强调色	次要色	字体
01 Navy & Gold	优雅	#0F2027	#C5A065	#2C5364	Noto Sans JP + Lato
02 Casual Biz	专业	#1f2937	Indigo	#F97316	Noto Sans JP
03 Blue & Orange	专业	#333333	#007BFF	#F59E0B	BIZ UDGothic
04 Green Forest	现代	#1B4332	#40916C	#52B788	Noto Sans JP + Inter
05 Dark Tech	创意	#0F172A	#F97316	#3B82F6	Noto Sans JP + Inter

---

阶段 3：设计幻灯片结构

在编写任何 HTML 之前，规划完整的演示文稿结构。此阶段将生成幻灯片大纲。

3-1. 必需幻灯片（所有演示文稿）

位置	类型	模式	类别
第一张	封面	居中	cover
第二张	议程	HBF	agenda
倒数第二张	总结	HBF	conclusion
最后一张	结束页	全幅 / 居中	conclusion

3-2. 按幻灯片数量划分的章节分隔页

幻灯片数量	章节分隔页	内容页
10	2	4
15	3	8
20	4	12
25	5	16

3-3. 制作幻灯片地图

为每张幻灯片确定：

1. 文件编号（001.html、002.html，……）
2. 类型（封面 / 议程 / 章节分隔页 / 内容页 / 总结 / 结束页）
3. 布局模式（从 43 种模式中选择，参见第 4 阶段参考）
4. 内容摘要（此幻灯片上呈现的文本 / 数据）

规则：

• 连续 3 张或更多幻灯片不得使用相同的布局模式
• 将第 1-3 阶段的内容（参考文件 / 文本 / 主题）匹配到合适的幻灯片类型
• 充分利用 43 种布局模式，保持多样性
• Chart.js 自动检测： 对于包含数据可视化的幻灯片，根据 references/patterns.md 中的“何时使用 Chart.js 与纯 CSS”表格，决定使用 Chart.js 还是仅用 CSS。在幻灯片地图中标记使用 Chart.js 的幻灯片。纯 CSS 图表和 Chart.js 图表可以在同一演示文稿中共存

3-4. 20 张幻灯片的标准构成（参考）

文件	类型	模式	用途
001.html	封面	居中	标题、副标题、演讲者、日期
002.html	议程	HBF	编号章节列表
003.html	章节分隔页 1	左右分栏	第 1 章介绍
004.html	内容页	HBF + 上下分栏	挑战与解决方案 + KPI
005.html	内容页	HBF + 双栏	比较 / 对比
006.html	章节分隔页 2	左右分栏	第 2 章介绍
007.html	内容页	HBF + 三栏	3 项卡片
008.html	内容页	HBF + 网格表格	竞争对比表
009.html	内容页	HBF + 2x2 网格	风险分析 / SWOT
010.html	章节分隔页 3	左右分栏	第 3 章介绍
011.html	内容页	HBF + 多栏	流程图
012.html	内容页	HBF + 时间线 / 路线图	季度路线图
013.html	内容页	HBF + KPI 仪表板	KPI 卡片 + CSS 柱状图
014.html	章节分隔页 4	左右分栏	第 4 章介绍
015.html	内容页	HBF + 漏斗	转化漏斗
016.html	内容页	HBF + 纵向堆叠	架构 / 组织结构图
017.html	内容页	HBF + 三栏	战略 / 政策（三大支柱）
018.html	内容页	HBF + 双栏	详细分析 / 数据
019.html	总结	HBF	关键要点 + 后续行动
020.html	结束页	全幅 / 居中	致谢页 + 联系信息

---

第 4 阶段：HTML 生成

根据第 3 阶段的幻灯片地图生成所有幻灯片 HTML 文件。

4-0. 复制模板图片（仅模板模式）

如果所选模板包含 images/ 子目录：

1. 将模板的 images/ 目录复制到 {output_dir}/images/
2. 后续生成的所有 HTML 都必须使用相同的相对路径引用模板图片（例如：images/bg_cover.jpg）

在普通模式下，或模板不包含图片时，跳过此步骤。

4-1. 每张幻灯片

1. 使用 HTML 样板（如下）
2. 应用第 2 阶段的设计决策（颜色、字体、图标）
3. 使用第 3 阶段指定的布局模式
4. 填入第 1-3 阶段的内容（参考文件 / 文本 / 生成内容）
5. 如果幻灯片地图中将该幻灯片标记为“Chart.js”： 使用 references/patterns.md 中的 Chart.js <canvas> 模式（Chart.js 模式部分）。在 <head> 中加入 Chart.js CDN <script>，并在 </body> 前加入初始化 <script>
6. 模板图片（仅限模板模式）： 如果第 0 阶段已编目模板图片，则按模板中的位置复现图片：
   • 封面 / 结束页幻灯片 → 使用与模板相同的定位方式放置背景图片（bg_*）（绝对定位、较低的 z-index、匹配的尺寸）
   • 所有内容幻灯片 → 在页眉 / 页脚区域按模板布局放置 Logo 图片
   • 幻灯片类型匹配 → 使用第 0 阶段目录中与每种幻灯片类型对应的图片集（例如，封面使用 bg_cover.*，议程使用 bg_agenda.*）
   • 通过相对路径 images/{filename} 引用图片（在步骤 4-0 中复制）
7. 保存为 {output_dir}/{NNN}.html（补零：001.html、002.html……）

HTML 样板

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>{Slide Title}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family={PrimaryFont}:wght@300;400;500;700;900&family={AccentFont}:wght@400;600;700&display=swap" rel="stylesheet" />
    
    
    <style>
        body { margin: 0; padding: 0; font-family: '{PrimaryFont}', sans-serif; overflow: hidden; }
        .font-accent { font-family: '{AccentFont}', sans-serif; }
        .slide { width: 1280px; height: 720px; position: relative; overflow: hidden; background: #FFFFFF; }
        /* Custom color classes: .bg-brand-dark, .bg-brand-accent, .bg-brand-warm, etc. */
    </style>
</head>
<body>
    <div class="slide {layout-classes}">
        
    </div>
    
    
</body>
</html>

Chart.js CDN 引入规则：

• 仅在第 3 阶段幻灯片地图中标记为“Chart.js”的幻灯片上取消注释 <script src="...chart.js..."> 行
• 仅在实际包含 <canvas> 图表的幻灯片中添加 Chart.js CDN — 不要在每张幻灯片中都加入
• Chart 初始化用的 <script> 必须放在 </body> 前，且在幻灯片 <div> 之后
• 每个图表 <canvas> 都必须具有唯一的 id 属性

43 种布局模式

每张幻灯片使用一种模式。完整的 DOM 树和组件代码片段请参阅 references/patterns.md。

#	模式	根类	使用场景
1	居中	flex flex-col items-center justify-center	封面、致谢幻灯片
2	左右分栏	flex 配合 w-1/3 + w-2/3	章节分隔页、概念 + 详情
3	页眉-正文-页脚	flex flex-col，包含页眉 + flex-1 + 页脚	大多数内容幻灯片（默认）
4	页眉-正文-页脚 + 双栏	模式 3 的正文采用两个 w-1/2	对比、数据 + 说明
5	页眉-正文-页脚 + 三栏	模式 3 的正文采用 grid grid-cols-3	卡片列表、三方对比
6	页眉-正文-页脚 + N 栏	模式 3 的正文采用 grid grid-cols-{N}	流程展示（最多 5 栏）
7	全幅出血	relative 搭配 absolute inset-0 图层	强冲击力封面（默认使用 CSS 渐变）
8	页眉-正文-页脚 + 上下分栏	模式 3 的正文采用 flex flex-col 分为上下两部分	上方内容 + 底部 KPI/摘要栏
9	页眉-正文-页脚 + 时间线/路线图	模式 3 的正文采用时间线栏 + grid grid-cols-4	季度路线图、分阶段计划
10	页眉-正文-页脚 + KPI 仪表板	模式 3 的正文采用 KPI grid + flex-1 图表区域	KPI 卡片 + 图表/进度可视化
11	页眉-正文-页脚 + 网格表格	模式 3 的正文采用基于 flex 的行（w-1/N）	功能对比、竞争分析
12	页眉-正文-页脚 + 漏斗	模式 3 的正文采用宽度递减的居中条形	转化漏斗、销售管道
13	页眉-正文-页脚 + 垂直堆叠	模式 3 的正文采用堆叠的全宽卡片 + 分隔线	架构图、分层系统
14	页眉-正文-页脚 + 2×2 网格	模式 3 的正文采用 grid grid-cols-2（2 行）	风险分析、SWOT、功能概览
15	页眉-正文-页脚 + 堆叠卡片	模式 3 的正文采用垂直堆叠的全宽卡片 + 编号徽标	常见问题、问答、编号要点、访谈摘要
16	页眉-正文-页脚 + TAM/SAM/SOM	模式 3 的正文采用描述列表 + 嵌套圆形或水平条形	市场规模可视化（2 种变体）
17	章节分隔页	flex，左侧为 w-1/4 深色区域 + 右侧为 w-3/4 浅色区域（无页眉-正文-页脚）	带大号数字的章节/部分分隔页
18	页眉-正文-页脚 + 联系方式	模式 3 的正文采用 w-1/2 信息区 + w-1/2 联系卡片	联系信息、行动号召幻灯片
19	页眉-正文-页脚 + 五栏流程	模式 3 的正文采用 grid grid-cols-5 + 可选 RACI 框	五步流程、方法论
20	页眉-正文-页脚 + VS 对比	模式 3 的正文采用两张卡片 + 中央 VS 徽标	竞争对手正面对比
21	部分结束 / 总结	flex flex-col，包含编号要点 + 强调色边框	部分收尾、要点回顾
22	目录	flex flex-col，包含编号议程项 + 当前项高亮	议程、目录
23	页眉-正文-页脚 + 2×3 网格	模式 3 的正文采用 grid grid-cols-3 grid-rows-2	六要素概览、功能网格
24	页眉-正文-页脚 + 图标列表	模式 3 的正文采用图标圆圈 + 文本行	功能列表、优势亮点
25	页眉-正文-页脚 + 图片页眉面板	模式 3 的正文采用顶部带图片的卡片	视觉类别卡片
26	页眉-正文-页脚 + 强调面板	模式 3 的正文采用带左侧强调色边框的面板	突出关键信息、重点提示
27	玻璃面板（深色）	深色背景的 relative 布局 + backdrop-blur 玻璃面板	高端深色主题内容
28	页眉-正文-页脚 + 渐变面板	模式 3 的正文采用渐变背景面板	突出显示的内容部分
29	页眉-正文-页脚 + 图片卡片布局	模式 3 的正文采用图标 + 描述卡片	服务/产品功能卡片
30	右侧背景图片	flex，左侧文本 + 右侧图片（w-2/5）	文本 + 辅助图片
31	引言幻灯片	flex flex-col items-center justify-center，配有大型引号	励志引言、客户评价
32	多图分栏	flex，多个图片面板并排	图片集、视觉对比
33	突出统计数据	模式 3 的正文采用大型统计数字 + 标签	KPI 亮点、数据重点提示
34	居中消息	flex flex-col items-center justify-center，包含单条消息	关键陈述、过渡消息
35	问答幻灯片	居中的大型 “Q&A” 文本 + 副标题	问答环节
36	提问幻灯片	居中的问号 + 面向观众的提示	观众互动、反思
37	影视/书籍引言	flex，包含深色强调条 + 引言 + 出处	名言、文学典故
38	页眉-正文-页脚 + 行内图片	模式 3 的正文采用图片 + 编号文本项	配图说明
39	页眉-正文-页脚 + 统计比例	模式 3 的正文采用垂直柱状图对比	比例可视化、基准对比
40	页眉-正文-页脚 + 文本 + 统计面板	模式 3 的正文采用文本块 + 统计卡片	叙述内容 + 数据混排
41	垂直玻璃面板总结	深色背景 + 垂直玻璃面板展示要点	高端总结、深色主题回顾
42	页眉-正文-页脚 + 简单列表 + 补充内容	模式 3 采用项目符号列表（60%）+ 补充面板（40%）	带补充背景信息的列表
43	页眉-正文-页脚 + 案例研究	模式 3 采用挑战 → 解决方案 → 结果的流程	公司案例研究、成功案例

标题规范

采用双语形式：上方为较小的英文标签，下方为较大的日文标题。

<p class="text-xs uppercase tracking-widest text-gray-400 mb-1 font-accent">Market Analysis</p>
<h1 class="text-3xl font-bold text-brand-dark">市場分析</h1>

数字强调规范

大号数字 + 小号单位跨度：

<p class="text-4xl font-black font-accent">415<span class="text-sm font-normal ml-1">M</span></p>

---

阶段 5：生成 index.html

生成所有幻灯片 HTML 文件后，创建 {output_dir}/index.html——一个演示文稿查看器，支持键盘导航、视口缩放、全屏和 PDF 导出。

以 references/index-template.html 中的模板为基础。替换以下占位符：

1. {{TITLE}} → 阶段 1 中的演示文稿标题
2. `` → 每张幻灯片对应一个 <div>：

<div class="slide-frame"><iframe src="001.html"></iframe></div>
<div class="slide-frame"><iframe src="002.html"></iframe></div>

查看器功能

功能	工作方式
键盘导航	→ ↓ 空格 = 下一张，← ↑ = 上一张，F = 全屏
点击导航	点击演示文稿区域 = 下一张幻灯片
导航按钮	上一张 / 下一张 / PDF / 全屏（右下角叠加显示）
幻灯片计数器	01 / 20 格式（左下角）
视口缩放	使用 transform: scale() 适配任意窗口大小
PDF 导出	使用 @media print 的 window.print()（显示所有幻灯片，并分页）
打印缩放	使用 URL 参数 ?print-scale=120 设置自定义打印尺寸

重要事项

• 查看器一次只显示一张幻灯片（通过 .is-active 类切换 iframe）
• 在打印模式下，显示所有幻灯片，并使用 break-after: page 分页
• 无外部依赖——查看器完全由原生 JS + CSS 构成

---

阶段 6：确认检查清单

完成阶段 4 和阶段 5 后，检查以下各项。交付给用户前修复所有问题。

• 所有文件使用完全相同的 CDN 链接
• 每个 <style> 中定义的自定义颜色完全一致
• <body> 下只有一个根 <div>，并设置 overflow: hidden（唯一允许的同级元素：图表幻灯片中的 Chart.js <script>）
• 幻灯片尺寸严格为 1280 x 720
• 不使用外部图片（用户批准或模板自带的除外）
• 除图表幻灯片中的 Chart.js 外，不使用 JavaScript（不允许其他 <script> 标签）
• 所选幻灯片数量对应的文件均已生成
• 字号符合层级规范
• 内容幻灯片的页眉和页脚保持一致
• 页码递增正确
• 页脚中包含 Confidential
• 装饰元素使用较低的 z-index 和较低的不透明度
• 文件命名：3 位数字补零（001.html、002.html……）
• 文本使用 <p> / <h*>（而非 <div>）
• ::before / ::after 中没有可见文本
• 调色板之外没有单独使用的颜色
• 符合内容密度指南
• 已生成包含所有幻灯片 iframe 和导航引擎的 index.html

---

阶段 7：转换为 PPTX（可选）

所有检查通过后，用日语询问用户：

「HTMLスライドの生成が完了しました。PowerPoint（PPTX）に変換しますか？」

如果用户拒绝，工作流到此结束。

前置条件检查

调用 pptx 技能前，检查当前会话中可用技能列表，确认该技能已就绪。如果已安装，pptx 技能会显示在系统技能列表中。

如果未安装 pptx 技能，告知用户并提供安装说明：

/pptx スキルが必要ですが、現在インストールされていません。

以下のコマンドでインストールできます:

claude install-skill https://github.com/anthropics/claude-code-agent-skills/tree/main/skills/pptx

インストール後、新しいセッションで /pptx を実行し、出力ディレクトリ {output_dir} を指定してください。

然后结束工作流。未安装 pptx 技能时，不要尝试转换。

Chart.js 幻灯片与 PPTX 转换

如果演示文稿包含 Chart.js <canvas> 图表（在阶段 3 中确定）：

1. 图表幻灯片必须采用基于截图的转换方式。 pptx 转换器无法解析由 JavaScript 渲染的 <canvas> 元素。Chart.js 图表将被捕获为光栅图像（PNG），并嵌入 PPTX 幻灯片
2. 非图表元素仍可编辑。 同一幻灯片上的文本、图标和纯 CSS 元素仍会被提取为原生 PPTX 对象
3. 告知 pptx 技能哪些幻灯片包含 Chart.js，以便它有选择地应用截图回退方案

调用（pptx 技能可用时）

如果 pptx 技能可用，请使用 Skill 工具调用 /pptx。传入以下上下文：

1. 源目录 — 包含所有 NNN.html 文件的输出路径
2. 幻灯片数量 — HTML 文件总数
3. 演示文稿标题 — 来自 Phase 1 的需求沟通
4. 调色板 — Phase 2 中选定的 3-4 种品牌颜色
5. 字体组合 — 主字体（JP）和强调字体（Latin）

Skill 工具调用提示词示例：

Convert the HTML slide deck in {output_dir} to a single PPTX file.
- {N} slides (001.html through {NNN}.html)
- Title: {title}
- Colors: {primary_dark}, {accent}, {secondary}
- Fonts: {primary_font} + {accent_font}
- Chart.js slides: {list of slide numbers, e.g., "004, 013" or "none"}
- Output: {output_dir}/presentation.pptx

**重要：**不要尝试自行进行 HTML 到 PPTX 的转换。务必委托给 /pptx 技能，它有专门的工作流、QA 流程和转换工具。

---

参考：强制约束

规则	值
幻灯片尺寸	width: 1280px; height: 720px
CSS 框架	通过 CDN 使用 Tailwind CSS 2.2.19
图标	通过 CDN 使用 Font Awesome 6.4.0
字体	Google Fonts（1 种 JP 主字体 + 1 种 Latin 强调字体）
语言	lang="ja"
根 DOM	<body> -> 单个包装 <div>（图表幻灯片上唯一允许的同级元素：Chart.js <script>）
溢出	在根包装元素上设置 overflow: hidden
外部图片	默认不使用。**例外：**随选定模板打包的图片（images/ 子目录）会自动获准并复制到输出目录。其他外部图片需要用户明确批准
JavaScript	**默认禁止。**例外：数据可视化需要时会自动使用 Chart.js（参见 Phase 3 自动检测）。不允许使用其他 JS 库
自定义 CSS	仅限 <head> 中的内联 <style>；不允许使用外部 CSS 文件

PPTX 转换规则（关键）

这些规则会直接影响 PPTX 转换的准确性。务必遵守。

• 文本优先使用 <p>，而不是 <div>（树遍历器可能会漏掉 <div> 中的文本）
• 切勿在 ::before / ::after 中放置可见文本
• 使用 -z-10 / z-0 分隔装饰元素
• DOM 嵌套最多：5-6 层
• Font Awesome 图标放在 <i> 标签中（转换器会检测 <i> 上的 fa-）
• 表格使用基于 flex 的布局，而不是 <table>
• 支持 linear-gradient(...)；复杂的多段渐变可能会回退为截图
• box-shadow、border-radius、opacity 均可提取
• Chart.js <canvas> 元素无法由 DOM 树遍历器解析 → PPTX 需要回退为截图。若优先考虑 PPTX 可编辑性，建议使用纯 CSS 图表

反模式（避免）

• 没有实际用途的包装 <div>（会增加嵌套层级）
• 使用调色板以外的零散颜色
• 使用 <table> 布局
• Tailwind 可以替代的内联样式
• 在 ::before / ::after 中放置文本
• 使用 <div> 放置文本（请使用 <p>、<h1>-<h6>）

---

参考：设计指南

调色板

在 <style> 中将 3-4 种自定义颜色定义为 Tailwind 风格的实用类：

用途	类示例	目的
主深色	.bg-brand-dark	深色背景、标题
主强调色	.bg-brand-accent	边框、重点、图标
暖色/次要色	.bg-brand-warm	CTA、强调、徽章
正文文本	Tailwind 灰色	正文、说明文字

在所有幻灯片中保持调色板一致。不要使用零散颜色。

字体组合

用途	示例	使用场景
主字体（JP）	Noto Sans JP、BIZ UDGothic	正文、标题
强调字体（Latin）	Lato、Inter、Roboto	数字、英文标签、页码

在 body 上设置主字体；为强调字体定义 .font-accent。

字号层级

用途	Tailwind 类
主标题	text-3xl - text-6xl + font-bold/font-black
章节标题	text-xl - text-2xl + font-bold
卡片标题	text-lg + font-bold
正文	text-sm - text-base
说明文字/标签	text-xs

内容密度指南

元素	建议上限
项目符号	5-6
每行卡片数	3-4
正文行数	6-8
KPI 框	4-6
流程步骤	4-5