presentation

演示文稿技能

创建独立的 HTML 幻灯片演示文稿，支持 CSS 动画、键盘/点击/滑动导航、逐条显示项目符号、鼠标视差效果和精美的视觉设计。单文件、无依赖，随处可用。

---

步骤 1：选择模式

询问用户希望采用哪种方式：

• 完整生成：用户预先提供内容/大纲 → Claude 一次性生成整个演示文稿。适合已经清楚自己想表达什么的用户。
• 交互式逐步构建：Claude 先搭建框架，再逐张构建幻灯片——用户审阅每张幻灯片后再继续。适合仍在梳理叙事，或希望严格掌控过程的用户。

---

步骤 2：内容与结构（最重要的步骤）

编写任何代码之前，深入理解演示文稿实际要表达的内容。

请用户提供源材料，可以是：

• 关于主题的文档、大纲或笔记
• 粗略的逐张幻灯片大纲
• 关键要点、数据或引言
• 需要重新设计的现有演示文稿
• 想要涵盖的所有内容的随手记录

然后协作制定幻灯片大纲：

• 为每张幻灯片选择类型、标题、正文内容和特殊元素
• 建议叙事脉络：引入 → 背景 → 核心内容 → 细节 → 收尾
• 标出适合逐条显示项目符号的幻灯片（内容密集、需要分步呈现的幻灯片）
• 确定哪些幻灯片需要图像/素材，哪些只需文本
• 继续之前，确认最终幻灯片数量和顺序

这一步决定演示文稿的成败。 在这里投入最多时间。

可用的幻灯片类型

类型	类名	用途
标题	.slide-title	开场——大标题、副标题、装饰图形
演讲者/简介	.slide-speaker	介绍演讲者——头像、姓名、角色、玻璃卡片
问题	.slide-familiar	吸引观众参与——居中的大问题
逐条显示项目符号	.slide-learn	要点、议程——通过 data-bullets 逐步呈现
工具/徽章网格	.slide-setup	工具、技术、徽标——徽章卡片网格
工作流/流程	.slide-flow	流程、步骤——通过箭头连接的方框
双栏	.slide-llm	文本 + 图像——分栏布局
团队/网格	.slide-speakers	认识团队——包含姓名/角色的照片网格
术语表	.slide-gloss	释义——大号术语 + 定义
结束/行动号召	.slide-closing	最后一张幻灯片——大号文本、行动号召

各类型的详细 HTML 模板请参阅 slide-types.md。

---

步骤 3：设计简报

收集用户对风格的要求：

• 颜色：品牌色，或建议一套配色（5–6 个十六进制值，并注明用途：主色、辅色、强调色、浅色背景、深色背景、文本色）
• 字体：标题和正文的字体系列（Google Fonts 或系统字体）
• 风格氛围：极简 / 编辑风 / 玻璃拟态 / 大胆 / 企业风
• 素材：要嵌入的徽标、图像、照片

生成一份简报，包含：

• 带 CSS 变量名和十六进制值的配色方案
• 字体排版层级（heading-xl、heading-lg、heading-md、subtitle、body-text）
• 字体系列和字重
• 间距节奏（幻灯片内边距、元素间距）
• 动画风格（微妙或戏剧化）
• 一句话概括视觉方向
• 幻灯片与主题的映射（哪些幻灯片使用哪些背景色）

CSS/字体排版/动画默认设置和模板请参阅 framework-reference.md。

---

步骤 4：生成框架

创建一个内嵌 <style> 和 <script> 的独立 HTML 文件。

文件结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Presentation Title]</title>
  [Google Fonts link]
  <style>
    /* Reset, design tokens, slide system, themes, shapes,
       animations, typography, UI chrome, slide-specific styles,
       responsive breakpoint */
  </style>
</head>
<body>
  <div class="presentation">
    
  </div>
  
  <script>
    /* IIFE-based navigation engine */
  </script>
</body>
</html>

完整的 CSS 架构和 JS 导航引擎模板请参阅 framework-reference.md。

---

第 5 步：构建幻灯片

使用 slide-types.md 中的模板：

• 完整生成模式： 根据第 2 步的大纲一次性创建所有幻灯片
• 交互模式： 一次制作一张幻灯片——编写 HTML，让用户审核并调整，然后再制作下一张

对于每张幻灯片：

1. 使用带有主题类（.slide--primary、.slide--secondary、.slide--light）的 section.slide
2. 设置 data-theme="dark" 或 data-theme="light"，以适配导航 UI 颜色
3. 为所有内容元素添加 .anim 类，以实现入场动画
4. 按视觉阅读顺序添加渐进延迟（.anim-d1 至 .anim-d8）
5. 添加带有入场方向的装饰形状（.shape-enter-left 等）
6. 在每张幻灯片中加入内容一致的 .slide-footer
7. 对于逐条显示项目符号的幻灯片：设置 data-bullets="N"，并使用 <li data-bullet="N"> 元素

---

第 6 步：润色与审核

交付前检查清单：

• 所有内容元素均已添加 .anim 类
• 渐进延迟符合视觉阅读顺序
• 装饰形状不会遮挡内容（使用 z-index 分层）
• 所有幻灯片主题的颜色对比度均正确
• 逐条显示的项目符号数量与 data-bullets 属性一致
• 响应式布局在 768px 断点下正常工作
• 导航正常工作：键盘（箭头键、Space、PgUp/Dn、Home、End）、点击（左侧 30% = 后退，右侧 70% = 前进）和触控/滑动（阈值 >50px）
• 进度条和幻灯片计数器正常更新
• 所有幻灯片的页眉/页脚界面元素保持一致
• 所有字体均正确加载（Google Fonts 或后备字体）

---

第 7 步：导出

默认：独立 HTML——将图片和资源嵌入为 base64 的单个文件。可在任何地方使用，无需服务器。

将图片嵌入为 base64：

<img src="data:image/png;base64,[base64-data]" alt="...">

还可提供：

• 开发版本：使用外部图片引用，便于编辑
• 单张幻灯片：每张幻灯片单独保存为 HTML 文件，便于模块化使用

---

关键模式

如需了解设计模式、动画技巧，以及使用此框架制作演示文稿时积累的宝贵经验，请参阅 learnings.md。

快速参考

• 缓动：所有过渡均使用 cubic-bezier(0.16, 1, 0.3, 1)（expo-out）
• 渐进延迟：从 .anim-d1（0.1s）到 .anim-d8（1.1s）
• 形状：绝对定位、mix-blend-mode: overlay、浮动关键帧动画
• 玻璃效果：backdrop-filter: blur(28px) + 半透明白色 + 细微边框
• 排版：使用 clamp() 在投影仪/笔记本电脑/平板设备上实现流畅缩放
• 视差：通过 mousemove 跟踪 --mx/--my CSS 变量
• 过渡：通过 isTransitioning 标志锁定 700ms