前言¶
技术分享、路演和内部汇报往往离不开幻灯片。传统做法是先在 PowerPoint 里排版,再导出 PDF 或现场投屏;若希望演示稿能在浏览器里打开、带过渡动画、便于嵌入现有前端工程,又要自己写 HTML/CSS,对非设计背景的同学成本偏高。下面介绍 SkillHub 上的社区 Skill「创作HTML格式的PPT」(坐标 @user_be38de3d/gbot-frontend-slides),让 Agent 按统一流程协助生成或转换 HTML 演示稿。
这是什么¶
「创作HTML格式的PPT」是 SkillHub 分类 office-efficiency 下的社区 Skill,当前版本 1.0.0,发布者为 user_be38de3d,来源标注为 community。官方简介说明:可从零创建带动画效果的 HTML 演示稿,也可将 PowerPoint(PPT/PPTX)转为网页;适合用户要做演讲稿、路演页,或把现有幻灯片搬到 Web 的场景。标签 requires_api_key=false,表示按 SkillHub 页面说明,安装使用不依赖额外 API Key。
Skill 详情页:https://www.skillhub.cn/skills/user_be38de3d/gbot-frontend-slides
API 条目:https://api.skillhub.cn/user_be38de3d/gbot-frontend-slides
核心功能¶
依据 SkillHub 页面与已抓取元数据,可核实的能力包括:
- 从零生成 HTML 演示稿:输出为可在浏览器中展示的 HTML 幻灯片,强调动画与视觉表现。
- PPT/PPTX 转 Web:将已有 PowerPoint 文件转换为网页演示格式。
- 触发场景由 Skill 自述:当用户要「做一份演示」「把 PPT/PPTX 转成网页」「为演讲或 pitch 做 slides」时,Agent 应启用该 Skill。
- 面向非设计者的探索方式:简介提到通过视觉探索帮助确定审美方向,而不是先抽象地选定一套设计风格(具体实现细节以安装后的
SKILL.md为准)。
SkillHub 统计(抓取时):评分 100000,下载 997,安装 15。
安装与启用¶
安装前需本机有 SkillHub CLI;完整步骤以官方文档为准。
1. 检查或安装 SkillHub CLI¶
先确认是否已安装 CLI:
command -v skillhub && skillhub --version
若未安装,可按 SkillHub 安装文档执行完整安装(CLI + 默认 Skill):
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
仅需 CLI 时:
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2. 安装本 Skill¶
SkillHub 页面给出的方式是:让 AI 根据 https://skillhub.cn/install/skillhub.md 安装 @user_be38de3d/gbot-frontend-slides。命令行安装时,必须用 --dir 指向当前 Agent 的 skills 目录,否则默认装到 ./skills/ 可能不会被识别。
在 Cursor 中,skills 目录一般为:
~/.cursor/skills/
示例安装命令(将 <skills 目录> 换成你当前环境的路径):
skillhub install @user_be38de3d/gbot-frontend-slides --dir ~/.cursor/skills/
其他常见客户端路径(摘自 SkillHub 安装文档,按实际客户端选用):
- Claude Code:
~/.claude/skills/ - Codex:
~/.codex/skills/或项目下的.agents/skills/ - Windsurf:
~/.codeium/windsurf/skills/或项目下的.windsurf/skills/
安装后若 Agent 未立即识别新 Skill,按所用客户端说明重启或刷新 skills 目录。Cursor、Codex CLI、Claude Code 的差异主要体现在 skills 目录路径 上,安装命令形式相同。
典型用法¶
官方未在页面列出固定 CLI 子命令;用法是通过自然语言驱动 Agent,并在对话中引用已安装的 Skill。下列表述与 Skill 英文简介中的「Use when」一致,可作为可复现的起点。
从零做网页演示稿:
请用「创作HTML格式的PPT」Skill,帮我做一份约 10 页的技术分享 HTML 幻灯片,主题是 XXX,需要章节过渡动画,输出单个可双击打开的 HTML 文件。
转换现有 PowerPoint:
请根据 https://skillhub.cn/install/skillhub.md 已安装的 gbot-frontend-slides,把当前目录下的 deck.pptx 转成 HTML 演示稿,保留主要版式,并说明如何在浏览器里全屏播放。
路演 / pitch:
我要做 5 分钟产品 pitch,用 HTML slides。先给我 2~3 种视觉风格各一页样张,我选定后再展开全文。
经过上面的步骤,Agent 会按 Skill 内 SKILL.md 的工作流生成或转换文件;具体文件名、目录结构以 Skill 包内说明为准。
适用场景与注意¶
适合谁
- 需要快速产出可分享、可托管的 HTML 演示稿,又不想从零手写 slide 框架的开发者或产品同学。
- 已有 PPTX,希望迁移到浏览器演示或内网静态页的场景。
- 对视觉风格不确定,希望通过样张对比再定稿的非设计背景使用者(与 Skill 自述一致)。
限制与注意
- 社区 Skill,质量与更新节奏依赖发布者
user_be38de3d,使用前可在 SkillHub 页查看版本与下载量。 - 转换 PPTX 时,复杂母版、嵌入字体或专有动画未必能一比一还原,需在浏览器中自行验收。
- 生成内容为 HTML/前端资源,部署与合规(内网、CDN、依赖脚本)需自行把控。
- 勿将 SkillHub 页面统计与用户线索中的旧数据混用;本文采用抓取元数据中的版本 1.0.0 与下载 997 等字段。
结尾¶
「创作HTML格式的PPT」把「写 HTML 幻灯片」和「PPT 转 Web」收敛到同一套 Agent Skill 流程里,适合 office-efficiency 类办公场景,且无需 API Key。若要安装或查看详情,请访问 SkillHub:https://www.skillhub.cn/skills/user_be38de3d/gbot-frontend-slides ,API 条目:https://api.skillhub.cn/user_be38de3d/gbot-frontend-slides 。