前言¶
做科普或技術分享時，常見路徑是：先寫稿，再手工做 PPT 或錄屏。若希望產物是可直接打開、可分享的網頁，還要自己搭頁面結構和動效，成本往往比寫內容更高。下面介紹的 Skill 把「輸入科普文本 → 產出演示頁面」收成一條可在 Agent 裏觸發的工作流，並內置 HTML 模板，減少從零寫前端的時間。
這是什麼¶
根據文字生成 HTML 演示動畫（座標 @user_ab5ae6ee/unclecheng-ai-animation-v1）是發佈在 SkillHub 上的社區 Skill，當前版本 1.0.3，分類爲 content-creation，發佈者爲 user_ab5ae6ee（SkillHub 頁面標註維護者爲 Uncle城）。標籤 requires_api_key=false，表示按 SkillHub 元數據無需額外 API Key。
一句話定位：當用戶提供科普類文本並希望生成演示頁面時，由 Agent 按 Skill 內工作流與模板，輸出 PPT 風格的單頁 HTML 動畫，或在流程圖模式下對已有頁面做樣式重構。
官方入口：
- API 頁：
https://api.skillhub.cn/user_ab5ae6ee/unclecheng-ai-animation-v1 - SkillHub 展示頁：
https://www.skillhub.cn/skills/user_ab5ae6ee/unclecheng-ai-animation-v1
核心功能¶
以下能力均來自官方簡介，未在資料中出現的細節不展開。
-
默認模式
將科普內容生成爲仿 PPT 輪播的單頁 HTML 動畫網頁，適合「一段文字 → 一頁可演示的網頁」。 -
流程圖模式
使用 Skill 內置的 Animation 模板，將已生成的AI_Animation.html按平面 UI 樣式重構，適合在已有動畫頁面上換一套流程圖向的視覺結構。 -
觸發方式
在用戶輸入科普內容並希望生成演示頁面時由 Agent 觸發。官方列出的觸發詞包括：「生成 PPT」、「生成演示網頁」、「生成流程圖」 等（具體匹配以 Agent 對 Skill 的加載爲準）。 -
模板內置
Animation 等模板已內置於 Skill，無需在資料之外另行指定外部模板倉庫。
安裝與啓用¶
SkillHub 頁面給出的安裝指引是：讓 AI 參照 https://skillhub.cn/install/skillhub.md，安裝座標 @user_ab5ae6ee/unclecheng-ai-animation-v1。
若本機已安裝 SkillHub CLI，可按官方文檔將技能裝到當前 Agent 的 skills 目錄（安裝時必須使用 --dir，否則默認落在 ./skills/ 且可能不被識別）。常用路徑如下（摘自 SkillHub 安裝文檔）：
| 環境 | skills 目錄 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或項目下的 .agents/skills/ |
檢查 CLI 是否已安裝：
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
安裝本 Skill 的示意命令（將 <skills 目錄> 換成上表對應路徑）：
skillhub install user_ab5ae6ee/unclecheng-ai-animation-v1 --dir <skills 目錄>
也可先搜索再安裝：
skillhub search unclecheng-ai-animation
skillhub install user_ab5ae6ee/unclecheng-ai-animation-v1 --dir <skills 目錄>
在 Cursor 中，完成安裝後需確保 Agent 能加載該 skills 目錄下的 Skill；若環境要求重啓客戶端，以你當前 Cursor 版本說明爲準。資料中未單獨區分 Codex CLI 與 Claude Code 對本 Skill 的差異化配置，此處不臆造。
典型用法¶
官方未提供固定示例文稿，但觸發條件與模式在簡介中寫清，可按下面步驟復現意圖（由 Agent 執行 Skill 內工作流，具體生成文件名以 Skill 約定爲準）。
- 在對話中粘貼科普正文（段落、要點、術語解釋等）。
- 使用默認模式時，附帶意圖明確的觸發語，例如：「根據下面內容生成演示網頁」 或 「生成 PPT」。
- 若已有
AI_Animation.html，並需要平面 UI 的流程圖樣式，使用 「生成流程圖」 等表述，進入流程圖模式，由 Skill 用內置 Animation 模板重構頁面。 - 在瀏覽器中打開 Agent 產出的 HTML，檢查輪播與版面是否符合預期；需要改稿時繼續在同一對話中補充或修訂文本，再觸發一次生成。
適用場景與注意¶
適合誰
- 需要把科普、培訓要點做成可分享單頁 HTML 的作者或運營，且希望少寫前端。
- 已有
AI_Animation.html，只想換成流程圖向平面 UI 的場景。
限制與注意
- 產物形態以官方描述的「仿 PPT 輪播單頁」和流程圖重構爲主，不等同於 PowerPoint 源文件或複雜數據可視化項目。
- Skill 面向「科普內容」類輸入；極長文檔、強交互應用是否在單頁 HTML 內表現良好，取決於 Agent 執行與模板能力，資料未承諾上限，需自行試跑。
- 社區來源（
source: community），升級與行爲變更以 SkillHub 上 v1.0.3 及後續版本爲準；安裝前可用skillhub查看來源與版本。 - SkillHub 統計（截至頁面抓取）：評分 100000，下載 1479，安裝 18；數字會隨時間變化，以 SkillHub 頁面爲準。
結尾¶
根據文字生成 HTML 演示動畫把科普文本到演示網頁的路徑收成可觸發的工作流，默認出輪播式單頁 HTML，並支持對 AI_Animation.html 做流程圖模式重構；模板內置，且元數據標明無需 API Key。若你在 Cursor 或其他支持 Skill 的客戶端裏做內容演示，可從 SkillHub 安裝 @user_ab5ae6ee/unclecheng-ai-animation-v1，並用官方觸發語試一輪。
- SkillHub：
https://www.skillhub.cn/skills/user_ab5ae6ee/unclecheng-ai-animation-v1 - 安裝說明：
https://skillhub.cn/install/skillhub.md
