前言¶

做網頁小遊戲、互動課件或者 H5 作品的人，通常會遇到同一個分發問題：項目裏除了 HTML，還有 JS、CSS、圖片、音頻，素材往往按目錄分開存放。發給同事或學生時，要麼打包 zip 讓人解壓再開本地服務器，要麼因爲路徑寫死導致圖片不顯示。zip 還會被殺軟攔、被微信文件傳輸助手壓縮、被郵箱附件大小卡住。

下面介紹的 Skill 就是爲了解決這件事：把整個項目目錄連同子文件夾，打包成單個 HTML 文件，同時對圖片和音頻做大幅壓縮，讓成品落在一個體積預算裏，默認 10MB。這樣分發就變成了「發一個文件，雙擊就能打開」。

這是什麼¶

一句話定位：一個把多文件網頁項目打包成可離線運行的單文件 HTML，並附帶素材壓縮能力的 Skill。

出品方是 SkillHub 上的社區 Skill，座標 @indiv-dfteacher/fmg-htmldb，發佈者 ID 爲 user_73cb5b59，當前版本 1.0.2，來源標記爲 community，分類屬於 dev-programming。同名公衆號「數智化教學大馮老師」同步提供資源和技能更新。

它解決的問題是：網頁類作品的成品體積過大、依賴外部目錄和服務器，導致離線分發困難。

核心功能¶

根據官方頁面的簡介，這個 Skill 只做一件事，但包含三個明確的能力點：

1、多文件合併。把多個文件以及子文件夾合併進一個 HTML 文件，不要求使用者自行整理目錄結構。
2、素材壓縮。對圖片和音頻做大幅度壓縮，這是成品體積能控制下來的主要手段。
3、體積預算控制。把最終成品的體積控制在指定預算內，默認閾值是 10MB，具體數值可以按需指定。

注意它只針對圖片和音頻做壓縮，不會對 HTML、JS、CSS 做代碼級優化；想進一步縮小體積，得自己先優化代碼再打包。

安裝與啓用¶

這個 Skill 遵循通用的 SKILL.md 格式。目前抓取到的官方資料裏沒有給出獨立的安裝命令行，只提供了座標和頁面地址，所以這裏不編造安裝參數。

在 Cursor、Codex CLI、Claude Code 這類支持 Skill 的客戶端裏，通用做法是把座標 @indiv-dfteacher/fmg-htmldb 交給對應工具的技能市場或 SkillHub 面板去拉取。如果客戶端只支持本地路徑，則需要從官方頁面 https://www.skillhub.cn/skills/indiv-dfteacher/fmg-htmldb 取到 SKILL.md 後按本地 Skill 目錄放置。

一個對部署環境有參考價值的字段是 requires_api_key=false：這個 Skill 不需要 API Key，也就不會因爲你沒有配額而跑不起來，適合直接離線使用。

典型用法¶

官方簡介給出的使用形態是「一個文件雙擊即玩」，實際操作順序可以拆成三步：

1、準備好待打包的項目目錄，把 HTML 和素材子文件夾放在一起。
2、把目錄路徑和體積預算告訴 Skill，讓它讀取文件、壓縮圖片與音頻、合併生成單個 HTML。
3、拿到生成的 HTML 後單獨分發，不附帶任何外部依賴。

關於命令細節要說明一下：已抓取的官方資料裏沒有列出具體的命令行參數或配置字段，比如壓縮質量、格式轉換策略、超預算時的處理方式，都沒有公開說明。因此上面只寫了流程，沒有寫具體命令。需要確認這些參數時，應回到 SKILL.md 原文或官方頁面查看，不要照抄第三方示例。

適用場景與注意¶

適合的場景比較明確：網頁小遊戲、互動課件、H5 作品的成品分發，尤其是需要離線打開、不方便起服務器、不方便讓對方解壓的場景。

幾條使用上的限制：

1、它處理的是「分發」，不是「開發」。打包前的代碼結構、資源引用方式仍然需要自己保證正確。
2、壓縮是針對圖片和音頻的，圖片如果本身已經是 WebP 或體積已經很小，壓縮收益會打折扣。
3、體積預算是硬約束，默認 10MB。素材總量遠超預算時，最終結果取決於 Skill 的超預算策略，而這部分官方資料沒有說明，第一次用建議先拿小項目試，確認成品體積和畫質是否符合預期。
4、安裝量標記爲 0，下載量爲 929，屬於較新的社區 Skill，遇到問題時可參考的資料較少。

結尾¶

回到最初的問題：網頁類作品想「一個文件發出去就能玩」，最省事的做法就是打包加壓縮兩步一次做完。這個 Skill 把這兩步合併成一條流程，默認把成品壓在 10MB 以內，免去了反覆調整素材和手動壓縮的重複勞動。

官方地址：https://api.skillhub.cn/indiv-dfteacher/fmg-htmldb，頁面地址：https://www.skillhub.cn/skills/indiv-dfteacher/fmg-htmldb。