Frontend Slides

概览

GitHubGitHub

Frontend Slides 是一个面向 AI 编程代理的技能插件（skill），用于生成单文件 HTML 演示文稿。它被打包为 Claude Code 插件，同时其核心 `SKILL.md` 也可供其他具备文件系统与 Shell 访问权限的编程代理读取。 ## 解决什么问题 该技能主要面向不具备 CSS 或 JavaScript 知识的非设计人员。它采用「展示而非描述」的方式：不要求用户用文字描述审美偏好，而是由代理生成多个视觉预览供用户挑选，从而降低制作美观网页演示文稿的门槛。 ## 主要能力 - **从零创建演示文稿**：用户提供内容需求后，代理会询问细节、生成 3 个视觉风格预览供比较选择，随后按选定风格生成完整的 HTML 演示文稿并在浏览器中打开。 - **PowerPoint 转换**：提取 PPT 文件中的文本、图像和备注，经用户确认后，将其转换为保留原始素材的网页幻灯片。 - **零依赖输出**：生成的演示文稿为单个 HTML 文件，CSS 与 JS 均内联，不需要 npm、构建工具或前端框架。 - **丰富的样式库**：内置 12 种基础预设主题（涵盖深色、浅色及特殊风格如 Terminal Green、Swiss Modern 等），并可选加载来自 `beautiful-html-templates` 的 34 套进阶设计模板。 - **渐进式模板加载**：在风格发现阶段，代理仅读取紧凑的模板索引和候选项的 `preview.md`；只有当用户最终选定某个进阶模板时，才会加载其完整的 `design.md`。 ## 适用对象 适合使用 Claude Code、Codex、Kimi Code、OpenCode、Gemini CLI 等本地编程代理的用户，尤其是需要快速制作网页演示文稿但不熟悉前端技术的开发者或内容创作者。

Q&A

如何在 Claude Code 中安装 Frontend Slides？由 AI 生成

可以通过自定义 Marketplace 源安装：先运行 `/plugin marketplace add https://github.com/zarazhangrui/frontend-slides`，完成后运行 `/plugin install frontend-slides@frontend-slides`。也可以手动将仓库克隆到 `~/.claude/skills/frontend-slides` 目录。

除了 Claude Code，其他 AI 编程代理能使用吗？由 AI 生成

可以。只要代理具备文件系统访问权限并能读取 GitHub 仓库，就可以从 `SKILL.md` 开始加载所需的支持文件来使用该技能。

生成的演示文稿需要什么运行环境？由 AI 生成

不需要任何运行环境或依赖。输出的是单个 HTML 文件，CSS 和 JavaScript 均已内联，直接在浏览器中打开即可。

如何将现有的 PPT 转换为网页幻灯片？由 AI 生成

在 Claude Code 中输入 `/frontend-slides:frontend-slides`，然后告诉代理「Convert my presentation.pptx to a web slideshow」。代理会提取 PPT 内容供确认，选择风格后生成 HTML。

内置了哪些设计风格？由 AI 生成

包含 12 种基础预设主题（如 Bold Signal、Notebook Tabs、Terminal Green 等），以及 34 种可选的进阶设计模板（如 Neo-Grid Bold、Soft Editorial 等）。