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

📝

AI 编码代理输出长篇文字几乎没法读？开源技能 show-me 通过提示模型用组件树、调用栈、图表、伪代码、类型签名和 diff 语法等视觉形式代替大段文字，让开发者一眼看懂 Agent 在做什么。

原文：开源技能show-me：让AI编码输出一目了然｜作者：dexhorthy

内容摘要与导读： 本文针对 AI 编码代理输出长篇文字、难以阅读的痛点，提出了一个名为「show-me」的开源技能。它通过提示模型使用组件树、调用栈、图表、文件布局、伪代码、类型签名、diff 语法和 HTML 模拟等简洁直观的视觉形式，来替代冗长的文本解释，从而提升开发者理解 AI 生成内容的速度和效率。文章详细展示了这些可视化技巧在程序设计、代码审查、重构等场景中的应用示例，并提供了简单的安装命令。其核心理念是：既然人类视觉皮层擅长处理丰富视觉信息，那么 AI 工具的输出形式也应适配人类大脑的认知优势。

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

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

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

编码 Agent 的输出几乎没法读

reddit 前 CEO、Mario Zechner（pi 的创造者）、来自 Replicas 的 Connor……都在吐槽同一件事：编码 Agent 的输出几乎没法读。

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

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

我真的受够了。
Agent 纸面上变得更聪明了，但使用体验在这个维度上却明显变差了。
人们曾经喜欢 Claude 的那些东西——它的声音、它的个性、它的「灵魂」——在 RL 地牢里被冲刷殆尽了。
sol 稍微没那么尴尬，但仍然经常用大段大段的术语砸过来，让人看得两眼发直。
这是我最近收到的一个回复。这种事一天发生好几次。

我的提议：show me

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

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

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

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

1
2
3

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 讲解非常棒。

去试试吧

1	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 助手转译，登链社区（learnblockchain.cn）发布。