【2026 最新】Anatomy 教學：用 Claude Code 做可改數字的 Token Bucket 互動圖

你想解釋「網站為什麼突然擋住請求」，畫完一個桶子、幾顆小球，觀眾卻還是看不懂。這篇 Anatomy 教學，帶你用 Claude Code 把 Token Bucket（令牌桶限流）變成可以改數字、按按鈕、對答案的互動作品。

這篇寫給第一次接觸互動圖、願意照著終端機指令練習的讀者。你不必先懂立體繪圖；我們先開官方範例，再把需求寫成清楚的規則，最後用一段有標準答案的事件紀錄驗收，完成可修改的 HTML 與 SVG 交付。

本文於 2026 年 10 月 23 日核對官方文件，固定 Anatomy 提交 1482e84。本站已建置官方最小範例並核對本文數值模型；後面的繁中創作提示是可照做的工作單，並非本站以 Claude Code 完整生成 Token Bucket 作品的成績。

先說結論：互動原理圖＝同一份規則＋可操作畫面＋已知答案

互動原理圖＝同一份規則＋可操作畫面＋已知答案。 把它想成透明的代幣販賣機：機器定時補進通行代幣；來一個請求，就看能不能拿走一枚。你改的是規則，桶內數量、指針和接受結果都要跟著同一份資料改變。

這裡的 token 是「通行額度」，與語言模型計費用的文字 token 是兩個概念。Anatomy 負責幫 AI 組織繪圖工作；Token Bucket 是這次要教會觀眾的原理。先把這兩件事分清楚，就不容易把裝好工具當成學會概念。

一、Anatomy 教學先拆五個零件：畫面為什麼會動？

Anatomy 的工作規則要求先定真實行為，再設計能表達它的物件。它適合把抽象原理做成有機構的插圖：例如補充額度是一個供料輪，消耗額度是一道閘門。圖上的細節要有功能，觀眾才能看出因果。

• ①「食譜」：SKILL.md 告訴 Claude 按什麼順序研究、構圖與檢查；Skill 是工作說明書，可以先讀 Agent Skill 入門。
• ②「積木盒」：繪圖 kit 提供立體板件、圓柱和投影等零件。SVG 是用路徑描述的向量圖，放大後仍能編輯形狀。
• ③「帳本」：一份 model 記住容量、速率、時間和餘額，像販賣機內真正記帳的晶片。
• ④「面板」：按鈕與輸入欄改變帳本，畫面和讀值讀取帳本；不要各自在畫面角落另算一遍。
• ⑤「驗收單」：把特定時間送出的請求寫下來，預先算出結果，再檢查作品。

適用情境包括課堂教材、產品文件與技術分享。若你要的是節點關係與架構整理，AI 圖表設計教學更接近需求；這次多做的一步，是讓觀眾按下控制後，看見狀態真的改變。

二、固定版本開啟：先讓官方最小範例出現在瀏覽器

第一步「備好工作桌」：確認工具與空資料夾

準備 Git、Node.js 20.10 以上、Chrome 或 Chromium，以及已能登入的 Claude Code。這是 Anatomy 建置與瀏覽器檢查所需的環境；先在終端機執行 git --version、node --version、claude --version，都應印出版本。Claude Code 尚未安裝或登入時，先依 官方快速入門完成。

以下以 macOS／Linux 的終端機為例。先依序執行 mkdir anatomy-lab、cd anatomy-lab、mkdir -p .claude/skills。這是一個新練習目錄；不要把憑證、客戶文件或正式網站的環境設定放進來。

第二步「把食譜釘在牆上」：取回並固定同一份原始碼

執行 git clone https://github.com/wheresryan22/anatomy.git .claude/skills/anatomy，接著執行 git -C .claude/skills/anatomy checkout 1482e8469b0a9e0d8cc18ea2740a01423d29ae80。最後用 git -C .claude/skills/anatomy rev-parse HEAD 核對完整雜湊與上面相同。遇到目錄已存在，先換一個新練習目錄，保留原有內容。

這條路沿用官方的專案內 Git 安裝方式，額外固定提交。它固定的是繪圖 kit 與規則；模型回覆仍會受模型版本和提示影響。先看 官方安裝說明，也讀一下取回的 SKILL.md 和建置檔，再執行程式。

第三步「先開成品」：最小範例過關再創作

仍在 anatomy-lab 執行 node .claude/skills/anatomy/examples/dial-indicator/build.mjs --light。它會寫出 .claude/skills/anatomy/examples/dial-indicator/dial-indicator-light.html；用瀏覽器開啟這個檔案，應看見量表、滑台與三塊量塊。

把游標移到圖上，或先按 Tab 讓圖取得焦點，再按方向鍵，觀察滑台與讀值。這個範例說明「一個控制改變物件，再改變讀值」的基本路線。若是空白頁，先看終端機是否真的寫出檔案，以及瀏覽器開的是剛才那一份路徑。

回到 anatomy-lab 執行 claude。依 Claude Code Skills 文件，專案技能放在 .claude/skills/名稱/SKILL.md。輸入 /anatomy 檢查是否可呼叫；若未載入，關閉這次工作階段，在同一個目錄重新啟動後再確認。

三、Anatomy 教學實作：先寫 Token Bucket 的正確答案

把令牌桶想成最多放五枚代幣的盒子。每秒補兩枚，每個請求消耗一枚；有一枚以上才放行，否則拒絕。容量決定「能存多少、可突然用多少」，補充速率決定「用掉之後多快恢復」。兩個旋鈕解決不同問題。

這符合 Go 官方 rate 套件的令牌桶說明所描述的滿桶起始、持續補充與突發容量概念。本篇另外選定「不足立即拒絕」的教學政策；不要把這張圖的政策擴充成所有限流器都相同。

①「先補再扣」：把時間寫進規則

設定容量 C=5、補充速率 r=2 枚／秒、目前餘額 T。經過 Δt 秒後，先算 T = min(C, T + r × Δt)；請求到達時，若 T ≥ 1 就接受並扣一，否則拒絕且保留餘額。先補充，再處理同一時間的請求。

這個版本保留小數餘額：0.25 秒可以補 0.5 枚，但 0.5 枚仍不夠一個請求。畫面可以用液位表示小數，也可以畫完整代幣加一段進度；讀值必須保留它，不能因為小球畫不出半顆就先四捨五入。

②「一段紀錄走到底」：把突發、拒絕與恢復全部考到

• t=0，滿桶：餘額五枚，連續送五個請求，全部接受，剩零枚。這五次之間不推進模擬時間。
• 同樣 t=0，再送一個：仍是零枚，拒絕；不能因為按了按鈕就多送一枚。
• 推進到 t=0.25：補成 0.5 枚，此時再送一個，拒絕，仍剩 0.5 枚。
• 推進到 t=0.5：再補 0.5 枚，合計一枚；送一個，接受，剩零枚。
• 推進到 t=10：空桶經過 9.5 秒，原本可補 19 枚，但上限五枚，最後顯示五枚。

本站以 Node.js 執行相同規則，核對了上述事件與容量、零速率等邊界。這證明這份驗收答案可重算；你自己生成的圖，仍要跑過同一串事件才能判定通過。這也正是 AI 評估入門的做法：先知道要考什麼，再看答案是否符合。

③「給 AI 一張完整工作單」：貼上這段繁中需求

在 Claude Code 貼上以下需求。第一段使用官方列出的 Token Bucket 入門提示；後面補上本篇的數值、交付與驗收要求：

/anatomy explain how a token bucket rate limiter works, interactive

請做成一個 Figure 等級、淺色、繁體中文的互動教學作品，使用 SVG，先不要加 WebGL 或 3D。主體是一個看得懂補充和消耗關係的機械裝置；控制與讀值放在圖外。

模型初始滿桶，容量 C=5，補充 r=2 枚／秒，每次請求消耗 1 枚。保留小數，先依經過時間補充，取 min(C, T+r×Δt)，再判斷是否足夠；不足立即拒絕，且不扣餘額。圖形、讀值與事件紀錄共用同一份 model。

提供容量與補充速率輸入欄、送出一個請求、前進 0.25 秒、重設、播放／暫停。預設暫停，單步時間由按鈕推進；播放時才依時間補充。改參數後重設為滿桶、t=0，清空紀錄，避免混用前後設定。

列出剛才五段已知答案，先讓純模型測試通過，再畫完整圖。支援鍵盤與可見焦點；減少動畫偏好開啟時關閉自動播放與裝飾移動，保留單步操作和文字結果。

交付 token-bucket.html、model.mjs、build.mjs、靜態 token-bucket.svg 與操作說明。HTML 要內嵌執行所需的繪圖樣式和程式，不載入外部 CDN。靜態 SVG 標示凍結狀態；不要宣稱它保留 HTML 的全部控制。完成後檢查桌機與 390px 寬畫面、數值紀錄及深淺色可讀性；先在本機保存，不上傳社群。

檢查 Claude 提出的指令、變更檔案與工作範圍後再讓它執行。生成到一半若跳出新套件安裝或外部上傳，先要求說明用途；本篇交付的是本機 HTML 和 SVG，不需要為了看作品把私人資料傳進社群畫廊。

四、把作品改成能教人的圖：三個常見坑

第一個坑：動畫很順，模擬時間卻飄走

驗收時先暫停播放，只按「前進 0.25 秒」。不然你按五次請求的過程，真實時間已流逝，桶子早已補充，數值當然和同一個 t=0 的答案不同。也要檢查播放是否用經過秒數計算，而不是「每畫一張就加固定數量」；後者會讓不同更新速度的螢幕得到不同補充速率。

第二個坑：比喻漂亮，卻偷偷換了演算法

令牌是會被消耗的許可，不是請求完成後歸還的連線。若作品把每次使用的代幣都送回桶子，就把它畫成另一種資源池。又如桶已滿時，多餘補充應被上限截住；畫面不能把它儲存在看不見的第二個桶，下一次突然倒回來。

遇到不一致，請 Claude 先印出每筆 時間、補充前餘額、補充後餘額、結果、扣除後餘額，再讓畫面讀取這份結果。不要只說「小球少畫一顆」；那會修補表象，帳本仍然錯。

第三個坑：滑鼠能玩，鍵盤與手機就卡住

只用 Tab 依序走過輸入欄與按鈕，以 Enter 或空白鍵操作，確認焦點可見、按鈕有文字名稱。把瀏覽器縮到 390px 寬，確認輸入值、紀錄與重設按鈕都能讀到，沒有水平溢出。接受／拒絕同時寫出文字，讓顏色只是輔助。

再啟用系統「減少動畫」偏好。prefers-reduced-motion讓網頁知道你的偏好；它本身不會替作品完成所有無障礙設計。驗收條件是：自動動畫停止，按單步仍能更新數字、顯示結果。Anatomy 的 動作指南也把鍵盤、可見性與靜止狀態列入設計。

五、交付 HTML 與 SVG：把「可玩」和「可改」各自存好

先找到 Claude 實際寫出的 token-bucket.html，用瀏覽器開啟；再把整個交付資料夾複製到另一個位置，確認它仍能開啟。若 HTML 還引用舊路徑的檔案，就請它改成內嵌，或把依賴連同交付資料夾一起保存，並寫清楚開啟方式。

HTML 保存互動控制、SVG 圖形和 JavaScript 行為；這次另外輸出的 SVG 則是選定時間點的向量快照，適合放進簡報或編輯工具。把它當成作品的兩張收據：一張保留玩法，一張保留可調整的圖形。要延伸編修流程，可以接著讀 可編輯 SVG 教學；要比較架構版本變更，可看 架構差異圖教學。

最後要求一份簡短操作說明，記錄固定提交、建置指令、輸出檔名、模型假設與那串已知答案。下一次調整 C 或 r，先按重設，再重算新答案。固定版本的價值，是知道改動從哪裡開始，而不是保證每次 AI 都畫得完全相同。

FAQ：八個新手常問的問題

1. 一定要先會寫 SVG 嗎？

不用。先學會讀懂參數和結果，再用需求工作單請 Claude 組圖；遇到錯誤時，你至少能指認是哪個事件算錯。

2. 裝好 Anatomy，使用 Claude Code 就免費嗎？

不等於。繪圖專案採 MIT 授權；Claude Code 的使用由你的登入與計費方式決定。先完成官方登入設定，讓一次練習的範圍維持在一個 Figure。

3. 桶子容量五枚，就是每秒最多五次嗎？

不一定。它代表可儲存五枚；本篇補充速率是每秒兩枚。滿桶能先應付突發，持續流量還要看補充與每次消耗。

4. 0.5 枚可以先放行，再補欠的嗎？

本篇不行。我們選定足一枚才接受、不足立即拒絕；若想教預約或排隊，需要另寫規則與驗收答案。

5. 複製同一個提示，會得到同一張圖嗎？

不保證。固定提交鎖住工具原始碼；物件設計與生成過程仍有變化。應比較行為是否通過相同驗收，而不是逐像素相同。

6. 做 Token Bucket 一定要用 3D 嗎？

不用。本篇用 SVG 即可表達補充、餘額與閘門。官方目前把 3D 標為 beta；先把單步驗收完成，再評估增加畫面成本。

7. 一張 PNG 能保留按鈕嗎？

不能。PNG 是像素快照。要讓別人操作本篇作品，交付包含程式的 HTML；PNG 可作預覽，SVG 快照可用來編修圖形。

8. 這個作品可以直接擋正式網站流量嗎？

先把它當成本機教學模型。若要做伺服器限流，還要處理多個請求同時讀寫狀態、跨機器共享額度與時間來源等問題；這些不在這張互動教材的交付範圍。

給新手的三個重點

• 先開官方最小範例，確認建置與瀏覽器路線通了，再開始自己的物件。
• 先寫同一時間的事件與標準答案，再檢查畫面；容量、速率與模擬時間要分開看。
• 同時保存可操作的 HTML、可修改的來源檔與 SVG 快照，下一次修改才有起點。