---

name: frontend-slides description: 从零创建或通过转换 PowerPoint 文件来制作精美的、动画丰富的 HTML 演示文稿。当用户想要构建演示文稿、将 PPT/PPTX 转换为网页、或为演讲/路演创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择来发现自己的美学风格。 origin: ECC

前端幻灯片

创建零依赖、动画丰富的 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

包含：

• 键盘导航
• 触摸/滑动