# answer-me-with-html 實測：答案變網頁
> answer-me-with-html 是給 Claude Code、Codex、Cursor 用的開源 Skill：AI 只寫 Markdown 草稿，內建 CLI 負責排版和畫圖，產出單一 HTML 網頁。MK 實際 clone 跑範例，整理安裝、用法、限制與適合誰。
- 作者：Michael Kuo（https://mk-ai-notes.pages.dev/about/）
- 發布日期：2026-11-02（2026-11-02T20:04:00+08:00）
- 原文網址：https://mk-ai-notes.pages.dev/posts/skill-answer-me-with-html/
- 分類：GitHub 飆星與 Skill 實測（https://mk-ai-notes.pages.dev/category/github/）
- 系列：MK 熱門 Skill 實測 第 4 篇／共 11 篇（https://mk-ai-notes.pages.dev/series/mk-skill-lab/）
- 標籤：Claude Code、Skill、Codex、Cursor、HTML、視覺化
- 閱讀時間：約 9 分鐘（約 1866 字）
- 參考來源：https://github.com/QingYunA/answer-me-with-html
---
你一定遇過：問 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](https://github.com/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](https://api.github.com/repos/QingYunA/answer-me-with-html) |
| 授權 | MIT | [LICENSE](https://github.com/QingYunA/answer-me-with-html/blob/main/LICENSE) |
| 版本 | 0.5.10 | [package.json](https://github.com/QingYunA/answer-me-with-html/blob/main/package.json) |
| 建立／最後推送 | 2026-10-02／2026-11-01 | [GitHub API](https://api.github.com/repos/QingYunA/answer-me-with-html) |
## 為什麼不直接叫 AI 寫 HTML？
我一開始也這樣想。作者的說法是：模型確實寫得出 HTML，但大部分字數都花在 CSS 和 SVG 座標，內容只佔約兩成，所以又慢、箭頭還常常指歪。
圖說：作者在 README 公布的測試（3 個題目各跑 3 次取中位數，Claude Sonnet 5.5）。來源：[README「Why not just ask for HTML?」](https://github.com/QingYunA/answer-me-with-html#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`。
我做了兩個小測試：
1. 轉官方範例 `examples/tcp.md`（簡中的 TCP 三次握手）。
2. 轉我自己寫的繁中草稿「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」](https://github.com/QingYunA/answer-me-with-html#install)。
我推薦在 Claude Code 裡用外掛市集，兩行搞定：
```text
/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html
```
想一次裝到 Codex、Cursor 等多個代理，就在終端機打：
```bash
npx skills add QingYunA/answer-me-with-html
```
習慣先看內容再裝的人，也可以手動複製資料夾：
```bash
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 個面向以上的比較、或是有層級和時間演變。
```text
> 解釋 TCP 三次握手
> 把這個 repo 的模組關係畫出來
> 快取要用 Redis 還是 Memcached？
```
圖說：不同問題會拿到不同版型，一句話能答完的就不做網頁。來源：[README「What you ask, what you get」](https://github.com/QingYunA/answer-me-with-html#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。
## 延伸閱讀
- 同系列：[teardown 實測：把機器做成可拆解 3D 模擬](https://mk-ai-notes.pages.dev/posts/skill-teardown/)
- 同系列：[founder-skill 實測：AI 幫你審創業點子](https://mk-ai-notes.pages.dev/posts/skill-founder-skill/)
- 同系列：[replica-skill 實測](https://mk-ai-notes.pages.dev/posts/skill-replica-skill/)
- 提示寫法基礎：[為什麼對 AI 說「加油」，答案會變好？](https://mk-ai-notes.pages.dev/posts/ep01-prompting/)
引用本文請附原文網址：https://mk-ai-notes.pages.dev/posts/skill-answer-me-with-html/（作者：Michael Kuo）