ISO-GLOW 教學：用 Claude 把抽象流程做成可互動的等角 HTML 圖
ISO-GLOW 可用 Claude 製作可互動的等角 HTML 圖。本文以課程流程為例，整理技能安裝、點擊需求、中文標籤與手機交付檢查。
要向客戶介紹一套系統，最難的往往不是畫出更多方塊，而是讓對方知道每個部分怎麼一起運作。
ISO-GLOW 最近在 X 展示了能點擊的等角城市與物件：描述建築或設備，就能生成一個互動 HTML。對教學者與產品團隊而言，更實際的用途是把抽象流程拆成可探索的畫面。
本文以「線上課程如何從報名走到上課」為例，說明技能安裝、提示詞、互動安排與交付檢查。
ISO-GLOW 是作者 April 公開的 Claude 技能。以下依作者網站整理，範例是設計方法，沒有宣稱我們已用工具生成成品。作者的城市、鼓機與燈塔展示可以作為風格參考。
你的課程流程仍需依實際制度重新設計。
等角圖適合表達空間與關係
等角圖把物件以固定角度呈現，常見於建築、遊戲與產品示意。它可以在一張圖裡呈現樓層、內部結構與相鄰關係。ISO-GLOW 的展示採用細線與發光區塊，讓讀者透過點擊注意到不同部分。
這種形式適合「部件如何相連」的問題，例如軟體分層、設備構造與能源流向。
不過，等角圖不一定適合所有內容。如果你只是要列出三個截止日期，普通時間表會更清楚。如果需要比較價格，表格通常比一棟會發光的大樓容易閱讀。
先把讀者要回答的問題寫下來，再決定是否值得做互動圖。圖像的作用是幫助理解，不能讓讀者花更多時間猜測每個建築代表什麼。
課程流程適合用這種方法，是因為它包含不同工作區：報名、繳費、通知、上課與課後資料。你可以把它們安排成一座小型校園，點擊一個區塊後顯示說明。
但是每個區塊必須有文字標籤，並保留前後順序。建築只是視覺比喻，正式制度應以文字說明為準。
安裝前先看技能包的內容
作者網站提供下載與安裝說明。Claude Code 的手動安裝方式，是取得技能包後，把對應資料夾放入技能目錄，再重新啟動工作階段。
原作者頁面也提供 Claude.ai 的技能檔案方式。可否使用仍取決於你帳號當下支援的功能。不要把兩種安裝方法混用，或把一個 ZIP 直接當成網站程式執行。
技能包通常會包含 SKILL.md、授權與素材。先讀說明，確認它要求模型輸出哪些檔案、是否引用外部資源，以及是否需要安裝額外套件。技能是交給模型參考的製作規則。
檔案裡的內容也應經你理解，不能因為它叫作技能就視為可靠。下載來源應以作者網站所連結的版本為準。
已有專案的讀者可以在一個新的資料夾試做，避免直接覆蓋原站。請 Claude 只生成單一 HTML，並列出字體、圖片或其他外部連線。若交付場景要求離線使用，應明確寫在提示詞裡。
作者展示的檔案形式，並不保證你提出的每個複雜需求都能維持相同大小或完全沒有依賴。
Claude Code 手動安裝時，從原作者網站下載 ZIP，解壓後確認 iso-glow 資料夾內有 SKILL.md、LICENSE 與 assets，再放到 ~/.claude/skills/iso-glow。
重新啟動 Claude Code 後，可以點名技能，或依支援的介面使用 /iso-glow，再交代要製作的內容。若沒有載入，先檢查資料夾是否多包了一層。
Claude.ai 是另一條路徑：下載作者提供的 .skill，在支援技能的設定介面上傳並啟用，再開新對話。若帳號沒有相關設定，應先核對方案與功能開放狀態，無須反覆上傳同一個 ZIP。
第一份提示詞先限定內容與點擊行為
可以從下面這份需求開始：「製作一張線上課程流程的等角互動圖，以小型校園為視覺概念。只包含報名、繳費、通知、上課、課後資料五個區塊。
點擊區塊時，顯示該階段的目的、讀者要做的事與下一步。使用繁體中文，輸出單一 HTML，手機上也能操作。」
這段需求刻意限制區塊數量，因為第一次就加入十幾個建築，很容易把焦點分散。你也可以先提供正式流程文字，例如繳費完成後是否立即寄信、課前幾天提供連結，以及錄影資料保存多久。
若這些規則還沒確定，應先把內容釐清，不能讓模型替你發明營運制度。
接著加上具體互動：「未選取的區塊使用低彩度線條。選取後以品牌色亮起。說明面板始終放在圖下方。點擊空白處不清除內容，避免手機誤觸。五個階段也要提供普通文字連結。」
這些要求比「要很有科技感」更能決定操作體驗，也能讓沒有興趣探索圖像的讀者直接找到資訊。
把發光效果用在資訊層級
ISO-GLOW 的發光風格很容易吸引注意，但同一時間每個區塊都發光，等於沒有重點。你可以把光分成三種用途：目前選取的區域、與它直接相關的下一步，以及純裝飾的環境光。
前兩種應比第三種明顯。模型生成後，先看不用動畫時還能否辨認流程。
以繳費階段為例，點擊後可以亮起繳費區與通知區，提醒讀者這兩件事相連。說明面板則清楚寫出付款方式與查詢位置。
不要用紅光、綠光或顏色變化作為唯一提示，因為讀者可能看不出差異，也可能使用灰階畫面。標籤、順序數字與文字狀態應一起存在。
若你要表達進度，資料來源也要交代。靜態示意圖不能假裝知道使用者已報名或已付款。可以寫「流程示意」，把所有階段當作介紹。
真正的個人進度需要登入資料與後端狀態，這是另一項產品工作，不能靠圖像生成自動完成。
第二輪修改只處理看不懂的地方
生成後先請一位沒有參與設計的人看圖，問他「從報名到上課要經過哪些步驟」。如果他先注意到燈塔或道路，卻找不到報名入口，表示裝飾搶走了主線。
這時應縮小裝飾物、放大入口標籤或改變區塊排列，不需要重新生成整座城市。
文字也需要檢查。繁體中文標籤是否被模型改成簡體？較長的「課後教材與錄影」會不會跑到建築外？面板中的條列是否真的對應正式流程？如果發現內容錯誤，先修正內容，再看動畫。
漂亮的畫面會使錯誤更有說服力，所以流程與日期尤其值得逐項核對。
一份有效的修改要求可以是：「保留目前建築與配色，只把五個階段按由左至右排序，加入一到五的序號，縮短面板每段文字。手機版先顯示階段按鈕，再顯示圖。不要新增第六個階段。」
這能避免模型把一個小修正變成全新方案，也方便你比較前後差異。
交付 HTML 前，至少走完四個使用情境
首先是桌機滑鼠。每個可點區塊是否都有明確回應？文字面板更新時是否保留合理高度，避免整頁跳動？滑鼠移開後，讀者是否仍知道目前選的是哪一階段？如果資訊只在滑過時出現，手機就可能完全看不到。
其次是手機觸控。點擊區域應接近物件實際範圍，不要要求使用者點一條很細的線。橫向圖太寬時，可以提供縮放或改成更簡單的排列，但仍需保留文字入口。
檢查時使用接近正式文案的長度，不能只放一個字當作標籤，否則換上正式內容就可能失去可讀性。
第三是鍵盤與減少動態效果。可互動區塊應能用鍵盤到達，也應有可讀的名稱。對不希望看到持續閃爍或移動的讀者，保留靜態圖與完整文字即可。這些替代方式不會破壞設計概念，反而讓圖能在更多情境中使用。
第四是檔案與連線。把 HTML 放到預計交付的位置，確認圖片、字體與程式都有正確路徑。若需離線展示，就斷網開啟一次。若要放進既有網站，就檢查它的樣式是否影響其他內容。
記錄檔案版本、來源技能與修改日期，後續調整流程時才知道要更新哪一份。
常見問題：能直接當成正式教材嗎？
可以把它當成教材的一部分，但正式內容仍需自行確認。模型生成的圖像不是系統設計文件，也不會替你驗證物理、工程或操作規則。若用於設備拆解，元件位置可能只是視覺排列。
若用於資料流程，箭頭方向應依你的實際架構檢查。
如果讀者需要帶走資訊，最好另附一份普通文字或靜態版本。互動圖適合第一次理解關係，文字版本適合後續查找與列印。你不必把所有內容都塞進一個動畫面板。
保留清楚的正文連結，會使圖像與資料各自發揮作用。
作者網站說明 ISO-GLOW 的授權與來源，使用時仍應查看技能與素材各自的條款。免費技能不代表你另外放入的照片、標誌或音樂也能自由使用。
對品牌提案，採用自己的圖像與已授權素材，通常比混入來源不清的參考圖更容易交付。
官方展示可以看什麼，也有哪些看不到的部分
作者的鼓機展示適合觀察點擊後的回饋，燈塔適合觀察光與空間，分層示意則適合觀察不同區塊的關係。你可以從每個展示各取一個設計原則，放進自己的流程圖。
不需要把它們的主題、物件與配色整套搬過去。當參考目的清楚，模型更容易知道你要的是哪一種互動。
展示影片通常只呈現成功的路徑，看不到瀏覽器載入、網路失敗或長標籤的狀況。所以交付時仍要自己測試。如果你預計在簡報室播放，先用會場的電腦或相同瀏覽器開啟檔案。
如果要寄給客戶，則說明開啟方式與是否需要連網。這些細節會直接影響圖是否能被使用。
製作時間也不應只算生成那一刻。把需求整理、生成、內容修正、互動檢查與交付分開記錄，才能知道下次應在哪裡縮短流程。例如第一版很快，但每次都要修中文標籤，下一次就可以先給固定標籤清單。
工具的效率，來自你逐步累積的規格與檢查方法。
為下一次更新留下清楚的內容表
建議在 HTML 旁邊保留一份五列的流程表，每列包括標籤、說明、下一步與資料來源。之後課程日期、付款方式或資料保存時間改變時，可以先改表，再請模型同步到互動圖。
這能避免只有動畫檔被更新，普通文字版本卻仍保留舊內容。
流程新增或合併時，也應重新看讀者的路徑。新增一個審核階段，可能會改變報名後應出現的說明，不是多放一棟樓就足夠。先釐清規則，再調整圖像。互動形式可以一直沿用，內容仍需要隨實際工作更新。
第一個成品的目標可以很簡單：讓陌生讀者在一分鐘內說出五個流程階段，找到自己現在要做的事，並在手機上看見完整說明。若做不到，先縮減建築與特效。若做得到，再考慮加入狀態或更多細節。
這個標準測的是理解效果，沒有把畫面複雜度當成品質。
ISO-GLOW 展示了 AI 可以把線條、光與互動一起生成。對實際工作而言，真正值得保留的是你設計的內容關係，以及檔案能否在交付環境中穩定使用。
先有清楚的問題，再選擇適合的圖像，才能讓熱門展示變成可重複使用的溝通工具。
