第 4 篇／共 11 篇
answer-me-with-html 實測：答案變網頁
answer-me-with-html 是給 Claude Code、Codex、Cursor 用的開源 Skill：AI 只寫 Markdown 草稿，內建 CLI 負責排版和畫圖，產出單一 HTML 網頁。MK 實際 clone 跑範例，整理安裝、用法、限制與適合誰。
本文目錄
你一定遇過：問 AI 一個稍微難一點的問題，它回你一大面文字牆，讀到第三段就想關掉。answer-me-with-html 會把答案改成一頁有圖、有表的網頁，而且模型要寫的字只有手寫 HTML 的大約 1/8。 我把 repo 抓下來，用它附的工具轉了官方範例，也轉了一份我自己寫的繁中草稿，下面直接分享心得。
answer-me-with-html 是什麼？
簡單講，它是一個 Agent Skill，也就是給 AI 代理讀的「工作說明書＋小工具」。作者是 QingYunA，MIT 授權。
圖說：answer-me-with-html 的 GitHub 首頁。來源：QingYunA/answer-me-with-html，截圖於 2026-11-02。
它的想法很聰明，把「回答」拆成兩半：
- AI 只管內容：寫一份精簡的 Markdown 草稿，用特殊區塊標出流程圖、時序圖、表格、時間軸。
- 內建的
am工具管外觀：一支 Node.js 程式，幫你算版面、配色、圖形座標，最後吐出一個 HTML 檔。
圖說：同一題「TCP 三次握手」，左邊是一般回答，右邊是用這個 Skill 的回答。圖片來源：answer-me-with-html 官方 repo docs/images（授權 MIT）。
| 項目 | 數字 | 來源（查證日期 2026-11-02） |
|---|---|---|
| GitHub 星數 | 5,043 | GitHub API |
| 授權 | MIT | LICENSE |
| 版本 | 0.5.10 | package.json |
| 建立／最後推送 | 2026-10-02／2026-11-01 | GitHub API |
為什麼不直接叫 AI 寫 HTML？
我一開始也這樣想。作者的說法是：模型確實寫得出 HTML，但大部分字數都花在 CSS 和 SVG 座標，內容只佔約兩成，所以又慢、箭頭還常常指歪。
圖說：作者在 README 公布的測試（3 個題目各跑 3 次取中位數，Claude Sonnet 5.5）。來源：README「Why not just ask for HTML?」。
模型要寫的 token 從 4,893 降到 612，大約少 8 倍；時間從 31 秒變 12 秒，快 2.6 倍。這是作者自己的測試數字，我沒有重跑這一段。
實測：轉一頁網頁要多久？
我抓下 repo 後，發現 Skill 本體其實很精簡，就在 skills/answer-me-with-html/ 裡：一份 SKILL.md、幾份參考文件，加上一支約 1 MB 的 scripts/am.mjs。
我做了兩個小測試：
- 轉官方範例
examples/tcp.md（簡中的 TCP 三次握手）。 - 轉我自己寫的繁中草稿「Claude Code 安裝 Skill 的三種方式」，裡面有一張流程圖、一個結論框和一張比較表。
圖說：我實際執行 am render 的輸出。來源：MK 實測，2026-11-02。
結果蠻驚喜的：
- 兩次都是 0.09 秒就轉好，連 Node.js 開機時間都算進去了，README 說的「約 50 毫秒」很合理。
- 我的草稿只有 902 位元組，產出的網頁是 142 KB，樣式、圖形、按鈕全部塞在同一個檔案。
- 我搜了一下檔案裡的外部連結，只有 2 個指回專案 GitHub，沒有外連字型或 CDN，斷網也打得開。
- 繁體中文直接可用，寫作檢查回報 0 個警告。
圖說：examples/tcp.md 轉出來的頁面長這樣，就是我上面跑的同一份草稿。圖片來源：answer-me-with-html 官方 repo docs/images/tcp.png（授權 MIT）。
要說清楚的是：我測的是「草稿轉網頁」這一段。實際用的時候，前面還要等 AI 寫草稿，那段時間要看你用哪個模型。
怎麼安裝？
只需要 Node.js 20 以上，不用跑 npm install。
圖說：README 的安裝說明。來源：README「Install」。
我推薦在 Claude Code 裡用外掛市集，兩行搞定：
/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html
想一次裝到 Codex、Cursor 等多個代理，就在終端機打：
npx skills add QingYunA/answer-me-with-html
習慣先看內容再裝的人，也可以手動複製資料夾：
git clone --depth 1 https://github.com/QingYunA/answer-me-with-html.git /tmp/answer-me-with-html
cp -R /tmp/answer-me-with-html/skills/answer-me-with-html ~/.claude/skills/answer-me-with-html
怎麼用？照平常問就好
裝好之後不用特別下指令，照平常方式問，AI 會自己判斷值不值得做成網頁。SKILL.md 寫的條件是：3 個以上互相牽連的概念、有流程或狀態變化、3 個面向以上的比較、或是有層級和時間演變。
> 解釋 TCP 三次握手
> 把這個 repo 的模組關係畫出來
> 快取要用 Redis 還是 Memcached？
圖說：不同問題會拿到不同版型，一句話能答完的就不做網頁。來源：README「What you ask, what you get」。
還有兩個我覺得很好玩的進階用法：
- 常駐模式：在
CLAUDE.md加一條規則，之後每個結論都附一頁小網頁，而且不會自動彈出來干擾你。 - 講解影片：說「做一支 3b1b 風格的 TCP 握手影片」，它會做出邊講邊畫的播放頁，加
--mp4可以輸出影片檔（要有 ffmpeg）。
圖說：講解影片模式的畫面範例。圖片來源：answer-me-with-html 官方 repo docs/images/video-zh.png（授權 MIT）。
用之前要知道的事
- 省的主要是時間，不是帳單：作者自己寫了，帳單大約只降 15%，因為每一輪還是要讀系統提示和整段對話。
- 網頁會越積越多：預設存在
~/.answer-me-with-html/pages/，記得偶爾用am clean清一下。 - 會檢查新版本：一天最多連 GitHub 檢查一次，不會送出你的資料；不想要可以用
/answer-me-with-html:config update_check off關掉。 - 寫作檢查偏英文：規則改編自航太維修手冊用的 ASD-STE100，中文只會抓錯字和模糊用詞。
- 匯出 PDF／PNG 要有 Chrome：
am export會用到瀏覽器。
MK 觀點：適合誰、不適合誰
適合：
- 常請 AI 解釋架構、流程、比較方案的工程師或 PM，網頁版真的好讀太多。
- 要把 AI 的答案轉給同事看的人，一個 HTML 檔丟過去就能開。
- 想做教學內容的人，講解影片可以當第一版草稿。
不適合：
- 平常只問一句話問題的人，這個 Skill 多半不會出手。
- 公司電腦不能裝 Node.js 的人。
- 只想省 API 費用的人，省最多的是等待時間。
我自己的感覺：這是我目前看過「裝完就有感、幾乎不用設定」的 Skill 之一，推薦先裝起來試一週。
常見問題
Q：不會寫程式也能用嗎？ 可以。裝好後照平常講話問問題就好，網頁會自動產生。唯一門檻是電腦要有 Node.js 20 以上。
Q：支援繁體中文嗎？ 支援。我用繁中草稿轉過，字型和按鈕都正常；官方文件也列出簡體、繁體、英文、日文各有自己的字型設定。
Q：產生的網頁會傳到網路上嗎？ 不會。網頁存在你自己的電腦，是不用連網就能開的單一檔案；工具只會定期檢查有沒有新版本。
Q：ChatGPT 網頁版能用嗎？ 不行。它需要能執行指令的代理，像 Claude Code、Codex、Cursor、OpenCode。
延伸閱讀
追蹤 MK，掌握最新 AI 工具應用
每週分享 GitHub 飆星實測、AI 工具教學與提示詞，短影片版都在社群。