前端幻灯片¶

创建零依赖、动画丰富的 HTML 演示文稿，完全在浏览器中运行。

灵感来源于 zarazhangrui 作品中展示的视觉探索方法（致谢：@zarazhangrui）。

何时启用¶

• 创建演讲、路演、工作坊或内部演示文稿
• 将 .ppt 或 .pptx 幻灯片转换为 HTML 演示文稿
• 改进现有 HTML 演示文稿的布局、动效或排版
• 与尚不清楚自己设计偏好的用户一起探索演示风格

不可妥协项¶

1. 零依赖：默认使用一个内联 CSS 和 JS 的自包含 HTML 文件。
2. 视口适配是强制要求：每张幻灯片必须适配一个视口，且内部不能滚动。
3. 展示而非描述：使用视觉预览代替抽象的风格问卷。
4. 独特的设计：避免通用的紫色渐变、白底 Inter 字体、模板化外观的演示文稿。
5. 生产级质量：保持代码有注释、可访问、响应式且性能良好。

在生成之前，请阅读 STYLE_PRESETS.md，以了解视口安全的 CSS 基础、密度限制、预设目录和 CSS 注意事项。

工作流程¶

1. 检测模式¶

选择以下一种路径：

• 新建演示文稿：用户有主题、笔记或完整初稿
• PPT 转换：用户有 .ppt 或 .pptx 文件
• 增强改进：用户已有 HTML 幻灯片并希望进行改进

2. 发现内容¶

只需询问最少必要信息：

• 目的：路演、教学、会议演讲、内部更新
• 长度：短（5-10）、中（10-20）、长（20+）
• 内容状态：完稿文案、粗略笔记、仅主题

如果用户已有内容，请在样式定制前让其粘贴过来。

3. 发现样式¶

默认采用视觉探索方式。

如果用户已经知道所需的预设，则跳过预览并直接使用该预设。

否则：

1. 询问演示文稿应带来何种感受：印象深刻、充满活力、专注、启发灵感。
2. 在 .ecc-design/slide-previews/ 目录下生成 3 个单页预览文件。
3. 每个预览必须是自包含的，清晰展示排版/颜色/动效，且幻灯片内容大致控制在 100 行以内。
4. 询问用户保留哪个预览，或者希望混搭哪些元素。

在将感受映射到样式时，请使用 STYLE_PRESETS.md 中的预设指南。

4. 构建演示文稿¶

输出以下任一文件：

• presentation.html
• [presentation-name].html

仅当演示文稿包含提取的或用户提供的图片时，才使用 assets/ 文件夹。

必需的结构：

• 语义化的幻灯片区块
• 来自 STYLE_PRESETS.md 的视口安全 CSS 基础
• 用于主题值的 CSS 自定义属性
• 用于键盘、滚轮和触摸导航的演示控制器类
• 用于入场动画的 Intersection Observer
• 对 reduced-motion（减弱动态效果）的支持

5. 强制视口适配¶

视此为一条硬性门槛。

规则：

• 每个 .slide 必须使用 height: 100vh; height: 100dvh; overflow: hidden;
• 所有字体和间距必须使用 clamp() 进行缩放
• 当内容无法容纳时，拆分为多张幻灯片
• 绝不要通过将文本缩小到不可读的尺寸来解决溢出问题
• 绝不允许幻灯片内部出现滚动条

请使用 STYLE_PRESETS.md 中的密度限制和强制 CSS 代码块。

6. 验证¶

在以下尺寸检查完成的演示文稿：

• 1920x1080
• 1280x720
• 768x1024
• 375x667
• 667x375

如果浏览器自动化工具可用，请使用它来验证没有幻灯片溢出，并且键盘导航正常。

7. 交付¶

交接时：

• 删除临时预览文件，除非用户想保留它们
• 在有用时使用适合当前平台的方法打开演示文稿
• 总结文件路径、所用预设、幻灯片数量，以及简单的主题自定义要点

使用以下适用于当前操作系统的打开命令：

• macOS: open file.html
• Linux: xdg-open file.html
• Windows: start "" file.html

PPT / PPTX 转换¶

对于 PowerPoint 转换：

1. 优先使用 python3 搭配 python-pptx 提取文本、图片和备注。
2. 如果 python-pptx 不可用，询问用户是安装它，还是回退到手动/基于导出的工作流程。
3. 保留幻灯片顺序、演讲者备注和提取的素材。
4. 提取后，运行与新建演示文稿相同的样式选择工作流程。

保持转换流程的跨平台性。当 Python 可以完成任务时，不要依赖仅适用于 macOS 的工具。

实现要求¶

HTML / CSS¶

• 使用内联 CSS 和 JS，除非用户明确要求多文件项目。
• 字体可以来自 Google Fonts 或 Fontshare。
• 优先选择氛围感背景、强烈的字体层级和清晰的视觉方向。
• 使用抽象形状、渐变、网格、噪点和几何图形，而不是插图。

JavaScript¶

包含：

• 键盘导航
• 触摸 / 滑动导航
• 鼠标滚轮导航
• 进度指示器或幻灯片索引
• 进入时触发展示动画

可访问性¶

• 使用语义化结构（main、section、nav）
• 保持对比度可读
• 支持纯键盘导航
• 尊重 prefers-reduced-motion

内容密度限制¶

除非用户明确要求更密集的幻灯片且可读性仍然成立，否则使用以下上限：

反模式¶

• 没有视觉识别度的通用初创公司渐变
• 系统字体演示文稿，除非刻意追求编辑风格
• 冗长的要点墙
• 需要滚动的代码块
• 在矮屏上会出问题的固定高度内容盒
• 无效的否定 CSS 函数，如 -clamp(...)

相关 ECC 技能¶

• frontend-patterns：围绕演示文稿的组件和交互模式
• liquid-glass-design：当演示文稿有意借鉴 Apple 的玻璃质感美学时
• e2e-testing：如果你需要对最终演示文稿进行自动化浏览器验证

交付物检查清单¶

• 演示文稿可在浏览器中从本地文件运行
• 每张幻灯片都能在视口内完整显示，无需滚动
• 风格独特且有明确意图
• 动效有意义，不喧宾夺主
• 尊重 reduced-motion（减弱动态效果）偏好
• 在交接时说明文件路径和自定义要点