前端幻灯片（Frontend Slides）

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

灵感源自 zarazhangrui 的视觉探索式设计方法（致谢：@zarazhangrui）。

启用时机

• 制作技术分享、融资路演、工作坊或内部汇报类幻灯片
• 将 .ppt 或 .pptx 文件转换为 HTML 演示文稿
• 优化现有 HTML 幻灯片的版式、动效或排版
• 与尚不明确自身设计偏好的用户共同探索演示风格

不可妥协项（Non-Negotiables）

1. 零依赖：默认输出单个自包含 HTML 文件，CSS 与 JS 均内联。
2. 视口适配为强制要求：每张幻灯片必须完整容纳于单个视口内，禁止内部滚动。
3. 重展示，轻描述：使用可视化预览代替抽象的样式问卷。
4. 设计须具辨识度：避免泛用的紫色渐变、Inter 字体配白底、模板化外观等通用设计。
5. 生产级质量：代码需附注释、具备可访问性（a11y）、响应式适配且性能良好。

生成前，请通读 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 自定义属性（css custom properties）
• 支持键盘、滚轮与触摸操作的演示控制器类（presentation controller class）
• 基于 Intersection Observer 实现的逐项揭示动效（reveal animations）
• 对 prefers-reduced-motion 的降级支持

5. 强制视口适配

此为硬性准入门槛（hard gate）。

规则如下：

• 每个 .slide 元素必须设置 height: 100vh; height: 100dvh; overflow: hidden;
• 所有文字大小与间距均须使用 clamp() 实现响应式缩放
• 当内容无法完整容纳时，应拆分为多张幻灯片
• 禁止通过缩小字体至不可读尺寸来解决溢出问题
• 幻灯片内部严禁出现滚动条

请严格遵循 STYLE_PRESETS.md 中定义的密度限制与强制 CSS 区块。

6. 验证

需在以下分辨率下检查最终幻灯片效果：

• 1920×1080
• 1280×720
• 768×1024
• 375×667
• 667×375

若支持浏览器自动化测试，应利用其验证：无任何幻灯片发生溢出，且键盘导航功能正常。

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

必须包含以下功能：

• 键盘导航（← → ↑ ↓ PageUp/PageDown）
• 触摸/滑动手势导航
• 鼠标滚轮导航
• 进度指示器或幻灯片索引
• 进入视口时触发的揭示动效（reveal-on-enter）

可访问性（Accessibility）

• 采用语义化结构（
  、

  、
• 确保文字对比度满足可读性标准
• 支持纯键盘操作导航
• 尊重系统级 prefers-reduced-motion 设置

内容密度限制

除非用户明确要求更高密度且仍保证可读性，否则请遵守以下上限：

反模式（Anti-Patterns）

• 缺乏视觉识别度的通用创业风渐变背景
• 非编辑类场景下使用系统字体（如 San Francisco / Segoe UI）的幻灯片
• 大段密集的要点列表（bullet walls）
• 需横向或纵向滚动查看的代码块
• 固定高度的内容容器，在小屏幕设备上导致布局断裂
• 非法的否定 CSS 函数，例如 -clamp(...)

相关 ECC 技能

• frontend-patterns：提供围绕幻灯片的组件与交互模式支持
• liquid-glass-design：当演示文稿有意借鉴 Apple 的玻璃拟态（glass morphism）美学时使用
• e2e-testing：若需对最终幻灯片执行自动化浏览器端到端验证时使用

交付物核对清单

• 幻灯片可作为本地文件直接在浏览器中运行
• 每张幻灯片均严格适配视口，无任何内部滚动
• 整体风格具有辨识度且设计意图明确
• 动效具备明确目的，不喧宾夺主、不干扰信息传达
• 尊重系统级“减少动画”偏好设置（prefers-reduced-motion）
• 交付时清晰说明文件路径与关键定制入口点