前端幻灯片生成器

要解决的问题

做技术分享、产品评审或内部汇报时，常见痛点不是“能不能做出来”，而是浏览器演示容易失手：多文件依赖、滚动条破坏版面、动画噪音化、样式像默认模板，或者 PPT 转 HTML 后只剩文字、图片和讲者备注丢失。

技能如何工作

fronted-slides 把 HTML 幻灯片当成一个小型前端项目来处理。核心约束很明确：

• 零依赖：默认输出一个自包含 HTML 文件，CSS 与 JS 内联。
• 强制视口适配：每页使用 100vh / 100dvh 并禁止内部滚动，内容放不下就拆分，而不是缩小到不可读。
• 先看预览再定风格：生成 3 张单页预览，帮助用户选择版式、色彩、字体与动效方向。
• 生产级结构：语义化 slide section、CSS custom properties、键盘 / 滚轮 / 触摸导航、IntersectionObserver 触发入场动画，并支持 prefers-reduced-motion。

对 PPT / PPTX，它会优先用 python-pptx 抽取文字、图片与备注，再进入同样的风格选择与构建流程，尽量保留原有顺序和素材。

适用边界与注意点

它更适合演讲、汇报、教学或产品发布这类需要视觉完整性的 HTML deck；不适合追求复杂交互、多人协作编辑或需要服务端渲染的场景。内容密度有上限，代码块、长段落和过密 bullet 会被拆页或拒绝塞进单页，因此前期需要明确目的、长度和内容完成度。