Frontend Slides — 网页幻灯片生成技能
利用编码代理的前端能力，在网页上创建精美的幻灯片演示，无需设计或编程技能。
- Star 数
- ★ 31k
- 最近更新
- 3 个月前
- License
- MIT
- 主语言
- JavaScript
- FA 评分
- 46/100 · 缺口较多
30 秒速览
- 运行形态
- 可在哪里用
- 兼容但需适配Claude Code
- 费用
- 免费，无需付费服务
- 上手难度
- 低 · 几分钟可跑通
- 开始前需要
- 典型场景
- 非设计师用户想要快速创建优雅的 pitch deck，只需描述内容，通过视觉预览选择风格。
- 不适合
- 主要使用 Claude Code 之外编码代理的团队，插件安装与 /frontend-slides 命令仅限 Claude Code
- 无法提供本地 shell 与文件系统访问的纯云端或受限环境
- 需要保留动画效果的演示：PDF 导出只是静态快照
这个 Agent 能做什么，适合哪些场景？
Frontend Slides 是一个编码代理技能，用于创建惊艳的 HTML 演示文稿，支持从零开始或转换 PowerPoint 文件。它打包为 Claude Code 插件，核心的 SKILL.md 也能被其他具备文件系统和 Shell 访问的编码代理读取。该技能采用“展示而非讲述”的方法：通过生成视觉预览让用户选择喜欢的风格，而非要求用文字描述审美偏好。关键特性包括零依赖（单 HTML 文件，内联 CSS/JS）、视觉风格发现、PPT 转换、反 AI 俗套的精选风格、34 个大胆模板包、以及无依赖的部署和 PDF 导出。用户可通过 Claude Code 自定义市场或手动安装，其他代理可直接使用仓库链接。
该技能引导用户完成从内容收集到最终分享的完整流程。首先，代理询问用户的内容（幻灯片、消息、图片），然后生成 3 个视觉风格预览供用户比较，推断用户简报中的风格（除非用户已指定）。用户选择视觉方向后，代理生成完整的演示文稿并自动在浏览器中打开。对于 PowerPoint 转换，技能提取所有文本、图像和备注，向用户展示内容以确认，然后让用户选择视觉风格，最后生成包含所有原始资产的 HTML 演示文稿。它支持通过 scripts/deploy.sh 一键部署到 Vercel，以及通过 scripts/export-pdf.sh 导出为 PDF（使用 Playwright）。核心文件包括 SKILL.md、STYLE_PRESETS.md、bold-template-pack/、viewport-base.css、html-template.md、animation-patterns.md 和 scripts/。
- 非设计师用户想要快速创建优雅的 pitch deck，只需描述内容，通过视觉预览选择风格。
- 商务人士需要将现有 PowerPoint 文件转换为现代化网页幻灯片，保留所有图片和内容。
- 开发者希望生成无依赖的单文件 HTML 演示文稿，可在任意浏览器中运行且易于自定义。
- 设计师寻找独特、非模板化的演示风格，避免常见的 AI 生成美感。
- 用户在生成后需要将演示文稿发布到可分享的 URL 或导出为 PDF，以便通过邮件或 Slack 发送。
如何安装或部署这个 Agent？
作为 Claude Code 插件安装：在 Claude Code 中运行 /plugin marketplace add https://github.com/zarazhangrui/frontend-slides，然后运行 /plugin install frontend-slides@frontend-slides。使用 HTTPS URL 以避免 SSH 问题。手动安装时，将文件复制到 ~/.claude/skills/frontend-slides/ 目录。对于其他代理，直接发送仓库链接 https://github.com/zarazhangrui/frontend-slides 并要求使用该技能。需要具备文件系统和 Shell 访问的本地编码代理。
如何使用这个 Agent？
在 Claude Code 中，使用命令 /frontend-slides:frontend-slides（若手动安装则为 /frontend-slides）。示例：/frontend-slides:frontend-slides 然后输入“我想为我的 AI 初创公司创建 pitch deck”或“将我的 presentation.pptx 转换为网页幻灯片”。对于其他代理，提示“使用 Frontend Slides 技能”并提供仓库链接。生成后，可通过运行 bash scripts/deploy.sh ./my-deck/ 部署到 Vercel，或通过 bash scripts/export-pdf.sh ./my-deck/index.html 导出为 PDF。
这个 Agent 有哪些优点和局限？
- 零依赖：单 HTML 文件，无需构建工具或框架，长期可用且易于移植。
- 视觉风格发现：通过预览选择风格，降低设计门槛。
- 丰富的风格库：包含 12 个自定义预设和 34 个可选大胆模板，避免 AI 俗套。
- 支持 PPT 转换和部署/导出功能，工作流完整。
- 代码注释良好，易于自定义和扩展。
- 主要针对 Claude Code 插件安装，其他代理需要手动使用技能文件，且部分功能（如
/frontend-slides命令）仅限 Claude Code。 - 需要本地 Shell 和文件系统访问权限，无法在纯云端或受限环境运行。
- PPT 转换依赖 Python 和 python-pptx；部署和 PDF 导出依赖 Node.js 和 Vercel 账户（免费）。
- PDF 导出使用 Playwright，动画不保留，仅静态快照。
- 无正式的多代理支持文档，需要在提示中提供仓库链接，代理可自行读取 SKILL.md。
这个 Agent 与同类方案有什么区别？
未提及具体替代品。
与相关度最高的同类 agent 并排比较关键指标。
| Agent | 源码审查 | 形态 / 费用 | Star | 最近更新 | 主语言 | 完整支持的平台 |
|---|---|---|---|---|---|---|
| Frontend Slides — 网页幻灯片生成技能 当前 | 46 · 缺口较多 | Agent 插件 / 技能免费 | ★ 31k | 3 个月前 | JavaScript | Claude Code |
| Open Design | 45 · 缺口较多 | 桌面应用免费 + 模型费 | ★ 102k | 今天 | TypeScript | Codex · Claude Code · OpenAI API · Claude API |
| 图片转可编辑PPT技能 | 53 · 缺口较多 | Agent 插件 / 技能免费 + 模型费 | ★ 3k | 1 个月前 | Python | Codex |
| anything2explainer | 47 · 缺口较多 | Agent 插件 / 技能免费 + 模型费 | ★ 2.6k | 1 个月前 | TypeScript | Codex · Claude Code |
FollowAgents 如何评估这个 Agent？
查看各维度的扣分理由
证据显示：README 描述了技能的工作流程，包括生成预览、用户选择、创建演示文稿，但没有明确说明权限边界或数据流。脚本（如 extract-pptx.py）可能读取用户文件，但未说明最小权限原则。用户确认步骤存在（如提取内容后确认），但未明确所有外部操作。数据流透明度不足，未说明哪些数据被处理、存储或传输。敏感数据处理未提及。依赖安全性：声称零依赖，但未提供依赖清单或安全审计。外部效果：会创建文件、打开浏览器，但未明确告知用户。回滚：未提及任何回滚机制。来源归属：MIT 许可证和版权声明存在，但发布者未验证。扣分原因：缺乏明确的权限声明、数据流说明、敏感数据处理策略、依赖安全审计、外部效果告知和回滚机制。
证据显示：README 和 SKILL.md 描述一致，功能说明清晰，但未提供测试或验证结果。依赖可用性：声称零依赖，但依赖外部模板库（beautiful-html-templates），其可用性未验证。失败消息：未提供错误处理或失败提示的说明。扣分原因：缺乏测试证据、外部依赖可用性未验证、失败处理未说明。
证据显示：README 明确了目标受众（非设计师）和使用场景（创建演示文稿、转换 PPT），并提供了多种风格选项。能力边界：说明了支持的功能（创建、转换、风格选择），但未明确限制（如不支持某些格式）。触发精度：提供了明确的命令和安装方式，但未说明触发条件。环境适配：支持 Claude Code 和其他代理，但未说明系统要求。扣分原因：能力边界和触发条件描述不够详细。
证据显示：README 结构清晰，包含安装、使用、风格列表等章节。安装说明详细，提供了多种安装方式。命名稳定性：技能名称和命令明确，但未说明版本兼容性。示例和 FAQ：提供了使用示例，但无 FAQ。已知限制：未明确列出。许可证：MIT 许可证存在。版本和变更日志：未提供。维护责任：未说明维护者或更新策略。扣分原因：缺少已知限制、版本变更日志和维护责任说明。
证据显示：输出为单 HTML 文件，可直接使用，且声称生产质量。边际价值：提供了多种风格和模板，增加了价值。成本效益：零依赖，安装简单，但未提供性能或资源消耗数据。扣分原因：缺乏实际使用效果证据。
证据显示：README 中的声明（如零依赖、生产质量）未提供验证证据。跨来源验证：未提供其他来源的验证。事实与推断分离：未明确区分事实和推断。扣分原因：缺乏可验证的证据。
- 源码中未见：回滚或恢复路径运行前先备份，或在 git 分支、快照上操作，确保改动可以撤销。
- 发布者身份未验证，需谨慎对待。
- 依赖外部模板库，其可用性和安全性未验证。
- 未提供测试或验证证据，功能可靠性存疑。
- 未明确权限边界和数据流，可能涉及敏感数据处理。
最近版本
来自该项目 GitHub Releases 的最新发布记录，说明为上游原文摘录，未经本站改写或测试。
-
v2.1.0 v2.1.0 — Bold Templates and Agent-Neutral Packaging
发布说明摘录
What's New This release packages the template-library integration, safer slide-generation workflow, and more robust agent/plugin support that landed after v2.0.0. Bold Template Pack - Adds the bold-template-pack from beautiful-html-templates with progressive disclosure. - Uses lightweight selection indexes and preview cards first, then loads the selected template's design.md only when needed. - Keeps bold templates fixed-stage at 1920x1080 / 16:9, including on phone viewports. …在 GitHub 查看 ↗ -
v2.0.0 v2.0.0 — Progressive Disclosure Restructure
发布说明摘录
What's New This release completely restructures the skill to reduce context bloat by ~89%, following best practices from [Claude Code's skill docs](https://code.claude.com/docs/en/skills) and [OpenAI's harness engineering](https://openai.com/index/harness-engineering/) approach. The Problem The previous version loaded 1,625 lines of instructions into Claude's context on every invocation — including CSS code blocks, Python scripts, and HTML templates that were only needed during specific phases. This crowded out the actual presentation content and reduced output quality. …在 GitHub 查看 ↗