Claude 手繪洗衣機爆紅：Colorfigures 把設備做成可操作教具

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

一台手繪風格的洗衣機，這兩天在 X 上被大量轉發。設計師 April Zhu 在 10 月 17 日深夜分享一段約 48 秒的影片，附上可以直接動手操作的網頁連結；她在貼文裡說，這是用「一個做手繪互動日常物件的 Claude 技能」做出來的。到 10 月 19 日傍晚查看時，這則貼文已有 5,609 個讚。

我把這個公開頁面實際打開操作了一輪，也把背後的技能安裝包抓下來解開核對。值得記住的部分在於生產方式：描述一件日常設備，得到一份完全在瀏覽器裡運作的互動網頁，授權是 MIT，可以免費安裝、可以商用、可以修改。而它同時是簡化過的模擬，真實機器的安全細節被抽掉，也沒有任何學習成效的證據，拿進課堂前要自己核對因果。

實際把洗衣機跑一輪，每個按鈕都有回應

Colorfigures 展示頁收錄 26 件日常物件：洗衣機、義式咖啡機、販賣機、烤麵包機、微波爐、削鉛筆機、發條玩具、紅綠燈、煙霧偵測器、冰箱、馬桶水箱、扭蛋機、餐車、手沖咖啡組、檯燈、電熱水壺、電風扇、夾娃娃機、吸塵器、果汁機、廁所隔間、口香糖機、唱機、音樂盒、拍貼機，到最後一台大型機台。方向鍵左右切換物件，Q 與 E 可以把物件轉到另一面，從正面、側面與頂面看清結構，也能開關零件標籤。全部免費，不需要註冊帳號。

洗衣機是清單裡的第一件，也是影片的主角。頁面給的操作提示很直白：把衣物放進去、加洗衣精、選行程、按下開始，最後把衣物拿出來。實際照做：按下「Load laundry」後，籃子裡的衣物轉場進入滾筒；「Add soap」會拉開機身抽屜、注入洗衣精；行程有三個可選，COTTON 標示 90 分鐘、QUICK 30 分鐘、SPIN 12 分鐘，運轉中會鎖定不能再改；按下開始後，面板出現倒數，階段燈依序走過注水、清洗、沖洗排水與脫水，中途可暫停，結束後開門把衣物取回籃子。機身側面還畫了「WASHMATIC 9」的銘板與「4 KG · 40°」的規格字樣，這些細節都是向量圖的一部分。

Pin

狀態文字會跟著流程換句話：一開始是「空機，從籃子把衣物放進來」，門沒關時是「門開著，點一下關上再開始」，洗完是「洗好了，開門取出」；運轉中按選行程，畫面會提示行程已鎖定。清洗階段滾筒來回改變轉向，配合「高速旋轉把水甩出」的教學重點，把看不見的物理原因變成看得到的節奏差異。這些提示句都寫在圖形自己的程式裡，等於作者幫第一次上手的人預先做了引導。

從頁面原始碼可以看出它的運作方式：每個物件本身就是一份完整的 HTML 檔案，繪圖用 SVG 向量線條組成，因為圖形由程式控制，按鈕、狀態文字與動畫才能連動。藝廊頁只是把 26 份這樣的檔案裝進同一個框架輪播。等角視角讓正面、側面與頂面同時出現在一張圖上，零件位置清楚，但它終究是畫法，看得到內部不代表尺寸與管線和實機一致。

走紅之前，先有一則打氣筒教具原型

這則貼文並非憑空出現。April 轉發的是另一位用戶（帳號 @wheresryan22）同一天稍早的兒童版原型：一台打氣筒，配著「幫浦怎麼把輪胎充飽？」的問題句，這則原型在台北時間 20 點 29 分貼出，寫道他在嘗試不同做法，想找出最簡單、又能保住足夠細節的方式，讓孩子理解東西怎麼運作；不到三小時後，April 帶著自己的洗衣機版本加入討論。那則原型到查看時有 1,006 個讚。

我很喜歡這個。如果我有小孩，我會想用這種方式教他們。我也一直在探索透過遊戲學習：一個做手繪互動日常物件的 Claude 技能。這是我的小洗衣機。

April Zhu 在 X 上的貼文（中文為意譯）

April Zhu 的官網自述是產品架構師，建築系出身，做過 DeFi、金融衍生品與氣候情報產品。貼文裡連的 colorfigures.vercel.app，與她官網的 colorfigures-demo 頁面送出的是同一份內容，兩個網址抓回來的檔案逐位元組相同，頁面中繼資料指回官網網址。影片本體沒有替代文字，計數也會持續變動，5,609 是 10 月 19 日傍晚的數字。

往回追會追到一個可安裝的 Claude 技能

她官網把 Colorfigures 標成一個「Skill」，旁邊的「Get the skill」連向 isoglow.dev，頁面上寫明「Made by April Zhu」。這個名為 iso-glow 的 Claude 技能做的事情是：你描述一個物件、設備或建築，它產出一份 HTML 檔案，是細線條的等角繪圖，開啟的部分會發光，每個可按的零件都有實際反應；要求 3D 版會用 three.js 做成可環繞的場景，也可以交給它自己的 3D 模型檔清理成同樣的線稿風格。

Pin

安裝有三條路。用 Claude Code 的人，一行終端機指令把技能裝進家目錄的 ~/.claude/skills，重新啟動後用 /iso-glow 或直接描述需求開始：

mkdir -p ~/.claude/skills && curl -fsSL https://iso-glow.vercel.app/iso-glow.tar.gz | tar -xz -C ~/.claude/skills

用 Claude.ai 網頁版的人下載技能檔，在技能設定裡上傳並開啟；作者註明網頁版的技能需要支援的付費方案，自己的方案有沒有涵蓋，要去 Claude 的說明頁確認。Windows 或想手動處理的人下載 zip 解開，把資料夾放進 .claude/skills 再重啟。之後 Claude 會把成品存成 HTML 檔，點兩下用瀏覽器打開。概念上，這和把設計技能裝進 Claude Code 的做法同一條路（例如先前的 UI UX Pro Max），差別在輸出的是可互動的網頁。

我把安裝包抓下來解開清點：壓縮檔約 143KB，解開是 14 個純文字檔、約 455KB，包含給 Claude 讀的 SKILL.md 說明、授權檔、2D 與 3D 頁面模板、範例與 Lumen 風格元件。安裝只是複製檔案，不執行程式；成品頁面在瀏覽器沙盒裡運作，範本裡的外部請求只有一個 Google 網頁字型，以及 3D 用的 three.js 公開 CDN，沒有追蹤碼與帳號系統。站上安全頁寫「六個文字檔約 300KB」，與現行安裝包的 14 個檔案對不上，說明頁落後於包的內容，想先檢查再裝的人，自己解包看最準。授權是 MIT，著作權註記掛 April Zhu 與上游作者兩人，商用允許，散布時保留授權檔即可。作者宣稱單一物件的生成通常一分鐘內完成，這點我沒有實際裝進 Claude 驗證。

包裝內容也對得上官網說法：模板有 2D 與 3D 兩份藝廊頁，範例含桌上型電腦、辦公大樓與 3D 鏡頭相機，Lumen 風格另外附了元件庫、選色器與卡片終端機、保險箱、區塊堆三個範例，再配上兩份給 Claude 讀的進階說明。要更新就重跑同一條安裝指令，要移除就把資料夾刪掉，沒有背景程序或登錄檔。頁尾一句「做了什麼就標記 @Aprilzz423」，把使用者的成果導回作者的社群時間線，作品、技能與討論繞著同一個人轉。

再往上游兩週，地基是另一位設計師的 iso-figure

iso-glow 也不是從零開始。SKILL.md 開頭就寫明，它建立在 Tolga Cohce 的 iso-figure 技能上：投影核心、「Fig N」編號盤、以及「每個圖形必須真的做某件事」的規則都來自上游；April 補上燈光、配色與多物件藝廊框架，還有她做二十件圖形過程中累積的修正。對應的 GitHub 儲存庫是 2026 年 10 月 4 日才建立的，MIT 授權，查看時 221 個星。從上游儲存庫上線，到洗衣機影片被大量轉發，中間只隔了十三天。頁尾的感謝名單裡有 @wheresryan22，就是那則打氣筒原型的作者。

Colorfigures 頁面的原始碼裡留著 iso-glow-accent 這個名稱的設定儲存鍵，藝廊框架的血統可以直接對上。上游訂下的「Fig N」編號盤，就是清單裡 Fig. 01 到 Fig. 26 那排標示的由來。作品的分工也清楚：iso-figure 提供把立體物件畫成等角線稿的方法，iso-glow 負責發光、配色與整套框架，Colorfigures 則是手繪平塗風格的成品集。這條兩週內接力的創作鏈，比單一影片更值得留意：一個人公開地基，另一個人疊出作品，第三方再拿去教學或改作，技能這種形式讓它變得可行。想看別人怎麼用 Claude 技能，Awesome Claude Skills 一類的策展清單是另一個入口。

當教具用之前，先看清它抽掉了什麼

洗衣機圖形自己帶了一句教學重點：高速旋轉把水從滾筒的小孔甩出去，衣物同時被壓向筒壁。這句話是對的，也是這類作品最有教學價值的層次，把看不見的原理，變成看得到的動作與結果。但整台機器是為了看清流程而簡化過的：真實洗衣機的門鎖聯動、水位感測、加熱控制與安全機構，圖裡多半不存在或不完整。老師要用它，先想清楚這個版本抽掉了哪些條件，再決定哪些要口頭補上。

更要緊的邊界是：沒有證據指出這種教材讓孩子學得更好。讚數與轉發量說明形式吸引人，和學會是兩回事；互動頁面也可能讓人忙著按按鈕，卻說不出所以然。作者的技能檔把「每個圖形必須真的做某件事」寫成硬規則，看得出對功能性的要求，但原理是否正確、動畫時機會不會誤導，仍然要熟悉主題的人逐項核對。它適合當引導討論與預測的工具，讓學生先猜再按、離開畫面後解釋原因，而不是設備操作的訓練教材。實際的檢查法也不難：把動畫裡每個按鈕的因果列成一張表，請熟悉那台設備的人核對一輪，有疑問的地方標出來，就是這份教材的修改清單。

現在能玩什麼、能裝什麼，還有哪些不知道

想先體驗的人，直接打開 Colorfigures 展示頁把 26 件物件按一輪；她官網的同一區塊還列了另外四個示範連結，涵蓋一般物件、城市建築、3D 場景與聲音。想自己做的人，iso-glow 技能免費、MIT 授權，官方頁同時給了 Claude Code、Claude.ai 與手動安裝三條路，範例從 16 步音序器鼓機、會響霧笛的燈塔，到可逐層點亮的系統架構圖都有。同一週，Perplexity 的執行長也示範過 用 AI 直接生成可玩的瀏覽器遊戲，用一句描述換到一份能互動的網頁，正在變成可預期的生產方式。

官方頁給的起手例句也實用：「一個會倒數又會響的廚房計時器」「一台可以買飲料的販賣機」「一張請求會逐層亮起的系統架構圖」，都是一句話的規格。成品是純文字的 HTML 檔，想改配色或文字，用文字編輯器打開就能動手，不必等下一次生成。對老師來說，這表示教材可以逐年微調；對開發者來說，它就是一份沒有依賴、沒有建置流程的靜態網頁，放到任何靜態託管都能跑。

還不知道的事也該列清楚：技能在不同 Claude 方案與模型版本上的生成穩定度，我沒有驗證，作者自述的一分鐘內完成也只是宣稱；Claude.ai 端哪些方案支援技能上傳，要查當下的官方說明；官方頁正在調查現成物件包的需求，未來可能推出，安裝包內容也可能再變，動手前先看 isoglow.dev 當天的內容。這件作品從上游公開到走紅只有兩週，它還在動，會繼續動。