/show-me：為編碼 Agent 提供精簡的視覺化呈現

tl;dr — 讓你的 Agent 用視覺化進行對話，而不是丟出一整面文字牆。

1npx skills add humanlayer/skills --skill show-me

比 HTML 更輕量、更快速，對大多數開發工作類型的問題來說已經綽綽有餘。

Coding Agent 的輸出幾乎讓人看不懂

reddit 前執行長：

https://x.com/yishan/status/2086534431075098628

Mario Zechner，pi 的創作者：

https://x.com/badlogicgames/status/2087068077309542889

來自 Replicas 的 Connor：

https://x.com/connortbot/status/2081881377147109413

Dillon Mulroy 甚至 做了一個技能 推廣了來自 [@backnotprop](https://x.com/@backnotprop) 的技能，用來要求模型簡化語言。

https://x.com/dillon_mulroy/status/2079238358358778142

內容如下：

重新表述你上一則訊息。不要再使用術語，把話好好說清楚。 說得更簡單、更精簡，就像一個普通人在跟另一個人說話那樣。

我真的受夠了

Agent 在紙面上變得更聰明了，但在這個面向上，使用它們的體驗卻明顯變得更糟。

人們過去喜愛 Claude 的地方——它的聲音、它的個性、它的「靈魂」——都在 RL 煉獄裡被沖洗殆盡。

sol 稍微沒那麼尬，但還是三不五時丟給我們一整面術語牆，讓人不自覺目光呆滯。

這是我最近收到的一次回覆，這種事一天會發生好幾次。

我的提案：show me

我們一直在玩一些內部工具，想讓這件事變得更好，特別是針對 coding，並把它們整理成一個我們稱之為 show-me 的技能。

它今天已經在 humanlayer 上線了。如果你想在其它任何 coding agent 中使用它，可以在這裡取得：

1npx skills add humanlayer/skills --skill show-me

或者，取得 humanlayer 內建版本，它把 inline HTML 和圖表視為一級公民：

1brew trust humanlayer/humanlayer
2brew tap humanlayer/humanlayer
3brew install humanlayer

如果你看過 coda hale 談基礎設施系統中直覺與注意力的演講，我們的作法多少受到它啟發：

• 分析資訊既困難又耗神
• 你的視覺皮層經過數百萬年的演化，能毫不費力地處理豐富的視覺資訊
• 那就讓工具往這個方向優化

就像斧頭必須合手才有用，軟體也必須契合人類心智才有用。

/show-me 會提示 Agent 用簡潔的視覺化來解釋目前發生的事，而不是丟出一整面文字牆。

這對程式設計特別有幫助——這是現在很多人跳過的階段，但我認為它不可或缺。你應該在 Agent 開始動手寫程式之前，先討論程式碼的形狀（型別、簽名、呼叫堆疊）。

同樣的技巧也可以用來事後瀏覽大型 diff，了解在 review 時該深入挖掘哪些地方。

裡面有什麼

元件樹

前端也是同樣的想法，把重要的 state hooks 和模組邊界保留下來，其它全部省略。

我在 2025 年 12 月把這張圖分享到 twitter：

https://x.com/dexhorthy/status/1998968236617199803

呼叫堆疊

對於 orchestration 或 control-flow 類的工作，或任何後端型的問題，dillon 給了我們這種「call stack」樣式。

https://x.com/dillon_mulroy/status/2059985696148849025

Tanishq 甚至寫了一個工具，可以直接從 AST 算出這些呼叫堆疊。

https://x.com/tanishqk/status/2085800689129935342

圖表

經典款。如果你的聊天介面支援 inline mermaid，這些圖表會很有幫助。（有時候它們仍然是垃圾，但通常比讀文字好）

這方面的選項很多，我們最喜歡的是 state diagrams 和 sequence diagrams。

檔案結構

一個淺層的檔案樹，每個條目一行職責說明。很適合回答「這東西住在哪裡」，也很適合界定 refactor 的範圍。

虛擬碼

特別是對演算法類的東西，虛擬碼往往更簡潔。

型別與簽名

程式碼還未誕生前的形狀——這些東西對架構文件來說太細節了，但 Agent 仍然可能搞錯。

1interface Item {
2  id: ItemId
3  parentId: ItemId | null
4  // ...
5}
6
7interface Cursor {
8  position: ItemId
9  direction: 'up' | 'down'
10  // ...
11}
12
13resolveTarget(items: Item[], cursor: Cursor) -> ItemId | null

Diff 語法

如果大部分內容都沒有改變，你也可以用 diff 語法來呈現：

如果是元件變更：

如果是呼叫樹變更：

如果是檔案結構變更：

如果是狀態或控制流程變更，而且形狀是虛擬碼而不是真實程式碼：

HTML 原型

對我們很多原型製作工作來說，HTML 已經取代了 figma。（老實說，我本來就不是很會用 figma）

HTML 圖表

有時候，你需要的正是一張圖表或一段解說。

在 humanlayer 中，我們讓 Agent 可以直接在 assistant 回覆中嵌入 HTML。

但你也完全可以只在瀏覽器裡打開它。

其它靈感

我也想向 @mattpocockuk 脫帽致敬，他的 /teach 技能會生成 HTML 解說——非常棒。

快去試試看

1npx skills add humanlayer/skills --skill show-me

安裝技能之後，呼叫 /show-me 或請 Agent 使用 show-me 技能。把它指向某個 route、service、feature、pull request 或目前的主題，也可以直接請模型重新表述某個問題或陳述。

內容太多了。show me。

或者

/show-me 用 HTML 解說的形式呈現

快來告訴我們你的想法！把你的成果或你客製化／新增的東西 tag @humanlayer_dev 或 @dexhorthy，一起來激盪一下！

GIF