前言¶
科普稿、內部分享提綱往往先以純文本或 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。
