SuperAPI AI 工具集

frontend-slides

前端与建站

查看项目

更新于 10-16 09:35

技能介绍

frontend-slides 用于在浏览器中创建零依赖、动画丰富的 HTML 演示文稿,也支持将 .ppt/.pptx 转换为 HTML 幻灯片。激活场景包括:创建演讲、路演、工作坊或内部演示幻灯片;转换 PowerPoint;改进现有 HTML 演示的布局、动态或排版;与不清楚设计偏好的用户一起探索演示风格。

主要能力与工作流:先检测模式(新演示、PPT 转换或增强),再进行最少内容发现(目的、长度、内容状态),接着做风格发现——默认生成三个单页预览文件放到 .ecc-design/slide-previews/,请用户选择或混合元素;若用户已知预设则跳过预览。构建时输出 presentation.html 或 [presentation-name].html,仅在含图像时使用 assets/ 文件夹。必须使用视口安全 CSS、主题 CSS 自定义属性、键盘/滚轮/触摸导航控制器、Intersection Observer 显示动画,并支持减弱动态。强制每张幻灯片用 height: 100vh; height: 100dvh; overflow: hidden; 适配视口,字体和间距用 clamp() 缩放,放不下则拆分幻灯片,禁止滚动条和过小文字。完成后需在 1920x1080、1280x720、768x1024、375x667、667x375 等尺寸验证,可用浏览器自动化检查溢出与键盘导航。

PPT 转换优先用带 python-pptx 的 python3 提取文本、图像和备注,保留顺序与演讲者备注;不可用时询问安装或退回手动导出流程,并保持跨平台。生成前需阅读 STYLE_PRESETS.md,遵循其预设、密度限制和强制性 CSS 块,避免通用渐变、模板感、项目符号墙和需滚动的代码块。内容密度限制示例:标题页 1 主标题+1 副标题+可选口号;内容页 1 标题+4-6 项目符号或 2 段短文字;功能网格最多 6 卡片;代码最多 8-10 行;引言 1 段+署名;图像 1 张。

交付时删除临时预览(除非用户保留)、打开幻灯片并总结文件路径、预设、页数与自定义点。打开方式:macOS 用 open file.html,Linux 用 xdg-open file.html,Windows 用 start "" file.html。相关技能包括 frontend-patterns、liquid-glass-design 和 e2e-testing。资料未提供收费、价格或平台限制等信息。