前言¶
路演、内部分享、客户演示往往离不开幻灯片。常见路径是 Keynote / PowerPoint 导出 PDF，或把内容塞进在线模板；若要网页里滚动播放、带键盘导航和入场动画，又要自己写 HTML/CSS/JS，或跑一套前端构建。对已经在 Cursor、Claude Code 等环境里用 Agent 写代码的开发者来说，更省事的做法是把「内容梳理、风格定调、单文件交付」交给一条遵循 SKILL.md 工作流的 Skill。下面介绍 SkillHub 上的 frontend-slides（@org-02qudk26/frontend-slides-zh）能做什么、如何安装，以及 Agent 会按什么步骤推进任务。
这是什么¶
frontend-slides 是一条面向「演示文稿」场景的 Agent Skill：从零生成零依赖、动画丰富的单文件 HTML 演示，或将 .ppt / .pptx 转为可在浏览器中播放的网页版。Skill 元数据标明 requires_api_key=false，无需额外 API Key。
| 项 | 说明 |
|---|---|
| 坐标 | @org-02qudk26/frontend-slides-zh |
| 版本 | 1.0.0 |
| 分类 | office-efficiency |
| 来源 | enterprise（SkillHub） |
| 发布者 | 智雨科技 |
| 上游参考 | SKILL.md 中 source: https://github.com/zarazhangrui/frontend-slides |
核心理念在官方 SKILL.md 中写得很清楚：单文件内联 CSS/JS、不依赖 npm 构建；通过生成视觉预览帮助非设计背景的人确定审美，再产出可维护的 HTML。
核心功能¶
以下能力均来自已安装的 v1.0.0 包内 SKILL.md 与 README.md。
三种工作模式¶
Agent 会先判断用户意图（阶段 0）：
- 新建演示文稿 — 从用途、篇幅、素材完备程度做内容发现，再进入风格探索与生成。
- PPT 转换 — 对 PowerPoint 做内容提取（文本、图片、备注），确认结构后走同一套风格流程，再生成 HTML。
- 改进现有 HTML 幻灯片 — 读取已有文件，理解结构后按需求改版。
风格探索（「展示，而非告知」）¶
在正式写全稿前，Skill 会按用户选择的「氛围」（如专业可信、兴奋活力等）生成 3 份迷你 HTML 风格预览，放在项目下的 .claude-design/slide-previews/（style-a.html、style-b.html、style-c.html 及 assets/）。用户本地打开对比后选定方向或提出混搭需求，再进入完整 presentation.html 生成。
技术交付形态¶
- 输出以 自包含 HTML 为主，可选
assets/存放图片。 - 页面结构：
section.slide+ CSS 变量主题、Intersection Observer触发.reveal动画、SlidePresentation类处理键盘/触摸/滚轮与进度条。 - 强调可访问性（语义标签、
prefers-reduced-motion）与移动端断点。 - PPT 转换路径依赖 Python
python-pptx提取幻灯片 JSON 与图片资源，再映射到 HTML。
Hub 侧展示名¶
README 中 Hub 显示名为「互动网页演示文稿」，能力摘要与上述流程一致。
安装与启用¶
1. 安装 SkillHub CLI（若尚未安装）¶
command -v skillhub && skillhub --version
未安装时可按官方文档执行（完整安装示例）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
说明见 SkillHub 安装与优先源配置。
2. 安装本 Skill¶
安装时必须用 --dir 指向当前 Agent 的 skills 目录，否则默认落在 ./skills/ 可能不会被识别。
skillhub install frontend-slides-zh --namespace org-02qudk26 --dir ~/.cursor/skills/
常见 Agent 的 skills 路径（摘自同一安装文档）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下.agents/skills/
也可将下面提示发给 Agent，让其按安装文档拉取：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@org-02qudk26/frontend-slides-zh`。
安装完成后，按你所用客户端的要求重启或刷新 Agent，使 Skill 被加载。
典型用法¶
用法不是固定 CLI 子命令，而是在对话中描述目标，由 Agent 执行 SKILL.md 中的阶段流程。
从零做路演幻灯片¶
- 说明用途（如路演材料）、大约页数、内容是否已准备好，并粘贴要点。
- 回答「氛围」类问题（可多选），等待 Agent 生成 3 个风格预览路径。
- 在浏览器打开
.claude-design/slide-previews/下对应 HTML，选定风格或说明混搭。 - Agent 生成
presentation.html（及assets/），并说明方向键、空格、滚动与导航点用法；交付前会清理预览目录。
官方 SKILL.md 中的示例话术起点：我想为我的 AI 初创公司创建一个路演材料。
将 PPTX 转为网页¶
- 提供
.pptx路径，Agent 用python-pptx提取标题、正文、图片与演讲者备注。 - 确认提取摘要是否正确。
- 同样经过风格预览与选定，再生成保留资源引用的 HTML。
示例话术：将我的 slides.pptx 转换为网页演示文稿。
自定义已生成文件¶
Skill 建议在成品 HTML 顶部修改 :root CSS 变量调色、更换 Fontshare/Google Fonts 链接，或调整 .reveal 动画时长；复杂交互页面则 SKILL.md 指向其他 design 类 Skill，超出本 Skill 范围。
适用场景与注意¶
适合：
- 需要快速得到可双击打开的 HTML deck，不想维护前端工程。
- 有 PPT 素材，希望转成带导航与动画的网页演示。
- 团队已在 Cursor / Claude Code 等环境用 Agent，希望把幻灯片工作流标准化到一条 Skill。
注意：
- PPT 转换依赖本机 Python 与
python-pptx；复杂版式、动画与母版效果无法 1:1 还原，以提取到的文本与图片为准。 - 风格预览会短暂占用
.claude-design/slide-previews/，正式交付前 Skill 要求删除该目录。 - 在线字体通过 Fontshare/Google Fonts 加载，离线或内网环境需自行改成本地字体。
- SkillHub 页面统计（截至资料抓取）：评分 100000，下载 1667；与线索中的其他数字不一致时，以 SkillHub 技能页 与 API 坐标为准。
结尾¶
frontend-slides 把「问清内容 → 视觉选型 → 单文件 HTML 交付」写进 Agent 可执行的 SKILL.md，覆盖新建、PPT 转换与改版三类需求，且无需 API Key。若你正在 SkillHub 上找办公效率类演示能力，可从官方坐标安装并在对话中直接描述演示目标。
- SkillHub 技能页：https://www.skillhub.cn/skills/org-02qudk26/frontend-slides-zh
- 安装说明：https://skillhub.cn/install/skillhub.md
- 坐标：
@org-02qudk26/frontend-slides-zh（v1.0.0）
