讓AI代理寫完程式之後，人類該做的是視覺化

讓代理把整個微服務重構了一遍。PR 上來了，但服務之間的呼叫流程在腦中怎麼也畫不出來。逐行讀 log，反覆自問「這樣對嗎？」的時間比寫程式本身還長。

光靠終端輸出要掌握全貌有其極限。加上視覺化之後，程式碼流向一目了然，向同事說明架構的時間也直接砍半。接下來介紹的五個工具，各自從不同角度解決這個問題。

終端 ASCII 搬到瀏覽器就能看到全貌

請代理畫架構圖，拿到的是等寬字型方框。節點超過五個眼睛就開始打滑。visual-explainer 把同樣的請求轉成包含 Mermaid 圖表的 HTML 頁面。暗色模式切換和縮放/平移內建，不需要額外建置步驟或外部相依套件，只要有瀏覽器就能運作。

• /diff-review：程式碼變更與架構比較在同一畫面呈現。
• /project-recap：幾天沒碰的專案要重新上手時，產生脈絡回復快照。
• /generate-slides：同樣的產出可以轉換成簡報投影片。
• 自動切換：四行以上的表格要印到終端時，自動切換為 HTML 渲染。

聊天視窗裡即時畫圖

Excalidraw MCP 只需要註冊一個 MCP 伺服器位址就能直接使用，不用另外安裝。第一次看到圖表以串流方式即時繪出的時候，說實話是驚訝的。和正式的圖表工具不同，手繪風格在向同事說明結構時反而沒有壓力。

• 多環境支援：Claude Desktop 和 VS Code 都能使用。
• 視埠自動調整：畫布範圍自動調整，也支援全螢幕編輯模式。
• 聊天內互動編輯：基於 MCP Apps 擴充，在聊天視窗裡就能直接編輯。

有一個局限值得留意：複雜的序列圖用 Mermaid 語法會更適合。手繪風格在架構概覽和流程說明上有優勢，但要表達精細的呼叫順序，需要搭配其他工具。

讓 Mermaid 圖表擺脫粗糙預設

Mermaid 語法很好，但預設渲染效果偏粗糙。想改個顏色就得去翻 CSS 類別。beautiful-mermaid 只需要輸入背景色和前景色兩個值，剩下的色彩與文字亮度全靠 color-mix() 自動衍生。15 個預先實作的主題，一行就能套用。

• 零閃爍：SVG 渲染是同步的，在 React useMemo() 裡也不會閃爍。
• CLI 嵌入：支援終端用 ASCII/Unicode 輸出，可以把圖表嵌入 CLI 工具。
• 零 DOM 依賴：沒有 DOM 相依性，伺服器端也跑得動。
• Shiki 整合：接上 Shiki 後，VS Code 主題可以直接套用到圖表上。

讓代理寫完程式還要寫解說書

Zara Zhang 分享的 “Claude Teacher” 提示 做法很簡單：在 CLAUDE.md 裡加一段話，要求每個專案結束時產生一份 FOR[名字].md，用平易的語言整理整個專案。

這個方法有效的原因很直接。AI 代理在寫程式的過程中已經掌握了架構和決策理由，只是需要明確指示它把這些資訊提取出來而已。

• 架構連結：說明技術架構和程式碼結構之間的對應關係。
• 決策理由：記錄使用了哪些技術堆疊、為什麼選擇它們。
• 實戰教訓：整理開發中遇到的 bug、解決過程，以及未來要避開的陷阱。
• 工程師思維：歸納好的工程師如何思考和做事的經驗。

因為提示裡明確要求用比喻和實例穿插，不要寫成枯燥的技術文件，實際產出的品質可以直接當作新人入職資料使用。

生成程式碼不是終點，要讓它解釋

這是 Claude Code 的作者 Boris Cherny 親自分享的技巧。在 /config 裡開啟 Explanatory 輸出風格，代理每次改程式碼都會同時說明為什麼這樣改。Learning 風格更進一步，會在某些環節暫停，讓你自己動手寫看看。

遇到陌生的程式碼庫，可以請代理做成 HTML 簡報，像翻投影片一樣瀏覽。如果建立重複學習的 skill，還能讓代理根據你解釋的內容找出理解缺口並補上。

• Before：生成程式碼、確認能跑、結構沒搞懂
• After：生成程式碼、要求視覺化加說明、結構內化、下個專案直接應用

只讓 AI 做事的階段已經過去了。做完之後要視覺化、要讓它解釋。在 AI 代勞一切的時代，人該做的事情是理解。視覺是人類處理資訊最快的方式之一，把 AI 的產出接上人的視覺，能力的維度就不一樣了。