SuperAPI AI 工具集

frontend-slides

前端与建站

查看项目

更新于 10-16 03:17

技能介绍

用途:创建零依赖、动画丰富的 HTML 演示文稿,可在浏览器中直接运行,支持从零新建、将 .pptx 转换为 HTML,以及增强已有 HTML 演示。

主要能力:生成单文件 HTML(CSS/JS 内联,无需 npm 或构建工具);按视口适配规则生成幻灯片,要求每个 .slide 使用 height:100vh / 100dvh 与 overflow:hidden,字体与间距使用 clamp(min, preferred, max),图片 max-height:min(50vh,400px),并针对 700px、600px、500px 高度设置断点,支持 prefers-reduced-motion;对每页内容密度设限,超出则拆分为多页;提供风格预设与三份单页预览,用户可挑选或混合元素;可选浏览器内联编辑,支持 localStorage 自动保存与导出;可部署到 Vercel 生成可分享链接,或导出为 PDF。

使用方式:先判断模式(新建 / PPT 转换 / 增强);新建时一次性收集用途、篇幅、内容、是否内联编辑,并评估用户图片,共同设计大纲;随后展示三种风格预览供选择;生成时须读取并完整包含 viewport-base.css,使用 Fontshare 或 Google Fonts 字体,并添加分节注释。PPT 转换运行 python scripts/extract-pptx.py <input.pptx> <output_dir>,必要时 pip install python-pptx。部署运行 bash scripts/deploy.sh <path-to-presentation>,需 Node.js 与 Vercel CLI,通过 npx vercel --version、npx vercel whoami、vercel login 检查登录。PDF 导出运行 bash scripts/export-pdf.sh <path-to-html> [output.pdf],依赖 Playwright,可能需 npx playwright install chromium;导出时幻灯片类名须为 .slide,图片须用相对路径。

适用场景:路演、教学教程、会议演讲、内部汇报等需要富有动画和鲜明视觉风格的演示。

限制:PDF 导出为静态快照,不保留动画与交互;首次运行 Playwright 安装较慢;部署需 Vercel 账号,本地资源需随 HTML 一并提供,CSS background-image 引用可能不会被自动打包;演示文稿未提及具体收费、价格或效果保证,相关事实暂未提供。