Magazine Web Ppt 是做什么的？
此技能的功能
生成一个单文件 HTML 的水平滑动演示文稿，视觉风格如下：
- 电子杂志 + 电子墨水混搭风格
- WebGL 流体/轮廓/分散背景（在主题页可见）
- 衬线标题 (Noto Serif SC + Playfair Display) + 无衬线正文 (Noto Sans SC + Inter) + 等宽元数据 (IBM Plex Mono)
- Lucide 线条图标（无 emoji）
- 水平左右翻页（键盘 ← →、滚轮、触摸滑动、底部圆点导航、ESC 索引页）
- 平滑主题插值：翻到主题页时，颜色和着色器会柔和过渡
此技能的美学不是“企业PPT”或“消费互联网UI”，它看起来像 Monocle 杂志，只不过代码被缝在了上面。
何时使用
适用场景：
- 线下演讲 / 内部行业分享 / 私人沙龙
- AI 新品发布 / Demo Day
- 具有强烈个人风格的演讲
- 需要“一次制作，无需翻页工具”的网页版幻灯片
不适用场景：
- 大量表格数据、堆叠图表（请使用常规 PPT）
- 培训课件（信息密度过低）
- 多人协作编辑（此为静态 HTML）
工作流程
步骤 0 · 推断方向；仅当用户要求比较时才询问
根据简介、受众、内容和已知上下文推断五种杂志方向之一。每个方向都包含其主题色、推荐布局、镶边风格和幻灯片数量。选择最接近的匹配方向并继续执行，无需询问。
只有当用户明确要求查看或比较方向选项时，才打开 references/styles.md，并以 direction-cards 问题形式呈现一行摘要：
1. Monocle 编辑风格 · 国际杂志风格 ✦ 默认
2. WIRED 技术风格 · 数据 + 工程
3. Kinfolk 慢生活 · 慢生活 / 人文主义
4. Domus 建筑风格 · 建筑 / 空间感
5. 实验室/参考风格 · 学术 + 工艺手册
如果用户说“我不知道，你推荐”或没有提供方向线索：默认选择 Monocle 编辑风格，无需询问，因为它失败概率最低。如果用户提到“AI / 基准 / 技术发布”：选择 WIRED；“阅读 / 私人 / 社交圈”：选择 Kinfolk；“设计 / 建筑 / 作品集”：选择 Domus；“研究 / 学术 / 方法论”：选择 Lab。
选择方向后，在项目文件夹中创建或更新 项目记录.md，首行明确说明方向 + 主题色 + 受众 + 时长（参见 styles.md 末尾的模板）。任何时候都不要更改方向：中途切换意味着之前的所有工作都白费了。
步骤 1 · 解析意图
如果用户已经提供了完整的大纲和图片，可以直接跳到步骤 2。
从简介、项目元数据、提供的内容和对话中推断以下清单。如果缺失的答案会实质性地影响演示文稿且没有安全的默认值，则仅在一个整合的问题表单中询问这些未解析的字段。不要逐一询问清单。
6 问澄清清单
除非用户明确要求比较选项，否则方向和主题色在步骤 0 中推断。
| # | 问题 | 询问原因 |
|---|---|---|
| 1 | 受众是谁？分享场景？（内部行业分享 / 商业发布 / Demo Day / 私人沙龙） | 决定语言风格和深度 |
| 2 | 演讲时长？ | 15 分钟 ≈ 10 页，30 分钟 ≈ 20 页，45 分钟 ≈ 25-30 页（参见 styles.md 中每个方向的推荐范围） |
| 3 | 有源材料吗？（文档 / 数据 / 旧 PPT / 文章链接） | 有材料则在此基础上构建；没有则帮助他们构建 |
| 4 | 有图片吗？它们在哪里？ | 参见下面的“图片约定” |
| 5 | ✓ 步骤 0 中的方向已决定 | |
| 6 | 有什么硬性约束吗？（必须包含 XX 数据 / 不能展示 YY） | 避免返工 |
大纲辅助（如果用户没有大纲）
使用“叙事弧线”模板构建骨架，然后填充内容：
钩子 → 1 页 ：抛出一个对比/问题/硬数字，让人们停下来
背景 → 1-2 页 ：解释背景 / 你是谁 / 为什么选这个话题
核心 → 3-5 页 ：核心内容，穿插使用布局 4/5/6/9/10
转折 → 1 页 ：打破预期 / 提出新观点
要点 → 1-2 页 ：一句点睛之笔 / 一个悬念问题 / 一个行动号召
叙事弧线 + 页码计划 + 主题节奏表（参见 layouts.md）；在进入步骤 2 之前，对齐所有三个表格。
最好将大纲保存为 项目记录.md 或 大纲-v1.md，以便后续迭代。
图片约定（告知用户）
在开始之前向用户明确以下几点：
- 文件夹位置：在
项目/XXX/ppt/images/下（与index.html同级） - 命名约定：
{页码}-{语义}.{扩展名}，例如01-cover.jpg/03-figma.jpg/05-dashboard.png- 页码用零填充以便排序
- 语义部分使用英文，简短、具体、与内容匹配
- 规格建议：
- 每张图片宽度 ≥ 1600px（避免在大屏上模糊）
- 照片/截图用 JPG，透明 UI/图表用 PNG
- 总大小保持在 10MB 以下（影响翻页流畅度）
- 如何替换：同名覆盖是最稳定的方法（无需更改 HTML 中的路径）；如果文件名更改，请记得全局搜索
images/oldname并更改为新名称 - 如果没有图片怎么办：与用户确认；你可以先用占位色块生成结构，稍后填充图片，但要告知他们，像布局 4/5/10 这样的图文混排页面，没有图片就无法验证视觉效果。
步骤 2 · 复制模板
将 assets/template.html 复制到目标位置（通常是 项目/XXX/ppt/index.html），并创建一个同级 images/ 文件夹，准备接收图片。
mkdir -p "项目/XXX/ppt/images"
cp "<SKILL_ROOT>/assets/template.html" "项目/XXX/ppt/index.html"
template.html 是一个完整的、可直接运行的文件：CSS、WebGL 着色器、翻页 JS、字体/图标 CDN 都已预设；只有 <main id="deck"> 内包含 3 个示例幻灯片（封面、幕分隔、空白填充页）。
2.1 · 必须更改的占位符（容易遗漏）
复制后立即更改下面的占位符，否则浏览器标签页会显示如 "[必填] replace with the PPT title" 这样尴尬的文本：
| 位置 | 原文 | 更改为 |
|---|---|---|
<title> | [必填] 替换为 PPT 标题 · Deck Title | 实际的演示文稿标题（例如 一种新的工作方式 · Luke Wroblewski） |
每次复制完 template.html 后要做的第一件事：用 grep "[必填]" 确认所有内容都已替换。
2.2 · 选择主题色（5 种预设 · 不允许自定义）
此技能只允许从 5 种精心调校的预设中选择；不接受用户定义的十六进制值：错误的颜色搭配会瞬间破坏视觉效果，保护美学比提供自由更重要。
| # | 主题 | 最适合 |
|---|---|---|
| 1 | 🖋 墨色经典 | 通用 / 商业发布 / 不知道选什么时的默认项 |
| 2 | 🌊 靛蓝瓷 | 科技 / 研究 / 数据 / 技术主题演讲 |
| 3 | 🌿 森林墨 | 自然 / 可持续发展 / 文化 / 非虚构 |
| 4 | 🍂 牛皮纸 | 怀旧 / 人文主义 / 文学 / 独立杂志 |
| 5 | 🌙 沙丘 | 艺术 / 设计 / 创意 / 画廊 |
操作方法：
- 根据内容主题推荐一个，或让用户选择
- 打开
references/themes.md并找到相应主题的:root块 - 整体替换
assets/template.html（已复制版本）开头:root{块中标记为“theme color”注释的行：--ink/--ink-rgb/--paper/--paper-rgb/--paper-tint/--ink-tint - 所有其他 CSS 都通过
var(--...)流动，无需其他更改
硬性规则：
- 一个演示文稿只使用一个主题，不要中途更改颜色
- 不接受用户提供的任意十六进制值：礼貌地拒绝并展示 5 种预设供选择
- 不要混搭（例如从墨色经典取墨色，从沙丘取纸张色）：会完全不协调
步骤 3 · 填充内容
3.0 · 预检查：类名必须在 template.html 中定义（最重要）
这是所有生成问题的根源。layouts.md 中的骨架使用了多个类名（h-hero / h-xl / stat-card / pipeline / grid-2-7-5 等）；如果 assets/template.html 的 <style> 中没有相应的定义，浏览器会回退到默认样式：大标题变成无衬线，数据卡片挤成一团，流程合并成一行，图片堆积在页面底部。
在编写任何幻灯片代码之前：
- 首先阅读
assets/template.html（至少通读到<style>块结束） - 对照 layouts.md 的预检清单，确认你将使用的每个类在
<style>中都存在 - 如果缺少某个类：将其添加到 template.html 的
<style>中，不要在每个幻灯片上内联重写 - template.html 是类名的唯一来源：不要发明新的类名；如果需要自定义，请使用内联
style="..."
常用但容易被遗漏的类（必须事先确认存在）：
h-hero / h-xl / h-sub / h-md / lead / kicker / meta-row / stat-card / stat-label / stat-nb / stat-unit / stat-note / pipeline-section / pipeline-label / pipeline / step / step-nb / step-title / step-desc / grid-2-7-5 / grid-2-6-6 / grid-2-8-4 / grid-3-3 / grid-6 / grid-3 / grid-4 / frame / frame-img / img-cap / callout / callout-src / chrome / foot
3.0.5 · 规划主题节奏（与类预检查同等重要）
在选择布局之前，你必须首先列出每个页面的主题类（hero dark / hero light / light / dark）并将其写入文档或草稿以进行对齐。详细规则请参见 references/layouts.md 顶部的“主题节奏规划”部分。
强制性规则：
- 每个页面部分必须携带
light/dark/hero light/hero dark之一；不要只写hero - 连续 3 页或以上使用相同主题 = 视觉疲劳，不允许
- 8 页或以上必须包含 ≥1 个
hero dark+ ≥1 个hero light - 整个演示文稿不能只有
light正文页；必须有一个dark正文页来创造呼吸空间 - 每 3-4 页插入 1 个主题页（封面/分隔页/问题页/大引用页）
生成后自查：grep 'class="slide' index.html 列出所有主题；在交付前手动确认节奏合理。
3.1 · 选择布局
不要从头编写幻灯片。打开 references/layouts.md；它有 10 个现成的布局骨架，每个都是一个完整的、可粘贴的 <section> 代码块：
| 布局 | 用途 |
|---|---|
| 1. 封面 | 第 1 页 |
| 2. 幕分隔 | 每幕的开场 |
| 3. 大数字 | 抛出硬数据 |
| 4. 引文图片 | 身份对比 / 故事 |
| 5. 图片网格 | 多图片对比 / 截图证据 |
| 6. 两栏流程 (Pipeline) | 工作流程 |
| 7. 悬念结束 / 问题页 | 幕结束 / 总结 |
| 8. 大引用页 (Big Quote) | 衬线点睛之笔 / 要点 |
| 9. 并排对比 (Before / After) | 旧模型 vs 新模型 |
| 10. 图文混排 (Lead Image + Side Text) | 信息密集的图文页 |
选择相应的布局，粘贴，更改文案和图片路径。确保先完成 3.0 预检查。
3.2 · 图片比例规则
始终使用标准比例，切勿使用源图片的奇怪比例（例如 2592/1798）：
| 场景 | 推荐比例 |
|---|---|
| 引文图片，主图 | 16:10 或 4:3 + max-height:56vh |
| 图片网格（多图片对比） | 固定 height:26vh，而非 aspect-ratio |
| 小图左 + 文字右 | 1:1 或 3:2 |
| 全屏主题视觉 | 16:9 + max-height:64vh |
| 图文混排，小插图 | 3:2 或 3:4 |
切勿在图片上使用 align-self:end：它会滑到单元格底部，被浏览器工具栏隐藏。使用网格容器 + align-items:start（模板中已预设），让图片保持在顶部；如果你希望左列固定在底部，请使用 flex 列 + justify-content:space-between。
组件细节（字体、颜色、网格、图标、标注、统计卡片等）位于 references/components.md。
步骤 4 · 对照清单自查
生成后，始终打开 references/checklist.md 并逐项检查。它总结了实际迭代过程中遇到的所有陷阱；P0 级别的问题（emoji、图片溢出、标题换行、字体的分工）必须全部通过。
需要特别关注的几项：
- 大标题必须使用衬线字体：如果显示为无衬线，99% 的情况是没有进行步骤 3.0 的预检查，且 template.html 中缺少
h-hero类 - 在图片网格中只使用
height:Nvh，不要使用aspect-ratio（会导致溢出） - 图片不得堆积在页面底部：不要使用
align-self:end，使用网格 +align-items:start（参见步骤 3.2） - 图片只能使用标准比例（16:10 / 4:3 / 3:2 / 1:1 / 16:9），不要复制源图片的奇怪比例
- 中文大标题 ≤ 5 字符并使用
nowrap（避免每行一个字符） - 使用 Lucide 图标，不要用 emoji
- 标题用衬线，正文用无衬线，元数据用等宽
步骤 5 · 本地预览
直接在浏览器中打开 index.html。在 macOS 上：
open "项目/XXX/ppt/index.html"
无需本地服务器。图片使用相对路径 images/xxx.png。
步骤 6 · 迭代
根据用户反馈进行修改：模板的 CSS 高度参数化，90% 的调整只需改变几个变量值