| name | ppt-slide-builder |
| description | PPT-style web page builder with unified theming, slide management, element animations, and slide transitions. Creates self-contained HTML presentations with custom theme support. Enforces strict modification rules for project stability. Triggered by: "制作PPT", "PPT网页", "幻灯片", "演示页面", "presentation", "slide deck", "slide builder", "PPT风格", "添加动画", "页面过渡", "翻页动画", "新建幻灯片", "修改幻灯片", "删除幻灯片", "演示文稿", "slides", "ppt builder", "slide animation", "slide transition", "添加图片", "插入图片", "图片链接", "图床", "本地图片", "加图片", "放图片", "add image". |
| version | 1.3.0 |
| allowed-tools | Read Write Edit Glob Bash WebSearch |
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. 解析用户已提供的信息
解析用户输入，提取已明确给出的信息，逐项标记"已提供"或"缺失"：
| 信息项 | 必需程度 | 说明 |
|---|
| 演示标题 | ★★★ 必需 | "做一个某某主题的PPT"中的主题即为标题 |
| 视觉风格 | ★★★ 必需 | 科技蓝、极简黑、温暖橙、商务风、自然绿、复古风等 |
| 配色细节 | ★★☆ 建议 | 深色/浅色背景、主色调方向 |
| 幻灯片页数 | ★★★ 必需 | 用户没说时至少要知道 1-2 页的内容方向 |
| 各页内容 | ★★★ 必需 | 每页要展示的核心内容（标题+要点） |
| 字体偏好 | ★☆☆ 可选 | 衬线体/无衬线体，不指定则根据风格自动匹配 |
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 官方提示词工程最佳实践），对整合后的需求简报进行逐项分析。每项分析必须引用用户原始需求中的具体内容作为依据，不得主观臆断。
| # | 维度 | 分析子项 | PPT 项目中的对应检查 |
|---|
| 1 | 风格基调一致性 | ①风格描述是否足够具体到可转化为 CSS 变量值？②基调是否统一不矛盾？③是否需要细化色彩方向？ | 用户说"科技蓝" → 可转化为 --accent 色值；用户说"随便" → 基于演示标题的行业属性推断（如"年度技术回顾"→科技风深色+"随便"→简洁风格） |
| 2 | 内容结构完整性 | ①每页的内容是否明确到可填充 HTML？②是否有标题和主体内容的区分？③内容页面之间的逻辑关系是否清晰？ | "第 2 页放介绍" → 需要明确是纯文字/图文/列表；"展示数据" → 需要具体数据点或占位说明 |
| 3 | 上下文与受众背景 | ①演示的使用场景是内部还是外部？②目标受众是谁？③是否有品牌或公司背景约束？ | 内部汇报 → 风格可从简；对外发布 → 需要更精致；面对高管 → 结论前置；面对技术团队 → 可加详细数据 |
| 4 | 布局格式规范 | ①每页的布局类型是否明确？②是否需要特殊布局（对比/网格/全图/引文）？③是否有移动端适配的特殊要求？ | 纯文字页 → 左对齐内容布局；对比页 → 双栏 grid 布局；全图页 → 图片背景 + 文字叠加 |
| 5 | 约束条件完备性 | ①是否有品牌色/Logo 等必须使用的元素？②是否有必须避免的风格或内容？③是否有可访问性要求？ | "使用公司品牌色" → 锁定 --accent；"不要动画" → 禁用动画；"需要深色模式" → 需要手动添加 @media (prefers-color-scheme: dark) 媒体查询（模板默认不支持深色模式） |
| 6 | 参考与示例 | ①用户是否提供了参考例子或风格图片？②是否有标杆演示可以参考？③参考是否能转化为具体的设计参数？ | "像苹果发布会那样" → 极简黑 + 大标题 + 全屏图片风格；"像 TED 那样" → 深色背景 + 大字 + 居中 |
| 7 | 叙事逻辑引导 | ①幻灯片顺序是否有逻辑递进关系？②是否有故事主线？③是否需要章节过渡页？ | "介绍→问题→方案→优势→案例→团队" → 有完整故事线；"随意排" → 需要推断合理的叙述顺序 |
| 8 | 表达与语言风格 | ①演示的语言风格是否一致？②专业术语是否需要解释？③中英文混排是否需要规范？ | 技术演示：可用术语 + 英文；非技术演示：避免术语 + 全中文；双语演示：中英文对照 |
| 9 | 内容数据处理 | ①是否有图表或数据需要展示？②数据的格式和来源是否明确？③是否需要使用占位数据？ | "展示Q3营收" → 需要具体数字或标注"使用示例数据"；"团队照片" → 使用 placeholder 图片并标注替换 |
| 10 | 受众适配度 | ①目标受众对主题的先验知识如何？②受众最关心的信息是什么？③演示时长和节奏是否有要求？ | 高管 → 每页一个明确结论，数据用大数字展示；初学者 → 概念解释 + 类比；专家 → 深度内容 + 专业图表 |
| 11 | 边界与安全性 | ①内容是否涉及敏感或保密信息？②是否需要免责声明或标注？③竞品对比是否合适？ | 内部数据 → 使用模糊化示例数据；竞品对比 → 需要法务审核标注；未发布产品 → 添加"机密"水印 |
| 12 | 可迭代性 | ①该演示后续是否需要频繁修改？②是否需要预留扩展空间？③是否需要版本管理支持？ | 月度报告 → 保持模板化结构便于每月替换数据；一次性演示 → 可更精致但无扩展要求 |
分析执行规则：
- 逐项对照 12 个维度检查需求简报，为每个维度标记状态：
- ✅ 完善 — 该维度信息充分，无需优化
- ⚠️ 需细化 — 有基本信息但不够具体，需要基于逻辑推断进行补充细化（在优化说明中标注推断依据）
- ❌ 缺失 — 该维度信息完全缺失，需要基于已有信息进行合理推断补充（在优化说明中标注"基于[已有信息]的合理推断"）
- — 不适用 — 该维度不适用于当前项目（如纯内部演示不需要"边界与安全"）
- 每项判断必须引用用户原始需求中的具体表述作为依据，禁止仅凭主观感受下结论
- 如果某维度在分析过程中发现需要用户额外确认（如涉及敏感数据），记录下来在 1c-iv 完成后向用户说明
1c-iii. 优化执行（基于逻辑推断的精确优化）
基于 12 维度分析结果，对项目需求简报进行逐项优化。每项优化必须有完整的推理链，格式为：
问题[用户需求原文] → 维度分析[#维度 + 状态标记 + 分析结论] → 优化决策[补充/细化/保持] → 优化结果[优化后的需求内容]
优化优先级分级（继承自 prompt-optimizer 的 P0/P1/P2 体系）：
| 优先级 | 含义 | 必须执行？ | PPT 示例 |
|---|
| P0 — 阻塞性缺失 | 缺少此项将导致无法生成正确的 HTML 文件 | ✅ 必须补充 | 无配色方案 → 无法设置 CSS 变量；无每页内容 → 无法填充 slide |
| P1 — 重要细化 | 缺少此项将影响输出质量，但不会导致生成失败 | ⚠️ 建议补充 | 无字体偏好 → 可根据风格自动匹配；无过渡效果 → 使用默认 fade |
| P2 — 锦上添花 | 缺少此项不影响基本功能和外观 | 🔘 可选补充 | 无动画偏好 → 使用默认动画；无可迭代性要求 → 按标准结构生成 |
维度分析与优化操作的对应关系（引用自 prompt-optimizer 的策略体系）：
| 分析发现（Step 1c-ii） | 对应的优化操作 | 逻辑依据 |
|---|
| 风格描述模糊（维度1 ⚠️/❌） | 根据用户提供的模糊描述推断具体配色方案 | 风格决定 :root CSS 变量值，缺乏将导致主题无法生成 |
| 内容结构不完整（维度2 ❌） | 基于演示标题和已知信息推断合理的内容框架 | 无逐页内容时无法生成 <section> 元素 |
| 受众背景缺失（维度3 ⚠️） | 根据演示类型推断合适的语气和复杂度 | 受众影响字体大小、信息密度、色调选择 |
| 布局类型未指定（维度4 ⚠️） | 根据内容类型（文字/列表/图表）自动选择最优布局 | 内容决定布局，合理的布局提升可读性 |
| 约束条件不足（维度5 ⚠️/❌） | 根据演示场景添加合理的默认约束（如响应式、可访问性） | 合理的默认值确保基本质量和兼容性 |
| 参考示例缺失（维度6 —） | 跳过，不虚构参考 | 无参考时不应脑补风格参照物 |
| 叙述逻辑不清晰（维度7 ⚠️） | 重新排列幻灯片为合理的叙述顺序 | 逻辑顺序影响演示的说服力和流畅度 |
| 语言风格不确定（维度8 ⚠️） | 根据演示主题和受众设定默认语言风格 | 语言影响标题和正文的措辞方式 |
| 数据未提供（维度9 ❌） | 使用占位数据并明确标注需要替换 | 无数据时无法展示图表或数据页效果 |
| 受众适配度低（维度10 ⚠️） | 根据受众调整信息密度和深度 | 受众决定演示的详细程度和呈现方式 |
| 安全边界缺失（维度11 —/⚠️） | 根据内容类型判断是否需要安全标注 | 涉及敏感内容时必须添加保护措施 |
| 可迭代性未考虑（维度12 —） | 根据使用频率判断结构的灵活性 | 频繁使用的演示需要模板化设计 |
不可执行的优化操作（引用自 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 项
优化规约质量检查：输出前确认以下条件全部满足：
1d. 生成项目文件
-
读取模板文件 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
-
创建工作目录并生成文件：
- 创建目录
./<project-name>/
- 使用
Write 生成 index.html
-
打开浏览器预览：start "" "./<project-name>/index.html"
1e. 质量检查与输出报告
生成文件后、向用户报告之前，执行质量检查和输出报告。借鉴 web-ui-builder 的 AI Slop Test 机制。
PPT 质量检查清单：
以上任何一项为"否"，必须在向用户报告之前修正。
输出报告内容：
## 生成报告
### 文件信息
- **项目路径**：`<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: 添加新幻灯片
-
确认幻灯片内容：如果用户只说"加一页"但没有说明内容，必须追问：
"新幻灯片想展示什么内容？比如：
· 标题 + 正文（适合章节过渡页）
· 标题 + 列表（适合要点列举）
· 标题 + 图片（适合展示页）
· 双栏布局（适合对比内容）
· 引用/引文页（适合名人名言）
你想要哪种布局？内容是什么？"
如果用户只给了内容但没给布局，根据内容类型自动选择最合适的布局并告知用户。
-
读取目标项目的 index.html，定位到 </div>（.presentation 的关闭标签）之前的最后一条 <!-- /SLIDE --> 注释。
-
生成新幻灯片 HTML，包含：
- 唯一的
id="slide-N"（N 为当前最大编号 + 1）
- 正确的
data-slide="N" 属性
- 递增的
aria-label="Slide N" 和 role="region"
- 初始
class="slide"（不含 active）
aria-hidden="true"
-
在最后一个 <!-- /SLIDE --> 之后、</div> 之前插入新幻灯片。
-
更新 HTML 中所有页码相关位置：
#slideTotal 元素：修改其文本内容为旧总数 +1- 如果存在进度条初始宽度
#slideProgress 的 style 属性，将百分比更新为 (1 / 新总数 × 100)
- JavaScript 中的
slides.length 会自动适应（基于 DOM 查询），无需修改 JS 逻辑
-
确认 .presentation 中 .slide 元素的总数与 #slideTotal 显示的数值一致。
-
规范要求：
- 新幻灯片必须放在最后（不允许插入到中间，避免破坏编号连续性）
- 幻灯片 ID 必须连续递增，不允许出现跳号
- 新幻灯片内容根据用户需求填充，使用真实内容而非占位文本
- 每次添加后立即更新导航栏的页码总数
Step 3: 修改幻灯片内容
-
用户指定要修改的幻灯片编号（如"修改第 3 页"）和新的内容。
-
读取 index.html，使用 <!-- SLIDE: slide-N --> 和 <!-- /SLIDE --> 标记精确定位目标幻灯片区域。
-
使用 Edit 工具替换该幻灯片 <section>...</section> 内的内容，不修改标记行本身。
-
规范要求：
- 不得修改
<!-- SLIDE: slide-N --> 和 <!-- /SLIDE --> 标记
- 不得修改幻灯片的
id、data-slide、role 属性
- 不得修改其他幻灯片的内容
- 修改后确认 HTML 结构完整（标签匹配）
- 如果用户只要求修改内容，不要在修改过程中改变动画 class
Step 4: 添加图片到幻灯片
支持用户通过自然语言指令向指定幻灯片的指定位置添加图片，图片来源支持本地文件和网络图床链接。
-
解析用户指令，提取三个关键参数。缺失任何一项必须追问：
- 目标幻灯片：用户说"第 N 页"或"第 N 张"。缺失时问："要添加到第几页？"
- 图片位置：用户说"左上角"、"右上角"、"居中"、"标题下方"、"列表右侧"、"右下角"、"左下角"、"底部"等。缺失时问："放在页面哪个位置？比如：居中、标题下方、右上角、右下角等"
- 图片来源：用户提供本地文件路径（如
C:\photos\chart.png）或网络 URL（如 https://example.com/image.jpg）。缺失时问："图片是本地文件还是网络链接？请提供路径或 URL"
-
处理图片来源，区分两种方式：
方式 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>
- 禁止使用绝对路径引用本地文件（复制后使用相对路径）
-
定位目标幻灯片：在项目 index.html 中使用 <!-- SLIDE: slide-N --> 标记定位。
-
确定 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 包裹 |
-
生成图片 HTML，包含以下结构和属性：
<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>
<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>
-
使用 Edit 工具在目标位置插入图片 HTML。如果指定位置的元素不存在（如用户说"标题下方"但该页没有标题），回退到 slide 末尾追加。
-
规范要求：
- 所有
<img> 标签必须包含 alt 属性（可访问性要求），内容为用户对图片的描述或默认说明
- 网络图片 URL 必须先使用
WebSearch 验证可用性
- 本地图片必须复制到项目
images/ 目录，使用相对路径引用，禁止绝对路径
- 图片默认添加
class="slide-image"，便于后续 CSS 选择器统一调整
- 图片宽度默认
max-width:100% 确保不超出幻灯片边界，高度自动等比缩放
- 添加后建议用户预览确认图片显示正常
Step 5: 为元素添加入场动画
-
用户指定目标幻灯片编号和要添加动画的元素（如"第 3 页的标题加动画"）。
-
读取 index.html，根据 <!-- SLIDE: slide-N --> 标记定位目标幻灯片。
-
根据 references/animation-reference.md 选择动画类型，在目标元素的 class 属性中添加：
- 一个动画类名（如
anim-fade-in、anim-slide-up 等）
- 按需添加
anim-delay-N 控制延迟
-
规范要求：
- 只修改目标元素的
class 属性，不改变元素内容或结构
- 如果目标元素已有其他动画类，先移除再添加新类（不叠加多个动画）
- 延迟值
anim-delay-N 中的 N 不超过 10
- 一个幻灯片中动画元素建议不超过 5 个
- 不得修改
<!-- SLIDE: --> 标记或幻灯片容器属性
Step 6: 修改页面过渡效果
-
用户指定要使用的过渡类型（如"改成缩放过渡"）。
-
读取 index.html，定位到 <div class="presentation" id="presentation"> 行。
-
从 references/animation-reference.md 中选择过渡类名（trans-fade、trans-slide-left、trans-zoom 等）。
-
使用 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">
-
规范要求：
- 只修改
presentation 容器类名中的 trans-* 部分
- 不得移除
presentation 类或 id="presentation"
- 每次只设置一种过渡类型（不叠加多个
trans-*）
Step 7: 修改主题样式
-
用户指定新的主题要求（如"改成深色模式"、"换蓝色主题"）。
-
如果用户要求模糊（如只说了"换个主题"或"换个颜色"），必须追问具体方向：
"想换成什么风格？比如：
· 科技蓝 —— 专业、冷静、适合技术类内容
· 极简黑 —— 高端、简洁、适合设计感强的内容
· 温暖橙 —— 亲和、活力、适合分享类内容
· 商务风 —— 正式、清晰、适合工作汇报
· 自然绿 —— 清新、健康、适合环保/生活类内容
· 自定义 —— 你指定主色和背景色
或者你有其他想法？"
如果用户说"自定义"，追问具体的主色色值和背景色偏好。
-
读取 index.html，定位到 /* ========== THEME ========== */ 注释标记。
-
修改 :root 中的 CSS 变量：
--bg — 背景色--text — 主文字色--text-secondary — 次要文字色--accent — 强调色--font-display — 展示字体--font-body — 正文字体- 其他变量按需调整
-
规范要求：
- 只修改
/* ========== THEME ========== */ 区块内的变量值
- 不删除或重命名 CSS 变量（只改值）
- 不修改
/* ========== SLIDE TRANSITIONS ========== */ 或 /* ========== ELEMENT ANIMATIONS ========== */ 区块
- 确保修改后所有幻灯片立即可用（变量名统一）
Step 8: 删除幻灯片
-
用户指定要删除的幻灯片编号。
-
读取 index.html，定位到 <!-- SLIDE: slide-N --> 到 <!-- /SLIDE --> 之间的完整区块。
-
使用 Edit 工具精确匹配从 <!-- SLIDE: slide-N --> 到 <!-- /SLIDE --> 的全部内容，替换为空字符串。
-
删除后重新编号所有后续幻灯片，需要更新的属性包括：
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)%
-
注意：aria-hidden 属性为布尔值（"true" / "false"）不包含编号，无需修改。JavaScript 中的 slides.length 基于 DOM 查询自动适应，无需手动修改。
-
规范要求：
- 删除前向用户确认幻灯片编号和内容
- 删除后必须重新编号（不允许出现编号空洞）
- 重新编号时，只改编号数字，不改内容和 class
Step 9: 预览演示
-
使用 Bash 执行 Windows 命令在默认浏览器中打开：
start "" "./<project-name>/index.html"
-
向用户说明所有导航方式：键盘方向键翻页、鼠标滚轮翻页、点击空白区域翻页、触摸滑动翻页。
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 年度技术回顾'，蓝色主题"
操作：
- 读取
templates/base.html 模板
- 修改
:root 主题变量：
--bg: #0a0e1a（深色背景）--text: #e8edf5（亮色文字）--accent: #3b82f6（科技蓝）--font-display: 'Inter', sans-serif--font-body: 'Inter', sans-serif
- 替换占位符：标题 → "2025 年度技术回顾"
- 创建文件
./tech-review-2025/index.html
- 浏览器中打开
结果：一个深蓝色科技风格的双页演示，第一页标题 + 副标题，第二页内容区。
✅ Do This — 添加幻灯片
输入："在第 2 页后面加一页，展示技术趋势列表"
操作：
- 读取
./tech-review-2025/index.html
- 在
<!-- /SLIDE -->（slide-2）之后插入新 slide：
<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>
- 更新
#slideTotal 和进度条
✅ Do This — 修改幻灯片过渡
输入："把翻页过渡改成缩放效果"
操作：
- 定位
<div class="presentation" id="presentation">
- 使用 Edit：
旧: <div class="presentation" id="presentation">
新: <div class="presentation trans-zoom" id="presentation">
✅ Do This — 删除幻灯片
输入："删除第 2 页"
操作：
- 定位
<!-- SLIDE: slide-2 --> 到 <!-- /SLIDE -->
- 移除该区块
- 重新编号：slide-3 → slide-2（只改编号，不改内容）
- 更新导航和页码
✅ Do This — 添加图片到幻灯片
输入："在第 1 页右上角添加 logo 图片，用本地文件 C:\logos\company-logo.png"
操作：
- 检查文件存在：
ls "C:\logos\company-logo.png" → 确认文件存在
- 验证扩展名：
.png → 合法图片格式
- 创建目录：
mkdir -p "./tech-review-2025/images/"
- 复制文件：
cp "C:\logos\company-logo.png" "./tech-review-2025/images/company-logo.png"
- 定位
<!-- 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>
- 确认
alt 属性存在、路径为相对路径、宽度限制已设置
- 预览确认图片显示正常
输入："在第 3 页标题下方添加一张产品截图，用图床链接 https://img.example.com/product.png"
操作：
- 使用
WebSearch 验证 img.example.com 是否可用 → 确认有效
- 检查 URL 扩展名：
.png → 合法
- 定位
<!-- 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>
- 验证 URL 有效（WebSearch 已确认）
- 预览确认图片加载正常
❌ 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 官方提示词工程最佳实践
