前言¶
科普稿、内部分享提纲往往先以纯文本或 Markdown 存在。若要对外演示，常见做法是再开 PowerPoint 或录屏工具，把同一套内容手工排版、切页。对开发者来说，更省事的路径是：在 Agent 里贴入文稿，由 Skill 按固定工作流产出可直接用浏览器打开的 HTML，必要时再切换成流程图风格的平面 UI。下面介绍 SkillHub 社区 Skill「一键生成 HTML 演示动画」的定位与用法。
这是什么¶
「一键生成 HTML 演示动画」（坐标 @user_ab5ae6ee/unclecheng-ai-animation）是 SkillHub 上的社区来源（community）Skill，分类为 dev-programming，当前版本 v1.0.2，由发布者 user_ab5ae6ee（页面展示作者为 Uncle城）维护。
官方简介将其定义为：将科普内容文本转换为可视化 PPT 风格网页的完整工作流。当用户输入科普内容并希望生成演示页面时触发。页面标注 requires_api_key=false，即不依赖额外 API Key 配置。
- SkillHub 页面：https://www.skillhub.cn/skills/user_ab5ae6ee/unclecheng-ai-animation
- API 资源地址：https://api.skillhub.cn/user_ab5ae6ee/unclecheng-ai-animation
核心功能¶
依据官方说明，Skill 提供两种模式，Animation 相关模板已内置于 Skill 中。
默认模式¶
将用户提供的科普内容生成为仿 PPT 轮播的单页 HTML 动画网页。输出可在浏览器中打开，适合快速把文字结构变成可翻页的演示页，而无需单独维护 .pptx 文件。
流程图模式¶
在已存在 AI_Animation.html 的前提下，使用内置 Animation 模板，按平面 UI 样式对该页面进行重构。适合在默认模式产出初稿后，需要更偏流程图、信息架构展示的场景。
触发方式¶
官方列出的触发词包括「生成 PPT」「生成演示网页」「生成流程图」等。在已安装并启用 Skill 的 Agent 中，用自然语言描述科普内容并带上上述意图，即可进入对应工作流。
安装与启用¶
SkillHub 页面给出的安装指引是：让 AI 根据安装文档安装坐标 @user_ab5ae6ee/unclecheng-ai-animation。通用步骤见 https://skillhub.cn/install/skillhub.md。
1、检查或安装 SkillHub CLI¶
先确认本机是否已有 skillhub：
command -v skillhub && skillhub --version
若未安装，可按官方脚本安装（完整安装含 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、安装到当前 Agent 的 skills 目录¶
安装时必须用 --dir 指向当前 Agent 识别的 skills 目录；否则默认落在 ./skills/，Agent 可能无法加载。官方文档列出的常见路径如下：
| Agent / 客户端 | skills 目录 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下 .agents/skills/ |
| Windsurf | ~/.codeium/windsurf/skills/ 或 .windsurf/skills/ |
安装命令示例（将 <skills 目录> 替换为实际路径）：
skillhub install @user_ab5ae6ee/unclecheng-ai-animation --dir <skills 目录>
也可在对话中直接说明：
请根据 https://skillhub.cn/install/skillhub.md，安装 @user_ab5ae6ee/unclecheng-ai-animation。
安装后按你所用客户端的要求重启或刷新 Skill 列表，使新 Skill 生效。
典型用法¶
以下示例仅复述官方描述中的能力边界，便于在本地复现「触发 → 生成」路径。
默认模式：科普文稿 → 轮播 HTML¶
- 在 Agent 中粘贴或附上科普正文（章节、要点即可，无需事先排版成幻灯片）。
- 明确意图，例如：「请根据下面内容生成演示网页 / 生成 PPT 风格的单页 HTML。」
- 按 Agent 与 Skill 工作流等待生成 HTML 文件；用浏览器打开检查轮播与分页是否符合预期。
流程图模式：重构已有 AI_Animation.html¶
- 确保工作区或上下文中已有默认模式产出的
AI_Animation.html（官方说明以此文件为输入）。 - 提出流程图意图，例如：「对现有的
AI_Animation.html生成流程图风格，按平面 UI 重构。」 - 由 Skill 使用内置 Animation 模板完成样式重构，再在浏览器中对比默认版与流程图版。
适用场景与注意¶
适合谁： 需要把科普、培训提纲快速变成可分享网页的开发者或内容作者；希望减少在 PPT 与网页两套介质间重复排版的人；已有 HTML 初稿、仅需切换为流程图平面 UI 的场景。
限制与注意：
- Skill 面向「科普内容 → 可视化 PPT 风格网页」工作流，不保证覆盖所有行业模板或企业品牌规范；成稿后仍需人工校对事实与版式。
- 流程图模式依赖已生成的
AI_Animation.html，不能从无文件状态直接跳到该模式。 - 页面统计（截至资料抓取）：SkillHub 评分 100000，下载 2641，安装 26；与第三方摘要中的数字可能不一致，以 SkillHub 页面为准。
- 社区来源 Skill，升级与行为以 v1.0.2 及后续版本发布说明为准；安装前可用
skillhub search核对坐标与版本。
结尾¶
「一键生成 HTML 演示动画」把科普文本到可演示网页的路径收敛为 Agent 内可重复触发的工作流：默认模式产出仿 PPT 轮播单页 HTML，流程图模式则在 AI_Animation.html 上按平面 UI 重构。无需 API Key 即可按官方文档安装 @user_ab5ae6ee/unclecheng-ai-animation。详情与安装入口见 SkillHub：https://www.skillhub.cn/skills/user_ab5ae6ee/unclecheng-ai-animation。
