从大纲或 PPTX 出发，在浏览器里讲述与分享
Frontend Slides
先选风格，再完成网页演示
给 AI 大纲、图片或已有 PPTX，先比较三个真实内容的风格预览，再制作可播放、可改文字的 16:9 HTML 幻灯；需要静态文件时另行导出 PDF。
查看作者原图奶油色背景与三张柔和色块卡片，把每个观点的标题和解释放在一起，适合有叙事顺序的内容分享。
模板来源以下原图来自作者的 beautiful-html-templates，也是 Frontend Slides 引用的模板来源。它们展示版式差异，图中文字和数字为模板示例，不是本站运行结果。
制作与播放
- Claude Code 插件
- 可读取仓库的编程助手
- 现代浏览器播放
- GitHub Star
- 31,529
- 版本
- 2.1.0
- 资料核对
- 分类
- 文档与幻灯片
先用真实首张内容选方向
最有用的起点是标题、受众和第一段要讲的内容。让三张预览在同一份材料上比较，再扩展完整演示；不要只凭模板名字决定整套风格。
选一个任务，开始使用
Claude Code 插件需要下面两条命令分开发送。完成安装后，按材料类型选择一个任务，并附上真实文件。
适合产品介绍、内部分享与教学。准备真实标题、受众、讲述时长、要点和图片，再用首张预览比较视觉方向。
第 1 步：添加 Claude Code 插件源
这是 Claude Code 内的第一条消息，不是终端命令。使用完整 HTTPS 地址；成功后再发送下方第二条安装命令。
查看作者安装与使用说明/plugin marketplace add https://github.com/zarazhangrui/frontend-slides第 2 步：等待上一步完成，再安装插件
在 Claude Code 中确认插件源已添加成功，再单独发送下面这条命令，不要把两条安装命令合成一条消息。安装完成后用 /frontend-slides:frontend-slides 调用。下方任务已经包含这个调用前缀。
查看两步安装与其他助手入口/plugin install frontend-slides@frontend-slides把这段话发给 AI
这些是本站依据作者流程编写的示例，结果栏是验收目标，未在本次整理中实跑生成。示例首行适用于 Claude Code 插件；手动安装的独立技能改用 /frontend-slides，其他助手先读取仓库的 SKILL.md，再发送下面的任务正文。
/frontend-slides:frontend-slides 请使用 Frontend Slides，把我附上的大纲、产品截图和品牌资料做成面向产品团队的 15 分钟分享。预计 8–10 页，以现场讲述为主，每页突出一个观点。先确认故事顺序和图片用途，材料缺失处标明，不补造数字。用我的真实标题和内容生成三个首张预览，包含一个稳妥预设、一个 bold-template-pack 方向和一个不同的候选；等我选定再扩展整套。内容放不下时拆页。交付固定 16:9 的 HTML 与所需素材，检查翻页、图片、字体和溢出，在 1280×720 与一个手机视口截图确认整张幻灯等比缩放。最后说明如何打开、进入文字编辑并保存文件。
检查你拿到的结果
- 三个使用本次真实内容的首张 HTML 预览，以及选定方向后完成的整套演示。
- HTML 与图片等依赖文件；标题、数字、引用和故事顺序能逐项对照输入材料。
- 桌面与手机视口的检查记录：画布保持 16:9，翻页可用，文字和图片没有越界。
进一步了解这个 Skill
Frontend Slides 是一套让编程助手制作网页演示的工作流程。它先弄清楚材料、受众和讲述方式，再用真实内容生成三个首张预览。你选择视觉方向后，助手继续安排整套页面、图片和过渡效果，并把 HTML 文件交付给你。现有 .pptx 可以作为内容来源，已有 HTML 演示也可以继续修改。
成品以固定 1920×1080、16:9 画布制作，整个画面随浏览器等比缩放。手机上也保持原有构图，可能出现上下或左右留白，不会把一张幻灯改排成手机文章。现场讲述宜少字、大标题；阅读型材料可以使用更多卡片、表格和注释，但内容超出画布时仍应拆页。
主要交付物是 HTML 网页演示，CSS 与 JavaScript 内嵌，图片可能另存于 assets，字体也可能从网络加载。分享文件时要把依赖一起交付；需要离线使用，就事先检查图片和字体是否都能本地加载。可选 PDF 是逐页截图的静态版本，公开网址则需要另行部署。两者都不等于可编辑的原生 PPTX。
来源与核验
资料核对
依据当前仓库与 v2.1.0 文档核对；图片为作者模板示例，本站未运行整套生成、PPTX 转换或 PDF 导出。