frontend-slides

Frontend Slides

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

灵感来源于zarazhangrui作品中的视觉探索方法（致谢：@zarazhangrui）。

何时激活

• 创建演讲幻灯片、提案幻灯片、工作坊幻灯片或内部演示
• 将.ppt或.pptx幻灯片转换为HTML演示文稿
• 改进现有HTML演示文稿的布局、动效或排版
• 与不确定设计偏好的用户一起探索演示风格

不可妥协的要求

1. 零依赖：默认生成一个自包含的HTML文件，内联CSS和JS。
2. 视口适配是强制要求：每张幻灯片必须适配一个视口，无内部滚动。
3. 展示而非告知：使用视觉预览而非抽象的样式问卷。
4. 独特设计：避免通用的紫色渐变、Inter字体配白底、模板化的幻灯片。
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/文件夹。

必需结构：

• 语义化的幻灯片section
• 来自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：当演示文稿有意借用苹果玻璃美学时
• e2e-testing：如果需要自动浏览器验证最终幻灯片

交付清单

• 演示文稿可在浏览器中从本地文件运行
• 每张幻灯片适配视口，无需滚动
• 风格独特且有意图
• 动画有意义，不杂乱
• 尊重减少动效
• 交付时解释文件路径和自定义点