Imported from hershate/Meta-skill (产出示例/Art/ppt-slide-builder/SKILL.md). Install upstream with npx skills add hershate/Meta-skill --skill ppt-slide-builder. Copyright stays with the author.

PPT Slide Builder

Purpose

创建并维护PPT 风格的全屏网页演示文稿。每个演示项目使用统一样式（由用户指定的配色、字体、间距等主题参数），支持多页面管理、元素入场动画和页面过渡动画。所有操作（创建/修改/删除/动画）通过本 skill 严格控制，确保长期编辑后项目文件的稳定性和一致性。输出为纯静态 HTML，双击即可在浏览器中全屏播放。

When to Use

• 用户要求"制作 PPT 网页"、"做一个幻灯片网页"、"演示文稿"
• 用户需要全屏翻页的网页演示，而非普通滚动页面
• 用户需要为已有演示添加/修改/删除页面
• 用户需要为页面元素添加入场动画
• 用户需要设置或修改页面之间的过渡效果
• 用户需要更改整个演示的主题样式

When NOT to Use

• 用户需要可滚动的普通网页或 Landing Page —— 应使用 web-ui-builder
• 用户需要导出为 PowerPoint (.pptx) 文件 —— 本 skill 只生成 HTML
• 用户需要在线分享且需要多人协作编辑 —— 建议使用 Google Slides 等专业工具
• 用户需要复杂的图表动画或时间线动画 —— 建议使用 reveal.js 等框架

Workflow

Step 1: 初始化 PPT 项目（含用户提问流程）

第一步：判断操作类型。 解析用户输入，确定用户是创建新项目还是修改已有项目：

• 创建新项目：用户提到"新建"、"创建"、"做一个"、"制作"等关键词，或未提及任何已有项目名 → 执行下方 1a-1e 完整流程
• 修改已有项目：用户提到已有项目名称（如"给 tech-review-2025 加一页"）、或要求添加/修改/删除/动画/过渡/添加图片 → 跳转到对应的 Step 2-9，不执行 1a-1d

如果是创建新项目，执行以下流程：

1a. 解析用户已提供的信息

解析用户输入，提取已明确给出的信息，逐项标记"已提供"或"缺失"：

1b. 逐轮提问收集缺失信息

提问原则（必须遵守）：

• 一次只问 1-2 个问题，等用户回答后再问下一轮。绝不一次性抛出一整份问卷
• 每个问题附带具体选项示例："想要什么风格？比如科技蓝、极简黑、温暖橙、商务风？或者你有其他想法？"
• 对模糊回答追问细化：用户说"科技风格" → 追问"深色背景还是浅色背景？主色调用蓝色还是青色？"
• 逐轮推进：先问标题和风格 → 再问页数和内容 → 最后问细节
• 如果用户明确说"你定就好"：使用合理的默认值并告知用户你的选择

提问流程（逐轮执行，每轮等用户回答）：

第 1 轮：标题与整体风格

检测到"演示标题"缺失 → 问："演示的主题/标题是什么？"
检测到"视觉风格"缺失 → 问："想要什么视觉风格？比如：
   · 科技蓝 —— 深蓝背景 + 亮色文字，适合技术/产品发布
   · 极简黑 —— 黑白配色 + 简洁排版，适合高端/设计感
   · 温暖橙 —— 暖色系 + 亲和力，适合分享/教育
   · 商务风 —— 浅色背景 + 蓝色点缀，适合正式汇报
   · 自然绿 —— 绿色调 + 柔和质感，适合环保/健康
   或者你有其他想法？"

(两个都缺失时一并问，否则只问缺失的)

第 2 轮：配色与字体细节

已有风格但未指定配色 → 问："倾向于深色背景还是浅色背景？主色调有偏好吗？"
已有风格但未指定字体 → 问："标题和正文的字体风格有偏好吗？
   比如正式的衬线字体（有装饰脚），或者现代的无衬线字体（简洁现代）？"

第 3 轮：页数与内容

检测到页数/内容缺失 → 问："大概需要几页？每页想展示什么内容？
   可以简单说一下各页的主题，我来帮你组织。"
   如果用户回答模糊 → 追问："第一页通常是标题页，从第二页开始
   想放什么内容？比如：介绍、数据、方案对比、团队信息等？"

第 4 轮：补充细节

根据前三轮收集到的信息，判断是否还需要其他细节。
如果用户已提供足够信息，跳过此轮直接进入 1c 优化阶段。

用户退出条件：在任何一轮中，如果用户明确表示"就这样"、"先这样"、"可以了"或不再提供有效信息，立即终止提问流程。使用已收集到的信息进入 1c 优化阶段，缺失信息在 1c-iii 中按 P0/P1 推断补充，不得无限循环追问。

1c. 项目需求提示词优化阶段

当所有提问轮次完成、用户不再提供新的输入后，在生成项目文件之前，必须将收集到的所有用户需求进行系统性优化分析。这一阶段完整借鉴 prompt-optimizer 的 12 维度分析框架，确保项目需求完整、精确、无遗漏，每项优化必须有完整的逻辑推理链可追溯。

1c-i. 结构化需求整合

将 1a 和 1b 收集到的所有信息整合为一份结构化的"项目需求简报"：

## 项目需求简报

### 【核心信息】
- 演示标题：[用户指定的标题]
- 视觉风格：[用户指定的风格]
- 幻灯片数量：[用户指定的页数]
- 各页内容概要：[用户指定的逐页内容]

### 【设计参数】
- 配色方案：[深色/浅色 + 主色调]
- 字体偏好：[衬线/无衬线 + 具体字体]
- 过渡效果：[过渡类型，默认fade]
- 特殊要求：[用户提出的任何额外要求]

数据完整性检查：整合完成后，确认简报覆盖了 Step 1a 必需程度表中的所有 ★★★ 项。如果有遗漏，返回 Step 1b 补充提问，不进入优化阶段。

1c-ii. 12 维度系统性分析（PPT 项目需求版）

借鉴 prompt-optimizer 的 12 维度分析框架（来源：Anatomy of a Prompt 学术框架 DOI: 10.5281/ZENODO.18527762 及 GOLDEN 检查清单 PromptBuilder.cc 2025，结合 Anthropic 官方提示词工程最佳实践），对整合后的需求简报进行逐项分析。每项分析必须引用用户原始需求中的具体内容作为依据，不得主观臆断。

分析执行规则：

• 逐项对照 12 个维度检查需求简报，为每个维度标记状态：
  • ✅ 完善 — 该维度信息充分，无需优化
  • ⚠️ 需细化 — 有基本信息但不够具体，需要基于逻辑推断进行补充细化（在优化说明中标注推断依据）
  • ❌ 缺失 — 该维度信息完全缺失，需要基于已有信息进行合理推断补充（在优化说明中标注"基于[已有信息]的合理推断"）
  • — 不适用 — 该维度不适用于当前项目（如纯内部演示不需要"边界与安全"）
• 每项判断必须引用用户原始需求中的具体表述作为依据，禁止仅凭主观感受下结论
• 如果某维度在分析过程中发现需要用户额外确认（如涉及敏感数据），记录下来在 1c-iv 完成后向用户说明

1c-iii. 优化执行（基于逻辑推断的精确优化）

基于 12 维度分析结果，对项目需求简报进行逐项优化。每项优化必须有完整的推理链，格式为：

问题[用户需求原文] → 维度分析[#维度 + 状态标记 + 分析结论] → 优化决策[补充/细化/保持] → 优化结果[优化后的需求内容]

优化优先级分级（继承自 prompt-optimizer 的 P0/P1/P2 体系）：

维度分析与优化操作的对应关系（引用自 prompt-optimizer 的策略体系）：

不可执行的优化操作（引用自 prompt-optimizer 的禁止操作列表）：

• ❌ 不得添加与原始需求无关的新内容（如用户没提竞品分析，不主动添加竞品页）
• ❌ 不得删除或弱化用户明确指定的要求（如用户说"要大字"，不得缩小字号）
• ❌ 不得改变用户指定的核心信息（如用户说标题是"Q2 总结"，不得改成"年度报告"）
• ❌ 不得用自己的知识补充原文没有的事实性数据（如用户说"展示营收"，不用实际公司数据，使用"示例数据"标注）
• ❌ 不得为简单项目过度工程化（1-2 页的简单演示不需要复杂的动画和过渡编排）

1c-iv. 输出优化后的项目规约

优化完成后，将优化结果整理为格式化的项目规约。项目规约是 Step 1d 生成项目文件的唯一依据，格式如下：

## 优化后的项目规约

### 项目元信息
- 项目名称（目录名）：[kebab-case，如 product-launch]
- 演示标题：[完整标题]
- 幻灯片总数：[N]

### 设计主题规约
- 背景色（--bg）：[色值]    /* 依据：风格 → 深色/浅色 → 具体色值 */
- 背景辅助色（--bg-alt）：[色值]
- 主文字色（--text）：[色值]
- 次要文字色（--text-secondary）：[色值]
- 强调色（--accent）：[色值]
- 强调悬浮色（--accent-hover）：[色值]
- 边框色（--border）：[色值]
- 展示字体（--font-display）：[字体名]
- 正文字体（--font-body）：[字体名]
- 幻灯片内边距（--slide-padding）：[值，默认4rem]
- 过渡时长（--transition-duration）：[值，默认0.6s]
- 过渡缓动（--transition-easing）：[值，默认cubic-bezier(0.16, 1, 0.3, 1)]
- 过渡类型：[trans-* 类名]

### 内容结构规约
- 第 1 页（标题页）：标题/副标题/布局（居中）/动画（fade-in + delay）
- 第 2 页：[标题/内容/布局/动画]
- 第 3 页：[标题/内容/布局/动画]
- ...

### 优化说明
| 维度 | 状态 | 原需求 | 优化后 | 推理链 |
|------|------|--------|--------|--------|
| 1-风格基调 | ⚠️ 需细化 | "科技风格" | 深色背景 #0a0e1a + 亮蓝色 #3b82f6 | 科技风格通常对应深色+蓝色系，推断依据：科技行业设计惯例 |
| 2-内容结构 | ✅ 完善 | "第1页标题，第2页介绍，第3页数据" | 3 页幻灯片，内容明确 | 用户已提供完整内容结构，无需优化 |
| 3-受众背景 | ❌→P1 | 未提供 | 推断为内部技术团队演示 | 演示主题为技术产品，推断依据：内容涉及技术细节 |
| ... | ... | ... | ... | ... |

### 优化统计
- P0（阻塞性缺失/必补）：N 项
- P1（重要细化/建议）：N 项
- P2（锦上添花/可选）：N 项

优化规约质量检查：输出前确认以下条件全部满足：

• 所有 ★★★ 必需信息（标题、风格、页数、内容）均已明确
• :root CSS 变量值全部可确定（至少 --bg、--text、--accent、--font-display、--font-body）
• 每页的内容和布局已明确到可填充 HTML 的程度
• 优化说明中每项推断都标注了依据

1d. 生成项目文件

1. 读取模板文件 ppt-slide-builder/templates/base.html，根据优化后的项目规约填充：

   • {{PRESENTATION_TITLE}} → 规划中的演示标题
   • {{TITLE}} / {{SUBTITLE}} → 第一页标题/副标题
   • {{SLIDE2_TITLE}} / {{SLIDE2_CONTENT}} → 第二页内容（如果项目只有一页，则删除模板中第二个 slide 区块从 <!-- SLIDE: slide-2 --> 到 <!-- /SLIDE --> 的全部内容）
   • {{SLIDE_COUNT}} → 规划中的幻灯片总数
   • {{PROGRESS_PERCENT}} → 初始进度百分比（1/总数 × 100）
   • 主题变量：按照规划中的设计主题规约修改 :root CSS 变量（--bg、--text、--accent、--font-display、--font-body 等）
   • 过渡：按照规划中的过渡类型设置 trans-* 类
   • 各页内容：按照内容结构规约生成每页的 HTML，包括标题、正文、列表、图表、布局和动画 class

2. 创建工作目录并生成文件：

   • 创建目录 ./<project-name>/
   • 使用 Write 生成 index.html

3. 打开浏览器预览：start "" "./<project-name>/index.html"

1e. 质量检查与输出报告

生成文件后、向用户报告之前，执行质量检查和输出报告。借鉴 web-ui-builder 的 AI Slop Test 机制。

PPT 质量检查清单：

• 每页幻灯片是否填充了真实内容（用户已提供）或合理的示例内容（用户未提供时），而非空白页？
• 幻灯片之间的过渡效果是否一致（全局统一过渡，不混用多种）？
• 演示的配色方案是否与指定的风格一致（科技蓝→蓝色系，极简黑→黑白系等）？
• 标题字体是否使用了展示字体（--font-display），正文字体是否使用了正文字体（--font-body）？
• 是否有至少一页包含错落入场动画（anim-delay-N），而非所有元素同时出现？
• 页面是否适配移动端（在浏览器中缩小窗口测试：导航栏不应溢出，文字不应过小）？
• 是否存在 <section> 标签未闭合或 CSS 注释不匹配等 HTML 结构问题？
• 鼠标点击幻灯片空白区域是否能翻到下一页（点击按钮/链接不应触发翻页）？
• 鼠标滚轮向下滚动是否能翻到下一页、向上滚动翻到上一页？

以上任何一项为"否"，必须在向用户报告之前修正。

输出报告内容：

## 生成报告

### 文件信息
- **项目路径**：`<project-name>/index.html`
- **演示标题**：[标题]
- **幻灯片总数**：[N]
- **过渡效果**：[过渡类型]

### 设计摘要
- **风格基调**：[风格]
- **配色**：[主色 + 背景色描述]
- **字体**：[展示字体 + 正文字体]
- **动画**：[使用的动画类型和错落延迟说明]

### 内容结构
- 第 1 页：[标题] / [布局]
- 第 2 页：[标题] / [布局]
- ...

### 自定义修改指引
- **修改主题**：打开 index.html，找到 `/* ========== THEME ========== */` 区块，修改 `:root` 中的 CSS 变量值
- **修改内容**：找到 `<!-- SLIDE: slide-N -->` 和 `<!-- /SLIDE -->` 之间的 HTML 直接编辑
- **更换过渡**：修改 `<div class="presentation" id="presentation">` 上的 `trans-*` 类名
- **调整动画**：在目标元素的 `class` 属性中添加/移除 `anim-*` 和 `anim-delay-*` 类
- **浏览器兼容性**：`color-mix()` 用于导航栏背景，需 Chrome 111+ / Firefox 113+ / Safari 16.2+。如需兼容旧浏览器，将 `.slide-nav` 的 `background` 替换为纯色 `var(--bg-alt)`

### 导航方式
- **键盘**：`←` / `↑` 上一页 · `→` / `↓` / `Space` 下一页 · `Home` 首尾 · `End` 最后一页
- **鼠标点击**：点击幻灯片空白区域（非按钮/链接/输入框）自动翻到下一页
- **鼠标滚轮**：向下滚动翻下一页，向上滚动翻上一页
- **触摸**：左右滑动翻页

CDN 与外部资源验证：如果生成的 HTML 中包含任何外部资源 URL（如用户提供的图床链接或占位图服务），必须使用 WebSearch 验证该 URL 当前是否有效。失效时使用 CSS 纯色占位块代替图片引用，并向用户报告该 URL 不可用。

Step 2: 添加新幻灯片

1. 确认幻灯片内容：如果用户只说"加一页"但没有说明内容，必须追问：

   "新幻灯片想展示什么内容？比如：
    · 标题 + 正文（适合章节过渡页）
    · 标题 + 列表（适合要点列举）
    · 标题 + 图片（适合展示页）
    · 双栏布局（适合对比内容）
    · 引用/引文页（适合名人名言）
    你想要哪种布局？内容是什么？"
   

   如果用户只给了内容但没给布局，根据内容类型自动选择最合适的布局并告知用户。

2. 读取目标项目的 index.html，定位到 </div>（.presentation 的关闭标签）之前的最后一条 <!-- /SLIDE --> 注释。

3. 生成新幻灯片 HTML，包含：

   • 唯一的 id="slide-N"（N 为当前最大编号 + 1）
   • 正确的 data-slide="N" 属性
   • 递增的 aria-label="Slide N" 和 role="region"
   • 初始 class="slide"（不含 active）
   • aria-hidden="true"

4. 在最后一个 <!-- /SLIDE --> 之后、</div> 之前插入新幻灯片。

5. 更新 HTML 中所有页码相关位置：

   • #slideTotal 元素：修改其文本内容为旧总数 +1
   • 如果存在进度条初始宽度 #slideProgress 的 style 属性，将百分比更新为 (1 / 新总数 × 100)
   • JavaScript 中的 slides.length 会自动适应（基于 DOM 查询），无需修改 JS 逻辑

6. 确认 .presentation 中 .slide 元素的总数与 #slideTotal 显示的数值一致。

7. 规范要求：

   • 新幻灯片必须放在最后（不允许插入到中间，避免破坏编号连续性）
   • 幻灯片 ID 必须连续递增，不允许出现跳号
   • 新幻灯片内容根据用户需求填充，使用真实内容而非占位文本
   • 每次添加后立即更新导航栏的页码总数

Step 3: 修改幻灯片内容

1. 用户指定要修改的幻灯片编号（如"修改第 3 页"）和新的内容。

2. 读取 index.html，使用 <!-- SLIDE: slide-N --> 和 <!-- /SLIDE --> 标记精确定位目标幻灯片区域。

3. 使用 Edit 工具替换该幻灯片 <section>...</section> 内的内容，不修改标记行本身。

4. 规范要求：

   • 不得修改 <!-- SLIDE: slide-N --> 和 <!-- /SLIDE --> 标记
   • 不得修改幻灯片的 id、data-slide、role 属性
   • 不得修改其他幻灯片的内容
   • 修改后确认 HTML 结构完整（标签匹配）
   • 如果用户只要求修改内容，不要在修改过程中改变动画 class

Step 4: 添加图片到幻灯片

支持用户通过自然语言指令向指定幻灯片的指定位置添加图片，图片来源支持本地文件和网络图床链接。

1. 解析用户指令，提取三个关键参数。缺失任何一项必须追问：

   • 目标幻灯片：用户说"第 N 页"或"第 N 张"。缺失时问："要添加到第几页？"
   • 图片位置：用户说"左上角"、"右上角"、"居中"、"标题下方"、"列表右侧"、"右下角"、"左下角"、"底部"等。缺失时问："放在页面哪个位置？比如：居中、标题下方、右上角、右下角等"
   • 图片来源：用户提供本地文件路径（如 C:\photos\chart.png）或网络 URL（如 https://example.com/image.jpg）。缺失时问："图片是本地文件还是网络链接？请提供路径或 URL"

2. 处理图片来源，区分两种方式：

   方式 A — 网络图片（图床链接）：

   • 使用 WebSearch 验证 URL 是否有效（搜索 "<域名>" image hosting status 检查图床服务可用性）
   • 验证 URL 文件扩展名是否为常见图片格式（.png, .jpg, .jpeg, .gif, .webp, .svg），无扩展名时先尝试直接使用，在质量检查中验证显示
   • 如果 URL 无法访问，向用户报告并提供替代方案（使用 CSS 占位块或建议重新提供 URL）

   方式 B — 本地图片文件：

   • 使用 Bash 确认文件存在：ls "<file-path>" 2>/dev/null
   • 检查扩展名是否为常见图片格式
   • 创建项目图片目录：mkdir -p "./<project-name>/images/"
   • 复制文件到项目目录：cp "<source-path>" "./<project-name>/images/<filename>"
   • 在 HTML 中使用相对路径引用：images/<filename>
   • 禁止使用绝对路径引用本地文件（复制后使用相对路径）

3. 定位目标幻灯片：在项目 index.html 中使用 <!-- SLIDE: slide-N --> 标记定位。

4. 确定 HTML 插入位置，根据用户指定的位置描述：

   用户描述	对应插入位置
   "居中"、"中间"、"中心"	在 slide 内部 <div class="content-center"> 末尾追加，或创建该容器
   "标题下方"、"标题下"	在第一个 <h1> 或 <h2> 标签之后插入
   "左上"、"左上角"	创建 position:absolute;top:1rem;left:1rem 定位的元素
   "右上"、"右上角"	创建 position:absolute;top:1rem;right:1rem 定位的元素
   "左下"、"左下角"	创建 position:absolute;bottom:1rem;left:1rem 定位的元素
   "右下"、"右下角"	创建 position:absolute;bottom:1rem;right:1rem 定位的元素
   "底部"、"底端"	在 slide 内部末尾追加（</section> 之前）
   "右侧"、"右边"	将图片放在 .content-left 同级，使用 flex 或 grid 包裹

5. 生成图片 HTML，包含以下结构和属性：

   <!-- 方式 A：网络图片 -->
   <figure class="slide-image" style="margin:1em 0;">
     <img src="https://example.com/image.jpg" alt="用户提供的描述或默认描述" loading="lazy"
          style="max-width:100%;height:auto;border-radius:8px;">
     <figcaption style="text-align:center;font-size:0.85em;color:var(--text-secondary);margin-top:0.5em;">
       [可选图注]
     </figcaption>
   </figure>
   
   <!-- 方式 B：定位图片（如右上角） -->
   <div class="slide-image" style="position:absolute;top:1rem;right:1rem;max-width:30%;">
     <img src="images/logo.png" alt="描述" style="max-width:100%;height:auto;">
   </div>

6. 使用 Edit 工具在目标位置插入图片 HTML。如果指定位置的元素不存在（如用户说"标题下方"但该页没有标题），回退到 slide 末尾追加。

7. 规范要求：

   • 所有 <img> 标签必须包含 alt 属性（可访问性要求），内容为用户对图片的描述或默认说明
   • 网络图片 URL 必须先使用 WebSearch 验证可用性
   • 本地图片必须复制到项目 images/ 目录，使用相对路径引用，禁止绝对路径
   • 图片默认添加 class="slide-image"，便于后续 CSS 选择器统一调整
   • 图片宽度默认 max-width:100% 确保不超出幻灯片边界，高度自动等比缩放
   • 添加后建议用户预览确认图片显示正常

Step 5: 为元素添加入场动画

1. 用户指定目标幻灯片编号和要添加动画的元素（如"第 3 页的标题加动画"）。

2. 读取 index.html，根据 <!-- SLIDE: slide-N --> 标记定位目标幻灯片。

3. 根据 references/animation-reference.md 选择动画类型，在目标元素的 class 属性中添加：

   • 一个动画类名（如 anim-fade-in、anim-slide-up 等）
   • 按需添加 anim-delay-N 控制延迟

4. 规范要求：

   • 只修改目标元素的 class 属性，不改变元素内容或结构
   • 如果目标元素已有其他动画类，先移除再添加新类（不叠加多个动画）
   • 延迟值 anim-delay-N 中的 N 不超过 10
   • 一个幻灯片中动画元素建议不超过 5 个
   • 不得修改 <!-- SLIDE: --> 标记或幻灯片容器属性

Step 6: 修改页面过渡效果

1. 用户指定要使用的过渡类型（如"改成缩放过渡"）。

2. 读取 index.html，定位到 <div class="presentation" id="presentation"> 行。

3. 从 references/animation-reference.md 中选择过渡类名（trans-fade、trans-slide-left、trans-zoom 等）。

4. 使用 Edit 替换 presentation 容器上的过渡类名。注意区分首次设置和修改已有过渡：

   • 首次设置（模板中无 trans-* 类）：

     旧: <div class="presentation" id="presentation">
     新: <div class="presentation trans-zoom" id="presentation">
     

   • 修改已有过渡（已有 trans-slide-left 等）：

     旧: <div class="presentation trans-slide-left" id="presentation">
     新: <div class="presentation trans-zoom" id="presentation">
     

5. 规范要求：

   • 只修改 presentation 容器类名中的 trans-* 部分
   • 不得移除 presentation 类或 id="presentation"
   • 每次只设置一种过渡类型（不叠加多个 trans-*）

Step 7: 修改主题样式

1. 用户指定新的主题要求（如"改成深色模式"、"换蓝色主题"）。

2. 如果用户要求模糊（如只说了"换个主题"或"换个颜色"），必须追问具体方向：

   "想换成什么风格？比如：
    · 科技蓝 —— 专业、冷静、适合技术类内容
    · 极简黑 —— 高端、简洁、适合设计感强的内容
    · 温暖橙 —— 亲和、活力、适合分享类内容
    · 商务风 —— 正式、清晰、适合工作汇报
    · 自然绿 —— 清新、健康、适合环保/生活类内容
    · 自定义 —— 你指定主色和背景色
    或者你有其他想法？"
   

   如果用户说"自定义"，追问具体的主色色值和背景色偏好。

3. 读取 index.html，定位到 /* ========== THEME ========== */ 注释标记。

4. 修改 :root 中的 CSS 变量：

   • --bg — 背景色
   • --text — 主文字色
   • --text-secondary — 次要文字色
   • --accent — 强调色
   • --font-display — 展示字体
   • --font-body — 正文字体
   • 其他变量按需调整

5. 规范要求：

   • 只修改 /* ========== THEME ========== */ 区块内的变量值
   • 不删除或重命名 CSS 变量（只改值）
   • 不修改 /* ========== SLIDE TRANSITIONS ========== */ 或 /* ========== ELEMENT ANIMATIONS ========== */ 区块
   • 确保修改后所有幻灯片立即可用（变量名统一）

Step 8: 删除幻灯片

1. 用户指定要删除的幻灯片编号。

2. 读取 index.html，定位到 <!-- SLIDE: slide-N --> 到 <!-- /SLIDE --> 之间的完整区块。

3. 使用 Edit 工具精确匹配从 <!-- SLIDE: slide-N --> 到 <!-- /SLIDE --> 的全部内容，替换为空字符串。

4. 删除后重新编号所有后续幻灯片，需要更新的属性包括：

   • id="slide-N" → id="slide-(N-1)"
   • data-slide="N" → data-slide="(N-1)"
   • aria-label="Slide N" → aria-label="Slide (N-1)"
   • <!-- SLIDE: slide-N --> 注释 → <!-- SLIDE: slide-(N-1) -->
   • 导航栏 #slideTotal 显示总数减 1
   • 进度条初始 style="width:..." 重新计算为 (1 / 新总数 × 100)%

5. 注意：aria-hidden 属性为布尔值（"true" / "false"）不包含编号，无需修改。JavaScript 中的 slides.length 基于 DOM 查询自动适应，无需手动修改。

6. 规范要求：

   • 删除前向用户确认幻灯片编号和内容
   • 删除后必须重新编号（不允许出现编号空洞）
   • 重新编号时，只改编号数字，不改内容和 class

Step 9: 预览演示

1. 使用 Bash 执行 Windows 命令在默认浏览器中打开：

   start "" "./<project-name>/index.html"
   

2. 向用户说明所有导航方式：键盘方向键翻页、鼠标滚轮翻页、点击空白区域翻页、触摸滑动翻页。

Constraints

项目管理规则

• Always 所有 PPT 项目文件保存在当前工作目录下的 ./<project-name>/index.html
• Always 每个项目是一个独立的目录（<project-name>/），以 index.html 为入口文件
• Always 每个 slide 必须包含 id="slide-N"、data-slide="N"、role="region"、aria-label="Slide N" 属性
• Always 每次操作前先使用 Read 读取当前项目文件，确认文件结构和现有 slide 列表
• Always 操作完成后使用 Read 验证结果，确认 HTML 结构完整

幻灯片编号规则

• Always slide ID 从 1 开始递增，不允许跳号或重复
• Always 添加 slide 时追加到末尾（最大 ID + 1）
• Always 删除 slide 后重新编号所有后续 slide
• Always 使用 <!-- SLIDE: slide-N --> 和 <!-- /SLIDE --> 注释标记每个 slide 的精确范围
• Never 在删除 slide 时修改其他 slide 的内容（只改编号属性）

主题与样式规则

• Always 主题统一通过 :root CSS 变量控制，不内联样式覆盖主题（除非用户明确要求）
• Always 修改主题只改 /* ========== THEME ========== */ 区块，不动动画和过渡区块
• Never 在单个 slide 中硬编码颜色/字体值（始终使用 CSS 变量引用）
• Never 为单个 slide 单独设置不同的过渡效果（过渡是全局的）

动画规则

• Always 动画通过 CSS class 实现，不写内联 animation 属性
• Always 元素动画类名从 references/animation-reference.md 中选择
• Always 每个元素最多一个动画类 + 一个延迟类
• Always 延迟值从 anim-delay-1 到 anim-delay-10（对应 0.1s 到 1.0s）
• Never 在 /* ========== ELEMENT ANIMATIONS ========== */ 区块之外（CSS 注释标记）定义新的动画 keyframes

操作安全规则

• Always 任何删除操作前向用户确认目标和影响范围
• Always 使用 Edit 工具时通过唯一标记（注释、id）匹配，不用行号
• Always 如果修改涉及多个位置（如删除 + 重新编号），按顺序逐个编辑
• Never 使用 Write 重写整个项目文件（应使用 Edit 精确修改）
• Never 修改 ppt-slide-builder/templates/base.html 模板文件

图片处理规则

• Always 所有 <img> 标签必须包含 alt 属性，内容为用户描述的图片内容或功能性说明
• Always 网络图片 URL 在引用前必须使用 WebSearch 验证可用性
• Always 本地图片必须复制到项目 images/ 目录中使用相对路径引用，禁止在 HTML 中使用绝对路径
• Always 复制本地图片前先创建 images/ 目录（mkdir -p <project-name>/images/）
• Always 验证图片来源的文件扩展名是否为常见图片格式（.png, .jpg, .jpeg, .gif, .webp, .svg）
• Always 图片宽度默认 max-width:100% 配合 height:auto 确保不溢出幻灯片且等比缩放
• Never 在 HTML 中使用 file:// 协议引用本地图片（会导致浏览器安全策略阻止加载）

项目需求优化规则

• Always 在 Step 1c（提示词优化阶段），对整合后的需求简报执行完整的 12 维度分析，逐项检查每个维度的状态（完善/需细化/缺失/不适用）
• Always Step 1c 中的每项优化判断必须引用用户原始需求的具体表述作为依据，禁止主观臆断
• Always 每项优化必须标注完整的推理链：原文引用 → 维度分析 → 优化决策 → 优化结果
• Always 按照 P0（阻塞性缺失/必补）、P1（重要细化/建议）、P2（锦上添花/可选）三级分级标注优化优先级，让用户理解每项优化的重要性
• Always Step 1d 生成项目文件时，必须严格按照 1c-iv 输出的项目规约执行，不得自行增减内容
• Always 优化完成后输出优化统计（P0/P1/P2 各多少项），让用户了解优化覆盖范围
• Never 在优化阶段添加用户原始需求中不存在的新内容（如用户没提的页面类型）
• Never 在优化阶段删除或弱化用户明确指定的要求
• Never 用自己的知识补充事实性数据（使用"示例数据"标注）

用户提问规则

• Always 在 Step 1（初始化项目）中，检查用户是否提供了所有必需信息（标题、风格、页数、内容）。缺失任何一项，必须逐轮提问，一次只问 1-2 个问题
• Always 提出的每个问题必须附带具体选项示例（如"科技蓝、极简黑、温暖橙"），帮助用户快速决策，而非只问开放式问题
• Always 用户回答模糊时，追问细化（如"科技风格"→追问"深色背景还是浅色背景？"）
• Always Step 2（添加幻灯片）中用户未指定内容时，追问新幻灯片的内容和布局
• Always Step 7（修改主题）中用户要求模糊时，追问具体风格方向
• Never 一次性提问超过 2 个问题（避免信息过载，让用户不知所措）
• Never 在用户未给出明确指示时，自行假设并直接生成项目（必须先问清楚再动手）

Examples

✅ Do This — 用户输入模糊时主动提问

输入："帮我做个 PPT"

正确做法 — 逐轮提问收集信息：

第 1 轮（检测到标题和风格都缺失）： → "演示的主题/标题是什么？想要什么视觉风格？比如： · 科技蓝 —— 深蓝背景 + 亮色文字，适合技术/产品发布 · 极简黑 —— 黑白配色 + 简洁排版，适合高端/设计感 · 温暖橙 —— 暖色系 + 亲和力，适合分享/教育 · 商务风 —— 浅色背景 + 蓝色点缀，适合正式汇报 或者你有其他想法？"

用户回答："做一个产品发布的演示，科技蓝风格"

第 2 轮（风格已确定，追问配色细节）： → "好的，科技蓝风格。倾向于深色背景还是浅色背景？主色调用亮蓝色还是偏深蓝？"

用户回答："深色背景，亮蓝色"

第 3 轮（追问页数和内容）： → "大概需要几页？我先创建一个框架。比如： · 3 页：标题页 + 产品介绍 + 核心优势 · 5 页：标题页 + 市场分析 + 产品介绍 + 核心优势 + 团队信息 或者你可以告诉我每页想展示什么内容？"

用户回答："先做 3 页：标题、产品介绍、核心优势"

第 4 轮（补充细节）： → "产品名称是什么？第一页副标题写什么？产品和核心优势的具体要点是什么？"

收集完所有信息后，生成项目文件。

✅ Do This — 提示词优化阶段（完整流程）

输入：经过 Step 1a/1b 收集后的需求简报：

演示标题：2025 年度技术回顾
视觉风格：科技蓝（深色背景）
幻灯片数量：3
第1页：标题页（年度技术回顾）
第2页：技术趋势介绍
第3页：核心数据展示

正确做法 — 执行 12 维度分析 + 优化：

Step 1c-ii 分析摘录（内部决策过程）：

维度1-风格基调：⚠️ 需细化 → "科技蓝"可转化为配色方案
  引用原文: "科技蓝（深色背景）"
  → 深色背景 #0a0e1a + 亮蓝色 #3b82f6 + 浅色文字 #e8edf5

维度2-内容结构：⚠️ 需细化 → "技术趋势介绍"和"核心数据展示"需具体化
  引用原文: "第2页：技术趋势介绍" / "第3页：核心数据展示"
  → 第2页：5 项技术趋势列表 + 逐项错落动画
  → 第3页：4 个 KPI 数字 + 示例数据 + bounce-in 动画

维度3-受众背景：❌→P1 缺失 → 推断为技术团队
  依据：内容涉及技术趋势，推断目标受众为技术从业者
  → 允许使用技术术语，图表复杂度中等

维度5-约束条件：⚠️→P1 缺失 → 补充过渡和动画约束
  依据：用户未指定过渡偏好
  → 使用默认 trans-slide-left 过渡，每页动画数量保持在 3-5 个

维度9-内容数据：❌→P1 缺失 → 使用示例数据
  依据：第3页需要数据展示但用户未提供具体数字
  → 使用合理的示例数据并标注"示例数据，请替换为实际值"

项目规约输出（1c-iv）：

## 优化后的项目规约

### 项目元信息
- 项目名称：tech-review-2025
- 演示标题：2025 年度技术回顾
- 幻灯片总数：3

### 设计主题规约
- --bg: #0a0e1a         /* 深色科技风背景 */
- --bg-alt: #111827      /* 卡片/代码块背景 */
- --text: #e8edf5        /* 浅色主文字 */
- --text-secondary: #94a3b8  /* 次要文字 */
- --accent: #3b82f6      /* 科技蓝强调色 */
- --accent-hover: #2563eb
- --border: #1e293b
- --font-display: 'Inter', sans-serif
- --font-body: 'Inter', sans-serif
- --slide-padding: 4rem
- --transition-duration: 0.6s
- 过渡类型：trans-slide-left

### 内容结构规约
- 第1页（标题页）："2025 年度技术回顾" / "回顾过去，展望未来" / 居中布局 / anim-fade-in
- 第2页（趋势页）："2025 关键技术趋势" / 5 项列表 左对齐 / 每项 anim-slide-up + 错落 delay
- 第3页（数据页）："核心指标" / 4 个 KPI 卡片 2×2 网格 / 每个数字 anim-bounce-in + 错落 delay / 示例数据

### 优化说明
| 维度 | 状态 | 原需求 | 优化后 | 推理链 |
|------|------|--------|--------|--------|
| 1-风格 | ⚠️ | "科技蓝深色" | 配色方案如上 | 科技蓝→蓝色系，深色→深背景 |
| 2-内容 | ⚠️ | "第2页趋势" | 5项列表+动画 | 趋势介绍用列表最清晰 |
| 3-受众 | ❌→P1 | 未提供 | 技术团队 | 内容涉及技术趋势 |
| 5-约束 | ⚠️→P1 | 未提供 | 默认 trans-slide-left | 用户未指定过渡类型 |
| 9-数据 | ❌→P1 | 未提供 | 示例KPI数据 | 展示数据页需要填充 |

### 优化统计
P0：0 项 | P1：3 项 | P2：0 项
→ 无阻塞性缺失，可以直接生成。

✅ Do This — 初始化项目

输入："创建一个科技风格的 PPT，标题是'2025 年度技术回顾'，蓝色主题"

操作：

1. 读取 templates/base.html 模板
2. 修改 :root 主题变量：
   • --bg: #0a0e1a（深色背景）
   • --text: #e8edf5（亮色文字）
   • --accent: #3b82f6（科技蓝）
   • --font-display: 'Inter', sans-serif
   • --font-body: 'Inter', sans-serif
3. 替换占位符：标题 → "2025 年度技术回顾"
4. 创建文件 ./tech-review-2025/index.html
5. 浏览器中打开

结果：一个深蓝色科技风格的双页演示，第一页标题 + 副标题，第二页内容区。

✅ Do This — 添加幻灯片

输入："在第 2 页后面加一页，展示技术趋势列表"

操作：

1. 读取 ./tech-review-2025/index.html
2. 在 <!-- /SLIDE -->（slide-2）之后插入新 slide：

   <!-- SLIDE: slide-3 -->
   <section id="slide-3" class="slide" data-slide="3" role="region" aria-label="Slide 3" aria-hidden="true">
     <div class="content-left">
       <h2 class="anim-slide-up">2025 技术趋势</h2>
       <ul>
         <li class="anim-slide-up anim-delay-1">AI Agent 全面进入生产环境</li>
         <li class="anim-slide-up anim-delay-2">边缘计算与云原生深度融合</li>
         <li class="anim-slide-up anim-delay-3">量子计算在 NLP 领域的突破</li>
       </ul>
     </div>
   </section>
   <!-- /SLIDE -->

3. 更新 #slideTotal 和进度条

✅ Do This — 修改幻灯片过渡

输入："把翻页过渡改成缩放效果"

操作：

1. 定位 <div class="presentation" id="presentation">
2. 使用 Edit：

   旧: <div class="presentation" id="presentation">
   新: <div class="presentation trans-zoom" id="presentation">
   

✅ Do This — 删除幻灯片

输入："删除第 2 页"

操作：

1. 定位 <!-- SLIDE: slide-2 --> 到 <!-- /SLIDE -->
2. 移除该区块
3. 重新编号：slide-3 → slide-2（只改编号，不改内容）
4. 更新导航和页码

✅ Do This — 添加图片到幻灯片

输入："在第 1 页右上角添加 logo 图片，用本地文件 C:\logos\company-logo.png"

操作：

1. 检查文件存在：ls "C:\logos\company-logo.png" → 确认文件存在
2. 验证扩展名：.png → 合法图片格式
3. 创建目录：mkdir -p "./tech-review-2025/images/"
4. 复制文件：cp "C:\logos\company-logo.png" "./tech-review-2025/images/company-logo.png"
5. 定位 <!-- SLIDE: slide-1 -->，在 slide 内部插入定位元素：

   <div class="slide-image" style="position:absolute;top:1rem;right:1rem;max-width:15%;">
     <img src="images/company-logo.png" alt="公司 Logo" style="max-width:100%;height:auto;">
   </div>

6. 确认 alt 属性存在、路径为相对路径、宽度限制已设置
7. 预览确认图片显示正常

输入："在第 3 页标题下方添加一张产品截图，用图床链接 https://img.example.com/product.png"

操作：

1. 使用 WebSearch 验证 img.example.com 是否可用 → 确认有效
2. 检查 URL 扩展名：.png → 合法
3. 定位 <!-- SLIDE: slide-3 -->，在第一个 <h2> 标签后插入：

   <figure class="slide-image" style="margin:1.5em 0;">
     <img src="https://img.example.com/product.png" alt="产品功能截图" loading="lazy"
          style="max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);">
     <figcaption style="text-align:center;font-size:0.85em;color:var(--text-secondary);margin-top:0.5em;">
       图：产品核心功能界面
     </figcaption>
   </figure>

4. 验证 URL 有效（WebSearch 已确认）
5. 预览确认图片加载正常

❌ Not This

• 不使用 slide 标记注释直接搜索 <section> 标签来定位 slide（容易匹配错误）
• 添加 slide 时插入到中间位置（破坏编号连续性）
• 删除 slide 后不重新编号（后续 slide 留下空洞编号）
• 在单个 slide 的 style 属性中写颜色值（覆盖全局主题，导致不一致）
• 同时使用多个 trans-* 类（如 trans-fade trans-zoom 造成冲突）
• 用 Write 重写整个项目文件只为了修改一个动画 class
• 修改模板文件 ppt-slide-builder/templates/base.html（影响未来所有新项目）
• 使用内联 style="animation: ..." 代替 class
• 用户说"做个PPT"后直接生成默认模板而不问风格/内容（用户拿到的不符合需求）
• 一次性问 5-6 个问题"标题是什么？风格是什么？多少页？每页内容？字体偏好？配色？"让用户不知所措
• 用户只说了"换个主题"就自行改成蓝色（应先问清楚具体方向）
• 用户说"加一页"就直接加空白页（应先问新幻灯片的内容和布局）
• 用户说"加图片"但不指定图片来源就直接使用占位图（应先确认是本地文件还是网络链接）
• 在 HTML 中使用 file:///C:/photos/image.png 绝对路径引用本地图片（浏览器安全策略阻止）
• 添加 <img> 标签时不写 alt 属性（违反可访问性标准）
• 网络图片 URL 未经 WebSearch 验证就直接使用（URL 可能已失效）
• 图片宽度设为固定值导致在移动端溢出（必须使用 max-width:100%）

Notes

• 每个演示项目是一个单文件 HTML，可独立复制到任何位置双击打开
• 演示支持五种导航方式：键盘方向键、鼠标滚轮、点击空白区域、屏幕导航按钮、触摸滑动
• 所有动画默认尊重 prefers-reduced-motion 系统设置
• 修改主题后所有现有 slide 自动生效（因为使用 CSS 变量）
• 如需更复杂的动画（时间线动画、SVG 路径动画等），需手动编辑 CSS
• 本 skill 不依赖任何外部库或 CDN，生成的文件完全离线可用
• 用户提问始终逐轮推进：一次只问 1-2 个问题，等回答后再问下一轮。不要一次性抛出一整份需求问卷
• 12 维度优化分析在提问完成后自动执行，优化结果通过项目规约输出，每项优化都附带完整的推理链（原文引用→维度分析→优化决策→优化结果）
• P0/P1/P2 分级体系帮助理解每项优化的重要性：P0=必补、P1=建议、P2=可选
• 质量检查在生成后自动执行（PPT 质量检查清单），通过后输出结构化的生成报告，包含文件信息、设计摘要、内容结构和自定义修改指引
• 添加图片到幻灯片（Step 4）支持本地文件和网络图床链接两种来源，自动处理文件复制/URL 验证和定位插入
• 本地图片复制到项目 images/ 目录后，index.html 保持自包含可移植性（图片目录需一起复制）
• 任何对外部 CDN 或占位图服务的引用，必须先使用 WebSearch 验证 URL 是否有效
• 如果用户已有幻灯片内容（文字、图片列表等），在创建时直接填入，不使用占位文本
• 如果用户需要图片，优先使用基于 CSS 的纯色占位块（<div style="width:100%;height:200px;background:var(--bg-alt);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);">图片占位</div>），避免依赖外部图片服务
• 每个项目目录名使用 kebab-case（如 tech-review-2025、product-launch）
• color-mix() 用于导航栏背景，需 Chrome 111+ / Firefox 113+ / Safari 16.2+。如需兼容旧浏览器，将 .slide-nav 的 background 替换为 var(--bg-alt)
• 详细动画和过渡参考见 references/animation-reference.md
• 12 维度分析框架基于 Anatomy of a Prompt 学术框架（DOI: 10.5281/ZENODO.18527762）和 GOLDEN 检查清单（PromptBuilder.cc 2025），结合 Anthropic 官方提示词工程最佳实践