AI 回答複雜問題時，常常給你一面文字牆。叫它畫成 HTML 呢？現在的模型寫得出像樣的頁面，但你要付的代價是幾千個 output token，外加坐在那裡等。最近看到一個開源專案，換了個做法：模型只寫重點，排版畫圖全部交給程式。我實際裝起來試了一次，效果不錯，值得寫一篇介紹。
直接要 HTML，貴在哪裡
一個能看的頁面，模型要親手打出幾百行 CSS、每個外層 div、每個 SVG 座標。output token 是最貴的那種，也是你要坐著等的時間。
圖更慘。座標用猜的，箭頭常常指到空氣裡，label 被切掉一半。這不是模型笨，是它本來就不該做排版這種確定性工作。
它的做法：模型寫內容，程式排版面
answer-me-with-html 是一個 agent skill，作者是 QingYunA，MIT 開源，十月初才剛發布。裝好之後，你照常用說話問問題就好：
- 解釋 TCP 三次握手
- 這個 repo 的模組是怎麼組織的
- Redis 還是 Memcached，該選哪個
agent 判斷這個問題值得做成頁面時，只寫一份很短的 Markdown 草稿，丟給隨附的 CLI，大約 50 毫秒後頁面就出來了。版面、配色、圖表座標全部由程式算，不靠模型猜。
它分寸感抓得不錯。一句話能答完的問題，它不會多事做頁面。只有相關概念多、流程有多步、要比較好幾個選項時才出手。你也可以直接說，用 HTML 解釋。
數字：快很多，但沒有比較便宜
作者用同一個模型、同樣三個題目各跑三次取中位數，模型是 Claude Sonnet 5.5，重現腳本放在 repo 的 bench 目錄：
| 直接要 HTML | 用這個 skill | |
|---|---|---|
| 輸出 token | 6,873 | 923 |
| 時間 | 46 秒 | 13 秒 |
| 單次成本 | 0.22 美元 | 0.26 美元 |
token 少 7.4 倍，時間快 3.6 倍，但帳單差不多。原因作者也講得很白：skill 多了兩個 turn，每個 turn 都要重讀對話上下文，省下的 token 又吐回去了。省的是等待，不是錢。這點我蠻欣賞的，有實測才敢講，沒有拿 7.4 倍當標題黨。
實測：裝進 Hermes，一次就跑起來
我是手動裝的。把 repo 裡 skills 目錄下的 answer-me-with-html 整個資料夾，拷進 Hermes 的 skill 目錄，hermes skills list 馬上認到，需要的只有 Node.js 20 以上，不用 npm install。Claude Code 的使用者可以用 plugin 方式載入，其他 harness 把 repo 網址丟給 agent，它會自己裝。
拿它自帶的 TCP 範例試 render，一次成功。sequence 圖、狀態圖、旗標表，四個 panel 全出來，寫作檢查零警告。草稿不到 1KB，要模型手寫同樣的頁面得花七倍 token，這個差距是真實的。
除了頁面，還有影片跟寫作檢查
這個專案還有兩個我覺得有意思的設計。
第一是解說影片。跟 agent 說做一支 3Blue1Brown 風格的影片，它寫同樣的草稿再加每段旁白，CLI 就轉出一頁會動的播放器：講到第幾句，圖就畫到第幾步，旁白提到哪個節點，鏡頭就推過去。旁白走 ElevenLabs 或系統語音，也能接自己的 TTS。
第二是寫作檢查。每份草稿 render 前都會過一輪源自 ASD-STE100 的規則：句子太長、贅字、被動語態、中文一句三個以上的「的」，都會被抓出來。預設只警告，也可以調成嚴格模式直接拒絕輸出。叫 AI 寫東西的人都懂，版面能算，爛文筆算不出來，這關加得對。
另外有一個選配的 always-on 模式。開啟之後，每次回覆只要有結論，不管多短，都會附一張兩到四格的小頁面。不想要就關掉，這種預設關閉、要的人自己開的設計是對的。
結語
這個工具的定位很清楚：它不幫你省錢，幫你省等待跟版面災難。模型做它擅長的事，寫內容，排版這種確定性的事交給程式。這句話說起來簡單，但市面上大部分 agent 工具都還在叫模型手刻 HTML。
專案才發布幾天，長期維護跟穩定性還要觀察。但 MIT 開源、零依賴、輸出是單一離線 HTML，試用的成本幾乎是零，值得玩玩看。