从零开始创建令人惊叹、动画丰富的 HTML 演示文稿,或通过转换 PowerPoint 文件生成。适用于用户想要构建演示文稿、将 PPT/PPTX 转换为 Web 页面、或为演讲/路演创建幻灯片的场景。帮助非设计师用户通过视觉探索而非抽象选择来发现他们的审美偏好。
42:T1a53,
创建零依赖(Zero-dependency)、动画丰富的 HTML 演示文稿,完全在浏览器中运行。
灵感来源于 zarazhangrui 作品中所展示的视觉探索方法。
.ppt 或 .pptx 幻灯片转换为 HTML 演示文稿在生成之前,请阅读 STYLE_PRESETS.md 以了解视口安全 CSS 基础、内容密度限制、预设目录和 CSS 注意事项。
选择一条路径:
.ppt 或 .pptx 文件仅询问最基本的需求:
如果用户已有内容,请要求他们在进行风格设计前粘贴内容。
默认为视觉探索。
如果用户已经知道所需的预设,跳过预览并直接使用。
否则:
.ecc-design/slide-previews/ 中生成 3 个单页预览文件。在将情绪映射到风格时,请参考 STYLE_PRESETS.md 中的预设指南。
输出以下之一:
presentation.html[presentation-name].html仅当文稿包含提取的或用户提供的图像时,才使用 assets/ 文件夹。
要求结构:
STYLE_PRESETS.md 的视口安全 CSS 基础将其视为硬性关卡。
规则:
.slide 必须使用 height: 100vh; height: 100dvh; overflow: hidden;clamp() 进行缩放使用 STYLE_PRESETS.md 中的密度限制和强制性 CSS 块。
在以下尺寸下检查完成的文稿:
如果浏览器自动化工具可用,使用它来验证没有幻灯片溢出,并且键盘导航正常工作。
在移交时:
为当前操作系统使用正确的打开命令:
open file.htmlxdg-open file.htmlstart "" file.html对于 PowerPoint 转换:
python-pptx 的 python3 来提取文本、图像和备注。python-pptx 不可用,询问是否安装它,或者回退到手动/基于导出的工作流。保持转换跨平台。当 Python 可以胜任时,不要依赖仅限 macOS 的工具。
包括:
main, section, nav)prefers-reduced-motion除非用户明确要求更密集的幻灯片且可读性仍然保持,否则请遵循以下最大值:
| 幻灯片类型 | 限制 |
|---|---|
| 标题 | 1 个标题 + 1 个副标题 + 可选的标语 |
| 内容 | 1 个标题 + 4-6 个项目符号或 2 个短段落 |
| 功能网格 | 最多 6 个卡片 |
| 代码 | 最多 8-10 行 |
| 引用 | 1 个引用 + 署名 |
| 图像 | 1 张受视口约束的图像 |
-clamp(...)frontend-patterns:用于文稿周围的组件和交互模式liquid-glass-design:当演示文稿有意借用 Apple 玻璃美学时使用e2e-testing:如果你需要为最终文稿进行自动化浏览器验证