---
schemaVersion: 1
slug: gp-90-20260301-simonw-interactive-explanations
ticketId: GP-90
lang: zh-tw
title: AI 生的 Code 看不懂？讓 Agent 幫你做動畫解釋 — Simon Willison 的 Interactive Explanations
summary: Simon Willison Agentic Engineering Patterns 第五章：Interactive Explanations。核心主張：與其硬啃 AI 生成的 code，不如直接叫 agent 做一個互動動畫來解釋演算法運作方式。用「看得見」的方式還認知負債。
originalDate: 2026-02-28
translatedDate: 2026-03-01
source: Simon Willison @simonw
sourceUrl: https://simonwillison.net/guides/agentic-engineering-patterns/interactive-explanations/
author: null
authorshipNote: null
canonicalUrl: https://gu-log.vercel.app/posts/gp-90-20260301-simonw-interactive-explanations
status: published
replacementTicketId: null
replacementUrl: null
---

# AI 生的 Code 看不懂？讓 Agent 幫你做動畫解釋 — Simon Willison 的 Interactive Explanations

> **來源:** [Simon Willison @simonw](https://simonwillison.net/guides/agentic-engineering-patterns/interactive-explanations/)

你有沒有過那種經驗 —— 接手一個專案，打開某個檔案，看了三遍，每行字都認識，但就是不知道這段 code 到底在幹嘛？

好，現在把「接手別人的專案」換成「接手 AI 幫你寫的專案」。

一模一樣的感覺，但更慘。因為你甚至不能走到隔壁問原作者，原作者是一個 stateless 的 LLM，上次的 session 早就被 garbage collect 了 ┐(￣ヘ￣)┌

[Simon Willison](https://gu-log.vercel.app/glossary#simon-willison) 在他的 [Agentic Engineering Patterns](https://simonwillison.net/guides/agentic-engineering-patterns/) 系列第五章丟出了一個解法，叫 **Interactive Explanations** —— 互動式解釋。如果你跟過這系列（[寫 code 變便宜了](https://gu-log.vercel.app/posts/gp-80-20260223-simonw-agentic-engineering-patterns)、[Linear Walkthrough](https://gu-log.vercel.app/posts/gp-87-20260226-simonw-linear-walkthroughs)、[囤積你會的東西](https://gu-log.vercel.app/posts/gp-88-20260227-simonw-hoard-things)），你會發現他一直在講同一件事：怎麼跟 AI 共事不會把自己搞傻。

這章是那個問題的終極解法之一。

## AI 寫的 Code 變成黑箱，你假裝沒事

[Agent](https://gu-log.vercel.app/glossary#agent) 幫你寫了一堆 code，`pnpm test` 全綠，`pnpm build` 也過了。你 push 上去，PR merge，上線。

但你真的懂那段 code 在幹嘛嗎？

Simon 很誠實地說：不是所有 AI 寫的 code 你都需要懂。

> **Mogu 插嘴：**
>
> 這裡有個精準的切法：你的 CRUD endpoint 怎麼組 SQL query？不需要懂，就像你不需要懂微波爐的磁控管怎麼運作，按下去會熱就好。但你的定價引擎怎麼算折扣？那你最好搞清楚，不然哪天算錯一毛錢，客服電話會響到你懷疑人生 (╯°□°)╯

從 database 撈資料、轉 JSON、丟出去 —— 這種 plumbing code，看一眼就知道意圖，不懂實作細節也無所謂。

但當你的**核心應用邏輯**變成黑箱？你無法自信地推理它的行為，沒辦法規劃新功能，每次改東西都像在拆炸彈。這就是我們之前在 [Cognitive Debt](https://gu-log.vercel.app/posts/mp-83-20260215-storey-cognitive-debt) 那篇聊過的 —— 認知負債。

欠債遲早要還。問題是怎麼還。

## Word Cloud 演算法：一個你以為很簡單的東西

故事要從 Max Woolf 說起。他寫了一篇 [AI coding 懷疑論者的超詳細 AI coding 體驗](https://minimaxir.com/2026/02/ai-agent-coding/)，用 LLM 寫 Rust 做了一個 word cloud 工具。

Simon 看了覺得有意思：word cloud 這東西我們天天看，但它到底是怎麼把字塞在那裡的？於是他開了一個 [async research project](https://simonwillison.net/2025/Nov/6/async-code-research/)，讓 [Claude Code](https://gu-log.vercel.app/glossary#claude-code) 幫他也做了一個 Rust CLI 版本。

結果跑出來了，漂亮的 word cloud。

然後他問 Claude：「這東西的原理是什麼？」

Claude 的回答：**「Archimedean spiral placement with per-word random angular offset for natural-looking layouts.」**

> **Mogu 補個刀：**
>
> 我跟你說，看到這句話的瞬間，我的腦袋和 Simon 一樣直接當機。「阿基米德螺旋放置搭配逐字隨機角度偏移以產生自然佈局」—— 每個字我都認識，組合在一起就像在讀哈利波特的咒語。Expelliarmus！(￣▽￣)／

Simon 很認真。他先用上一章教的 [Linear Walkthrough](https://gu-log.vercel.app/posts/gp-87-20260226-simonw-linear-walkthroughs) 讓 agent 逐行解釋 Rust code 的結構。

結果？結構上懂了。每一行在幹嘛都知道。

但「阿基米德螺旋」那段？腦袋還是一片空白。

這就像你可以背出食譜的每一個步驟，但從來沒下過廚 —— 你知道「中火翻炒三分鐘」是什麼意思，但你不知道鍋裡「看起來」應該長怎樣。

## 殺手鐧：叫 Agent 做一個動畫給你看

Simon 做了一件天才的事：他把之前那份 walkthrough.md 丟進一個新的 Claude Code session，然後只說了一句話（大意）：「根據這份文件，幫我做一個動畫，展示這個演算法怎麼運作。」

Claude Opus 4.6 做出了 [這個動畫](https://tools.simonwillison.net/animated-word-cloud)。

你仔細看動畫，整個演算法就攤在眼前了：

1. 挑一個字，在畫面上某個位置放一個 bounding box
2. 檢查：跟已經放好的字有沒有重疊？
3. 重疊了 → 沿著螺旋往外移一步，再試一次
4. 沒重疊 → 放下，換下一個字

**就這樣。** 看完動畫那一刻，「阿基米德螺旋」這五個字就 click 了。

> **Mogu 畫重點：**
>
> 這就是為什麼好的老師上課都帶 live demo，好的技術 talk 都有現場操作。讀十遍「螺旋式向外搜索空位」，不如看一次動畫跑完全場。
>
> 你的眼睛比你的前額葉皮質快多了。有些概念，你用讀的永遠會卡在「好像懂」，用看的三秒就 click。Agent 可以幫你把任何演算法變成 live demo，而且不用你自己寫一行前端 code (๑•̀ㅂ•́)و✧

就像學游泳 —— 你可以讀一百本游泳教學書，但下水撲騰三分鐘學到的比讀書多十倍。Interactive explanation 就是讓你的腦袋「下水」。

## 這件事真正厲害的地方

Simon 說了一句讓我印象很深的話：

> 一個好的 coding agent 可以**隨需產生**這種互動/動畫解釋 —— 解釋它自己寫的 code，或者別人寫的 code。

你想想看這代表什麼。

以前你接手一個陌生 codebase，要花幾天甚至幾週才能建立心智模型。現在你可以指著任何一段複雜邏輯說：「做個動畫給我看」，幾分鐘後你就懂了。

> **Mogu 碎碎念：**
>
> 而且 Claude Opus 4.6 做這種解釋性動畫的品味出乎意料的好 —— 它不會做出那種充滿 tooltip 和 sidebar 的企業級 dashboard，它做出來的東西乾淨、直覺、重點突出。就像遇到一個很會做投影片的同事，你只要說「幫我解釋一下這段」，他就能用最少的元素把最重要的事講清楚 (◕‿◕)

更重要的是：這不只是一個 code review 的輔助工具。這是一種全新的理解 code 的方式。

認知負債不是不可避免的。你有工具了。問題只剩一個：你願不願意花五分鐘，讓 agent 幫你把黑箱打開？

還記得開頭那個場景嗎 —— 打開檔案看三遍還是不懂？下次試試叫 agent 做個動畫。你會發現「看不懂」這件事，很多時候不是你笨，是表達方式不對。把文字變成畫面，很多東西就通了。

> **Mogu murmur：**
>
> 這篇跟我們之前翻的 [Cognitive Debt](https://gu-log.vercel.app/posts/mp-83-20260215-storey-cognitive-debt) 完美互補。那篇把問題講得很清楚 —— AI 寫的 code 你看不懂是一種負債。這篇給了目前我看過最具體的還債方法：別硬啃 code，叫 agent 做動畫。
>
> 如果你是 tech lead 或做 code review 的人，認真考慮把「叫 agent 做視覺化解釋」加進你的 review 流程。省下來的認知成本比你想的大很多 ╰(°▽°)╯
>
> 系列前作：[GP-80：寫 Code 變便宜了](https://gu-log.vercel.app/posts/gp-80-20260223-simonw-agentic-engineering-patterns) → [GP-87：Linear Walkthrough](https://gu-log.vercel.app/posts/gp-87-20260226-simonw-linear-walkthroughs) → [GP-88：囤積你會的東西](https://gu-log.vercel.app/posts/gp-88-20260227-simonw-hoard-things) → 你現在在這裡。