frontend-slides 中文教程：先把本地 HTML 做对，再导出和发布

frontend-slides 不是一个在线做 PPT 的网站，而是一套交给 coding agent 执行的说明和模板。它让 agent 先做三张视觉预览，选定方向后生成固定 16:9 的网页演示。最终 HTML 可以直接打开；PPTX 抽取、PDF 导出和公开发布则各有额外依赖和副作用。

1. 固定技能版本，先读再装

克隆或安装前先看 SKILL.md。Claude Code 可以走自定义 marketplace source；其他 agent 可直接读取仓库。固定 v2.1.0，避免模板、脚本和说明在一次制作中途改变。

git clone --branch v2.1.0 --depth 1 \
  https://github.com/zarazhangrui/frontend-slides.git

2. 先准备内容，不让样式掩盖事实

把听众、时长、页数、每页一句主结论和来源交给 agent。图片要附许可或出处，数据要附日期和口径。这个技能能排版，不能判断你的论据是否真实。先用 5 页小样验证工作流，比一开始生成 40 页更容易发现结构问题。

3. 三张预览只解决视觉方向

v2.1.0 要求先做三张真实标题页预览：安全预设、至少一套 bold template，以及一个额外方向。选中的 template 才读取完整 design.md。预览阶段只比较字体、色彩、层次和版式，不把模板名、文件路径或制作说明写进正式页面。

4. 固定 1920×1080 舞台

每一页都在 1920×1080 的画布上编排，浏览器只缩放整个舞台，不重新排版。生成后至少检查 1920×1080、笔记本屏幕和手机竖屏：文字不能溢出，交互按钮要能点，键盘导航不能抢占输入控件，图片也不能拉伸变形。

5. PPTX 转换是“抽取后重做”

extract-pptx.py 使用 python-pptx 抽取标题、普通文本、图片和备注，写成 JSON 与 assets。它不是 PowerPoint 渲染器；复杂图表、母版、视频、动画和可编辑形状可能丢失。先看抽取结果并确认页数、顺序和图片，再让 agent 重新设计。

6. PDF 导出会安装和运行浏览器

export-pdf.sh 需要 Node.js 和 Playwright。脚本会启动本地 HTTP server，在 Chromium 中逐页显示并截图，最后组合成 PDF。因此 PDF 是静态画面，动画和交互不会保留。对不可信 HTML，应在隔离目录和低权限账户中运行，避免页面脚本访问不该接触的本地服务。

7. deploy.sh 是生产发布

deploy.sh 会检查或安装 Vercel CLI、要求登录，并以 --prod 上传 deck。执行前列出将发布的 HTML、图片、字体和备注，删除未使用素材、密钥与内部链接，再由内容负责人确认。先在本地打开成功，不代表适合公开。

8. 同类对比：frontend-slides 与 Slidev

相比 Slidev，frontend-slides 让 agent 直接写自包含 HTML，视觉自由度高，适合一次性定制；Slidev 用 Markdown、Vue/Vite、主题和组件构建，项目结构与复现路径更明确。快速做独特网页 deck 可试 frontend-slides；团队长期维护、复用组件和审查变更时，Slidev 更合适。

9. 验收清单

逐页核对事实、来源、拼写、图片许可、字号、色彩对比、溢出和页码。断网再打开一次，确认没有漏掉在线字体或图片。用键盘走完整套演示，再导出 PDF 比对页数和裁切。只有这些通过后，才考虑公开 URL。

10. 验证状态与商业边界

未验证：安装兼容、模板渲染、移动端缩放、PPTX 保真度、PDF 页尺寸、字体/图片网络请求、脚本路径安全、Vercel 权限和任何 agent 的最终输出。可选分享流程导向 Vercel 免费层，但没有返佣参数、付费模板或额度转售，因此保留并披露。

常见问题