前言¶

技術分享、路演和內部彙報裏，幻燈片往往卡在兩條路上：要麼繼續用 PowerPoint，導出或轉網頁時版式和動效容易丟；要麼自己寫 HTML 幻燈片框架，對非設計背景的人來說，「選什麼風格」也常常是抽象選擇題。下面介紹 SkillHub 上的 fronted-slides（座標 @user_897998da/frankyskill1）。它面向 Agent 場景：在對話裏從零搭建演示，或把 PPT/PPTX 轉成可展示的網頁，並強調通過視覺探索幫非設計人員確定審美方向，而不是先填一堆抽象的設計參數。

這是什麼¶

fronted-slides 是社區來源（community）的 Agent Skill，當前版本 1.0.0，分類爲 office-efficiency，由發佈者 user_897998da 維護。SkillHub 頁面將其概括爲：創建動畫豐富、觀感出色的 HTML 演示稿；適用於用戶要「做演示」「把 PPT/PPTX 轉成網頁」「爲演講或路演做幻燈片」等意圖。標籤標明 requires_api_key=false，即按 SkillHub 元數據無需額外 API Key 即可配合 Agent 使用。

核心功能¶

以下能力均來自 SkillHub 官方簡介，未在本地展開 SKILL.md 全文時，不延伸未寫明的實現細節。

1. 從零生成 HTML 演示：在對話中描述主題、結構和動效需求，由 Agent 按 Skill 指引產出可在瀏覽器中展示的 HTML 幻燈片。
2. PowerPoint 轉換：支持將 PPT/PPTX 轉爲 Web 向的演示形式，適合已有 Office 稿、希望以網頁交付或嵌入的場景。
3. 面向非設計人員的審美探索：引導通過可視化嘗試（而非先抽象選定一套設計系統）摸索風格，降低「不會配色、不會排版」時的決策成本。

安裝與啓用¶

安裝流程以 SkillHub 通用文檔爲準；SkillHub 技能頁也給出可直接發給 AI 的提示：根據安裝文檔安裝 @user_897998da/frankyskill1。

1、確認本機已有 SkillHub CLI

command -v skillhub && skillhub --version

若未安裝，可按官方安裝腳本執行（完整安裝或僅 CLI）：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

2、安裝到當前 Agent 的 skills 目錄

安裝時必須用 --dir 指向當前客戶端識別的 skills 目錄，否則默認落在 ./skills/ 可能不會被 Agent 加載。

skillhub install user_897998da/frankyskill1 --dir <你的 skills 目錄>

常見路徑（摘自 SkillHub 安裝文檔，以你本機環境爲準）：

• Cursor：~/.cursor/skills/
• Claude Code：~/.claude/skills/
• Codex：~/.codex/skills/ 或項目下的 .agents/skills/

安裝或更新 skills 後，按你所用客戶端的要求重啓或刷新 Agent，使新 Skill 生效。Cursor、Codex CLI、Claude Code 的差異主要體現在 skills 目錄位置 與 是否需重啓；安裝命令本身均爲 skillhub install … --dir …。

典型用法¶

Skill 的觸發場景在官方簡介中寫得很直接，可在對話中明確說出意圖，例如：

1. 新建演講稿：說明場合（內部分享、技術 talk、路演 pitch）、頁數大致結構、是否需要動效或過渡動畫，請 Agent 使用已安裝的 fronted-slides 生成 HTML 演示。
2. 轉換現有幻燈片：提供 PPT/PPTX 文件或路徑，說明目標（純網頁瀏覽、嵌入站點、保留動畫等），請 Agent 按 Skill 完成向 Web 的轉換。
3. 摸索視覺風格：若尚未確定配色與版式，可要求多稿對比或迭代預覽，利用 Skill 強調的「視覺探索」而非一次性抽象定調。

具體提示詞模板、文件佈局與動效庫以 Skill 包內 SKILL.md 爲準；安裝成功後可在 skills 目錄下打開對應技能文件夾查閱。

適用場景與注意¶

適合誰

• 需要快速產出可分享 HTML 演示、又不想手寫整套幻燈片框架的開發者或講者。
• 已有 PowerPoint 稿、希望轉成網頁交付的團隊。
• 設計經驗有限、希望通過迭代預覽確定風格的使用者。

使用上需注意

• 元數據版本爲 1.0.0，評分與下載量以 SkillHub 展示爲準（頁面數據會更新；撰寫時索引爲評分 100000、下載 3499、安裝 34）。
• 無需 API Key 僅表示 SkillHub 標籤如此標註；若生成內容依賴外部服務，仍以 Agent 與 Skill 正文說明爲準。
• 大體積 PPT、複雜母版或嵌入媒體時，轉換效果取決於源文件與 Agent 執行環境，宜預留人工校對版式與鏈接的步驟。

結尾¶

fronted-slides 把「做 HTML 演示」和「PPT 轉 Web」收斂到同一套 Agent Skill 裏，並針對非設計背景用戶強調可視化試錯。若你在 Cursor、Claude Code 或 Codex 等支持 SkillHub 的環境裏做辦公與演示類任務，可按上文安裝座標 user_897998da/frankyskill1，在對話中直接描述演示需求即可啓用。

• SkillHub 技能頁：https://www.skillhub.cn/skills/user_897998da/frankyskill1
• 安裝說明：https://skillhub.cn/install/skillhub.md
• API 條目（元數據）：https://api.skillhub.cn/user_897998da/frankyskill1