
关于
从零创建或通过转换 PowerPoint 文件制作精美的、动画丰富的 HTML 演示文稿。适用于用户需要构建演示、将 PPT/PPTX 转为 Web 或为演讲/路演创建幻灯片。
name: frontend-slides description: 从零创建或通过转换 PowerPoint 文件来制作精美的、动画丰富的 HTML 演示文稿。当用户想要构建演示文稿、将 PPT/PPTX 转换为网页、或为演讲/路演创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择来发现自己的美学风格。 origin: ECC
前端幻灯片
创建零依赖、动画丰富的 HTML 演示文稿,完全在浏览器中运行。
灵感来源于 zarazhangrui 展示的视觉探索方法(致谢:@zarazhangrui)。
激活条件
- 创建演讲稿、路演稿、工作坊稿或内部演示文稿
- 将
.ppt或.pptx幻灯片转换为 HTML 演示文稿 - 改进现有 HTML 演示文稿的布局、动效或排版
- 与不了解自己设计偏好的用户一起探索演示风格
不可妥协的原则
- 零依赖:默认为一个自包含的 HTML 文件,内联 CSS 和 JS。
- 视口适配是强制性的:每张幻灯片必须适合一个视口,无内部滚动。
- 展示而非描述:使用视觉预览而非抽象的风格问卷。
- 独特设计:避免通用的紫色渐变、Inter-on-white、模板化的幻灯片。
- 生产质量:保持代码有注释、可访问、响应式且高性能。
生成前,阅读 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不可用,询问是否安装或回退到手动/导出工作流。 - 保留幻灯片顺序、演讲者备注和提取的资源。
- 提取后,运行与新演示文稿相同的风格选择工作流。
保持转换跨平台。当 Python 能完成工作时不要依赖 macOS 专用工具。
实现要求
HTML / CSS
- 使用内联 CSS 和 JS,除非用户明确要求多文件项目。
- 字体可来自 Google Fonts 或 Fontshare。
- 优先使用氛围背景、强烈的字体层次和清晰的视觉方向。
- 使用抽象形状、渐变、网格、噪点和几何图形,而非插图。
JavaScript
包含:
- 键盘导航
- 触摸/滑动
兼容工具
Claude CodeCursor
标签
前端开发
