Answer me with HTML
EN GitHub156

一個 Agent Skill · 支援 Claude Code、Codex、Cursor、OpenCode、Pi

提一個難題，
收到一頁圖解，
而不是一堵文字牆。

Agent 只寫一份簡短的 Markdown 稿件，skill 自帶的 CLI 把它排成一頁帶圖表、表格和版式的 HTML。模型要寫的 token，只有手寫這頁 HTML 的約 1/8。

線上試一試 安裝
項目
Answer me with HTML
版本
0.5.11
許可
MIT
輸出
約 1/8 token
產物
1 個 .html，離線可看
適用於
Claude Code · Codex · Cursor · OpenCode · Pi · DeepSeek Harness
01 draft.md 02 am render 03 page.html
稿件來自 examples/tcp.md，頁面由真實的渲染器在你的瀏覽器裡生成。 編輯這份稿件 →

一堵文字牆，還是一頁圖

同一個問題，同一個模型。沒有 skill 時，你得一行一行往下讀，在腦子裡自己拼出全貌；用了 skill，時序圖、狀態圖、對照表和提醒，一眼就能看全。

FIG. 1"講講 TCP 三次握手"，兩種回答。

像平時一樣提問就行

你說你會得到
"講講 TCP 三次握手"時序圖、狀態遷移圖、標誌位對照表
"這個倉庫的模組是怎麼組織的"目錄結構樹，加一張模組呼叫關係圖
"Redis 和 Memcached 怎麼選"多維對比表，用 ✓ ✗ 標出差異，最後給結論
"這段文案哪裡寫得不好"逐句標註，標出問題詞和改法
"Kubernetes 是怎麼發展起來的"時間線，關鍵節點高亮
"給快取改造做個方案"直接引用檔案裡的真實程式碼，待定的問題做成選項，在頁面上就能回答
"ls 怎麼看隱藏檔案"不出頁面。一句話能說清的問題照常回答

模型只寫內容，畫圖交給 CLI

讓模型直接寫 HTML，每一行 CSS、每一層 div、每一個 SVG 座標都得它一個字一個字打出來，而你等的正是這些輸出 token。這裡模型只寫內容，剩下的都由 CLI 完成。

Agent 只寫內容 draft.md 約 600 token am CLI 隨 skill 封裝 · 不用 npm install parse面板與程式碼塊 STE 檢查寫作規則 layoutdagre、標記寬度 themeCSS、亮暗兩色 page.html 單檔案 · 離線可看 Agent只寫內容 draft.md約 600 token am CLI parse面板與程式碼塊 STE 檢查寫作規則 layoutdagre、標記寬度 themeCSS、亮暗兩色 page.html 單檔案 · 離線可看
FIG. 2渲染流程。從稿件到頁面，大約 50 毫秒。
輸入

模型寫的

draft.mdtcp.md 的核心部分
---
title: TCP 三次握手與四次揮手
---
## A 三次握手 {span=2}
```sequence num
客戶端 -> 伺服器: SYN, seq=x
伺服器 -> 客戶端: SYN+ACK, seq=y, ack=x+1
客戶端 -> 伺服器: ACK, ack=y+1
note 客戶端, 伺服器: ESTABLISHED
```

## C 狀態遷移 {span=2}
```flow LR
(CLOSED) -> LISTEN: 被動打開
LISTEN -> SYN_RCVD: 收 SYN / 發 SYN+ACK
SYN_RCVD -> *ESTABLISHED: 收 ACK
```
輸出

CLI 替它寫的

稿件 1.8 KB
頁面 84.4 KB
  • CSS 33.3 KB
  • 頁面指令碼 34.4 KB
  • SVG 8.5 KB
  • HTML 8.1 KB
46×
頁面比稿件多出的體量，一個字都不用模型來寫
361
個 SVG 座標，由佈局程式碼算出，不靠模型猜
282
條 CSS 規則，覆蓋主題的亮色和暗色
0
個網路請求。打開頁面不連 CDN，也不載入外部字體

資料來自完整的 examples/tcp.md（63 行）。

線上試用

這裡跑的就是真實的渲染器，只是封裝成了瀏覽器版。改稿件，頁面跟著你的輸入實時更新。所有內容都留在你本機。

tcp.md

按 Tab 插入兩個空格。先按 Esc 再按 Tab，可以離開編輯器。

page.html正在載入渲染器…
渲染
—
大小
—
面板
—
元件
—
STE
—

    帶 src= 的程式碼塊會引用真實檔案，只能在 CLI 裡用；本機圖片同理。

    元件

    Agent 會按資訊的形狀挑元件。每張卡片都是用幾行稿件實時渲染出來的，點一下就能在上面的編輯器裡打開。

    三套主題，各有亮暗

    同一份稿件，換一套主題實時重新渲染。預設由 CLI 按內容挑：長文用 paper，有圖表用 blueprint。你也可以加自己的主題。

    每一頁的右上角也都能隨時切換主題和明暗。

    瀏覽主題庫 →

    blueprint · light

    講解影片

    Karpathy 說的"理解 LLM 輸出"階梯，最後一級就是講解影片。直接說"給 TCP 握手做個 3b1b 風格的影片"就行。下面就是一個真實的 am video 播放頁。

    1. 1
      逐步建構

      第 N 句旁白播出時，圖上出現第 N 步，箭頭一筆一筆畫出來。

    2. 2
      鏡頭聚焦

      旁白裡寫 [Server]，鏡頭就推向這個節點並高亮它。

    3. 3
      跨場景變形

      下一個場景裡同名的節點，會平滑移到新位置，而不是硬切。

    4. 4
      配音

      設定了密鑰就用 ElevenLabs，否則用系統語音，都沒有就只出字幕。加 --mp4 另存 1080p 影片。

    835字元

    範例影片的整份稿件只有 835 個字元，也就是幾百個輸出 token。

    只有你要影片時 Agent 才會做。完整語法：am help video。

    video-tcp.md一個場景
    ## 兩端都在等待
```sequence
Client -> Server: SYN
Server -> Client: SYN-ACK
```
> 先是客戶端開口，發一個 SYN，意思是"我想跟你建個連線"。
> [Server] 聽到了，回一個 SYN-ACK："收到，我這邊也沒問題。"

    基準測試

    同一個模型、同樣的問題，兩種方式各做一遍：一種讓模型直接寫 HTML，一種用 skill。提速在哪種環境裡都成立，花費則取決於你的環境。

    頁面 · 普通的 Claude Code 環境

    模型要寫的 token
    4,893
    612
    8.0×更少
    耗時
    31 s
    12 s
    2.6×更快
    單次花費
    $0.091
    $0.077
    15%更便宜

    講解影片 · 手寫播放頁 vs am video

    輸出 token
    27,839
    1,566
    17.8×更少
    耗時
    202 s
    17 s
    11.8×更快
    環境
    普通 Claude Code：只有專案設定，沒有 MCP 服務
    模型
    Claude Sonnet 5.5
    頁面
    3 個題目 × 每題 3 次。token 按儲存下來的頁面計數，耗時和花費取中位數
    影片
    1 個題目、5 次執行（手寫 3 次，am video 2 次），取中位數。只能看量級，不是精確倍數

    STE 受控寫作檢查

    ASD-STE100 是一套受控英語，最早用來寫飛機維修手冊，規定很具體：句子要短，一個詞只表達一個意思，步驟用祈使句。CLI 把其中能用機器檢查的部分做成了中英雙語規則，每次渲染都會檢查。拿你自己的文字試試。

    • 句長步驟不超過 35 字，描述不超過 45 字，每段最多 6 句
    • 用詞"進行優化"直接寫"優化"；登陸 → 登入
    • 句式一句裡三個以上"的"、"賦能""閉環"這類套話
    檢查結果

      安裝

      本機需要 Node.js 20 或更高版本。不需要 npm install，CLI 已經封裝在 skill 裡了。

      把下面這段話粘貼給你的 Agent，Claude Code、Codex、Cursor、OpenCode 都可以：

      幫我安裝 Answer me with HTML：讀 https://raw.githubusercontent.com/doggy8088/answer-me-with-html/main/INSTALL.md，照著做。

      INSTALL.md 是寫給 Agent 看的：已有安裝會保留，全程不向你提問，最後用 TCP 頁面驗證一遍，給你一份彙報。

      依賴
      Node.js 20+
      npm install
      不需要
      聯網
      每天查一次新版本，可關閉
      組態
      無需組態