前言¶
做內容、寫文檔、出原型的時候，經常已經寫好了一版 HTML 排版，卻還要再想辦法把它變成一張圖。常規路徑是打開瀏覽器手動截圖，或者把 HTML 塞進無頭瀏覽器再寫腳本保存。前者不可控，後者每次要重跑一遍。create-image-by-html 這個 Skill 把這步收斂成一句自然語言：你說“畫一張圖”，它把已有的 HTML 渲染成 PNG 輸出。
這是什麼¶
create-image-by-html 是 SkillHub 上的社區 Skill，座標 @user_a970e076/create-image-by-html，由 user_a970e076 發佈維護，版本 1.0.0，分類 design-media。定位是：當用戶提出畫圖類需求時，把 HTML 設計稿渲染成 PNG 圖片返回，省掉自己搭渲染腳本的環節。
核心能力¶
資料中核實到的能力只有一條，也足夠明確：
- 輸入是 HTML 設計稿，輸出是 PNG 圖片。
- 觸發方式是自然語言，不是命令行參數。官方給出的觸發詞是：畫圖、生成圖片、配圖、信息圖、設計圖、HTML轉PNG、導出圖片。
也就是說，Skill 內部承擔的是“HTML → 像素圖”這一步，排版本身仍然由你寫的 HTML 決定。
安裝與啓用¶
Skill 座標：
@user_a970e076/create-image-by-html
官方地址：
https://api.skillhub.cn/user_a970e076/create-image-by-html
SkillHub 頁面：
https://www.skillhub.cn/skills/user_a970e076/create-image-by-html
標籤裏寫着 requires_api_key=false，意味着啓用不需要額外配置密鑰。來源標記爲 community，屬於社區發佈而非官方維護，裝之前可以在頁面上確認維護狀態。
需要說明的是，已抓取的資料裏沒有給出具體平臺的安裝命令，也沒有 Cursor、Codex CLI、Claude Code 的分別指引。這類基於 SKILL.md 格式的 Skill，通用做法是把 Skill 目錄放到對應客戶端的 Skills 目錄下，由客戶端加載 SKILL.md 的 frontmatter 與正文；具體路徑以你所用客戶端的文檔爲準，這裏不代寫未覈實的路徑。
典型用法¶
資料裏沒有提供可復現的命令行示例，下面只列已覈實的部分。
觸發方式：
畫一張圖
做個信息圖
導出圖片
調用時把 HTML 作爲輸入提供給 Skill，輸出爲 PNG。Skill 的觸發詞覆蓋了“配圖”“設計圖”這類模糊表達，所以不需要嚴格命令格式，但描述清楚要畫什麼、版式如何，結果纔可控。
適用場景與注意¶
適合：
- 已經有 HTML 模板，想批量或在對話裏直接拿到 PNG 的人。
- 需要信息圖、配圖、封面這類靜態圖，且願意用 HTML 控制排版的人。
- 不想爲每次出圖單獨寫無頭瀏覽器腳本的團隊。
注意：
- 輸出是 PNG 位圖，不是矢量格式，放大後按分辨率受限。
- 渲染質量取決於 HTML 本身，Skill 不做設計決策。
- 頁面當前顯示評分
100000、下載827、安裝0。安裝數爲 0 說明這個 Skill 的採用情況還沒有數據支撐，用之前建議先小範圍試一次。 - 這是社區 Skill，
SKILL.md的具體執行邏輯（用什麼渲染後端、是否依賴外部服務）資料中沒有披露，需要讀源碼確認後再上生產流程。
結尾¶
create-image-by-html 的價值在於把“HTML 轉 PNG”這一步從腳本里拿出來，變成對話裏的一次出圖。它不解決設計問題，也不生成矢量，適合那些已經有 HTML 模板、只想快速拿到位圖的場景。
官方地址：https://www.skillhub.cn/skills/user_a970e076/create-image-by-html
