前言¶

手裏有一份 AI 生成的報告頁、演示稿或落地頁 HTML，改一個字往往要翻源碼、猜 class、在 DevTools 裏試樣式。若目標是「非開發者也能調版式、改文案、導出乾淨 HTML」，單靠手工改文件成本偏高。下面介紹 SkillHub 上的社區 Skill html-editor一鍵編輯：在 Agent 會話裏把任意靜態 HTML 轉成帶工具欄與面板的可視化編輯版，並支持撤銷、保存與導出。

這是什麼¶

html-editor一鍵編輯（座標 @user_f8aa8765/html-editor，當前版本 v1.8.4）由社區發佈者 user_f8aa8765 維護，分類爲 dev-programming，來源爲 community。它不要求配置 API Key（requires_api_key=false）。

一句話定位：把輸入的靜態 HTML 注入可拖動工具欄與多套編輯面板，實現所見即所得的就地編輯，並可導出不含編輯器的乾淨版本。

官方頁面：SkillHub - html-editor一鍵編輯
技能元數據 API：https://api.skillhub.cn/user_f8aa8765/html-editor

核心功能¶

以下能力均來自官方簡介，安裝後由 Agent 按 Skill 指引執行。

編輯殼與面板¶

1. 注入可拖動的工具欄。
2. 提供顏色、字號、佈局、風格等面板。
3. 支持頁面內就地改文字（點擊直接編輯）。
4. 撤銷、保存，並導出「乾淨版」HTML（去掉編輯注入部分）。

導航與國際化¶

• 元素與對應面板可雙向跳轉，便於對準要改的區域。
• 界面支持中英文 i18n。

顏色面板（數據驅動）¶

不依賴固定主題名：掃描 DOM 後按規則彙總可調色項——文字按字符數取 top 5，背景按元素數取 top 4，邊框按元素數取 top 3，官方說明爲跨主題通用。

風格 Prompt¶

內置 6 套場景風格 Prompt，可一鍵複製，交給 AI 重塑頁面樣式。

常見觸發說法¶

用戶提到「可編輯版 HTML」「html 可視化編輯」「讓 html 可編輯」「樣式面板」「改 html 不寫代碼」「所見即所得」「把報告/頁面/演示稿變成可調樣式」「給 AI 複製風格提示詞」等需求時，適合啓用本 Skill。

安裝與啓用¶

SkillHub 頁面給出的安裝方式是：先按官方安裝文檔配置 SkillHub CLI，再把技能裝進當前 Agent 的 skills 目錄。

1. 檢查 SkillHub CLI¶

command -v skillhub && skillhub --version

若未安裝，可按 SkillHub 安裝與優先源配置 執行完整安裝或僅安裝 CLI（文檔內提供 curl 安裝命令）。

2. 安裝本 Skill¶

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

skillhub install @user_f8aa8765/html-editor --dir <你的 skills 目錄>

常用路徑示例（以安裝文檔爲準，按你實際使用的客戶端選擇）：

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

也可在對話中讓 AI 按同一文檔安裝，提示詞示例：

請根據 https://skillhub.cn/install/skillhub.md，安裝 @user_f8aa8765/html-editor。

安裝完成後，按你所用 Agent 的要求重啓或刷新技能列表，使 Skill 生效。

典型用法¶

官方頁面未附帶獨立「分步教程」倉庫說明；典型流程是：在已啓用 Skill 的會話中提供 HTML 或說明需求，由 Agent 調用本 Skill 生成可編輯版本。

可復現的對話方向包括：

1. 粘貼一段靜態 HTML，說明需要「可視化可編輯版」或「所見即所得」。
2. 在生成的編輯頁裏通過面板調顏色、字號、佈局；需要整體換膚時，從風格面板複製 6 套場景之一對應的 Prompt 給 AI。
3. 確認效果後要求「保存」或「導出乾淨版 HTML」，用於部署或歸檔。

具體注入腳本與面板交互由 Skill 包內 SKILL.md 定義，以安裝到本地的版本爲準。

適用場景與注意¶

適合誰

• 需要快速把報告、單頁演示、原型 HTML 交給同事微調樣式和文案，又不想每人改源碼。
• 希望在瀏覽器裏改完再導出靜態文件，而不是長期依賴在線建站工具。

使用注意

• 本 Skill 爲社區來源，行爲與兼容性以 v1.8.4 及你本地安裝包爲準；大段複雜 SPA 或強依賴構建鏈的頁面是否適合，需自行試跑。
• 導出「乾淨版」前建議在瀏覽器裏走一遍撤銷/保存流程，確認編輯殼已剝離。
• SkillHub 統計（截至資料抓取）：評分 100000，下載 1545；頁面展示安裝數爲 0 僅表示統計字段，不代表無法通過 CLI 安裝。

結尾¶

html-editor一鍵編輯把「改 HTML」從改文件變成在頁面裏拖工具欄、點面板、就地打字，並用數據驅動的顏色項和 6 套風格 Prompt 銜接 AI 改膚。若你經常在 Agent 裏處理靜態頁面，可按上文裝好 @user_f8aa8765/html-editor 試一輪。

官方地址：https://www.skillhub.cn/skills/user_f8aa8765/html-editor