Colorfigures 互動教材怎麼做？Claude 手繪洗衣機爆紅，教學設計先抓住因果
April Zhu 的 Colorfigures 互動教材洗衣機在 X 引起討論。解析可操作 SVG 教材與一般 AI 生圖的差異、教師規劃方式、事實驗證與使用限制。
Colorfigures 互動教材把洗衣機畫成可以操作的物件，讓孩子能看到按鈕與動作之間的關係。對想用 AI 備課的老師來說，這比多做一張精美插畫更值得研究。
April Zhu 在 2026 年 10 月 17 日分享這個 Claude 技能示範。到 10 月 19 日查詢時，貼文約有 5,200 個讚、29 萬次瀏覽，顯示這種教材形式吸引不少注意。
但瀏覽量沒有告訴我們孩子是否學會。因為一張會動的圖也可能只讓人忙著點按鈕，教學成果仍取決於孩子能否解釋操作的原因。
作者官網把這套作品稱為可玩的手繪等角物件，展示內容也包含咖啡機、烤麵包機與其他日常設備。它提供一種把生活流程變成小型互動頁面的方向。
這讓老師可以先挑一個生活問題，再把操作與結果配成一條看得懂的因果。教材的價值，會來自這條因果能否幫學生形成正確理解。
如果是課堂試作，我會先用它安排探索與討論，再讓學生離開畫面解釋原理。這是教學設計建議，並非本文已經實測過的學習成效，開始前，得先弄懂這種作品與一般 AI 插畫的差別。
Colorfigures 互動教材為何不同於一張 AI 插畫？
這類教材把視覺物件和操作狀態寫進網頁，所以使用者的點擊可以帶出不同反應。圖片只呈現一個瞬間，互動頁面則能把過程展開。
在 April Zhu 官網的介紹裡，Colorfigures 是帶有手繪線條、平塗色彩的可玩等角物件。等角畫法是從固定斜角畫出立體感，因此設備的正面、側面與上方可以同時出現。
這個視角有助於把零件放在同一張畫面裡，但它仍是一種畫法。看得到內部位置，不代表圖裡的大小、管線與實際機器完全一致。
作者公開展示頁把許多生活物件放進相近的視覺風格，包含洗衣機、販賣機、微波爐與其他裝置。它的特色是把物件做成可操作範例，而非只提供一包靜態圖片。
頁面使用 SVG，也就是由線條與形狀組成的向量圖。因為圖形可以由程式控制，所以按鈕、狀態文字和動畫能在同一份網頁裡互相配合。
但這不代表使用者輸入一句話，就能保證得到正確教材。AI 可以協助產生程式，至於每個操作是否符合原理、畫面有沒有誤導，仍要由熟悉主題的人判斷。
以下把常見素材的差異放在一起，方便備課時選擇。
| 素材 | 比較適合的工作 | 教師還要補上的內容 |
|---|---|---|
| 靜態插畫 | 認識零件與位置 | 過程順序與狀態變化 |
| 示範影片 | 觀看完整操作 | 暫停、預測與討論問題 |
| 可操作網頁 | 改變條件後觀察回應 | 原理核對與學習評量 |
表格裡的差異是教學安排的差異，並沒有哪一種形式能直接保證學得比較好。若課程只需要辨認部件，靜態圖可能已經足夠，互動功能應服務明確問題。
老師如何把一個生活問題改成可操作教材？
先決定學生最後要理解哪個因果，再挑需要保留的操作。這樣設計出的按鈕才會推進學習，而不是只增加畫面熱鬧程度。
以洗衣機為例，課程問題可以是「為什麼要先加水再清洗」或「脫水與烘乾有什麼不同」。兩個問題需要的畫面不同，因此不適合一開始就要求 AI 把整台機器的所有功能都做出來。
如果目標是認識洗衣流程，教材可以讓學生觀察加入衣物、清洗與取出之間的順序。如果目標是理解旋轉如何移除水分，就要把時間放在衣物、水與轉動的關係。
這些是可採用的課程構想，並不表示作者的洗衣機範例已實作全部內容。老師應依公開範例的實際功能，決定要直接使用，還是另做符合課程的小作品。
向 Claude 描述教材時，先寫出學生年齡、已知概念與學習目標，接著才描述畫面。因為同一段原理給不同年齡閱讀，零件名稱與操作複雜度都需要調整。
例如可以要求「讓學生比較兩種操作後的結果，並在最後解釋差異」，而非只要求「做一個很漂亮的洗衣機」。前者給了可檢查的任務，後者容易讓製作焦點停在外觀。
操作最好能讓學生一次改變一個條件。若同時改動水量、轉速與時間，畫面雖然豐富，學生卻可能無法判斷究竟是哪個改動造成結果。
也可以先把結果藏起來，請學生預測，再執行操作。因為先說出預測，孩子才有機會注意自己的想法與畫面回應有何差別。
預測錯誤時，教材不必只跳出「答錯了」。比較有用的做法，是讓學生回看剛剛改動的條件，並用自己的話修正解釋，老師也能因此看見卡住的位置。
延伸閱讀：Gemini Canvas 把 PDF 變互動網頁：Argon 示範之後，教材怎麼做才可靠？
手繪洗衣機哪些內容需要教師驗證？
機械動作可以簡化，但關鍵原因與操作安全不能跟著省略。教材如果把方便觀看的動畫，寫成真實設備一定會發生的反應，學生就可能形成錯誤理解。
最先要核對的是操作和結果之間的關係。若按下某個按鈕會出現水流，畫面要能說清楚這是流程的哪一部分，不能只因為水流動畫好看，就讓它出現在不合理的時機。
接著要檢查省略。真實設備可能有安全鎖、感測器或其他限制，教學圖為了讓流程清楚，未必全部畫出來，因此老師要知道示範究竟抽掉哪些條件。
這並不要求小學生先學完整工程圖。重點是教材用什麼方式簡化，以及這個簡化是否會影響課程要建立的觀念，與目標無關的細節可以留到以後。
用詞也要與畫面一致。例如「脫水」和「乾燥」不能只因為最後看起來比較乾，就當成相同過程。若教材無法呈現差異，老師可以直接縮小本次課程範圍。
字幕要跟著狀態改變。若物件已經進入另一個階段，旁邊卻還保留上一階段的說明，學生便會把兩者錯配，因此檢查時要走完每一條操作路徑。
再看重設是否可靠。教師需要能讓下一組學生回到相同起點，否則上一組留下的狀態，可能讓同一個按鈕出現不同結果，討論就失去共同基準。
還要考慮教室設備。電腦上容易點的小圖示，到了平板可能難以碰觸，學生若看不清狀態文字，就只能靠顏色猜，因此試看要使用真正會上課的螢幕。
若畫面依靠顏色區分結果，最好同時搭配文字或形狀。因為投影亮度與使用者的視覺條件都不同，單靠顏色可能讓部分學生無法跟上。
這些檢查不需要每次都變成長篇文件。老師可以用一張課程表，記錄學習目標、允許的操作、預期反應與刻意省略之處，日後修改也比較容易回頭核對。
怎麼評估互動教材是否有幫助？
讓學生預測操作結果，再說明原因，比統計點擊數更接近教學目的。因為點得多只能代表有操作，無法單獨說明孩子理解了多少。
在活動開始前，可以先問一個與教材目標相符的問題，請學生用一句話回答。課程結束後再用相近情境詢問，老師就能比較解釋有沒有改變。
比較時要看理由，不只是答案。例如學生最後選對按鈕，卻無法說出為什麼，可能只是記住畫面提示，尚未建立能換個情境使用的理解。
因此練習最好包含一個陌生例子。把同一個原理放到另一個生活物件，觀察學生能否沿用解釋，比要求重播同一段動畫更能看出理解範圍。
也要留意不成功的地方。學生一直點同一個區域，可能是在測試，也可能是看不懂提示，老師需要問他正在找什麼，才能決定該改畫面還是補解釋。
對小規模試作而言，觀察幾位學生完成活動的過程，就能找到不少介面問題。但這種課堂觀察仍不足以宣稱工具普遍提升成績，因此成果描述要與證據範圍相符。
若要與原本教材比較，兩組活動應盡量回答相同問題。若一組有老師帶領、另一組完全自學，結果就同時受到教學安排影響，不能全部歸因於互動效果。
製作時間也值得記錄。因為教師真正需要決定的是下次是否還做得起，而不只是這一次能否做出作品，原理查核與修正所花的時間都應算進去。
誰適合先做一份小型教材？
熟悉主題的教師與內容設計者，可以先挑一個概念試做。若連原理本身還沒有把握，直接把判斷交給 AI，通常只會把檢查工作往後推。
對家長來說，也可以先與孩子一起玩公開範例，聽他描述看到什麼。因為家長不必先把自己變成程式設計師，就能判斷作品有沒有引出值得討論的問題。
至於需要大量製作教材的團隊，應先決定共同的視覺、用詞與操作規則。若每份作品都重新開始，後續更新就容易出現不同畫風、不同提示和不同使用習慣。
分享作品前，還要分清楚「公開可看」與「可以任意改作、轉售」。作者官網提供範例，不等於自動授予教材商業使用權，使用者仍應查看對應授權或取得同意。
教學活動若只需要觀看示範，可以保留原作者連結與署名。若要把原始程式放進付費課程或重新包裝，就應另外確認素材、程式及字體的使用條件。
延伸閱讀：Claude 官方精選 6 個作品：野火分析、手寫字型到 3D 醫學教學
Colorfigures 互動教材常見問題
這是 Claude 官方發布的教材產品嗎？
這是 April Zhu 在個人網站與 X 分享的創作示範。作者使用 Claude 技能來描述工作方式，但作品本身不因此變成 Anthropic 官方教材。
一定要先會寫程式才能開始嗎？
觀看公開範例不需要先寫程式。若想製作自己的版本，仍要有人能檢查操作與說明，尤其是課堂中要使用的知識內容。
可以直接用 X 的熱門程度判定教學效果嗎？
不可以，互動數反映的是社群注意力。學生能否預測結果、解釋原因並應用到新情境，才是這類課程較值得觀察的成果。
能拿來取代真實設備操作嗎？
它適合先說明與探索，但真實設備包含觸感、安全與環境條件。課程若要求實際操作能力，仍需要對應的示範與練習。
先讓學生說出原因，再決定是否擴大製作
Colorfigures 展示了 AI 輔助教材的一條實用路徑，日常物件可以變成讓學生操作、預測與討論的小作品。它最值得借用的地方，是把抽象過程放回熟悉情境。
但作品是否適合課堂，要由學習目標與學生的解釋來判斷。願意查核內容、觀察學生並持續修正的人，才適合把這種示範發展成自己的教材。
可以先從一個物件、一個問題與一個可觀察的結果開始。試教後回看學生在哪一步改變理解，再決定增加哪個功能，也能訂閱 AI 郵報持續追蹤教育與創作工具的實際用法。
