Frontend Slides
创建零依赖、动画丰富的 HTML 演示文稿，完全在浏览器中运行。
灵感来源于 zarazhangrui 展示的视觉探索方法（致谢：@zarazhangrui）。
何时激活
- 创建演讲演示、路演演示、工作坊演示或内部演示
- 将
.ppt或.pptx幻灯片转换为 HTML 演示文稿 - 改进现有 HTML 演示文稿的布局、动效或排版
- 与不了解自己设计偏好的用户一起探索演示风格
不可妥协的原则
- 零依赖：默认生成单个自包含 HTML 文件，CSS 和 JS 内联嵌入。
- 视口适配是强制要求：每张幻灯片必须适配一个视口，无内部滚动。
- 展示而非讲述：使用视觉预览代替抽象风格问卷。
- 独特设计：避免通用的紫色渐变、Inter 字体配白色背景、模板化的演示文稿。
- 生产质量：确保代码有注释、可访问、响应式且性能良好。
在生成前，请阅读 STYLE_PRESETS.md 了解视口安全的 CSS 基础、密度限制、预设目录和 CSS 注意事项。
工作流程
1. 检测模式
选择其中一条路径：
- 新演示文稿：用户有主题、笔记或完整草稿
- PPT 转换：用户有
.ppt或.pptx文件 - 增强：用户已有 HTML 幻灯片并希望改进
2. 发现内容
仅询问最少必要信息：
- 用途：路演、教学、会议演讲、内部更新
- 长度：短（5-10 张）、中（10-20 张）、长（超过 20 张）
- 内容状态：已完成的文案、粗略笔记、仅主题
如果用户有内容，请在样式设定前要求用户粘贴内容。
3. 发现风格
默认使用视觉探索。
如果用户已经知道想要的预设，跳过预览，直接使用该预设。
否则：
- 询问演示文稿应营造什么感觉：印象深刻、充满活力、聚焦、灵感迸发。
- 在
.ecc-design/slide-previews/目录下生成 3 个单页预览文件。 - 每个预览必须是自包含的，清晰展示排版/颜色/动效，并且幻灯片内容保持在约 100 行以内。
- 询问用户保留哪个预览，或者混合哪些元素。
在将情绪映射到风格时，使用 STYLE_PRESETS.md 中的预设指南。
4. 构建演示文稿
输出以下之一：
presentation.html[presentation-name].html
仅当演示文稿包含提取的或用户提供的图片时，才使用 assets/ 文件夹。
必需结构：
- 语义化的幻灯片部分
STYLE_PRESETS.md中的视口安全 CSS 基础- 用于主题值的 CSS 自定义属性
- 用于键盘、滚轮和触摸导航的演示控制器类
- 用于揭示动画的 Intersection Observer
- 减少动效支持
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 转换：
- 优先使用
python3和python-pptx提取文本、图片和备注。 - 如果
python-pptx不可用，询问是安装它还是回退到手动/基于导出的工作流程。 - 保留幻灯片顺序、演讲者备注和提取的素材。
- 提取后，运行与新建演示文稿相同的风格选择工作流程。
保持转换跨平台。不要依赖仅 macOS 的工具，当 Python 可以完成工作时。
实现要求
HTML / CSS
- 除非用户明确希望多文件项目，否则使用内联 CSS 和 JS。
- 字体可以来自 Google Fonts 或 Fontshare。
- 偏好氛围背景、强烈的层级排版和清晰的视觉方向。
- 使用抽象形状、渐变、网格、噪点和几何图形，而非插画。
JavaScript
包含：
- 键盘导航
- 触摸/滑动导航
- 鼠标滚轮导航
- 进度指示器或幻灯片索引
- 入场触发动画
可访问性
- 使用语义化结构（
main、section、nav） - 保持对比度可读
- 支持纯键盘导航
- 尊重
prefers-reduced-motion
内容密度限制
使用这些最大值，除非用户明确要求更密集的幻灯片且可读性仍然保持：
| 幻灯片类型 | 限制 |
|---|---|
| 标题 | 1 个标题 + 1 个副标题 + 可选标语 |
| 内容 | 1 个标题 + 4-6 个项目符号或 2 个短段落 |
| 功能网格 | 最多 6 张卡片 |
| 代码 | 最多 8-10 行 |
| 引用 | 1 条引用 + 归属 |
| 图片 | 视口约束下的 1 张图片 |
反模式
- 没有视觉标识的通用启动渐变
- 除非有意识地用于编辑风格，否则使用系统字体
- 长的项目符号墙
- 需要滚动的代码块
- 在短屏幕上会破坏布局的固定高度内容框
- 无效的否定 CSS 函数，如
-clamp(...)
相关 ECC 技能
frontend-patterns：用于演示文稿周围的组件和交互模式liquid-glass-design：当演示文稿有意借鉴苹果玻璃美学时e2e-testing：如果需要自动化浏览器验证最终演示文稿
交付清单
- 演示文稿可在浏览器中从本地文件运行
- 每张幻灯片适配视口且无滚动
- 风格独特且有辨识度
- 动画有意而非杂乱
- 尊重减少动效
- 在交接时解释文件路径和自定义点