/show-me：为编码 Agent 提供紧凑的视觉化呈现

tl;dr 让你的 Agent 用视觉方式交流，而不是大段大段的文字。

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

比 HTML 更轻量、更快，对大多数开发工作场景来说已经够用了。

编码 Agent 的输出基本没法读

reddit 前 CEO：

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

Mario Zechner，pi 的创造者：

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

Connor，来自 Replicas：

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

我们一直在用一些内部工具来改善这个问题，尤其是针对编码场景，我们把它们发布成了一个叫 show-me 的技能。

它现在已经上线 humanlayer。如果你想在其他编码 Agent 里使用它，可以在这里获取：

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

或者，获取内置的 humanlayer 版本，它原生支持内联 HTML 和图表：

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

如果你看过 coda hale 关于基础设施系统中直觉与注意力的演讲，这个想法多少受到它的启发：

• 分析信息是困难且耗神的
• 你的视觉皮层经过数百万年的进化，可以毫不费力地处理丰富的视觉信息
• 所以工具应该顺着这个来优化

就像斧头必须贴合人的手才好用一样，软件必须贴合人的心智才好用

/show-me 会提示 Agent 用简洁的视觉方式解释正在发生的事情，而不是大段大段的文字。

这对程序设计特别有用——这是现在很多人跳过的阶段，但我认为必不可少。你应该在 Agent 开始写代码之前，先讨论代码的形态（类型、签名、调用栈）。

同样的技术也可以用于事后浏览大型 diff，弄清楚评审时应该深入看哪些内容。

里面有什么

组件树

前端也是同样的思路，只保留关键的状态 hooks 和模块边界，其余的一律省略。

这个我在 2025 年 12 月分享到 twitter 上过：

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

调用栈

对于编排、控制流或任何后端类问题，dillon 给了我们这种"调用栈"的形态。

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

Tanishq 甚至写了一个工具，直接从 AST 计算调用栈。

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

图表

经典款。如果你的聊天界面支持内联 mermaid，这些会很有帮助。（有时候还是比较烂，但通常比读文字强）

选择很多。我们最喜欢状态图和时序图。

文件结构

一个浅层的文件树，每个条目一行职责说明。适合回答"这段代码放哪儿"，也适合用来规划重构范围。

伪代码

尤其是算法相关的内容，伪代码可以更简洁。

类型和签名

代码还不存在时的形态——这些东西对架构文档来说太细了，但 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 直接在助手的回复中包含 HTML。

不过你也可以直接在浏览器里打开它。

其他灵感

我还想特别感谢 @mattpocockuk，他的 /teach 技能生成的 HTML 图解非常棒。

去试试吧

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

安装技能后，调用 /show-me 或让 Agent 使用 show-me 技能。把它指向一个路由、服务、功能、pull request 或当前主题，或者直接用它让模型重新表述一个问题或陈述。

内容太多了。show me。

或者

/show-me 以 HTML 图解呈现

欢迎告诉我们你的想法！艾特 @humanlayer_dev 或 @dexhorthy，晒出你的成果或者你自定义/新增的内容，一起交流碰撞吧！

GIF