Resumindo: faça seu agente conversar visualmente em vez de usar paredes de prosa.
1npx skills add humanlayer/skills --skill show-me
Mais leve e rápido que HTML, bom o suficiente para a maioria dos problemas típicos do trabalho de desenvolvimento.
Agentes de codificação são praticamente ilegíveis
O ex-CEO do reddit:
https://x.com/yishan/status/2086534431075098628
Mario Zechner, criador do pi:
https://x.com/badlogicgames/status/2087068077309542889
Connor, da Replicas:
https://x.com/connortbot/status/2081881377147109413
Dillon Mulroy até criou uma skill popularizou uma skill do [@backnotprop](https://x.com/@backnotprop) para pedir ao modelo que simplificasse a linguagem.
https://x.com/dillon_mulroy/status/2079238358358778142
O conteúdo é:
Reformule sua última mensagem. Pare de usar jargões e fale de forma coerente. Diga de forma mais simples e concisa, como um humano falando com outro.
estou tão de saco cheio disso
os agentes ficaram mais inteligentes no papel, mas a experiência de usá-los piorou visivelmente nesse aspecto
a coisa que as pessoas costumavam amar no claude — sua voz, sua personalidade, sua "alma" — foi eliminada no calabouço do RL
o sol é um pouco menos cringe, mas ainda nos atinge regularmente com paredes de jargões que fazem os olhos ficarem vidrados
aqui está uma resposta que recebi recentemente. isso acontece várias vezes ao dia
minha proposta: show me
A gente tem brincado com ferramentas internas para melhorar isso, especificamente para codificação, e as publicamos em uma skill que chamamos de show-me.
Ela está disponível no humanlayer hoje e, se você quiser usá-la em qualquer outro agente de codificação, você pode obtê-la aqui:
1npx skills add humanlayer/skills --skill show-me
Ou, se preferir, instale a versão integrada do humanlayer, que inclui HTML embutido e diagramas como recursos de primeira classe:
1brew trust humanlayer/humanlayer2brew tap humanlayer/humanlayer3brew install humanlayer
Se você já assistiu à palestra do coda hale sobre intuição versus atenção em sistemas de infraestrutura, isso é um pouco inspirado nela:
- analisar informação é difícil e exaustivo
- seu córtex visual foi treinado ao longo de milhões de anos para processar informações visuais ricas sem esforço
- otimize as ferramentas de acordo
Assim como um machado precisa se encaixar na mão humana para ser útil, o software precisa se encaixar na mente humana para ser útil.
O /show-me instrui o agente a usar recursos visuais concisos para explicar o que está acontecendo, em vez de paredes de prosa.
Isso é realmente ótimo para design de programa — a fase que muita gente pula hoje em dia, mas que considero essencial. Você deve discutir o formato do código (os tipos, as assinaturas, as pilhas de chamadas) antes de os agentes começarem a escrevê-lo.
As mesmas técnicas também podem ser usadas para explorar grandes diffs post-hoc e entender no que investigar durante a revisão.
O que tem dentro
árvores de componentes
A mesma ideia no frontend, mantendo os hooks de estado e os limites de módulo que importam, e deixando todo o resto de fora.
Compartilhei este exemplo no twitter em dezembro de 2025:
https://x.com/dexhorthy/status/1998968236617199803
pilhas de chamadas
Para trabalho de orquestração ou fluxo de controle, ou simplesmente qualquer problema típico de backend, o dillon nos deu esse formato de "pilha de chamadas".
https://x.com/dillon_mulroy/status/2059985696148849025
O Tanishq até escreveu uma ferramenta para calculá-las diretamente da AST
https://x.com/tanishqk/status/2085800689129935342
diagramas
Um clássico. Se a sua interface de chat suporta mermaid embutido, eles podem ajudar bastante. (Às vezes ainda são porcaria, mas geralmente é melhor do que ler palavras)
Tem muitas opções aqui. Nós gostamos mais de diagramas de estado e diagramas de sequência.
layouts de arquivos
Uma árvore de arquivos rasa, com uma linha de responsabilidade por entrada. Ótima para saber "onde isso mora" e para definir o escopo de uma refatoração.
pseudocódigo
Especialmente para coisas algorítmicas, o pseudocódigo pode ser mais conciso.
tipos e assinaturas
O formato do código antes de qualquer parte dele existir — aquilo que é interno demais para um documento de arquitetura, mas que um agente ainda assim pode errar.
1interface Item {2 id: ItemId3 parentId: ItemId | null4 // ...5}67interface Cursor {8 position: ItemId9 direction: 'up' | 'down'10 // ...11}1213resolveTarget(items: Item[], cursor: Cursor) -> ItemId | null
sintaxe de diff
Você também pode usar sintaxe de diff para isso, se a maior parte do conteúdo não mudou:
Para uma mudança de componente:
Para uma mudança na árvore de chamadas:
Para uma mudança no layout de arquivos:
E para uma mudança de estado ou de fluxo de controle, quando o formato é pseudocódigo em vez de código real:
mockups em HTML
O HTML substituiu o figma em grande parte do nosso trabalho de prototipagem. (pra ser sincero, eu nunca fui muito bom com figma mesmo)
diagramas em HTML
Às vezes, o que você precisa é de um diagrama ou de uma explicação visual.
No humanlayer, deixamos o agente incluir HTML diretamente nas respostas do assistente.
Mas você também pode simplesmente abri-lo no seu navegador.
outras inspirações
Também quero tirar o chapéu para o @mattpocockuk pelas explicações em HTML geradas pela skill /teach dele — muito boas.
vai lá testar
1npx skills add humanlayer/skills --skill show-me
Depois de instalar a skill, use /show-me ou peça ao agente para usar a skill show-me. Aponte para uma rota, serviço, funcionalidade, pull request ou tópico atual, ou apenas use para pedir ao modelo que reformule uma pergunta ou afirmação.
isso é conteúdo demais. me mostra.
ou
/show-me como uma explicação em HTML
Nos conte o que você achou! Marque o @humanlayer_dev ou o @dexhorthy com seus resultados ou com o que você personalizou/adicionou, e vamos trocar ideias!
GIF
