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 依賴，伺服器端也能運行。
• 編輯器主題聯動: 透過 Shiki 整合，可將 VS Code 主題直接套用到圖表上。

做完工作還要寫解說書

Zara Zhang 分享的 “Claude Teacher” 提示詞，做法是在 CLAUDE.md 中加入一段指示。每次完成專案時，建立一個 FOR[名字].md 檔案，用淺白的語言整理整個專案。

這個做法有效的原因很簡單。AI 代理在撰寫程式碼的過程中，已經掌握了架構和每個決策的理由。我們只是明確要求它把這些資訊輸出而已。

• 架構連結: 說明技術架構與程式碼庫結構之間的對應關係。
• 決策理由: 記錄所用的技術棧以及為何選擇該技術。
• 實戰教訓: 整理工作中遇到的 bug、解決過程，以及日後應避開的陷阱。
• 工程師思維: 記下優秀工程師如何思考和工作的心得。

因為明確要求不要寫成枯燥的技術文件，而是加入比喻和故事的可讀性文章，實際產出的品質可以直接用作新人入職資料。

不只生成程式碼，還要讓它解釋

這是 Claude Code 的創建者 Boris Cherny 親自分享的建議。在 /config 中開啟 Explanatory 輸出風格，每次修改程式碼時都會附帶解釋為何這樣做。Learning 風格則更進一步，會在部分環節暫停並要求你親自動手寫程式碼。

對於不熟悉的程式碼庫，可以要求生成 HTML 簡報，像瀏覽演示文稿一樣快速掌握。建立反覆學習技能後，還能形成一種結構：你先解釋自己的理解，再由代理填補空白。

• Before: 生成程式碼、確認運作、但不理解結構
• After: 生成程式碼、請求視覺化加解釋、掌握結構、應用到下一個專案

讓 AI 代理只管做事的階段已經過去了。做完之後，還要讓它視覺化並加以解釋。在 AI 代替一切的時代，人類該做的事是理解。視覺是人類處理資訊最快的方式之一，把人類的視覺能力疊加在 AI 之上，能力的維度就截然不同了。