如果你经常做 PPT，大概率遇到过这些问题：

  • 有想法，但排版很耗时间。
  • AI 生成的 PPT 太像模板。
  • NotebookLM 这类工具导出的内容不好改。
  • PPT 发出去后，字体、动画、版本兼容又容易出问题。

frontend-slides 换了一个思路：不先生成传统 PPT，而是直接生成网页演示文稿。

它是一个 Claude Code Skill，可以从零创建演示文稿，也可以把已有 PPTX 转成网页版本。最后通常会得到一个自包含 HTML 文件，里面有 CSS、JavaScript、动画和导航逻辑。用浏览器打开就能演示，也可以部署成链接发给别人。

它是什么

frontend-slides 是一个制作 HTML 演示文稿的 Agent Skill。

它的目标很直接：

让不会设计、不会写前端的人，也能用 AI 做出更像作品的网页 PPT。

它不是套一个普通模板，而是把内容整理、风格选择、页面生成、导出分享串成一套流程。

它适合这些场景：

  • 产品路演或 pitch deck
  • 课程、教程、分享稿
  • 把已有 PPTX 转成网页演示
  • 做一个可在线访问的演示页面
  • 给博客、视频或自媒体内容做视觉化幻灯片

为什么我觉得它值得关注

传统 PPT 编辑方便，但也有几个麻烦：文件重、依赖软件、分享链路长，动画和网页能力有限。

HTML 幻灯片更适合在线传播：

  • 打开即用：浏览器就能播放。
  • 容易分享：部署后就是一个链接。
  • 动效更自由：CSS 和 JS 能做更自然的页面动画。
  • 方便保存：单文件 HTML 很好迁移。
  • 方便继续修改：本质是代码，后续可以让 Agent 改文案、布局和样式。

对自媒体和独立开发者来说，这点很有用。很多时候，我们需要的不是一份办公文档，而是一个能展示、传播、继续迭代的视觉内容。

它的核心思路

frontend-slides 的思路可以概括成一句话：

先看效果，再做选择。

很多人说不清自己想要什么风格。你问他“要科技风还是杂志风”，他可能也没概念。

所以这个 Skill 不只让你描述偏好，而是先生成几个风格预览。看到真实页面后，再选一个方向。

这比反复写提示词更直接。

它的大致流程是：

  • 判断任务类型：新建演示、转换 PPT，还是增强已有 HTML。
  • 询问用途、页数和内容准备情况。
  • 如果有图片，先扫描图片，判断哪些能用。
  • 生成多个风格预览，让你选择。
  • 生成完整 HTML 演示文稿。
  • 按需导出 PDF 或部署到线上。

这个流程对非设计师很友好，因为它把“想象风格”变成了“对比效果”。

它生成的不是普通网页

frontend-slides 对演示文稿有明确约束。

最重要的一条是：每一页必须刚好适配视口，不能滚动。

这不是小细节。很多 AI 生成的 HTML PPT 最大的问题就是内容溢出：一页写太多，手机上看不全，投影时出现滚动条。

这个 Skill 明确要求：

  • 每个 .slide 都是 100vh 和 100dvh。
  • 每页都要 overflow: hidden。
  • 字体大小和间距用 clamp() 自适应。
  • 图片高度限制在视口内。
  • 内容太多就拆页，不硬塞。
  • 处理低高度屏幕和减少动画偏好。

这些规则让结果更像真正能演示的作品，而不是只能截图看的网页。

风格上避免 AI 味

很多 AI 生成页面一眼就能看出来：紫色渐变、白底卡片、圆角按钮、Inter 字体，最后都长得差不多。

frontend-slides 明确反对这种“AI 味”。

它内置了一批风格预设，比如：

  • Bold Signal：深色背景 + 高冲击力色块
  • Electric Studio：黑白蓝分屏，偏专业展示
  • Creative Voltage：电蓝色和荧光色，适合创意主题
  • Dark Botanical：深色、暖色、柔和抽象形状
  • Notebook Tabs：纸质笔记本标签页风格
  • Vintage Editorial：复古杂志感，更有个性
  • Neon Cyber：霓虹、网格、科技感
  • Paper & Ink：偏文学、纸张和编辑排版

这些预设不只是换颜色，还包括字体、布局、背景、动效和视觉元素。

也就是说，它不是让 AI 随机发挥，而是给 AI 一个更稳定的审美框架。

使用方式

如果通过 Claude Code 插件市场安装，可以使用下面的命令：

1
2
/plugin marketplace add zarazhangrui/frontend-slides
/plugin install frontend-slides@frontend-slides

安装后，在 Claude Code 里输入：

1
/frontend-slides

然后告诉它你要做什么，比如：

1
我想做一个关于 AI Agent 工作流的 10 页分享稿，风格要偏科技、清晰、有动效。

它会继续问几个问题：用途是什么、预计多少页、内容是否准备好、是否需要在浏览器里编辑文字。

如果你已有 PPTX，也可以直接说：

1
把这个 presentation.pptx 转成网页幻灯片。

它会先提取 PPT 里的文字、图片和备注，让你确认内容，再重新设计成网页版本。

适合怎么用

我更推荐把它当成“演示内容生产器”，而不是单纯的 PPT 替代品。

把文章变成演示稿

你可以把一篇博客、一份教程或一段长文交给它，让它拆成 8 到 12 页演示稿。

这适合做：

  • YouTube 视频脚本配图
  • 小红书或公众号配套长图思路
  • 课程讲义
  • 产品功能介绍

重点是先让 AI 帮你压缩结构，再用 frontend-slides 做视觉呈现。

把产品介绍变成在线 Demo

如果你是独立开发者，可以用它快速做一个产品介绍页面。

比如：

  • 首页说明产品解决什么问题
  • 中间几页展示核心功能
  • 后面放使用场景、价格和 CTA

最后部署到 Vercel，就能得到一个可以发给用户、投资人或朋友的链接。

把旧 PPT 变成网页版本

很多老 PPT 内容还不错，但视觉过时。

这时可以让它先提取原 PPT 内容，再重新选择风格。这样能保留原来的信息结构，同时得到一个更现代的网页演示版本。

这比手动一页页重做省很多时间。

和普通 AI PPT 工具的区别

它和常见 AI PPT 工具最大的区别，不是“能不能生成幻灯片”，而是输出形态。

普通 AI PPT 工具通常生成 .pptx 或 PDF。

frontend-slides 生成的是 HTML。

这会带来几个变化：

  • 修改方式从拖拽编辑，变成让 Agent 改代码。
  • 分享方式从传文件，变成发链接。
  • 动画方式从 PPT 动画，变成网页动画。
  • 视觉边界从办公模板，变成前端页面设计。

如果最终目标是开会汇报，传统 PPT 仍然方便。

但如果目标是在线传播、产品展示、公开演讲或内容复用，HTML 演示会更灵活。

使用时的注意点

它很强，但不是完全不用管。

我建议注意这几点：

  • 先给清楚的大纲：不要只给一句主题。大纲越清晰，结果越稳。
  • 每页少放内容：一页只讲一个重点，不要把文章原文塞进去。
  • 先选风格，再生成全稿：不要急着一次生成最终版本。
  • 图片要提前整理：如果有截图、logo、产品图，单独放一个文件夹更好。
  • 生成后检查小屏幕：尤其是手机横屏和投影比例。
  • 重要场合仍要人工验收：AI 可以加速，但最后一遍要自己过。

这类工具最适合做 80% 的初稿和视觉探索。最后 20% 的表达、取舍和节奏，还是要人来判断。

我推荐的工作流

如果你想稳定产出一份不错的网页 PPT，可以按这个流程来：

  • 先用普通 AI 聊天工具整理主题和大纲。
  • 把大纲压缩成每页一个核心信息。
  • 准备产品截图、logo 或参考图。
  • 用 frontend-slides 生成三个风格预览。
  • 选一个最适合目标受众的风格。
  • 生成完整 HTML。
  • 检查每页是否过载。
  • 让 Agent 修改不自然的文案和布局。
  • 最后导出 PDF 或部署成网页链接。

这个流程比直接说“帮我做一个 PPT”更可控。

它背后的一个启发

frontend-slides 最值得借鉴的地方，不只是它能做网页 PPT，而是它的 Skill 组织方式。

它没有把所有说明塞进一个超长提示词，而是拆成多个文件：

  • SKILL.md 负责核心流程。
  • STYLE_PRESETS.md 负责风格预设。
  • viewport-base.css 负责视口适配。
  • html-template.md 负责页面架构。
  • animation-patterns.md 负责动效参考。
  • 脚本文件负责 PPT 提取、PDF 导出和部署。

这种结构很适合 Agent 使用。

主说明只告诉 Agent “什么时候该看什么”，细节按需加载。这也符合一个实用的 Agent 设计原则：给 Agent 地图，不要一次性塞一本说明书。

如果你正在做自己的 Agent Skill，这个项目可以作为参考。

总结

frontend-slides 适合想用 AI 做高质量演示文稿的人，尤其适合自媒体、独立开发者、产品经理和技术分享者。

它不是“又一个 PPT 生成器”，而是把演示文稿变成可设计、可部署、可迭代的网页作品。

如果只是临时做一份公司内部汇报，传统 PPT 可能更直接。

但如果你想要更强的视觉表达、更方便的在线分享，以及更适合 AI 继续修改的格式，frontend-slides 值得试试。