如何在 Claude Code 中安装 Frontend Slides？

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

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

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

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

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

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

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

内置了哪些设计风格？

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

September 26, 2026

Frontend Slides

AI & Machine Learning Prompt Engineering & Skill Management0

Get resource

帮助非设计人员通过 AI 编程代理创建 HTML 演示文稿，或将 PowerPoint 转换为网页幻灯片。

MITClaude CodeText InputDocument InputCode Output

Prompt Templates Skill广场 Skill Packaging

安装 / 调用方式bash

# Via Claude Code Custom Marketplace Source
/plugin marketplace add https://github.com/zarazhangrui/frontend-slides
/plugin install frontend-slides@frontend-slides

# Manual Installation
git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides

调用示例json

/frontend-slides:frontend-slides

> "I want to create a pitch deck for my AI startup"

Product facts

Type: AI Skill & Agent
Category: AI & Machine Learning › Prompt Engineering & Skill Management
Pricing: Open source
Platforms: Claude Code
License: MIT
Launched: Sep 26, 2026
Listed: Sep 26, 2026
Website: github.com

Overview

GitHub GitHub

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 等本地编程代理的用户，尤其是需要快速制作网页演示文稿但不熟悉前端技术的开发者或内容创作者。

Key features

零依赖单文件输出：生成包含内联 CSS/JS 的单个 HTML 文件，无需 npm、构建工具或框架。
视觉风格发现：自动生成多个视觉预览供用户对比挑选，无需文字描述设计偏好。
PPT 转换：将现有 PowerPoint 文件转换为网页幻灯片，保留所有图像和内容。
反 AI 俗套设计：提供经过筛选的独特风格，避免常见的泛化 AI 审美。
进阶模板包：可选加载 34 套来自 beautiful-html-templates 的设计模板。
渐进式加载：仅在用户选定进阶模板时才加载完整设计文件，默认使用安全预设。
生产级质量：输出支持无障碍访问、固定 16:9 比例且代码注释清晰的 HTML。
多代理兼容：核心 SKILL.md 可被 Codex、Kimi Code、Gemini CLI 等其他编程代理读取使用。

Releases

Notify me

Initial · Frontend Slides

September 26, 2026

Q&A

如何在 Claude Code 中安装 Frontend Slides？AI-generated: 可以通过自定义 Marketplace 源安装：先运行 `/plugin marketplace add https://github.com/zarazhangrui/frontend-slides`，完成后运行 `/plugin install frontend-slides@frontend-slides`。也可以手动将仓库克隆到 `~/.claude/skills/frontend-slides` 目录。
除了 Claude Code，其他 AI 编程代理能使用吗？AI-generated: 可以。只要代理具备文件系统访问权限并能读取 GitHub 仓库，就可以从 `SKILL.md` 开始加载所需的支持文件来使用该技能。
生成的演示文稿需要什么运行环境？AI-generated: 不需要任何运行环境或依赖。输出的是单个 HTML 文件，CSS 和 JavaScript 均已内联，直接在浏览器中打开即可。
如何将现有的 PPT 转换为网页幻灯片？AI-generated: 在 Claude Code 中输入 `/frontend-slides:frontend-slides`，然后告诉代理「Convert my presentation.pptx to a web slideshow」。代理会提取 PPT 内容供确认，选择风格后生成 HTML。
内置了哪些设计风格？AI-generated: 包含 12 种基础预设主题（如 Bold Signal、Notebook Tabs、Terminal Green 等），以及 34 种可选的进阶设计模板（如 Neo-Grid Bold、Soft Editorial 等）。