作者 Frontend Slides 演示的 14 秒节选，展示视觉风格选择与动画切换。
演示视频关于这个 Skill
Frontend Slides 是 Zara Zhang 开源的编程 Agent Skill，可从需求、粗略笔记或现有 PowerPoint 制作浏览器演示稿。核心流程先梳理内容，再展示三张实际标题页预览；选定视觉方向后，生成整套演示稿。主要输出为内联 CSS 与 JavaScript 的 HTML 文件，使用固定 16:9 画板，并提供动画与浏览器导航。
为什么推荐
适合已经明确内容、但还没有确定视觉方向的场景：Agent 先展示三种设计，再把选中的风格扩展成整套演示稿。仓库还提供风格参考、PowerPoint 内容提取、PDF 导出和 Vercel 分享脚本。
适合用来做什么
- 希望把大纲做成网页路演、分享或课程演示的演讲者、创业者与教师。
- 希望通过实际设计预览挑选风格，而不是抽象描述审美偏好的用户。
- 希望将已有 PowerPoint 内容改编为动画 HTML 演示稿的团队。
先确定内容，再选择视觉方向
先提供受众、用途、大致页数与素材。Skill 区分文字较少、由演讲者讲解的演示稿，以及适合异步阅读、信息更完整的演示稿。随后生成三种不同标题页：精选预设、bold template pack 中的方案，以及一个自由设计方向。
选定后，Agent 仅加载相关支持文件，将该方向扩展成完整演示稿。仓库包含十二种精选预设，以及可选的 bold template 风格库。提供真实品牌、图片与文案，让预览直接对应你的演示内容。
安装与调用
安装 Claude Code 插件时，将下方两条命令分别作为消息发送，等待添加 marketplace 完成后再安装。随后使用 /frontend-slides:frontend-slides 调用。手动安装的独立 Skill 使用 /frontend-slides 调用。
官方 README 也说明了 Codex、Gemini CLI、OpenCode 等可访问文件和命令行的 Agent 的用法。克隆仓库或把 GitHub 链接发给 Agent，让它读取 SKILL.md，并保留引用的风格、CSS、模板和脚本文件。Claude 插件命令仅用于 Claude Code。
| 命令 | 用途与使用时机 |
|---|---|
/plugin marketplace add https://github.com/zarazhangrui/frontend-slides | Claude Code，第一条消息：添加作者的 marketplace 来源。 |
/plugin install frontend-slides@frontend-slides | Claude Code，第二条消息：等待上一条完成后安装插件。 |
git clone https://github.com/zarazhangrui/frontend-slides.git | 克隆完整支持文件，供本地编程 Agent 使用。 |
第一次可以这样提需求
使用 Frontend Slides，把这些笔记整理成面向潜在客户的八页产品介绍。以现场讲解为主，使用提供的 logo 和截图，先展示三种视觉方向，再制作最终演示稿。交付 HTML 文件及所需素材，包含键盘导航和减少动态效果的支持。
PowerPoint 转换、PDF 导出与分享
对于已有 PPTX，提取脚本先读取文字、图片与讲稿，再由 Agent 重建 HTML 演示稿。这是内容与设计的转换流程；原文件包含图表、复杂布局或 PowerPoint 专属效果时，应对照源文件检查生成结果。
可选 PDF 脚本将幻灯片截图合成 PDF，动画和交互编辑不会保留。Vercel 脚本可发布分享网页；所需本地媒体应与演示文件放在同一目录，并检查发布后的资源。演示稿使用固定 16:9 画板，在手机上也按视口等比例缩放。
| 命令 | 用途与使用时机 |
|---|---|
python scripts/extract-pptx.py presentation.pptx extracted | 在克隆的仓库内提取 PowerPoint 内容，需要 python-pptx。 |
bash scripts/export-pdf.sh ./presentation.html ./presentation.pdf | 使用作者脚本将生成的演示稿导出为静态 PDF。 |
bash scripts/deploy.sh ./my-deck/ | 配置账号后，将包含素材的演示目录发布到 Vercel。 |
作者演示与许可
视频节选自仓库 README 中作者演示的 00:42 至 00:56，共十四秒，为目录展示缩放并压缩。静图为用户提供的模板画廊截图，展示 Soft Editorial、Editorial Forest 和 Pin & Paper 示例，已缩放并转换为 WebP。
Frontend Slides 使用 MIT 许可，版权署名为 Zara Zhang。分发许可覆盖的材料时应保留版权与许可声明。本目录链接到上游项目获取源码与安装说明。
使用前需要了解
- 需要能读取本地文件、执行命令的编程 Agent。生成的 HTML 演示稿使用现代浏览器查看；外部网页字体可能需要联网。
- PowerPoint 提取需要 Python 与 python-pptx。PDF 导出需要 Node.js 与 Playwright；发布分享链接需要 Node.js 与 Vercel 账号。
- 仓库按 MIT 许可免费提供；所用 AI 服务及可选托管服务按各自价格与条款计费。
支持的 Agent
常见问题
查看生成的演示稿需要 npm 吗？
主要输出可通过浏览器运行，CSS 与 JavaScript 内联，无需 npm 构建。可选的转换、PDF 与部署脚本各有工具要求；自定义字体可能从网络加载。
PDF 导出会保留动画吗？
作者提供的脚本通过幻灯片截图生成静态 PDF。需要动画与浏览器交互时，使用 HTML 演示稿。
资料与来源
原始资料见下方链接；文中的上手建议由 SkillHey 编辑整理。
