文章正文
这份源码是一个生成网页幻灯片的 AI Skill，产物是单个 HTML 文件，所有 CSS 和 JS 都内联进去，不依赖任何构建工具。
它主打”零依赖、可视觉对比、审美在线”的思路，先给你三张不同风格的预览页，你挑中方向后再生成完整 deck。
舞台被锁死在 1920×1080 的 16:9 画布上，整页等比缩放到视口，手机上也不会变成响应式重排，演示时版式稳得住。
除了从零做新幻灯片，它还能把现成的 .pptx 转成网页：用脚本抽出文字、图片和演讲者备注，再套上选中的风格。
做完可以直接部署到 Vercel 拿一个分享链接，也能用 Playwright 导出成 PDF，线下投屏或发邮件都方便。
如果你想要的是”好看、能改、能发链接”的网页幻灯片，而不是被锁死在某个 SaaS 里，这份源码值得下回来研究。
源码简介
这是 frontend-slides 的 AI Skill 源码，用来生成零依赖、单文件、动画丰富的 HTML 演示文稿。
所有样式和脚本内联到一份 HTML 里，无需 npm 和构建工具，在浏览器直接打开即可翻页演示。
源码包含风格预设、模板库、PPTX 转换脚本与部署/导出脚本，适合想做高质感网页幻灯片、或需要把 PPTX 转成网页的开发者下载参考。
适用场景
- 追求高级视觉、希望先对比多种风格再定稿的分享场景
- 把已有 .pptx 转换成可在线查看的网页幻灯片
- 需要一键部署分享链接，或导出 PDF 用于邮件/打印
技术栈与运行环境
- 前端：原生 HTML / CSS / JS，全部内联，无框架、无打包工具
- 字体：Fontshare / Google Fonts（CDN 引入，不用系统字体）
- 转换依赖：Python + python-pptx（scripts/extract-pptx.py 抽取 PPTX 内容）
- 导出依赖：Playwright（scripts/export-pdf.sh 截图合成 PDF，需 Chromium）
- 部署：Vercel CLI（scripts/deploy.sh 部署单文件或文件夹）
功能亮点
- 零依赖单文件 HTML 输出：SKILL.md 明确”Single HTML files with inline CSS/JS. No npm, no build tools”，html-template.md 为内联架构模板。
- 固定 16:9 舞台自适应：viewport-base.css 为强制固定舞台样式，SKILL 规定整页等比缩放、不重排内容。
- 从 PPTX 转换保留内容与备注：scripts/extract-pptx.py 抽取文字/图片/备注，Phase 4 流程将其转成选定风格并保留备注（HTML 注释）。
- 三风格预览对比：Phase 2 一次生成 style-a/b/c 三个单页预览，STYLE_PRESETS.md 提供 12 套视觉预设与 bold-template-pack 模板库。
- 一键部署 Vercel / 导出 PDF：scripts/deploy.sh 部署到 Vercel 拿分享链接，scripts/export-pdf.sh 用 Playwright 导出静态 PDF。
- 浏览器内联编辑：Phase 5 支持悬停左上角或按 E 进入编辑、点文本即改、Ctrl+S 保存，方便现场微调。
安装与部署提示
- 在支持 skill 的 agent 环境（如 Claude Code）按 SKILL.md 运行工作流。
- 转换 PPTX 前执行 pip install python-pptx（脚本会提示）。
- 导出 PDF 前安装 Playwright 浏览器：npx playwright install chromium。
- 部署到 Vercel 需先 npx vercel login 完成授权，再用 bash scripts/deploy.sh 发布。
截图与演示说明
- 风格预览页：Phase 2 生成的 style-a.html / style-b.html / style-c.html 三个单页预览（存于 .frontend-slides/slide-previews/）。
- 完整 deck 单文件 HTML：内联 viewport-base.css，黑色舞台 + 翻页导航。
- STYLE_PRESETS.md 的 12 套视觉预设说明，bold-template-pack 下的 design.md 模板与 selection-index.json。
- scripts/ 下 extract-pptx.py、deploy.sh、export-pdf.sh 。
常见问题
#### 生成需要联网吗？
生成本身是纯本地 HTML 文件，但字体走 Fontshare / Google Fonts CDN，部署 Vercel 与导出 PDF 需要对应网络与运行环境。
#### 适合二次开发吗？
模板与脚本结构清晰，viewport-base.css、html-template.md、animation-patterns.md 都是可读源码，可直接改造布局、动画与部署脚本。
安全风险提示
特别提示：本源码未检测安全风险文件，下载后请务必进行安全审计，删除恶意代码后再部署使用！
下载说明
源码仅供学习研究、测试部署和二次开发参考，商用前请自行确认授权、版权和安全风险。
本项目为 AI Skill 定义加前端模板，运行依赖对应 agent 环境与 python-pptx / Playwright 等工具。
GitHub项目开源地址：https://github.com/zarazhangrui/frontend-slides
