Frontend Slides：把文章和现有 PPT 做成有动画的网页演示
先比较视觉样页，再把文章或现有 PPT 制作为 HTML 演示，附三页官方图库风格预览。
关于这份Skill
Frontend Slides 适合产品介绍、技术分享和浏览器播放。它让 AI 先整理内容、展示风格预览，再生成完整网页，也支持提取现有 PPT 的文字和图片后重新设计。本文介绍安装方式、中文任务示例与格式边界：主要输出是 HTML，可导出静态 PDF，不能据此视为原生可编辑 PPTX 工具。配套附件为三页官方图库图片合集，方便比较视觉方向。
适用场景
- 产品介绍与演示
- 技术分享与公开演讲
- 已有 PPT 转网页
- 浏览器播放与链接分享
Skill 安装与使用步骤
- 按官方说明安装完整技能目录，并确认文件读取和网页预览能力。
- 提供主题、受众、页数和材料，先确认内容大纲。
- 比较三个风格预览，选定后生成完整 HTML 演示。
- 检查中文标题、图片和翻页效果，按需导出静态 PDF。
使用建议
- 本文是中文介绍与使用指南，真正的技能文件及依赖请从原仓库获取。
- 主要交付是网页演示，读取 PPTX 不代表输出原生可编辑 PPTX。
- 离线播放前检查字体与图片外链，PDF 不保留网页动画。
- 三页附件来自官方引用的模板图库，为图片型样张，不是本次运行技能的生成成果。
Skill介绍
项目完整说明文档与使用指南，支持图文阅读与一键复制 Markdown 源码。
Frontend Slides：把文章和现有 PPT 做成有动画的网页演示
一份产品介绍需要反复发给客户，一场技术分享希望观众通过链接回看，或者现有 PPT 内容已经完整、视觉却缺乏变化。这些任务可以尝试 Frontend Slides：它让 AI 编程助手根据材料制作浏览器中的幻灯片，也支持读取已有 PowerPoint 后重新组织网页演示。项目介绍
先看样式，再决定整套演示怎么做
很多人能判断哪一页更好看，却很难准确描述字体、留白与配色。Frontend Slides 把视觉选择提前：先了解主题、受众和材料，再给出三个风格预览，选定之后才制作完整演示。
项目提供浅色、深色与特色主题，还接入了同作者的 beautiful-html-templates 设计库。比起直接说“做得高级一点”，读者可以通过样页判断：这种标题大小能否容纳中文，这种配色是否适合品牌，复杂内容放进去后是否仍然清楚。风格说明
实际选择时，建议同时查看标题页和一页内容页。只用封面判断风格，容易忽略数据页、长标题和图文混排的表现。本站配套预览选取了 Soft Editorial、Editorial Forest、Cobalt Grid 三张官方图库样张，帮助比较不同方向。模板图库
它生成的是什么文件？
主要成果是 HTML 网页演示，包含页面样式和交互逻辑，可以用浏览器播放。项目还提供 PDF 导出脚本，用于静态分享。需要特别区分：读取 PPTX 并转成网页，不等于最后会输出保留原生对象的可编辑 PPTX。输出与转换说明
因此，它适合活动分享、产品演示、浏览器播放和链接传播。如果交付要求是让同事在 PowerPoint 中逐字修改，并继续使用原有母版，应先确认所需格式，再选择相应工具。网页里的动画效果也不会自动保留到静态 PDF。
从现有 PPT 开始时，先核对内容
转换流程会先提取原稿的文字、图片和备注，确认提取结果后再选风格和生成网页。编辑时应检查原稿页数、关键数字、图注和配图是否齐全，避免“新稿看起来更简洁”掩盖了信息遗漏。
建议把不可变动的部分单独列出来，例如产品规格、报价条款、Logo 比例和结论原文。允许调整的内容也应明确，例如页序、标题措辞和装饰风格。这样更容易让 AI 在正确的范围内改稿，而不是自行重写整个演示。
安装与第一次使用
Claude Code 用户可按项目说明先添加来源：
/plugin marketplace add https://github.com/zarazhangrui/frontend-slides完成后，再单独发送安装命令：
/plugin install frontend-slides@frontend-slides安装后通过 /frontend-slides:frontend-slides 调用。其他能读写文件、执行命令的 Agent 可以读取完整技能目录，按仓库说明使用。PPT 内容提取和 PDF 导出各有运行依赖；“单文件网页”描述的是主要交付形式，不代表制作与导出过程完全不需要环境配置。安装说明
下面是有用编辑部整理的中文任务示例：
请使用 Frontend Slides，把我提供的产品介绍整理为 8 页中文网页演示，受众是第一次了解产品的企业客户。先列出每页要回答的问题，再给出三个视觉样页。选定后生成完整 HTML，并附每页讲述要点。保留产品参数和原始图片，不添加未经材料支持的客户案例。请检查中文长标题、浏览器翻页和图片加载，并说明静态 PDF 与网页动画的差异。
正式演示前，最好在实际使用的电脑上打开文件，检查字体、图片和全屏播放。需要离线使用时，明确要求整理本地素材并检查外链资源，而不要只凭“HTML 文件已经生成”判断准备完成。
本页附件与来源
附件为有用编辑部整理的三页图片型风格样张 PPT，图片来自项目 README 引用的 beautiful-html-templates 图库。它展示设计方向，未实际运行 Frontend Slides 生成整套网页，也不展示动画或原生 PPTX 编辑能力。样张中的业务内容属于原作者演示内容，不能直接作为读者的业务事实。
来源和 MIT 许可保存在附件讲者备注中。工具本身的说明以 Frontend Slides 仓库为准，图片许可见图库 LICENSE。有用编辑部整理，资料核对日期：2026 年 9 月 4 日。
