Frontend Slides

# Frontend Slides

从零开始或从 PowerPoint 文件生成 HTML 演示文稿，并展示几种视觉风格预览供你挑选，适合不懂 CSS 和 JavaScript、又想做网页幻灯片的人。

由 zarazhangrui 在 GitHub 上制作。这些说明是 Mindket 根据其 README 写的，项目自己的文件和许可证在它的仓库里。

## 简介

它是什么：Frontend Slides 是一个给编程智能体用的技能，能从零开始做网页演示文稿，也能转换 PowerPoint 文件。它以 Claude Code 插件的形式提供，Codex 这类智能体则可以直接照着它的主 SKILL.md 文件做。你不必把自己的品味说成文字，因为它会生成预览，由你挑出喜欢的那个。

适合谁：不是设计师，却需要一份好看演示文稿的人，不需要懂 CSS 或 JavaScript。你说明内容、挑一个风格，智能体来做幻灯片。

```table
行业 | 谁在用 | 怎么用 | 例子
创业公司 | 创始人 | 把融资演示做成网页演示文稿 | 一份 AI 创业公司的融资演示
教育 | 老师和培训师 | 把现有的 PowerPoint 课件转成网页幻灯片 | 一份保留了全部图片的讲课演示
商业 | 经常做汇报的团队 | 把旧的 PowerPoint 文件变成一个 HTML 文件 | 一份团队汇报从 pptx 文件搬到浏览器
软件 | 要做技术分享的开发者 | 选用 Terminal Green 风格做一份面向开发者的演示 | 一场带终端风格的技术分享
```

如果你需要继续在 PowerPoint 里编辑，可以跳过它，因为输出是 HTML 文件，不是 pptx 文件。

用在哪里：它在编程智能体里运行，成果在浏览器里打开。

- Claude Code，作为插件或独立技能
- Codex、Kimi Code、OpenCode 和 Gemini CLI，让智能体指向这个仓库或 SKILL.md 即可
- 任何能读文件、能运行 shell 命令的本地编程助手
- 你的浏览器，用来打开做好的演示文稿

```table
用例 | 谁用 | 得到什么
从零做一份演示 | 创始人或演讲者 | 一份按你选的风格做成、并在浏览器里打开的完整演示文稿
转换 PowerPoint 文件 | 有 pptx 文件的人 | 一份保留全部原有图片和内容的 HTML 演示文稿
不用描述就挑出风格 | 非设计师 | 三个供你挑选的视觉预览
```

如何设置：选一条和你的智能体相符的路线。

- 走插件路线需要 Claude Code，或者其他有文件系统和 shell 权限的编程智能体
- git，只有想把仓库克隆到技能文件夹时才需要

1. 在 Claude Code 里，把这个项目注册为插件市场，在消息里写出完整的 GitHub 地址。像 owner/name 这样的简写可能让 Claude Code 走 SSH，如果你的电脑不认识 GitHub，就会失败。
2. 把它作为一条消息发送。完成后，再把安装命令作为第二条消息发送。
3. 手动安装的话，在 ~/.claude/skills/ 下建好技能文件夹，把技能文件复制进去，或者直接把仓库克隆到这个文件夹里。
4. 用其他任何智能体时，贴上仓库链接，告诉它去应用 Frontend Slides 技能。

```text
/plugin install frontend-slides@frontend-slides
```

```bash
mkdir -p ~/.claude/skills/frontend-slides/scripts

cp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~/.claude/skills/frontend-slides/
cp -R bold-template-pack ~/.claude/skills/frontend-slides/
cp scripts/extract-pptx.py scripts/deploy.sh scripts/export-pdf.sh ~/.claude/skills/frontend-slides/scripts/
```

如何使用：输入启动这个技能的命令，再告诉它你要什么。作为插件安装时，命令带有插件名前缀。手动安装时，把前缀去掉就行。

```text
/frontend-slides:frontend-slides
```

做一份新演示时，技能会按这些步骤进行。

- 它会询问你的内容，比如幻灯片、要传达的信息和图片
- 它生成三个视觉风格预览，除非你已经指定风格，否则会根据你的简述推断气质
- 你挑选方向
- 它做出完整的演示文稿，并在浏览器里打开

做转换时，它会从你的 PowerPoint 文件里取出文字、图片和备注，并展示给你确认。然后你挑一个风格，它就生成带有你原有素材的 HTML 演示文稿。

```table
工具 | 作用
/frontend-slides:frontend-slides | 作为插件安装时启动这个技能
/frontend-slides | 作为独立技能手动安装时启动这个技能
SKILL.md | 其他智能体可以直接读取的核心说明
bold-template-pack | 可选的、偏设计感的模板，按需逐步加载
```

示例：你启动这个技能，要一份 AI 创业公司的融资演示。它询问你的内容，展示三个风格预览，等你选好一个后，就做出整份演示文稿并在浏览器里打开。

新手与专家：如果你刚接触，就让它给你熟悉的主题做一份简短的演示，看一眼三个预览，选感觉对的那个。你不必把任何设计偏好说成文字。

如果你懂这个领域，输出是一个内联了 CSS 和 JavaScript 的单个 HTML 文件，固定 16:9 布局，代码带注释，方便你修改。智能体先读 SKILL.md，只加载它需要的支持文件，比如风格预设、基础视口 CSS、HTML 模板和动画模式。大胆风格模板包是逐步加载的，安全预设始终是兜底。代价是其他智能体没有插件命令。

```flow
询问你的内容
生成三个风格预览
你挑选视觉方向
做出完整的演示文稿
在浏览器里打开
```

注意事项：

- 每份演示文稿是一个内联了 CSS 和 JavaScript 的 HTML 文件，所以不需要 npm、构建步骤或框架。
- 布局固定为 16:9，代码可访问，注释也写得清楚。
- 其他智能体通常不用插件命令。没有文件系统权限去安装时，它们仍然可以在当前会话里照着 SKILL.md 做。
- 深色风格：Bold Signal、Electric Studio、Creative Voltage 和 Dark Botanical。
- 浅色风格：Notebook Tabs、Pastel Geometry、Split Pastel 和 Vintage Editorial。
- 特色风格：Neon Cyber、Terminal Green、Swiss Modern 和 Paper and Ink。
- 许可证是 MIT。

## GitHub 上的数据（2026年11月14日）

- 星标：32,301
- 复刻：2,465
- 关注：124
- 未关闭的议题和拉取请求：71
- 语言：JavaScript
- 许可证：MIT
- 话题：ai-slides, anthropic, claude, claude-code, claude-skill, generative-ui, html, presentation, slides, vibe-coding

## 链接

- 代码：https://github.com/zarazhangrui/frontend-slides
- 发布版本：https://github.com/zarazhangrui/frontend-slides/releases
- 议题：https://github.com/zarazhangrui/frontend-slides/issues
- 星标历史：https://www.star-history.com/#zarazhangrui/frontend-slides&Date

## 介绍视频

- Stop making PowerPoints: how to vibe code beautiful HTML slides with AI (22k+ stars on GitHub): https://www.youtube.com/watch?v=372Iksaz8b0

## 获取代码

```
git clone https://github.com/zarazhangrui/frontend-slides.git
```

然后按它的 README 完成设置。这个工具包里没有会自己运行的东西。

README.md  7 KB