HTML 已经变成了新时代的 PPT，如何选择好用的 skill 来做出美观的 HTML，我推荐这五个

目前有这样几种人

一种是古法手搓 PPT 的人，我愿意尊称他们一声元老

一种是用 AI 做 PPT 的人，虽然 AI 很好用，但是初级使用者经常会遇到不好修改，skill 使用不合适，辛辛苦苦两个小时，和 AI 沟通出一坨垃圾的情况来。

还有一种人用 HTML 选择汇报。

HTML 相比较 PPT 的好处是在太多了，比如：

不用考虑版本适配，打开你的电脑浏览器都能展示

如果接入了数据，数据还能实时更新修改

每次分享给别人一个链接，或者一个很小的文件就行，不用动不动几百 MB 的 PPT 压缩包。

所有创意交互，都能完全涵盖其中，不用退出 PPT 再去找网页演示

但是怎么做出好看的 HTML 一直是一个巨大难题。有时候 AI 根本无法理解的 HTML 制作需求

有时候你做出的 HTML 又丑又乱

更多时候你不知道用哪个版本的 HTML 制作 skill 所以我汇总了 GitHub 上最受欢迎的五个 HTMLskill

以下五个项目都是真正面向 Agent 的 HTML 演示或报告 Skill，GitHub 星数均超过 300。

一/五个 skill 是什么？

1. Frontend Slides

GitHub Stars：28.1k

Frontend Slides 的核心风格是“先看视觉方案，再决定设计”，适合没有设计术语积累的普通用户。

它会先生成多个风格预览，再让用户选择，而不是直接套一个千篇一律的 AI 模板。

内置风格覆盖深色科技、编辑部纸张、瑞士平面、复古杂志和轻量商务等方向，输出固定 16:9、零构建依赖的单文件 HTML。它更像一个会主动做视觉提案的汇报设计师。

2. Huashu Design

GitHub Stars：23.5k

Huashu Design 是五个里面设计表达最丰富的一个，强调 HTML 原生排版、品牌气质和视觉叙事。

它会根据内容选择编辑杂志、瑞士网格、数据密集、深色科技、品牌发布等风格方向，并通过多维度评审检查层级、色彩、排版和细节。

它适合产品发布、中文演讲、品牌介绍和需要看起来像专业设计团队做的汇报。

3. Visual Explainer

GitHub Stars：9.6k

Visual Explainer 通常采用深色技术编辑风格，也支持浅色主题，擅长把终端输出、代码差异、项目复盘、架构流程、数据表和风险对比整理成可阅读的 HTML 页面或 slides。

适合研究报告、技术汇报、方案评审和项目总结。

它的优势是信息解释能力强，而不是装饰性最强。

4. HTML PPT Studio

GitHub Stars：8.1k

HTML PPT Studio 走的是“设计系统 + 现成页面布局”路线，稳定性和可控性较强。

它提供多套主题、完整 deck 模板以及 KPI、表格、对比、时间线、路线图、流程图和多种图表布局，适合周报、技术分享、项目进展、商务提案和小红书图文汇报。

视觉上比自由生成更规整，页面之间有统一的字体、色板、间距和动画规则。

想快速产出一份结构完整、不容易跑版的 HTML 汇报，优先考虑它。

5. Frontend Slides – Editable

GitHub Stars：466

Frontend Slides – Editable 是 Frontend Slides 的可编辑版本，核心价值是“生成之后还能继续打磨”。

它保留视觉预览、风格预设、16:9 视口和单文件 HTML 输出，同时加入浏览器内编辑运行时：可以拖拽和缩放对象、修改字体字号、替换图片视频、重排页面、撤销操作并导出干净 HTML。

二/如何快速选择，如何一步安装以上指令？

想最快做出好看的汇报：Frontend Slides
想要中文、高级、风格化：Huashu Design
想把复杂资料讲清楚：Visual Explainer
想用成熟模板稳定出稿：HTML PPT Studio
想生成后自己继续改版：Frontend Slides – Editable

以上 skill 的一步安装指令：

# HTML 汇报 Skill 安装与使用

更新时间：2026-08-26

本文以 Codex 为例，将五个 HTML 汇报 Skill 全局安装到当前用户环境。五个项目均满足 GitHub Stars 大于 300 的要求。

## 前置条件

- 已安装 Node.js，建议使用 LTS 版本。
- `npx` 可以正常运行。
- 安装后需要重新启动 Codex，让它重新扫描 Skill 目录。

## 一条命令安装全部五个 Skill

在终端中复制并运行：

```bash
npx skills@latest add \
  https://github.com/zarazhangrui/frontend-slides \
  https://github.com/alchaincyf/huashu-design \
  https://github.com/nicobailon/visual-explainer/tree/main/plugins/visual-explainer \
  https://github.com/lewislulu/html-ppt-skill \
  https://github.com/archlizheng/frontend-slides-editable \
  --global \
  --agent codex \
  --yes
```

`--global` 表示所有项目都可以使用；`--agent codex` 表示安装到 Codex；`--yes` 表示跳过交互确认。

## 分别安装的单条命令

如果只想安装其中一个，可以使用对应命令：

```bash
# 1. Frontend Slides
npx skills@latest add https://github.com/zarazhangrui/frontend-slides --global --agent codex --yes

# 2. Huashu Design
npx skills@latest add https://github.com/alchaincyf/huashu-design --global --agent codex --yes

# 3. Visual Explainer
npx skills@latest add https://github.com/nicobailon/visual-explainer/tree/main/plugins/visual-explainer --global --agent codex --yes

# 4. HTML PPT Studio
npx skills@latest add https://github.com/lewislulu/html-ppt-skill --global --agent codex --yes

# 5. Frontend Slides – Editable
npx skills@latest add https://github.com/archlizheng/frontend-slides-editable --global --agent codex --yes
```

如果使用 Claude Code，把命令中的 `--agent codex` 改成 `--agent claude-code`；使用 Cursor 则改成 `--agent cursor`。

## 检查是否安装成功

```bash
npx skills@latest list --global --agent codex
```

列表中应能看到：

- `frontend-slides`
- `huashu-design`
- `visual-explainer`
- `html-ppt` 或 `html-ppt-skill`
- `frontend-slides-editable`

## 如何触发和使用

跨 Agent 最稳妥的方式，是在需求中明确写出 Skill 名称。不要只说“做得好看一点”，要同时提供主题、受众、页数、内容材料和期望风格。

### 1. Frontend Slides

触发示例：

```text
使用 frontend-slides skill，帮我把下面这份材料做成 8 页 HTML 汇报。
先生成 3 个视觉方向让我选择，最终输出一个 16:9 的单文件 HTML。
```

在支持 `$` 触发的 Agent 中，也可以使用：

```text
$frontend-slides
```

Claude Code 的插件触发方式是：

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

### 2. Huashu Design

触发示例：

```text
使用 huashu-design，帮我做一份关于 AI 行业趋势的 10 页中文 HTML 汇报。
先给我 3 个视觉方向，要求有清晰的信息层级、数据图表和专业的中文排版。
```

也可以直接写：

```text
使用 $huashu-design 做一份产品发布汇报。
```

### 3. Visual Explainer

触发示例：

```text
使用 visual-explainer，把这份项目复盘整理成 HTML 报告。
需要包含关键结论、问题对比表、项目时间线、架构流程图和后续计划。
```

Codex 中也可以写：

```text
$visual-explainer
```

如果宿主安装并暴露了它的命令模板，还可以使用：

```text
/generate-slides
```

### 4. HTML PPT Studio

触发示例：

```text
使用 html-ppt skill，帮我做一份 8 页项目周报 HTML 汇报。
使用专业商务风，包含 KPI、完成进度、问题、风险和下一步计划。
优先使用 weekly-report、KPI、table、timeline 和 chart 布局。
```

也可以写：

```text
$html-ppt
```

### 5. Frontend Slides – Editable

触发示例：

```text
使用 frontend-slides-editable，帮我把这份材料做成可编辑的 HTML 汇报。
生成后打开浏览器编辑模式，我还要继续调整页面布局、字体、图片和页面顺序。
```

也可以使用：

```text
$frontend-slides-editable
```

部分 Agent 支持仓库中定义的命令时，也可以写：

```text
/frontend-slides-editable
```

## 提示词通用模板

安装完成后，可以把下面模板中的内容替换掉：

```text
使用 [Skill 名称]，把下面的材料做成一份 [页数] 页 HTML 汇报。

主题：[主题]
受众：[老板 / 客户 / 团队 / 公开分享]
目标：[需要让观众理解或做出的决定]
内容材料：[粘贴文字、表格、链接或文件路径]
风格：[商务 / 编辑部 / 深色科技 / 温暖纸张 / 品牌风]
必须保留：[数据、标题、品牌色、图片或原文]
输出要求：单文件 HTML、16:9、浏览器可打开，并进行视觉检查。
```

> Bento 不包含在这份安装清单中，因为它是 HTML 演示编辑工具，而不是视觉生成 Skill。