/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 HTML, lo suficientemente bueno para la mayoría de los problemas de 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 hizo una skill *popularizó una 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. Dilo de forma más simple y concisa, como un humano hablando con otro.

Ya estoy 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" - se ha esfumado en la mazmorra del RL.

Sol es un poco menos cringe, pero aún así nos golpea regularmente con muros de jerga que hacen que se te pongan los ojos vidriosos.

Aquí hay 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 codificación, y las publicamos en una skill que llamamos show-me.

Ya está disponible en humanlayer, 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á un poco inspirado en ella:

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

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

/show-me le pide al agente que use imágenes concisas para explicar lo que está pasando, en lugar de muros de prosa.

Esto es muy bueno para el diseño de programa - 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, los stacks 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, conservando los hooks de estado y los límites de módulos que importan, y dejando fuera todo lo demás.

Compartí esto en twitter en diciembre de 2025:

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

Stacks de llamadas

Para trabajo de orquestación o flujo de control, o cualquier problema típico de backend, dillon nos dio esta forma de "call stack".

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

Tanishq incluso escribió una herramienta para calcularlos 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í. A nosotros nos gustan más los diagramas de estado y los diagramas de secuencia.

Estructura de archivos

Un árbol de archivos poco profundo, una línea de responsabilidad por entrada. Bueno para el "¿dónde vive esto?" y para definir el alcance de un refactor.

Pseudocódigo

Especialmente para cosas algorítmicas, 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 que un agente aún puede hacer mal.

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 de flujo de control, donde la forma es pseudocódigo en lugar de código real:

Mockups HTML

HTML ha reemplazado a Figma para gran parte de nuestro trabajo de prototipado. (la verdad, nunca fui muy hábil con 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.

Otra inspiración

También quiero reconocer a @mattpocockuk por las explicaciones HTML que genera su skill /teach - muy buenas.

Pruébalo

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

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

esto es demasiado contenido. muéstramelo.

o

/show-me como una explicación HTML

¡Cuéntanos qué te parece! Etiqueta a @humanlayer_dev o a @dexhorthy con tus resultados o con lo que personalizaste/agregaste, ¡y hablemos!

GIF