chalk-talk：透過畫圖來解釋
你製作一份手繪解說：一個簡短文字（.chalk）格式的食譜，此技能中的播放器會一筆一筆地繪製，包含章節、簡短旁白，以及當有實際數量時，使用者可拖動的數值。你只負責編寫食譜；scripts/build.mjs 會檢查它並建置出包含所有內容的單一 HTML 檔案。絕不要自行編寫或複製播放器。以下路徑均相對於此技能所在的資料夾。
1. 先畫再說
對於一般請求（「請畫圖解釋 X」、「畫圖說明 Y 如何運作」），不要提問，也不要展示大綱：直接畫。 自行決定繪圖所需的三件事，並在交付時說出來：
- 鉤子：一個與該概念相關的日常生活事物，觀眾曾看過或做過，且可用少數形狀畫出（帳單、公車站、咖啡店排隊）；
- 對象：根據請求內容而定，否則為一位好奇的成人；
- 使用者可拖動的數值：該概念中的一個實際數量（月利率、每分鐘到達人數），或無。
用於簡報、說服、決策、記錄或說明事件經過（如提案、客戶架構、事後檢討）的繪圖，屬於 back-of-napkin 的範疇（如果已安裝）；本技能負責教學。
僅在下列情況才需先提問——一次性、完整的提問，且只問缺少的資訊：當繪圖是為了課堂、學生、演講或課程（請見「用於課堂」），當請求可能意味著兩種不同事物，或當對方要求先看大綱時。
繪圖包含四個部分，各為一個章節：以問題形式呈現的鉤子（「為什麼 1,000 元會變成 1,974 元？」）；拆解（真實事物，簡單說明，以及其中隱藏的部分）；核心想法（規則、流程或論證，包含可移動的數值）；結語（強調結果，以及比較的界線在哪裡停止）。
2. 編寫食譜
使用以下行編寫 <id>.chalk —— 這涵蓋了常見的繪圖情況；你無需事先閱讀其他任何內容。紙張大小為 900 × 560（size 900x780 會產生較高的板面），x 軸向右增長，y 軸向下增長，道具的 at 代表其站立位置（底部中心）；保持離邊緣 30 像素。# Title 會開啟一個章節，> sentence 為旁白：兩者都會推進到下一個步驟。一個點是 x,y（無空格）；表達式需用引號括起來，並可使用參數和變數。
**它是一個板面：章節從不清除紙張。**所有已繪製的內容都會保留，就像黑板上的粉筆痕跡一樣，因此請在開始編寫前規劃好整個板面，並為每個部分分配專屬位置——標題一次放在頂部，鉤子和真實事物放在上半部，核心想法放在下方或旁邊，結語放在剩餘空間。絕不要在同一位置畫兩個東西；12 到 25 個步驟通常就足夠了。
頂部內容：
title Juros compostos ↔ a fatura do cartão
locale pt-BR
size 900x560
param taxa "juros ao mês (%)" 1..15 step=1 = 8
switch atraso "pagar com atraso" off
var f = "1 + taxa/100"
learning goal "Ver o juro sobre o juro crescer mês a mês."
請填寫全部四個 learning 行——goal、question（一個值得思考的問題）、answer（有根據的答案）和 caveat（簡化之處）——並將 locale 設為使用者的語言，且所有文字均使用該語言。
人物和物品都是道具：person、person-sitting、person-pointing、house、car、bus、coin、phone、document、server、bank、cloud、queue、desk、computer、clock、lock、money-arrow、tree、school、hospital、factory、truck、cart、safe、bulb、gear、database、robot、ship、container、warehouse、box、pallet、shop、shelf、field、cup、function、api-gateway、cache、cluster、board、book、pencil。人物可帶有 mood= happy、sad、surprised、worried 或 idea。
person ana at 150,330 "Ana" mood=worried
text "R$ 1.000 viram quanto?" at 40,64 size=36
text "paga só o mínimo" right-of ana gap 16 align=start
ana thinks "e se eu atrasar?" side=above width=200
ana -> banco "paga" -> loja "repassa"
arrow 60,350 -> 840,350 color=#2E8F62 stroke=3
highlight 90,500 -> 810,500 thickness=24
放置時無需計算座標——當各物件並排或依序擺放時，優先使用以下方式。chain 是用於傳遞物品的一系列事物：分散在紙張上，每個彼此相連，如有需要可加上長箭頭：
chain at 40,190 forward="o café desce" back="pedidos sobem"
field fazenda "fazenda"
truck caminhao "transporte"
cup cafe "cafeteria"
person voce "você"
row at 470,150 gap 14
repeat 3: coin size 44
repeat 3: coin at "100 + i*60",400 size 40
從該步驟開始，在原地持續運動的物件——spin、drive、steam（在其上方的縷縷輕煙）、talk、pulse 或 float，以及 stop。僅在運動具有意義時使用（卡車駛離、咖啡杯上的蒸氣），一份繪圖最多一或兩個：
animate caminhao drive
一個預製的動態表情符號——僅當使用者要求一個，且每份課程最多一個（它較為精緻，非粉筆風格）：celebrate、think、surprised、ok、idea 或 time，置中於 at；或使用 ./file.json，一個使用者提供的 Lottie 檔案，放在食譜旁邊。建置工具會將其放入檔案內，附上來源標註——而檔案大小會從約 340 KB 增加到約 610 KB（播放器加上動畫）：
lottie celebrate at 720,180 size=120
跟隨數值的數字：
counter at 470,270 "1000*f^6" "R$ {v:0} em seis meses" size=34
bars box 90,320,440,180 values 1000,"1000*f^3","1000*f^6" labels hoje,"3 meses","6 meses" format="R$ {v:0}"
plot "1000*(1+taxa/100)^x" domain 0..12 range 0..4000 box 480,120,360,240
when atraso:
text "multa de 2%" at 600,100 color=#C8442C
如果沒有道具可以繪製某個物品：在 0–100 網格上（整數，y 軸向下；它位於 50,100）製作，然後使用其名稱：
define xicara
polygon 24,48 76,48 70,90 30,90 fill=#FFFFFF
curve 74,56 90,62 72,80
xicara minha at 450,300 "minha xícara"
等待使用者操作，以及測驗（兩者均用於課堂）：
pause ask "Quanto vai virar a fatura em seis meses?"
quiz "Se a taxa dobra, a fatura em seis meses…"
* mais que dobra o juro -- é juro sobre juro
- só dobra -- isso seria juro simples
注意事項：一個板面 8 到 40 個步驟；僅在概念改變時提供簡短旁白；標題 36 到 44 號字，標籤 24 到 34 號字，不可小於 22 號；顏色使用石墨色（預設）、#2F5BEA、#C8442C、#2E8F62、#8C8578，螢光筆色 #FFE45C，最多三個強調色；事實和數字必須正確——絕不虛構引述或數字。其他步驟（circle、curve、card、table、axis、timeline、brace、note、move…）請參考 references/text.md；各步驟的繪製內容請參考 references/recipe.md。僅當你需要上述未涵蓋的步驟，或建置工具的訊息無法解決錯誤時，才開啟這些文件。
如果使用者提供了 Mermaid 圖表，請保持原樣，加入 %% title …、%% # chapter 和 %% > narration 行，並將其儲存為 <id>.mmd（references/text.md 說明了方法）。將食譜儲存在使用者工作的資料夾中，或者，如果存在使用者下載檔案的輸出資料夾（例如在 claude.ai 上的 /mnt/user-data/outputs），則儲存在該處。
3. 建置與檢查
node scripts/build.mjs <id>.chalk
它會在食譜旁邊寫入 <id>.html，並輸出：
✗ text: line N …或✗ contract: …（退出碼 1，未寫入任何內容）：根據訊息指示修正該行，如同其下方的範例所示。! review …（退出碼 3）：已繪製，但有些內容超出紙張、文字彼此重疊或線條穿過文字。修正後使用--snapshots再次建置：它還會寫入<id>.snapshots/<id>.contact-sheet.png——每個參數值設定下的每個章節。開啟該圖片，修正審查中指出的問題，以及任何看起來不正確的地方（無法辨識的圖形、擁擠的角落、過小的文字）。✓ review，或• review … the page checks itself when opened（此處無瀏覽器）：完成。• figures … defined：食譜使用define定義了圖形，且審查僅對其進行測量——請開啟一次聯絡表圖片，確認該圖形看起來像它應該是的東西。✗ review not checked: …：已完成，但請告知使用者繪圖未經檢查。
最多進行兩輪修正；然後交付，並用白話說明遺留的問題（「當數值為 15% 時，標籤會碰到標題」）。
多堂課程（一個系列）：每堂課一個食譜，一起建置——node scripts/build.mjs one.chalk two.chalk --out course.html --title "The course"。用於 README（或任何只需要圖片的地方），如果被要求：node scripts/build.mjs <id>.chalk --svg 會寫入 <id>.svg，一個會自行繪製的圖片；課程仍然是 .html。
4. 交付
提供 .html 的路徑（或在使用者下載檔案的地方提供檔案本身），並用一句話說明你所做的選擇以及提供修改的建議：「我把它關聯到信用卡帳單，對象是從未學過利息的人，並讓月利率可以拖動——想要換個鉤子、換個對象，或做任何修改嗎？」然後用一句話說明要觀察什麼：「按下『下一步』；在第三章中，拖動利率。」該檔案可離線開啟，包含章節、紙張旁邊的數值，以及 PNG、SVG、GIF 和 WebM 下載——它可透過電子郵件發送或在投影機上播放。
用於簡報（演講、課堂投影機）：使用 --present 建置——頁面一次只開啟一個章節，全螢幕顯示，講者備註包含第一個按鍵資訊；使用簡報器的 PageDown 鍵可前進。用於 PowerPoint，如果被要求：使用 --pptx（每張投影片一個章節；steps 會讓繪圖逐次點擊增長，video 會嵌入每個章節自行繪製的影片），旁白作為講者備註。
用於課堂
當繪圖是為了課堂、學生、演講或課程時，一次性地提問：最多三個鉤子，最好的優先，每個附上一句說明為何適合該觀眾（references/hooks.md），具體說明對象是誰，以及學生可以拖動哪個數字。不要問已經說過的事情。然後以幾行字展示四個部分的大綱，等待對方說「好」或「可以」。食譜需加入 theme chalkboard、一個 pause ask 來開啟回答問題的部分，以及結尾的一個 quiz。
不執行程式碼（改用 artifact）
在無法執行程式碼但可以顯示 HTML artifact 的環境中，將食譜放入以下小型頁面中——僅此而已——然後展示它。播放器會從 CDN 載入並自行檢查食譜：
<!doctype html>
<meta charset="utf-8">
<title>課程標題</title>
<script type="text/chalk-talk" id="chalk-recipe">
以文字形式呈現的食譜
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/player.js"></script>
如果頁面顯示無法開啟食譜，請修正它所命名的行。
後續修改
「把箭頭改成藍色」、「新增一個人」、「改用 5%」：僅修改被要求的部分，保留其他內容，再次建置並說明改變了什麼。更換鉤子或對象則屬於全新的繪圖。
絕對不允許
- 絕對不要編輯
assets/或scripts/contract.mjs：這些是自動產生的。 - 絕對不要在食譜中加入 HTML、連結、腳本或圖片：文字為純文字，顏色使用十六進位碼或名稱。
- 絕對不要編寫腳本來產生食譜：自行編寫（表達式和
repeat負責算術）。 - 在無法執行程式碼的情況下，絕不要手寫播放器、SVG 或繪圖的圖片：請使用上方的小型頁面。如果你既無法執行程式碼也無法顯示 artifact，請說明情況並提供食譜。