frontend-slides

# 前端幻灯片 创建零依赖的、动画丰富的 HTML 演示文稿，完全在浏览器中运行。 灵感来自 zarazhangrui 作品中展示的视觉探索方法（致谢：@zarazhangrui）。 ## 何时激活 - 创建演讲幻灯片、路演演示、工作坊幻灯片或内部演示 - 将 `.ppt` 或 `.pptx` 幻灯片转换为 HTML 演示文稿 - 改进现有 HTML 演示文稿的布局、动效或排版 - 与尚不清楚自己设计偏好的用户一起探索演示风格 ## 不可协商事项 1. **零依赖**：默认使用一个自包含的 HTML 文件，内联 CSS 和 JS。 2. **视口适配是强制的**：每张幻灯片必须适配一个视口，不允许内部滚动。 3. **展示而非讲述**：使用视觉预览而非抽象风格问卷。 4. **独特设计**：避免通用紫色渐变、Inter-on-white、模板化外观的演示文稿。 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 - 减少动画支持 ### 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` ## 内容密度限制 除非用户明确要求更密集的幻灯片且可读性仍然保持，否则使用以下最大值： | 幻灯片类型 | 限制 | |------------|-------| | 标题 | 1 个标题 + 1 个副标题 + 可选标语 | | 内容 | 1 个标题 + 4-6 个要点或 2 段短文 | | 特性网格 | 最多 6 张卡片 | | 代码 | 最多 8-10 行 | | 引用 | 1 条引用 + 出处 | | 图像 | 1 张受视口约束的图像 | ## 反模式 - 没有视觉标识的通用创业渐变 - 除非有意做编辑风格的系统字体演示 - 长篇项目符号墙 - 需要滚动的代码块 - 在短屏幕上断裂的固定高度内容框 - 无效的否定 CSS 函数如 `-clamp(...)` ## 相关 ECC 技能 - `frontend-patterns` 用于演示文稿周围的组件和交互模式 - `liquid-glass-design` 当演示文稿有意借鉴 Apple 玻璃美学时 - `e2e-testing` 如果需要为最终演示文稿进行自动化浏览器验证 ## 交付检查清单 - 演示文稿从本地文件在浏览器中运行 - 每张幻灯片无需滚动即可适配视口 - 风格独特且有意为之 - 动画有意义，不是噪音 - 减少动画被尊重 - 交接时解释了文件路径和自定义点