一键分享演示文稿Frontend Slides部署Vercel与Playwright导出PDF完整操作指南【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址: https://gitcode.com/gh_mirrors/fr/frontend-slidesFrontend Slides 是一款面向编程智能体的网页演示文稿生成工具它用零依赖的单个 HTML 文件内联 CSS/JS生成 16:9 的精美幻灯片。演示文稿做好之后项目内置两个脚本帮你一键分享——部署 Vercel 获得永久可分享链接以及用 Playwright 导出 PDF用于邮件、聊天工具和打印。本文带你完整走通这两条路径附常见坑位规避技巧。为什么是这两种分享方式 Frontend Slides 生成的幻灯片本质是一个 HTML 文件本地打开当然没问题但要分享给别人通常只有两种需求需求推荐方式适用场景对方要在线看、可翻页部署 Vercel得到链接手机转发、Slack/Discord、会议投屏对方要一个文件导出 PDF邮件附件、Notion 嵌入、打印归档两种方式都不需要你会写代码各只需一条命令。它们对应技能工作流中的 Phase 6分享与导出详见 SKILL.md。准备工作获取 Frontend Slides 技能 如果你还没装过先把技能文件放到本地clone 即可git clone https://gitcode.com/gh_mirrors/fr/frontend-slides在 Claude Code 等编程智能体中使用时也可以直接把技能目录指向~/.claude/skills/frontend-slides详见 README.md 的 Installation 部分。运行两个分享脚本只需一个前置条件Node.js。其余依赖脚本都会自动处理依赖部署 Vercel导出 PDFNode.js✅ 必需✅ 必需Vercel 账号免费✅ 首次需要不需要Vercel CLI脚本自动安装不需要Playwright Chromium不需要脚本自动安装首次较慢部署 Vercel三步拿到分享链接 部署脚本 scripts/deploy.sh 会自动检查环境、引导登录、上传文件最后打印出一个可用在任何设备上的链接。第一步确认 Node.js 与 Vercel CLI脚本会先检查npx即 Node.js是否存在并尝试查找 Vercel CLI都没有时会用npm install -g vercel自动安装。你只需保证装好了 Node.js 即可。第二步首次登录 Vercel第一次运行时会提示未登录脚本会尝试引导你执行vercel login按提示用 GitHub、Google 或邮箱注册/登录一个免费账号然后重新运行部署脚本即可。登录状态可用vercel whoami验证。第三步一条命令部署演示文稿是文件夹里面有index.html时bash scripts/deploy.sh ./my-deck/演示文稿是单个 HTML 文件时bash scripts/deploy.sh ./presentation.html成功后终端会打印Live URL把它发到任何地方手机、平板、电脑打开都能正常翻页。Vercel 免费额度对个人完全够用不会收费之后想下线演示去 Vercel 控制台删除对应项目即可。部署避坑3 个细节 ⚠️素材多的演示优先部署整个文件夹。部署单个 HTML 时脚本会自动解析src...等引用并打包图片但如果图片是通过 CSS 背景图等方式引用就可能漏掉。直接把index.html和全部素材放进一个文件夹再部署最稳妥。重新部署会更新同一个 URL。修改演示后再次运行脚本覆盖旧内容链接不变无需重新分享。文件名尽量别带空格。脚本能处理空格但 URL 会把空格编码成%20偶尔出问题时把文件名改成短横线即可。Playwright 导出 PDF1920×1080 逐页截图 导出脚本 scripts/export-pdf.sh 会调用 Playwright 启动一个无头 Chromium 浏览器把每一页幻灯片截图为 1920×1080 的 PNG再合并成横版 PDF——颜色、字体、版式全部保留。基本导出命令bash scripts/export-pdf.sh ./presentation.html不指定输出路径时PDF 会保存为 HTML 同名文件如presentation.pdf也可以显式指定bash scripts/export-pdf.sh ./presentation.html ./slides.pdf脚本结束后会自动打开生成的 PDF并打印文件位置与大小。它背后做了什么30 秒了解在本地起一个临时 HTTP 服务器这样 Google 字体和相对路径图片才能正常加载无头浏览器按 1920×1080 视口逐页切换幻灯片并截图所有截图拼成一个横版 PDF随后清理临时文件。注意PDF 是静态快照动画不会保留每一页动画会定格在最终状态——这是正常现象不影响观看。--compact 参数PDF 太大时压缩 50%~70%每页都是 1920×1080 全高清截图18 页的演示文稿可能生成约 20MB 的 PDF。加--compact参数可以降到 1280×720 渲染文件通常缩小 50%~70%肉眼几乎无差别bash scripts/export-pdf.sh ./presentation.html ./slides.pdf --compact导出避坑3 个常见问题 ⚠️首次运行较慢。脚本需要临时安装 Playwright 并下载约 150MB 的 Chromium请耐心等待 30~60 秒若卡在浏览器下载可手动执行npx playwright install chromium。找不到幻灯片0 slides found导出脚本靠classslide定位页面。Frontend Slides 生成的演示都符合这个约定只有外部手写的 HTML 才需要检查。图片不显示图片必须用相对路径引用如srcphoto.png且与 HTML 放在同目录或相对目录下绝对路径如/Users/xxx/photo.png无法加载。快速对照链接还是 PDF对比项部署 Vercel导出 PDF命令bash scripts/deploy.sh 路径bash scripts/export-pdf.sh 路径 [输出.pdf]首次准备注册免费 Vercel 账号自动下载 Chromium较慢保留动画/交互✅ 在线效果完整❌ 静态快照离线可用❌ 需联网✅ 任何设备适合分享链接、投屏演示邮件、打印、文档嵌入大多数情况两个都要链接给需要实时互动的人PDF 给需要存档的人。常见问题 FAQ Q部署会收费吗不会。Vercel 免费额度足够个人演示文稿使用脚本部署后也会提示如何自行删除项目。Q部署后修改了演示文稿链接会变吗不会。对同一演示再次运行部署脚本会覆盖更新URL 保持不变。Q导出 PDF 一定要联网吗首次需要联网下载 Chromium 和字体资源下载完成后本地即可反复导出。Q除了这两种方式还能分享吗当然。演示文稿本身就是一个 HTML 文件直接作为附件发送对方双击浏览器打开也能看。写在最后Frontend Slides 把做演示和分享演示都变成了命令行级的简单操作deploy.sh一条命令上线export-pdf.sh一条命令出 PDF。配合技能本身的 12 个精选风格预设和 34 套大胆模板见 bold-template-pack/从零到可分享的演示文稿全程不需要碰一行 CSS。【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址: https://gitcode.com/gh_mirrors/fr/frontend-slides创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考