magazine-web-ppt

Magazine Web Ppt

此技能的功能

生成单文件 HTML 横向滑动演示文稿，视觉风格如下：

• 电子杂志 + 电子墨水的混合风格
• WebGL 流体 / 等高线 / 色散背景（在主视觉页面中可见）
• 衬线标题（Noto Serif SC + Playfair Display）+ 无衬线正文（Noto Sans SC + Inter）+ 等宽字体元数据（IBM Plex Mono）
• Lucide 线性图标（不使用表情符号）
• 横向左右翻页（键盘 ← →、滚轮、触控滑动、底部圆点、ESC 索引）
• 平滑的主题插值：翻到主视觉页面时，颜色和着色器会柔和过渡

这种风格既不是“企业 PPT”，也不是“消费互联网 UI”：它就像是 Monocle 杂志融入代码后的样子。

适用场景

适用场景：

• 线下演讲 / 行业内部分享 / 私人沙龙
• AI 新品发布会 / 演示日
• 风格鲜明的演讲
• 只需“制作一次，无需翻页工具”的网页版本幻灯片

不适用场景：

• 大量表格数据、堆叠图表（请使用常规 PPT）
• 培训课件（信息密度太低）
• 多人协同编辑（这是静态 HTML）

工作流

步骤 0 · 推断风格方向；仅在用户要求比较时提问

根据简介、受众、内容和已知上下文，从 5 种杂志风格方向中推断一种。每种方向都包含主题色、推荐版式、界面外框样式和幻灯片数量。选择最接近的方向并继续，无需提问。

仅当用户明确要求查看或比较风格方向选项时，才打开 references/styles.md，并以一个 direction-cards 问题表单呈现 单行摘要：

1. Monocle Editorial · International magazine style ✦ default
2. WIRED Tech · Data + engineering
3. Kinfolk Slow · Slow living / humanist
4. Domus Architectural · Architecture / sense of space
5. Lab / Reference · Academic + craft manual

如果用户说“我不知道，你来推荐”或没有提供方向线索： 默认选择 Monocle Editorial，无需提问，因为它的失败概率最低。如果用户提到“AI / 基准测试 / 技术发布会”： 选择 WIRED；“阅读 / 私人 / 社交圈”：选择 Kinfolk；“设计 / 建筑 / 作品集”：选择 Domus；“研究 / 学术 / 方法论”： 选择 Lab。

选定方向后，在项目文件夹中创建或更新 项目记录.md（Project Record），第一行清楚写明方向 + 主题色 + 受众 + 时长（参见 styles.md 末尾的模板）。之后不得更改方向：中途切换 = 之前的所有工作都白费。

步骤 1 · 明确意图

如果用户已经提供完整大纲和图片，可以直接跳到步骤 2。

根据简介、项目元数据、提供的内容和对话，推断以下清单中的信息。如果某项缺失答案会实质性影响演示文稿，且没有稳妥的默认值，则只针对尚未解决的项目，通过一个合并的问题表单提问。不要逐项提问。

6 项澄清清单

除非用户明确要求比较选项，否则方向和主题色会在步骤 0 中推断。

#	问题	提问原因
1	受众是谁？分享场景是什么？（行业内部 / 商业发布会 / 演示日 / 私人沙龙）	决定语言风格和内容深度
2	演讲时长？	15 分钟 ≈ 10 页，30 分钟 ≈ 20 页，45 分钟 ≈ 25-30 页（参见 styles.md 中各方向的建议范围）
3	有无素材？（文档 / 数据 / 旧 PPT / 文章链接）	有素材就基于素材构建；没有素材就协助搭建
4	有图片吗？图片在哪里？	参见下方的“图片规范”
5	想要哪种主题色？	✓ 已在步骤 0 中由风格方向确定
6	有什么硬性限制？（必须包含 XX 数据 / 不得展示 YY）	避免返工

大纲辅助（如果用户没有大纲）

使用“叙事弧”模板搭建骨架，然后填充内容：

Hook       → 1 page   : throw out a contrast / question / hard number that makes people stop
Context    → 1-2 pages : explain the background / who you are / why this topic
Core       → 3-5 pages : the core content, interleaving Layouts 4/5/6/9/10
Shift      → 1 page    : break the expectation / propose a new view
Takeaway   → 1-2 pages : a punchline / a suspenseful question / a call to action

叙事弧 + 页数规划 + 主题节奏表（参见 layouts.md）；进入步骤 2 前，对齐这三张表。

最好将大纲保存为 项目记录.md（项目记录）或 大纲-v1.md（大纲 v1），以便后续迭代。

图片规范（告知用户）

开始前，向用户明确以下事项：

• 文件夹位置：位于 项目/XXX/ppt/images/ 下（与 index.html 同级）
• 命名规范：{page number}-{semantic}.{ext}，例如 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 后，首先要做的事：搜索 "[必填]"，确认所有内容均已替换。

2.2 · 选择主题色（5 种预设 · 不允许自定义）

此技能只允许从 5 种精心调校的预设中选择一种；不接受用户自定义十六进制颜色值：错误的配色会让视觉效果瞬间变得难看，而维护审美比提供自由选择更重要。

#	主题	最适合
1	🖋 Ink Classic	通用 / 商业发布 / 不确定选什么时的默认选择
2	🌊 Indigo Porcelain	科技 / 研究 / 数据 / 技术主题演讲
3	🌿 Forest Ink	自然 / 可持续发展 / 文化 / 非虚构
4	🍂 Kraft Paper	怀旧 / 人文主义 / 文学 / 独立杂志
5	🌙 Dune	艺术 / 设计 / 创意 / 画廊

操作方法：

1. 根据内容主题推荐一种，或者直接询问用户想选哪一种
2. 打开 references/themes.md，找到对应主题的 :root 块
3. 在 assets/template.html（复制后的版本）开头的 :root{ 块中，整体替换带有“主题色”注释的行：--ink / --ink-rgb / --paper / --paper-rgb / --paper-tint / --ink-tint
4. 其他 CSS 均通过 var(--...) 实现，无需做其他更改

硬性规则：

• 一个幻灯片套件只能使用一种主题，不要中途更换颜色
• 不接受用户随意指定的十六进制颜色值：委婉拒绝，并展示 5 种预设供其选择
• 不要混搭（例如从 Ink Classic 选取 ink，从 Dune 选取 paper）：这样会完全不协调

步骤 3 · 填充内容

3.0 · 预检查：类名必须在 template.html 中定义（最重要）

这是所有生成问题的根源。layouts.md 的骨架使用了许多类名（h-hero / h-xl / stat-card / pipeline / grid-2-7-5 等）；如果 assets/template.html 的 <style> 中没有对应定义，浏览器就会回退到默认样式：大标题变成无衬线字体，数据卡片挤成一团，流水线融成一行，图片则堆在页面底部。

编写任何幻灯片代码之前：

1. 先阅读 assets/template.html（至少读到 <style> 块的末尾）
2. 对照 layouts.md 的 Pre-flight 清单，确认你打算使用的每个类都已在 <style> 中定义
3. 如果缺少某个类：将其添加到 template.html 的 <style> 中，不要在每张幻灯片上反复内联重写
4. 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 页 hero 页（封面／分隔页／提问页／大引言页）

生成后的自检：运行 grep 'class="slide' index.html 列出所有主题；交付前手动确认节奏是否合理。

3.1 · 选择布局

不要从头编写幻灯片。打开 references/layouts.md；其中有 10 个可直接使用的布局骨架，每个都是完整、可直接粘贴的 <section> 代码块：

布局	用途
1. 封面	第 1 页
2. 段落分隔页	每个段落的开场
3. 大数字	抛出硬数据
4. 主图 + 文本（引言 + 图片）	身份对比／故事
5. 图片网格	多图对比／截图证据
6. 双栏流水线（流水线）	工作流流程
7. 悬念式结尾／提问页	段落收尾／总结
8. 大引言页（大引言）	衬线体点题／要点总结
9. 并排对比（之前／之后）	旧模型与新模型对比
10. 图片 + 文本混排（主图 + 侧边文本）	信息密集的图文页面

选择对应布局，粘贴后替换文案和图片路径。务必先完成 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 级问题（表情符号、图像溢出、标题换行、字体分工）都必须通过检查。

特别留意以下几点：

1. 大标题必须使用衬线字体：如果显示为无衬线字体，99% 的情况下是因为没有完成步骤 3.0 的预检查，且 template.html 中缺少 h-hero 类
2. 图像网格中只使用 height:Nvh，不要使用 aspect-ratio（否则会溢出）
3. 图像不能堆在页面底部：不要使用 align-self:end，应使用网格 + align-items:start（见步骤 3.2）
4. 图像只能使用标准比例（16:10 / 4:3 / 3:2 / 1:1 / 16:9），不要照搬源图像的不规则比例
5. 中文大标题不超过 5 个字，并使用 nowrap（避免每行只有 1 个字）
6. 使用 Lucide，不要使用表情符号
7. 标题使用衬线字体，正文使用无衬线字体，元数据使用等宽字体

步骤 5 · 本地预览

直接在浏览器中打开 index.html 即可。在 macOS 上：

open "项目/XXX/ppt/index.html"

无需本地服务。图像使用相对路径 images/xxx.png。

步骤 6 · 迭代

根据用户反馈进行修改：模板的 CSS 高度参数化，90% 的调整都是修改内联样式（字体大小 font-size:Xvw / 高度 height:Yvh / 间距 gap:Zvh）。

---

资源文件一览

magazine-web-ppt/
├── SKILL.md              ← you are reading this
├── assets/
│   ├── template.html     ← the complete runnable template (seed file)
│   └── example-slides.html ← a 9-page sample deck (for the Examples preview)
└── references/
    ├── styles.md         ← the 5 magazine directions (Monocle / WIRED / Kinfolk / Domus / Lab)
    ├── components.md     ← component handbook (fonts, color, grid, icons, callout, stat, pipeline...)
    ├── layouts.md        ← 10 page layout skeletons (paste-ready)
    ├── themes.md         ← 5 theme color presets (pick only, no customization)
    └── checklist.md      ← quality checklist (P0/P1/P2/P3 tiers)

建议的读取顺序：

1. 首先通读 SKILL.md（本文件），了解整体内容
2. 在步骤 0 选择方向时，阅读 styles.md：其中的 5 种方向分别搭配了主题色、推荐布局和浏览器外框样式
3. 在步骤 1 明确意图后，如果需要确认方向，请阅读 themes.md 了解调色板详情
4. 开始前，阅读 assets/template.html 的 <style> 块：这里是类名的唯一来源；缺少类会导致整个页面的样式失效
5. 阅读 layouts.md 以选择布局（顶部包含预检类名列表和主题节奏规划）
6. 调整细节时，阅读 components.md 查询组件
7. 生成后，阅读 checklist.md 进行自检（顶部的 P0-0 规则要求进行预检查）

核心设计原则（理念）

这些原则是从「一人公司」演示文稿的 5 轮迭代中提炼出来的。违反其中任何一条，视觉效果都会崩塌。

1. 克制胜过炫技：WebGL 背景只在主视觉页面显现，在普通页面上几乎不可见
2. 结构胜过装饰：不要阴影、浮动卡片或带内边距的方框；所有信息都依靠大字号 + 字体对比 + 网格留白
3. 内容层级由字号和字体共同定义：最大号衬线体 = 主标题，中号衬线体 = 副标题，大号无衬线体 = 引导语，小号无衬线体 = 正文，等宽字体 = 元数据
4. 图片是内容的重要组成部分：图片只从底部裁切，顶部和两侧保持完整；网格使用固定的 height:Nvh，而非通过 aspect-ratio 拉伸
5. 节奏依靠主视觉页面：主视觉页面与普通页面交替出现，避免视觉疲劳
6. 术语保持一致：Skills 就是 Skills，不要混用中英文翻译

参考作品

这项技能的视觉基调参考了：

• Guizang 的「一人公司：被 AI 折叠的组织」演讲（2026-04-22，共 27 页）
• Monocle 杂志的版式
• YC 总裁 Garry Tan 博客文章「Thin Harness, Fat Skills」中的演示

可以将这些作品作为风格锚点。