告別生圖 API，我用 Hermes Skill 免費出圖無限次
整理版優先睇
用 HTML 模板 + 瀏覽器截圖代替生圖 API，免費生成結構化信息圖
呢篇文章由嬌姐分享，佢係一位 40+ IT 從業者，前榮耀員工，而家專注 AI 效率工具研究。佢成日要幫公眾號配圖、做微信羣信息圖、出數據卡片，但用生圖 API 有好多問題：版式唔聽話、中文渲染差、費用累積快、風格難統一。
佢發現一個完全免費嘅替代方案：用 HTML 模板加瀏覽器截圖。先寫好一套固定風格嘅 HTML 模板，每次只需將內容填入，再用瀏覽器渲染並截圖，5秒內出高清 PNG。佢將呢個流程封裝成 Hermes Skill，一句話就自動完成。
呢套方案已經實際用喺教程步驟圖、數據卡片、微信羣精華信息圖等多個場景，效果好好。佢仲公開咗全部 Skill 代碼同兩套風格模板，讀者可以直接攞去用。呢個思路仲可以延伸到公眾號封面、週報卡片、對比表格等，好有啟發性。
- 告別生圖 API：用 HTML + CSS 精確排版，完全免費，中文渲染完美。
- 核心三步：寫模板（一次）、動態注入內容、瀏覽器截圖輸出。
- 兩套風格：米色暖系適合文章配圖，深色極簡適合數據卡片，一句話切換。
- Skill 全公開：工作流同模板代碼可直接複用，會 HTML 就能自訂新風格。
- 延伸應用：封面圖、週報卡片、工具對比表格，將瀏覽器當免費圖像生成器。
點解唔用生圖 API？
嬌姐需要大量生成信息圖，但生圖 API 有幾個明顯嘅問題：版式不可控、文字渲染差、費用累積快、風格難統一。而 HTML 天生就係為結構化內容同精確排版設計，顏色、字體、間距全部像素級可控，中文渲染完美，仲完全免費。
核心原理：三步出圖
整個方案好簡單，只需三步：
- 1 寫 HTML 模板：用 HTML + CSS 固定視覺風格，留出內容佔位符。一次做好，永久複用。
- 2 填入動態內容：Hermes 將實際文字、數據注入模板，生成完整 HTML 文件。
- 3 瀏覽器截圖：用 browser_navigate 打開檔案，再用 browser_vision 截圖保存高清 PNG。成個過程 5 秒內完成。
三個真實場景，全程零 API
以下三張圖都係用呢套方案生成，冇用任何生圖 API：
- 教程步驟信息圖：公眾號文章開頭用米色暖系模板，列出重點步驟。
- 數據/結論卡片：深色極簡模板，大字號數據加熒光綠高亮，適合朋友圈傳播。
- 微信羣精華信息圖：自動提煉羣討論，填入模板截圖，30秒搞掂。
呢套方案仲有個隱藏優勢：風格切換成本極低。Skill 內置咗米色暖系同深色極簡兩套模板，一句話就可以切換。同一份內容兩種風格，你可以按需要隨時轉。
Skill 公開，直接攞去用
嬌姐將呢套方案封裝成 Hermes Skill，名為 html-screenshot-image-gen，全部代碼公開。核心工作流只有三步：
# Step 1: 把內容填入 HTML 模板，保存到臨時文件
write_file("/tmp/img-output/card.html", html_content)
# Step 2: 用瀏覽器渲染 HTML
browser_navigate("file:///tmp/img-output/card.html")
# Step 3: 截圖保存
result = browser_vision("截圖整個頁面，展示完整視覺效果")
terminal(f"cp {result['screenshot_path']} /tmp/img-output/output.png")另外仲有兩套風格模板同觸發詞對照表，可以直接套用：
- 「做成信息圖」→ 米色暖系模板，適合步驟列表可視化
- 「做成數據卡片」→ 深色極簡模板，適合數字高亮
- 「生成封面」→ 自定義尺寸封面模板
- 「做一張對比圖」→ Grid 雙列模板
安裝方式：將 Skill 檔案放入 Hermes skills 目錄，重啓即可。如果你未用過 Skill 系統，可以先睇嬌姐之前嘅《Hermes Skill 配置教程》。呢個思路仲可以延伸到 公眾號封面圖、週報卡片、工具對比表格，凡係用 HTML + CSS 描述得到嘅視覺內容都得。
先關注後睇文，嬌姐驚你走咗
文末嬌姐整理咗openclaw所有文章連結
想了解嬌姐就㩒文末連結
我嘅生圖 API 賬單係零。
唔係因為我唔生圖——我每週都幫公眾號文章配圖、幫微信羣做資訊圖、幫數據報告出可視化卡片。而係因為我揾到一個完全唔使調用任何生圖 API 嘅方案：HTML 模板 + 瀏覽器截圖。
再進一步，我將呢套流程封裝成咗 Hermes Skill，家陣只需要講一句「做成資訊圖」，剩低嘅全部自動完成。呢篇文章將整個思路同 Skill 代碼全部公開，你可以直接攞去用。
點解唔用生圖 API？
先講清楚我嘅需求：我要嘅唔係「AI 畫一張風景圖」，而係有固定結構嘅資訊圖——標題、列表、數據、標籤，每次內容唔同但版式統一。
呢類需求用 Midjourney、DALL-E 呢啲生圖 API 嚟做，有幾個明顯嘅問題：
- 版式不可控
：你描述「左邊放標題右邊放列表」，AI 唔一定聽話，每次出圖都要重複改 prompt - 文字渲染差
：生圖模型對中文文字嘅渲染一直都係老大難，錯字、亂碼、字體樣衰係常態 - 費用累積快
：每次調用都要消耗 token 或圖片額度，批量生圖時賬單好難睇 - 風格難統一
：同一系列嘅圖，每次出來都有細微差異，品牌感好弱
而 HTML 天生就係為「結構化內容 + 精確排版」而設計嘅。顏色、字體、間距、對齊，全部像素級可控，中文渲染完美，仲完全免費。
核心原理：三步出圖
成個方案嘅原理非常簡單，三步搞掂：
第一步：寫 HTML 模板
用 HTML + CSS 描述你想要嘅視覺效果。顏色、佈局、字體、間距全部寫死喺模板度，只留出「內容佔位符」。呢一步只需要做一次，之後每次生圖都重用同一套模板。
例如我嘅資訊圖模板，固定咗：米色背景、棕褐色強調色、1080px 闊、圓角卡片、帶編號嘅步驟列表。每次只需要將標題同列表內容換咗佢。
第二步：填入動態內容
Hermes 將實際內容（文字、數據、列表）注入模板，生成一個完整嘅 HTML 檔案，保存到本地。呢一步由 Agent 自動完成，唔需要手動操作。
第三步：瀏覽器截圖
用 browser_navigate 打開 HTML 檔案，再用 browser_vision 截圖保存。成個過程 5 秒內完成，輸出係高清 PNG，可以直接用嚟放公眾號、朋友圈、微信羣。
注意：browser_navigate 同 browser_vision 係 Hermes 內置嘅瀏覽器工具，唔需要額外安裝任何依賴。
三個真實場景，全程零 API
下面呢三張圖，都係我用呢套方案實際生成嘅，冇調用任何生圖 API。
場景一：教學步驟資訊圖
寫公眾號教學時，我會叫 Hermes 將核心步驟提煉成一張資訊圖，放喺文章開頭做「全文導讀」。米色背景、棕褐色編號、圓角卡片，風格固定，每次只換內容。
場景二：數據/結論卡片
當文章裏面有幾個關鍵數字或結論，我會用深色極簡模板做一張「金句卡片」。大字號數據 + 螢光綠高亮，適合截圖發朋友圈或微信羣，傳播效果比純文字好好多。
場景三：微信羣精華資訊圖
呢個係我最常用嘅場景。每日將微信羣裏面嘅精華討論餵俾 Hermes，佢自動提煉分類，填入模板，截圖保存。成個流程唔使 30 秒，出嚟嘅圖可以直接發返俾羣組或存檔。
一個 Skill，N 種風格
呢套方案仲有一個隱藏優勢：風格切換成本極低。
我喺 Skill 裏面內置咗兩套風格模板：
- 米色暖系
：適合公眾號文章配圖、教學步驟圖，温和易讀 - 深色極簡
：適合數據卡片、金句圖、朋友圈傳播，視覺衝擊力強
講「用暖色風格做資訊圖」或「用深色風格做數據卡片」，Hermes 自動揀對應模板。同一份內容，兩種風格，一句話切換。
你亦都可以自己加第三套、第四套風格——只需要寫一個新嘅 HTML 模板，喺 Skill 裏面註冊返就得。模板係純 HTML，唔需要任何框架，識寫網頁嘅人 10 分鐘搞得掂一套新風格。
Skill 全部公開，直接拎去用
呢套方案我已經封裝成咗 Hermes Skill，改名做 html-screenshot-image-gen，全部代碼公開，下面直接貼出嚟。
核心工作流
Skill 嘅執行邏輯只有三步：
# Step 1: 把內容填入 HTML 模板，保存到臨時文件
write_file("/tmp/img-output/card.html", html_content)
# Step 2: 用瀏覽器渲染 HTML
browser_navigate("file:///tmp/img-output/card.html")#
Step 3: 截圖保存result = browser_vision("截圖整個頁面，展示完整視覺效果")
terminal(f"cp {result['screenshot_path']} /tmp/img-output/output.png")
風格模板 A：米色暖系
適合公眾號配圖、教學步驟圖、微信羣精華摘要。配色：背景 #f5f0e8，強調色 #8b6f47（棕褐）。
<!DOCTYPE html><html lang="zh"><head>
<meta charset="UTF-8"><style>body { width: 1080px; background:
#f5f0e8; padding: 60px;
font-family: 'PingFang SC', 'Hiragino Sans GB', sans-serif; }
.card { background: #fffdf8; border-radius: 20px; padding: 50px;
box-shadow: 0 4px 30px rgba(0,0,0,0.06); } .num
{ background: #8b6f47; color: white; border-radius: 50%;
width: 42px; height: 42px; display: flex; align-items:
center; justify-content: center; }
</style></head><body><div class="card">
<!-- 標題、步驟列表、底部品牌 --></div></body></html>
風格模板 B：深色極簡
適合數據卡片、金句圖、朋友圈傳播。配色：背景 #0d0d0d，強調色 #4ade80（螢光綠）。
<!DOCTYPE html><html lang="zh">
<head><meta charset="UTF-8"><style>body { width: 1080px;
background: #0d0d0d; padding: 60px;
font-family: 'PingFang SC', 'Hiragino Sans GB', sans-serif; }
.card { background: #141414; border: 1px solid #2a2a2a;
border-radius: 16px; padding: 56px; } h1
{ color: #ffffff; font-size: 42px; font-weight: 800; }
h1 span { color: #4ade80; }
/* 熒光綠高亮關鍵詞 */.stat { font-size: 44px;
font-weight: 800; color: #4ade80; }
</style></head><body><div class="card">
<!-- 標題、數據統計、標籤 --></div></body></html>
觸發詞 → 場景對照表
安裝方式：將 Skill 檔案放喺你嘅 Hermes skills 目錄下，重啟 Hermes 就得。如果你仲未接觸過 Skill 系統，可以睇返我之前寫嘅嗰篇《Hermes Skill 配置教學》，由零開始搭一套屬於自己嘅 Agent 工作流。
呢個思路可以延伸到邊度？
HTML 截圖呢個思路，本質上係將「瀏覽器渲染引擎」當成一個免費嘅圖像生成器。只要係可以用 HTML + CSS 描述嘅視覺內容，都可以用呢套方案嚟生成。
我目前在用嘅場景仲有：
公眾號文章封面圖（固定尺寸 + 標題文字疊加） 週報/月報可視化卡片（數據 + 圖表 + 總結） 工具對比表格圖（多列對比，截圖後直接發羣）
如果你有其他得意嘅使用場景，歡迎留言話俾我知，話唔埋下一篇就寫你嘅案例。
關於 openclaw、hermes 資料包同系列文章
配套資料包
私信 kekohu 獲取，內容不定期持續更新。
注意：付費社羣包含資料包全部內容，唔使重複購買。
hermes 系列文章
持續更新，建議每篇認真睇
【唔推薦用官方指令】Windows 環境下安裝 Hermes 及遷移 Openclaw 嘅實戰分享
清華大學 MAIC 團隊，GitHub 上已經有 16.5k Star 嘅一個開源項目
分享我自己用緊嘅 Hermes Obsidian skill
【保姆教學】我用 Obsidian + Hermes 搭咗一個會自己整理嘅知識庫
借鑑劉小排嘅 BuilderPulse ：我用 Hermes 發現值得睇嘅 GitHub 項目
【Hermes 整理】OpenClaw 變現項目地圖：6 大賽道
我將 OpenClaw 嘅 Agent 無縫遷移咗去 Hermes——就靠呢一份 Skill
借鑑 Hermes 優化 OpenClaw：令你嘅 AI 學識記、識覆盤、識巡檢
openclaw 系列文章
openclaw 系列文章
持續更新，建議每篇認真睇
配置與理解
咪俾人呃，OpenClaw 可以 24 小時做嘢——但你首先要做啱呢 6 件事
火咗三個月嘅「龍蝦」，普通人裝咗真係有用咩？
用 OpenClaw 將 AI 失憶醫好：開關、精簡、外掛三步走
多 Agent 與協作
技能與工具
實戰與案例
排錯與安全
關於嬌姐
40+ IT 從業者，前榮耀員工，家陣專注 AI 效率工具研究與實踐。持續輸出 OpenClaw 及 AI 工具嘅乾貨教學同落地案例，間中分享職場思考同生活感悟。
提示：覺得有用，like、關注、轉發，係我持續創作嘅動力。
先關注後閲讀，嬌姐怕失去上進的你
文末嬌姐整理openclaw所有文章連結
想了解嬌姐點擊文末連結
我的生圖 API 賬單是零。
不是因為我不生圖——我每週都在給公眾號文章配圖、給微信羣做信息圖、給數據報告出可視化卡片。而是因為我找到了一個完全不需要調用任何生圖 API 的方案：HTML 模板 + 瀏覽器截圖。
更進一步，我把這套流程封裝成了 Hermes Skill，現在只需要說一句"做成信息圖"，剩下的全自動完成。這篇文章把整個思路和 Skill 代碼全部公開，你可以直接拿去用。
為什麼不用生圖 API？
先說清楚我的需求：我要的不是"AI 畫一張風景圖"，而是有固定結構的信息圖——標題、列表、數據、標籤，每次內容不同但版式統一。
這類需求用 Midjourney、DALL-E 這些生圖 API 來做，有幾個明顯的問題：
- 版式不可控
：你描述"左邊放標題右邊放列表"，AI 不一定聽話，每次出圖都要反覆調整 prompt - 文字渲染差
：生圖模型對中文文字的渲染一直是老大難，錯字、亂碼、字體醜是常態 - 費用累積快
：每次調用都要消耗 token 或圖片額度，批量生圖時賬單很難看 - 風格難統一
：同一個系列的圖，每次出來都有細微差異，品牌感很弱
而 HTML 天生就是為"結構化內容 + 精確排版"設計的。顏色、字體、間距、對齊，全部像素級可控，中文渲染完美，還完全免費。
核心原理：三步出圖
整個方案的原理非常簡單，三步走：
第一步：寫 HTML 模板
用 HTML + CSS 描述你想要的視覺效果。顏色、佈局、字體、間距全部寫死在模板裏，只留出"內容佔位符"。這一步只需要做一次，之後每次生圖都複用同一套模板。
比如我的信息圖模板，固化了：米色背景、棕褐色強調色、1080px 寬、圓角卡片、帶編號的步驟列表。每次只需要把標題和列表內容換掉。
第二步：填入動態內容
Hermes 把實際內容（文字、數據、列表）注入模板，生成一個完整的 HTML 文件，保存到本地。這一步由 Agent 自動完成，不需要手動操作。
第三步：瀏覽器截圖
用 browser_navigate 打開 HTML 文件，再用 browser_vision 截圖保存。整個過程 5 秒內完成，輸出的是高清 PNG，可以直接用於公眾號、朋友圈、微信羣。
注意：browser_navigate 和 browser_vision 是 Hermes 內置的瀏覽器工具，不需要額外安裝任何依賴。
三個真實場景，全程零 API
下面這三張圖，都是我用這套方案實際生成的，沒有調用任何生圖 API。
場景一：教程步驟信息圖
寫公眾號教程時，我會讓 Hermes 把核心步驟提煉成一張信息圖，放在文章開頭當"全文導讀"。米色背景、棕褐色編號、圓角卡片，風格固定，每次只換內容。
場景二：數據/結論卡片
當文章裏有幾個關鍵數字或結論，我會用深色極簡模板做一張"金句卡片"。大字號數據 + 熒光綠高亮，適合截圖發朋友圈或微信羣，傳播效果比純文字好很多。
場景三：微信羣精華信息圖
這是我最常用的場景。每天把微信羣裏的精華討論餵給 Hermes，它自動提煉分類，填入模板，截圖保存。整個流程不到 30 秒，出來的圖可以直接發回羣裏或存檔。
一個 Skill，N 種風格
這套方案還有一個隱藏優勢：風格切換成本極低。
我在 Skill 裏內置了兩套風格模板：
- 米色暖系
：適合公眾號文章配圖、教程步驟圖，温和易讀 - 深色極簡
：適合數據卡片、金句圖、朋友圈傳播，視覺衝擊力強
說"用暖色風格做信息圖"或"用深色風格做數據卡片"，Hermes 自動選對應模板。同一份內容，兩種風格，一句話切換。
你也可以自己加第三套、第四套風格——只需要寫一個新的 HTML 模板，在 Skill 裏註冊一下就行。模板是純 HTML，不需要任何框架，會寫網頁的人 10 分鐘能搞定一套新風格。
Skill 全部公開，直接拿去用
這套方案我已經封裝成了 Hermes Skill，命名為 html-screenshot-image-gen，全部代碼公開，下面直接貼出來。
核心工作流
Skill 的執行邏輯只有三步：
# Step 1: 把內容填入 HTML 模板，保存到臨時文件
write_file("/tmp/img-output/card.html", html_content)
# Step 2: 用瀏覽器渲染 HTML
browser_navigate("file:///tmp/img-output/card.html")#
Step 3: 截圖保存result = browser_vision("截圖整個頁面，展示完整視覺效果")
terminal(f"cp {result['screenshot_path']} /tmp/img-output/output.png")
風格模板 A：米色暖系
適合公眾號配圖、教程步驟圖、微信羣精華摘要。配色：背景 #f5f0e8，強調色 #8b6f47（棕褐）。
<!DOCTYPE html><html lang="zh"><head>
<meta charset="UTF-8"><style>body { width: 1080px; background:
#f5f0e8; padding: 60px;
font-family: 'PingFang SC', 'Hiragino Sans GB', sans-serif; }
.card { background: #fffdf8; border-radius: 20px; padding: 50px;
box-shadow: 0 4px 30px rgba(0,0,0,0.06); } .num
{ background: #8b6f47; color: white; border-radius: 50%;
width: 42px; height: 42px; display: flex; align-items:
center; justify-content: center; }
</style></head><body><div class="card">
<!-- 標題、步驟列表、底部品牌 --></div></body></html>
風格模板 B：深色極簡
適合數據卡片、金句圖、朋友圈傳播。配色：背景 #0d0d0d，強調色 #4ade80（熒光綠）。
<!DOCTYPE html><html lang="zh">
<head><meta charset="UTF-8"><style>body { width: 1080px;
background: #0d0d0d; padding: 60px;
font-family: 'PingFang SC', 'Hiragino Sans GB', sans-serif; }
.card { background: #141414; border: 1px solid #2a2a2a;
border-radius: 16px; padding: 56px; } h1
{ color: #ffffff; font-size: 42px; font-weight: 800; }
h1 span { color: #4ade80; }
/* 熒光綠高亮關鍵詞 */.stat { font-size: 44px;
font-weight: 800; color: #4ade80; }
</style></head><body><div class="card">
<!-- 標題、數據統計、標籤 --></div></body></html>
觸發詞 → 場景對照表
安裝方式：把 Skill 文件放到你的 Hermes skills 目錄下，重啓 Hermes 即可。如果你還沒接觸過 Skill 系統，可以先看我之前寫的那篇《Hermes Skill 配置教程》，從零開始搭一套屬於自己的 Agent 工作流。
這個思路能延伸到哪裏？
HTML 截圖這個思路，本質上是把"瀏覽器渲染引擎"當成了一個免費的圖像生成器。只要是能用 HTML + CSS 描述的視覺內容，都可以用這套方案來生成。
我目前在用的場景還有：
公眾號文章封面圖（固定尺寸 + 標題文字疊加） 週報/月報可視化卡片（數據 + 圖表 + 總結） 工具對比表格圖（多列對比，截圖後直接發羣）
如果你有其他有意思的使用場景，歡迎留言告訴我，說不定下一篇就寫你的案例。
關於openclaw、hermes資料包和系列文章
配套資料包
私信 kekohu 獲取，內容不定期持續更新。
注意：付費社羣包含資料包全部內容，無需重複購買。
hermes系列文章
持續更新，建議每篇認真閲讀
【不推薦用官方命令】Windows 環境下安裝Hermes及遷移Openclaw的實操分享
清華大學 MAIC 團隊，GitHub 上已經 16.5k Star的一個開源項目
分享我自己在用的Hermes 的Obsidian skill
【保姆教程】我用 Obsidian +hermes搭了一個會自己整理的知識庫
借鑑劉小排的 BuilderPulse ：我用 Hermes 發現值得看的github項目
【Hermes整理】OpenClaw 變現項目地圖：6 大賽道
我把 OpenClaw 的 Agent 無縫遷移到了 Hermes——就靠這一份 Skill
借鑑 Hermes 優化 OpenClaw：讓你的 AI 學會記、會覆盤、會巡檢
openclaw系列文章
openclaw系列文章
持續更新，建議每篇認真閲讀
配置與理解
別被騙，OpenClaw 可以 24 小時幹活——但你得先做對這 6 件事
火了三個月的"龍蝦"，普通人裝了真的有用嗎？
用 OpenClaw 把 AI 失憶治好：開關、精簡、外掛三步走
多 Agent 與協作
技能與工具
實戰與案例
排錯與安全
關於嬌姐
40+ IT 從業者，前榮耀員工，現專注 AI 效率工具研究與實踐。持續輸出 OpenClaw 及 AI 工具的乾貨教程與落地案例，偶爾分享職場思考與生活感悟。
提示：覺得有用，點贊、關注、轉發，是我持續創作的動力。