前言¶
用 AI 生成演示頁時，常見結果是「能看不能改」：版式要動一下就得回到對話裏重新生成，或者手工改一大段 HTML。若還需要把 PPT、PDF 轉成網頁演示，又希望轉完後仍能拖拽、調順序、本地保存，通用前端生成流程往往接不上這類需求。
下面介紹 SkillHub 上的 frontend-slides-editable（座標 @user_26736ada/frontend-slides-editable-breakingwall，當前版本 2.2.0）。它面向 Agent：在用戶要單文件 HTML 演示、且生成後仍要在瀏覽器裏編輯時，由 Skill 約束產出形態與能力邊界。
這是什麼¶
frontend-slides-editable 是社區來源（community）、分類爲 dev-programming 的 Agent Skill，發佈者爲 user_26736ada。官方簡介說明其適用時機爲：
- 需要單文件 HTML 演示，生成後在瀏覽器中仍可編輯；
- 需要對象級版式編輯、幻燈片重排；
- 需要本地保存 / 導出；
- 需要將 PPT / PDF 轉爲網頁演示，且轉換後繼續可編輯。
Skill 標註 requires_api_key=false，不依賴額外 API Key。維護與詳細說明以 SkillHub 頁面爲準。
核心功能¶
以下能力均來自官方簡介，未在資料中出現的細節不展開：
| 方向 | 說明 |
|---|---|
| 交付形態 | 單文件 HTML 演示 |
| 生成後編輯 | 在瀏覽器內保持可編輯，而非只讀展示 |
| 佈局與結構 | 對象級佈局編輯、幻燈片順序調整 |
| 持久化 | 本地保存與導出 |
| 遷移 | PPT / PDF 轉 Web，轉換結果仍支持編輯 |
Skill 基於通用 SKILL.md 格式，由 Agent 在匹配用戶意圖時加載並遵循其中的工作流與約束。
安裝與啓用¶
1. 安裝 SkillHub CLI（若尚未安裝）¶
先檢查是否已安裝：
command -v skillhub && skillhub --version
未安裝時，可按 SkillHub 官方安裝文檔執行完整安裝（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
說明與限制見：SkillHub 安裝與優先源配置。
2. 安裝本 Skill¶
安裝時必須用 --dir 指向當前 Agent 實際使用的 skills 目錄；默認裝到 ./skills/ 時，部分客戶端不會自動識別。
skillhub install user_26736ada/frontend-slides-editable-breakingwall --dir <你的 skills 目錄>
也可將下面提示詞發給已接入 SkillHub 安裝流程的 AI，讓其按官方文檔完成安裝：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_26736ada/frontend-slides-editable-breakingwall`。
3. 各客戶端 skills 目錄（節選）¶
路徑來自 SkillHub 安裝文檔，裝好後按客戶端要求重啓或刷新技能列表：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或項目下的.agents/skills/
Codex CLI、Claude Code、Cursor 的差異主要體現在 skills 目錄位置；安裝命令本身均爲 skillhub install … --dir <目錄>。資料中未單獨列出某一客戶端的額外配置項，此處不臆造。
典型用法¶
本 Skill 沒有單獨的「命令行子工具」用法，而是在對話中由 Agent 加載後生成或轉換演示稿。可與官方簡介對齊的訴求示例如下（表述可按項目習慣調整，核心是命中 Skill 的觸發條件）：
-
從零生成可編輯單頁演示
說明主題、頁數或大綱，並明確要求「單文件 HTML」「生成後要在瀏覽器裏改文字、挪元素、調幻燈片順序」「支持本地保存或導出」。 -
在已有 HTML 演示上改結構
提供現有單文件或說明當前文件，要求對象級改版式、重排 slide，且保持單文件、瀏覽器內可繼續編輯。 -
PPT / PDF 轉 Web 且可繼續改
提供源文件或路徑（在 Agent 能訪問的前提下），要求轉爲網頁演示形態，並保留後續在瀏覽器中的編輯能力，而非靜態截圖頁。
具體實現步驟、內嵌編輯器形態、導出格式等以 Skill 包內 SKILL.md 爲準；本文不復述未在公開頁面抓取到的實現細節。
適用場景與注意¶
適合誰
- 需要把演示交付成 一個 HTML 文件，方便郵件、內網靜態託管或離線打開；
- 希望 非開發者 在瀏覽器裏改內容、調順序，而不是每次找開發改代碼；
- 有 PPT / PDF 上 Web 的需求，且不接受「轉完即死」的只讀頁。
限制與注意
- 社區 Skill，行爲與版本以 SkillHub 爲準；當前公開版本爲 2.2.0。
- 安裝後若 Agent 未加載到技能，優先檢查
--dir是否指向正確目錄，並參考客戶端文檔刷新技能。 - PPT / PDF 轉換的版式還原度、字體與資源依賴，取決於 Skill 內約定與源文件複雜度；資料未承諾具體還原指標，使用時應在生成結果上自行驗收。
- 無需 API Key，但不等於無需本地或 Agent 運行環境；大文件轉換仍受客戶端與瀏覽器能力限制。
結尾¶
frontend-slides-editable 把「單文件 HTML 演示」和「生成後仍在瀏覽器裏改」綁在一起，並覆蓋重排、本地保存導出以及 PPT / PDF 轉 Web 後繼續編輯等場景，適合交給 Agent 統一產出形態。
- SkillHub 頁面：https://www.skillhub.cn/skills/user_26736ada/frontend-slides-editable-breakingwall
- 安裝說明：https://skillhub.cn/install/skillhub.md
- 座標：
@user_26736ada/frontend-slides-editable-breakingwall（v2.2.0）
