frontend-slides：让编码代理帮你做幻灯片，但先想清楚这几件事
使用编码代理的前端技能在网络上创建精美的幻灯片。
秒懂
- 它是什么？
- frontend-slides 是一个打包成 Claude Code 插件的技能包，让编码代理从零生成 HTML 幻灯片或转换 PPT。它的核心思路是「展示而非描述」，但它的插件安装路径、依赖结构和适用范围有一些值得注意的边界。
- 适合谁用？
- 如果你已经在使用 Claude Code，并且经常需要为演讲、课程或项目汇报制作幻灯片，frontend-slides 值得一试。它把视觉风格的选择从「用词描述」变成「看图挑选」，对不擅长描述审美需求的人很友好。
- 能商用吗？
- 可以。MIT 是宽松许可证：你可以使用、修改并销售基于它的软件，只需保留版权和许可证声明。
- 还在维护吗？
- 在维护。仓库最近一次提交在 84 天前。
- 用什么语言写的？
- 主要是 JavaScript（依据 GitHub 的语言统计）。
以上回答依据项目的 GitHub 数据（最近同步于 2026年9月15日）和我们的分析，不构成法律意见。
开源项目深度解析
这个项目解决的是「说不清审美」的问题
大多数幻灯片工具要求你先描述你想要什么风格，但很多人根本说不清楚。frontend-slides 的做法是反过来：它先生成几个视觉预览，让你直接挑。README 里明确写着「show, don't tell」，意思是它不让你用形容词，而是让你看效果。这个项目面向的是非设计师，也就是那些不想学 CSS 和 JavaScript，但又需要做好看演示文稿的人。它同时支持从零创建和转换 PowerPoint，转换时保留图片和内容。它打包成 Claude Code 插件，核心的 SKILL.md 文件也可以被其他编码代理读取，比如 Codex、Kimi Code、OpenCode 或 Gemini CLI。所以它本质上不是一个独立的软件，而是一套给编码代理用的指令和模板集合。
它的工作流程：预览、选择、生成
当你调用 /frontend-slides:frontend-slides 并给出一个主题，比如「为我的 AI 创业公司做一个 pitch deck」，技能会先问你内容，包括幻灯片、消息和图片。然后它生成 3 个视觉风格预览，这些预览不是从你描述的风格推断，而是从你的 brief 里推测氛围，除非你已经指定了某个风格。你选一个方向，它才生成完整的演示文稿，最后在浏览器里打开。转换 PPT 的流程类似：先提取所有文本、图片和备注，展示给你确认，然后让你选风格，最后生成包含原始素材的 HTML。这个流程的关键在于风格发现阶段，它混合了三种选项：一个来自 STYLE_PRESETS.md 的安全预设，至少一个来自 bold-template-pack 的模板，还有一个是通配选项，可能是另一个模板或代理自创的设计。代理只读取一个紧凑的索引文件，然后加载候选模板的小型 preview.md 卡片，只有当你最终选定某个模板时，它才加载完整的 design.md。这种渐进式加载是为了减少代理的上下文消耗。
安装方式：两条路径，各有坑
安装有两种主要方式。第一种是作为 Claude Code 插件，通过自定义 marketplace 安装。你需要分两条消息运行，不能同时粘贴两行。第一条是 /plugin marketplace add https://github.com/zarazhangrui/frontend-slides，第二条是 /plugin install frontend-slides@frontend-slides。README 特别提醒要用 HTTPS URL，因为短格式 zarazhangrui/frontend-slides 可能让 Claude Code 尝试 SSH，如果 GitHub 不在 known_hosts 里就会失败。安装后使用 /frontend-slides:frontend-slides 命令，注意插件会加命名空间。第二种是手动安装，把 SKILL.md、STYLE_PRESETS.md、viewport-base.css、html-template.md、animation-patterns.md 和 bold-template-pack 目录复制到 ~/.claude/skills/frontend-slides/，还有 scripts 目录下的 extract-pptx.py、deploy.sh、export-pdf.sh。手动安装后，命令变成 /frontend-slides，没有命名空间。对于其他代理，最简单的办法是把 GitHub 仓库链接发给它，让它自己读 SKILL.md。这里有个明显的取舍：插件安装流程是 Claude Code 专属的，其他代理只能绕过插件系统，直接读文件。
风格系统：12 个内置预设加上 34 个大胆模板
内置风格分为三组。深色主题有 Bold Signal、Electric Studio、Creative Voltage、Dark Botanical。浅色主题有 Notebook Tabs、Pastel Geometry、Split Pastel、Vintage Editorial。特殊风格有 Neon Cyber、Terminal Green、Swiss Modern、Paper & Ink。这些预设都写在 STYLE_PRESETS.md 里，是安全默认值。除此之外，v2.1.0 引入了一个「大胆模板包」，包含来自 beautiful-html-templates 的 34 个设计系统，比如 Neo-Grid Bold、Editorial Tri-Tone、Creative Mode、Broadside、Signal 和 Vellum。这些模板不是全部加载，而是通过 selection-index.json 索引，在风格发现阶段只加载候选的 preview.md 卡片。README 说这样做的目的是避免 AI 生成的「通用美学」，也就是那种白底紫色渐变的老套设计。这个设计有实际意义：如果你的 brief 没有指定风格，代理会从这些模板里挑一个作为通配选项，所以你的最终幻灯片可能来自一个你从未见过的模板，这既是惊喜也是风险，因为你无法预判代理会选择什么。
输出物：零依赖的单 HTML 文件，这是优点也是限制
所有生成的演示文稿都是单 HTML 文件，CSS 和 JS 全部内联，没有 npm、没有构建工具、没有框架。README 把这列为关键特性。这意味着你不需要安装 Node.js 或运行 npm install，直接双击 HTML 文件就能在浏览器里打开。它也是 16:9 固定比例，代码有注释，方便你手动修改。但这也意味着它不适合需要动态数据或复杂交互的场景。如果你要做的是一个需要从 API 拉数据的仪表盘式幻灯片，单 HTML 文件会很快变得笨重。另外，虽然它声称「生产质量」，但没有任何测试框架或 CI 配置，所以如果你要把它集成到现有的前端工程里，可能需要自己处理样式隔离。它没有说明如何处理浏览器兼容性，所以你最好在目标浏览器上测试一下。
转换 PPT 的机制：Python 脚本提取，但细节有限
转换 PowerPoint 的过程依赖 scripts/extract-pptx.py 这个 Python 脚本。README 说它会提取所有文本、图片和备注，然后展示给你确认。但关于这个脚本的具体实现，比如它是否处理了幻灯片母版、图表、SmartArt 或动画，README 没有说明。这意味着如果你的 PPT 包含复杂的矢量图形或嵌入字体，转换结果可能不完整。它也没有提到如何处理多语言文本或从右到左的文字方向。所以对于简单的、以图片和文本为主的 PPT，这个功能应该够用。但对于复杂的演示文稿，你需要先检查提取出来的内容是否完整，再决定是否继续。这个脚本是 Python 写的，所以你的系统需要安装 Python，并且要有 python-pptx 库，但 README 没有列出依赖，这一点你需要自己验证。
维护成本与许可证
项目采用 MIT 许可证，这意味着你可以自由使用、修改和分发，包括商业用途，但需要保留版权声明。作为一个技能包，它的维护成本很低，因为它没有运行时依赖，你不需要跟踪库的更新。但你需要关注的是 SKILL.md 和模板文件的变化，因为如果代理的行为依赖这些文件的内部结构，升级到新版本可能需要重新复制文件。v2.1.0 的发布说明提到「Agent-Neutral Packaging」，意思是它试图让核心技能不绑定 Claude Code，但插件安装流程仍然是 Claude Code 专属的。如果你要长期使用，建议定期检查仓库是否有新版本，因为模板风格会过时。另外，它依赖 beautiful-html-templates 这个外部项目，如果那个项目停止维护，bold-template-pack 的内容也会固定不变。
替代方案：直接让代理写 HTML，或者用传统工具
如果你不想安装这个插件，最简单的替代方案是直接让编码代理生成 HTML 幻灯片，比如对 Claude 或 Codex 说「写一个 10 页的 HTML 演示文稿，使用 reveal.js」。这会给你更灵活的控制，但你需要自己描述风格，而且代理可能会生成千篇一律的设计，这正是 frontend-slides 试图避免的。另一个替代方案是使用传统的幻灯片工具，比如 PowerPoint 或 Google Slides，它们有成熟的模板库和导出功能，但你需要手动排版，而且无法利用编码代理的自动化。还有一类工具是专门的 HTML 演示框架，比如 reveal.js 或 impress.js，它们提供了丰富的 API 和插件生态，但需要你写代码或配置。frontend-slides 的差异在于它把「风格选择」这个环节变成了视觉预览，并且把整个流程封装成一个技能，而不是一个库或框架。它的优势是开箱即用，代价是你对最终输出的控制力较弱，因为代理决定如何组合模板。
编辑结论
如果你已经在使用 Claude Code，并且经常需要为演讲、课程或项目汇报制作幻灯片，frontend-slides 值得一试。它把视觉风格的选择从「用词描述」变成「看图挑选」，对不擅长描述审美需求的人很友好。但如果你不用 Claude Code，或者你的工作流依赖 npm 和构建工具，这个项目不适合你，因为它的核心交付物是零依赖的单 HTML 文件，没有组件化或版本管理。首次使用前，请确认你的 Claude Code 版本支持 /plugin 命令，并且用 HTTPS 地址添加 marketplace，避免 SSH 连接问题。另外，如果你需要把生成的 HTML 嵌入到现有网站或 CMS 中，先测试一下内联 CSS 和 JS 是否与你的页面样式冲突。这个项目的价值在于它把「让代理做前端」这件事标准化了，但它没有提供任何运行时框架，所以它的上限就是单文件幻灯片的边界。
社区笔记