/show-me: representaciones visuales compactas para agentes de programación

tl;dr: haz que tu agente converse visualmente en lugar de con muros de prosa.

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

Más ligero y rápido que el HTML, y suficientemente bueno para la mayoría de los problemas típicos del desarrollo.

Los agentes de código son prácticamente ilegibles

El ex CEO de Reddit:

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

Mario Zechner, creador de pi:

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

Connor de Replicas:

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

Dillon Mulroy incluso creó un skill *popularizó un skill de @backnotprop para pedirle al modelo que simplifique el lenguaje.

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

El contenido es:

Reformula tu último mensaje. Deja de usar jerga y habla con coherencia. Exprésalo de forma más simple y concisa, como un humano hablando con otro.

estoy tan harto de esto

los agentes se volvieron más inteligentes sobre el papel, pero la experiencia de usarlos empeoró notablemente en este aspecto

lo que la gente solía amar de Claude - su voz, su personalidad, su "alma" - ha sido eliminado en la mazmorra del RL

Sol es algo menos cringe, pero aun así nos lanza regularmente muros de jerga que hacen que se te pongan los ojos vidriosos

esta es una respuesta que recibí recientemente. esto pasa varias veces al día

mi propuesta: show me

Hemos estado jugando con herramientas internas para mejorar esto, específicamente para programación, y publicándolas en un skill que llamamos show-me.

Ya está disponible en humanlayer hoy mismo, y si lo quieres en cualquier otro agente de código, puedes obtenerlo aquí:

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

O consigue la versión integrada de humanlayer que incluye HTML en línea y diagramas de primera clase:

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

Si alguna vez viste la charla de Coda Hale sobre intuición vs. atención en sistemas de infraestructura, esto está algo inspirado en ella:

• analizar información es difícil y agotador
• tu corteza visual fue entrenada durante millones de años para procesar información visual rica sin esfuerzo
• optimiza las herramientas en consecuencia

Así como un hacha debe encajar en la mano humana para ser útil, el software debe encajar en la mente humana para ser útil

/show-me insta al agente a usar imágenes concisas para explicar lo que está pasando, en lugar de muros de prosa.

Esto es muy bueno para el diseño de programas - la fase que muchos se saltan hoy en día, pero que creo que es esencial. Deberías estar discutiendo la forma del código (los tipos, las firmas, las pilas de llamadas) antes de que los agentes se pongan a escribirlo.

Las mismas técnicas también se pueden usar para explorar diffs grandes a posteriori y entender en qué profundizar durante la revisión.

Qué incluye

árboles de componentes

La misma idea en el frontend, manteniendo los state hooks y los límites de módulos que importan y omitiendo todo lo demás.

Compartí esto en Twitter en diciembre de 2025:

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

pilas de llamadas

Para trabajo de orquestación o flujo de control, o cualquier problema tipo backend, Dillon nos dio esta forma de "pila de llamadas".

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

Tanishq incluso escribió una herramienta para calcularlas directamente desde el AST

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

diagramas

Un clásico. Si tu interfaz de chat soporta mermaid en línea, estos pueden ayudar mucho. (A veces siguen siendo basura, pero suele ser mejor que leer palabras)

Hay muchas opciones aquí. nos gustan más los diagramas de estados y los diagramas de secuencia.

estructuras de archivos

Un árbol de archivos poco profundo, con una línea de responsabilidad por entrada. Bueno para saber "dónde vive esto" y para acotar un refactor.

pseudocódigo

Especialmente para temas algorítmicos, el pseudocódigo puede ser más conciso.

tipos y firmas

La forma del código antes de que exista - lo que es demasiado interno para un documento de arquitectura, pero donde un agente aún puede equivocarse.

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

sintaxis de diff

También puedes usar sintaxis de diff para esto, si la mayor parte del contenido no cambia:

Para un cambio de componente:

Para un cambio en el árbol de llamadas:

Para un cambio en la estructura de archivos:

Y para un cambio de estado o flujo de control, donde la forma es pseudocódigo en lugar de código real:

maquetas HTML

HTML ha reemplazado a figma en gran parte de nuestro trabajo de prototipado. (para ser honesto, nunca se me dio muy bien figma de todos modos)

diagramas HTML

A veces lo que necesitas es un diagrama o una explicación visual.

En humanlayer permitimos que el agente incluya HTML directamente en las respuestas del asistente.

Pero también puedes simplemente abrirlo en tu navegador.

otras inspiraciones

También quiero hacer un guiño a @mattpocockuk por los explicadores HTML que genera su skill /teach - muy bueno.

pruébalo

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

Después de instalar el skill, invoca /show-me o pídele al agente que use el skill show-me. Apúntalo a una ruta, servicio, funcionalidad, pull request o tema actual, o úsalo simplemente para pedirle al modelo que reformule una pregunta o afirmación.

esto es demasiado contenido. muéstramelo.

o

/show-me como explicación HTML

¡Cuéntanos qué te parece! Etiqueta a @humanlayer_dev o a @dexhorthy con tus resultados o con lo que personalizaste o añadiste, ¡y hagamos una lluvia de ideas!

GIF