frontend-slides：用编程 Agent 制作网页幻灯片
frontend-slides 是给编程 Agent 用的、star 数最高的开源 PPT skill——它把幻灯片做成简洁现代的网页，直接在浏览器里演示。本文讲清楚它是什么、如何安装与使用、它真正擅长什么（以及有哪些局限）、它和其他 Claude PPT skill 相比如何，以及当单个 skill 走到尽头时，一个 Agent-Native Design Workspace 会从哪里接手。
如果你想要一套幻灯片，而且本来就住在终端里，那么 frontend-slides 是最干净利落的方式之一。它是一个编程 Agent 技能：你不必打开某个演示软件，而是把这套幻灯片描述给你已经在用的 Agent，frontend-slides 就会把你的想法变成以网页构建的幻灯片——真正的 HTML 和 CSS，直接在浏览器里演示。
它也是同类中最受欢迎的选择。凭借 25k GitHub star 和 MIT 许可证，frontend-slides 在这个日渐丰富的 Claude PPT 技能货架上稳居首位。本文讲清楚它是什么、如何安装与提示、它擅长什么又止步于何处、它与这个领域里其他技能相比如何，以及当一套幻灯片变成一项持续的工作时，一个完整的工作空间该在哪里接手。
frontend-slides 是什么
frontend-slides 是一个技能——一套打包好的指令，你的编程 Agent（Claude Code、Codex、Cursor 等）会在任务进行中加载它，去把一件事做好。在这里，这件事就是做演示文稿。它借用你的 Agent 已经具备的前端能力，把它们对准幻灯片：你用大白话描述这套幻灯片，Agent 就写出干净、现代的网页，一页一张，供你在浏览器里翻看。
它的输出天生是 web 原生的。因为每一页都是 HTML 和 CSS，你能拿到完整的控制力——自定义版式、真正的字体排印、渐变、过渡、内嵌图表，凡是浏览器能渲染的都行。它由 Zara Zhang 构建和维护，以 MIT 开源，并且和这些技能一样是自备模型 key 的：你提供 API key，技能提供手艺。
它是怎么工作的
整个循环很短，而且基本靠对话：
- 安装技能——把 frontend-slides 克隆或添加到你编程 Agent 的技能目录里（仓库里有配置步骤）。自备你的模型 key。
- 描述这套幻灯片——给 Agent 提示词，说明主题、受众、语气和大致页数。简报越具体，它搭出的结构越好。
- 让它去构建——Agent 把幻灯片生成为网页，并在浏览器里打开来演示。
- 迭代——用大白话要求修改（"把开头收紧"、"把第 3 页做成两栏对比"、"配色暖一点"）然后重新渲染。因为它就是 CSS，你也可以直接手改任何地方。
- 演示或导出——从浏览器演示，或导出成 PDF 用于分享。
它擅长什么（以及它诚实的局限）
当你想要 web 原生的幻灯片，以及对它们外观的完全掌控时，frontend-slides 最能发挥。如果你对 HTML 和 CSS 得心应手，那么在你和设计之间不会横着任何东西——你可以撬开任何一页手动修改，把整套幻灯片用 git 做版本管理，还能跨幻灯片复用组件。对开发者而言，这正是全部魅力所在：幻灯片表现得像一套代码库，而不是一个私有格式文件。
诚实的局限，正是这份长处的另一面。它的输出是网页，而不是 .pptx——所以如果你的组织需要一份带原生形状的可编辑 PowerPoint，这就不是那个工具（针对这一点的技能，见下方评分表）。还有一道舒适度门槛：你离 HTML 和 CSS 越远，"完全掌控"就越难自证其值。而且和任何单一技能一样，frontend-slides 做的是一套幻灯片——它不会把你的品牌带到不同项目之间，也不会让一套设计系统保持同步。它是一把锋利的单一用途工具，而且它对此毫不掩饰。
frontend-slides 与其他 Claude PPT 技能
frontend-slides 并不是这个类别里唯一的技能，选对哪一个，取决于你需要的输出，以及你能接受的许可证。
| 工具 | 输出 | 许可证 | 最适合 |
|---|---|---|---|
| frontend-slides | HTML 网页幻灯片 | MIT | web 原生幻灯片、完整 CSS 控制 |
| guizang-ppt-skill | HTML（编辑排版） | AGPL-3.0 | 精心打磨、有设计感的幻灯片 |
| dashiAI | 可编辑演示文稿 | AGPL-3.0 | 非开发者也能改的输出 |
| Open Design | 符合品牌的可编辑幻灯片 + 模板 | Apache-2.0 | 绑定设计系统、置于工作空间中的幻灯片 |
如果你想要精致的编辑排版观感，guizang-ppt-skill 是可以对比的姊妹；如果你的交付物必须让非开发者也能编辑，dashiAI 正是为此而生。而当你想让这套幻灯片本身就是你完全拥有的网页时，frontend-slides 更胜一筹。
Open Design 的位置
对于在终端里做一套幻灯片，frontend-slides 是一个出色的单一用途技能。但技能本质上是一段脚本——它不会把你的品牌带到不同项目之间，不会让输出在一个真正的工作空间里保持可编辑，也不会让这套幻灯片和你其余的设计工作协同起来。
Open Design 是技能之上的那一层：一个开源（Apache-2.0）、本地优先、自备 key 的 Agent-Native Design Workspace，它独立于你已经在用的编程 Agent 之外。你描述一套幻灯片，Agent 就对着一套设计系统生成一份可编辑的——于是它始终符合品牌，而不是每次都从一张白纸开始——而且 Open Design 在它的插件库里提供了第一方的 HTML 幻灯片模板。这和 frontend-slides 是同一个思路，只是有了一个家：你的文件、你的品牌，可编辑，并且归你所有。如果你今天已经在用编程 Agent 做幻灯片，看看 Open Design 如何与 Claude Code 协作。
当你想从命令行快速得到一份 web 原生幻灯片时，用 frontend-slides。当这套幻灯片必须符合品牌、可编辑，并且是一整套更大设计工作的一部分时，去找一个工作空间。
常见问题
frontend-slides 免费吗？免费。它以 MIT 许可证开源，可免费使用——你自备模型的 API key。MIT 相当宽松，所以它对商用也很友好。
我怎么用 frontend-slides？把技能安装到你编程 Agent 的技能目录里，然后描述这套幻灯片（主题、受众、篇幅）。Agent 会把幻灯片构建成网页；用大白话迭代，再从浏览器演示。
frontend-slides 能导出成 PowerPoint 吗？不能——它产出的是你在浏览器里演示的网页幻灯片（HTML/CSS），你可以导出成 PDF 用于分享。如果你需要一份带原生形状的可编辑 .pptx，那就去找一个专为这种输出而造的技能，而不是 frontend-slides。
frontend-slides 最适合谁？想要 web 原生幻灯片和完整 CSS 控制的开发者——那些在 web 平台上如鱼得水、宁愿用 git 给幻灯片做版本管理也不愿打开演示软件的人。
技能还是设计工作空间——我该用哪个？像 frontend-slides 这样的技能，最适合做一份快速、一次性的幻灯片。而像 Open Design 这样的 Agent-Native Design Workspace，则更适合你需要符合品牌、可编辑、并且与其余设计工作放在一起的幻灯片。
结语
frontend-slides 是用编程 Agent 做幻灯片时 star 数最高的方式，它也当之无愧：web 原生的幻灯片、完整的 CSS 控制、MIT 许可证，全都从你本来就在用的终端里驱动。如果你想要一份快速、浏览器优先的幻灯片，而且对 HTML 和 CSS 得心应手，那就装上它，尽管提示。而当一套幻灯片变成一项持续的、符合品牌的工作，需要保持可编辑并绑定一套设计系统时，那就该由一个 Agent-Native Design Workspace 来接手了。