开源技能show-me：让AI编码输出一目了然

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

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

比 HTML 更轻量、更快，对大多数开发类问题来说已经足够好了。

编码 Agent 的输出几乎没法读

reddit 前 CEO：

Mario Zechner，pi 的创造者：

来自 Replicas 的 Connor：

Dillon Mulroy 甚至做了一个 Skill——推广了来自 @backnotprop 的一个 Skill——用来让模型简化语言。

内容是：

重新表述你上一条消息。不要再用行话，说话要有条理。 用更简单、更简洁的方式说出来，就像人与人之间正常交谈一样。

我真的受够了

Agent 纸面上变得更聪明了，但使用体验在这个维度上却明显变差了

人们曾经喜欢 Claude 的那些东西——它的声音、它的个性、它的“灵魂”——在 RL 地牢里被冲刷殆尽了

sol 稍微没那么尴尬，但仍然经常用大段大段的术语砸过来，让人看得两眼发直

这是我最近收到的一个回复。这种事一天发生好几次

我的提议：show me

我们一直在用内部工具来改善这一点，尤其是针对编码场景，并把它们发布在一个我们称之为 show-me 的 Skill 中。

它如今已经在 humanlayer 中上线了，如果你想在其它任何编码 Agent 中使用它，可以在这里获取：

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

或者，获取内置的 humanlayer 版本，它把内联 HTML 和图表作为一等公民：

brew trust humanlayer/humanlayer
brew tap humanlayer/humanlayer
brew install humanlayer

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

分析信息是困难的、令人精疲力竭的

你的视觉皮层经过数百万年的进化，可以毫不费力地处理丰富的视觉信息

工具应该据此优化

正如一把斧头必须贴合人手才能有用，软件也必须贴合人脑才能有用

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

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

同样的技术也可以用于事后探索大型 diff，以了解在审查时应该深入挖掘什么。

里面有什么

组件树

前端也是同样的思路，只保留重要的 state hooks 和模块边界，其余一切省略。

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

dex (@dexhorthy) · 2025年12月11日

我一直在提示 claude 在重构组件、消除复杂 state 和过多 useEffects 时给我画出这样的组件树。在写实际计划之前，这对于与 Agent（以及与团队）在思路上对齐超级有帮助

调用栈

对于编排或控制流工作，或者任何后端类的问题，dillon 给了我们这种“调用栈”的形式。

Dillon Mulroy (@dillon_mulroy) · 5月28日

我的“计划”在很大程度上看起来像伪代码，主要由类型/接口、它们如何组合以及它们的边界组成

我最近开始把调用栈也放进去——在实现时对我和 Agent 都很有帮助

Tanishq 甚至写了一个工具，可以直接从 AST 计算出它们

Tanishq (tk) (@tanishqk) · 8月8日

调用栈 diff 彻底改变了我阅读 markdown 计划的方式

谢谢你 @dillon_mulroy

图表

经典之作。如果你的聊天界面支持内联 mermaid，这些会很有帮助。（有时候它们仍然是垃圾内容，但通常还是比读文字好）

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

文件布局

一个浅层的文件树，每个条目一行职责说明。很适合回答“这东西放在哪里”，也适合界定重构范围。

伪代码

尤其是对于算法类内容，伪代码可以更简洁。

类型与签名

在代码存在之前先勾勒出它的形态——这些内容对架构文档来说太偏内部，但 Agent 仍然可能搞错。

interface Item {
  id: ItemId
  parentId: ItemId | null
  // ...
}

interface Cursor {
  position: ItemId
  direction: 'up' | 'down'
  // ...
}

resolveTarget(items: Item[], cursor: Cursor) -> ItemId | null

Diff 语法

如果大部分内容没有变化，你也可以用 diff 语法来做这件事：

对于组件变更：

对于调用树变更：

对于文件布局变更：

对于状态或控制流变更，当形态是伪代码而非真实代码时：

HTML 原型

在我们很多原型设计工作中，HTML 已经取代了 figma。（说实话，反正我也从来对 figma 不怎么熟练）

HTML 图表

有时候你需要的正是一个图表或解释说明。

在 humanlayer 中，我们允许 Agent 直接在助手回复中包含 HTML。

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

其他灵感

我还想向 @mattpocockuk 致敬，他的 /teach Skill 生成的 HTML 讲解非常棒。

去试试吧

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

安装 Skill 后，调用 /show-me 或让 Agent 使用 show-me Skill。把它指向一个路由、服务、功能、Pull Request 或当前话题，或者干脆用它来让模型重新表述一个问题或陈述。

内容太多了。给我展示一下。

或者

/show-me 以 HTML 讲解的形式

告诉我们你的想法！用 @humanlayer_dev 或 @dexhorthy 标签分享你的结果，或你定制/添加的内容，让我们一起碰撞！

• 原文链接： x.com/dexhorthy/status/2...
• 鸿途知科网 AI 助手，为大家转译优秀英文文章，如有翻译不通的地方，还请包涵～