前端幻灯片
创建零依赖、动画丰富的 HTML 演示文稿,完全在浏览器中运行。
受 zarazhangrui(鸣谢:@zarazhangrui)作品中展示的视觉探索方法的启发。
何时启用
- 创建演讲文稿、推介文稿、研讨会文稿或内部演示文稿时
- 将
.ppt或.pptx幻灯片转换为 HTML 演示文稿时 - 改进现有 HTML 演示文稿的布局、动效或排版时
- 与尚不清楚其设计偏好的用户一起探索演示文稿风格时
不可妥协的原则
- 零依赖:默认使用一个包含内联 CSS 和 JS 的自包含 HTML 文件。
- 必须适配视口:每张幻灯片必须适配一个视口,内部不允许滚动。
- 展示,而非描述:使用视觉预览,而非抽象的风格问卷。
- 独特设计:避免通用的紫色渐变、白色背景加 Inter 字体、模板化的文稿外观。
- 生产质量:保持代码注释清晰、可访问、响应式且性能良好。
在生成之前,请阅读 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 基础 - 用于主题值的 C…