O problema dos diagramas: partes sem comportamento
O vídeo viral da Better Stack, *This Claude Code Skill Is Actually Insane*, destaca um problema central com os diagramas tradicionais: caixas e setas confirmam a existência de um componente, mas raramente revelam seu comportamento dinâmico. Vemos as partes, mas as mudanças de estado e as relações causais frequentemente permanecem abstratas, deixando-nos inferir o mecanismo.
Apresentamos o [anatomy](/en/anatomy), uma habilidade de agente de código aberto para o Claude Code que inverte esse paradigma. Seu princípio orientador, declarado explicitamente no prompt raiz, é "Não desenhe caixas, setas e rótulos. Invente uma coisa física real e bem feita cujo funcionamento seja o conceito." Este mandato força a IA a gerar máquinas físicas interativas que incorporam a lógica do sistema.
Esta abordagem transforma a compreensão. Uma chave de cache torna-se uma fechadura de pinos; a chave correta alinha os pinos, abrindo a porta. Um cache LRU pode se manifestar como uma estante mecânica giratória, enquanto um handshake TCP é animado como cordas e polias trocando cartas.
Em vez de memorizar conexões estáticas, os usuários agora podem seguir um mecanismo, observando como um cache LRU gira ou como o carro de um indicador de discagem desliza para ler cada bloco. Esta personificação física e interativa desmistifica sistemas complexos, tornando-os intuitivos tanto para o ensino quanto para a depuração. O resultado não é uma imagem estática, mas código HTML, SVG ou WebGL inspecionável.
Um cache torna-se uma fechadura — e um protocolo torna-se uma corda
Em vez de caixas abstratas, a habilidade anatomy transforma uma chave de cache em uma fechadura de pinos. Um mecanismo físico, ele mostra a chave correta alinhando os pinos, permitindo que a fechadura gire. Isso torna a validação tangível, revelando o funcionamento interno de um conceito.
Um cache LRU se transforma em uma estante mecânica giratória ou em uma pista de bolinhas. Você observa os itens sendo acessados, movidos e removidos à medida que o mecanismo opera, desmistificando seu comportamento. Da mesma forma, o TCP se torna um sistema de cordas ou polias, trocando cartas de um lado para o outro, ilustrando as mudanças de estado do protocolo de handshake.
Esta abordagem se estende a montagens físicas e medições. Um motor de foguete Raptor, por exemplo, explode em 11 montagens distintas ao passar o mouse, completo com uma pluma de exaustão em WebGL. Um indicador de discagem revela seu carro deslizando para medir blocos, com a agulha lendo cada bloco à medida que você interage.
Esses modelos interativos, renderizados como SVG ou WebGL, não apenas existem; eles funcionam. Eles oferecem uma mudança profunda de diagramas estáticos para explicações cinéticas, preenchendo a lacuna entre a existência de um componente e sua função dinâmica.
Por trás das cenas: ilustrações que você pode inspecionar
Anatomy, a habilidade exibida no vídeo This Claude Code Skill Is Actually Insane, gera código executável, não imagens estáticas. O Claude produz SVG, HTML/JavaScript ou componentes React autônomos. Este resultado permite interação direta, inspeção e modificação, mudando fundamentalmente a forma como visualizamos o comportamento do sistema.
A abordagem visual em camadas impulsiona essa interatividade. A renderização isométrica, a ordenação de profundidade rigorosa do algoritmo do pintor e efeitos opcionais de WebGL, como uma pluma de motor (como visto no motor de foguete Raptor), contribuem para uma sensação de tangibilidade física. Ao contrário de uma imagem raster plana, estas são máquinas que você pode tocar.
As diferenças práticas em relação à geração de imagens tradicional são profundas. Auditorias baseadas em navegador podem detectar colisões, endpoints de pipe inválidos e oclusão incorreta, garantindo a integridade geométrica — um detalhe crucial para um sistema destinado a incorporar um conceito. O código em si pode ser inspecionado, depurado e versionado.
Este é um salto significativo em relação a diagramas abstratos. Para uma exploração mais aprofundada dos mecanismos subjacentes, você pode inspecionar o código em GitHub - wheresryan22/anatomy: An agent skill for creating detailed, interactive isometric illustrations. A capacidade de auditar, interagir e versionar essas "máquinas" geradas as eleva de meras ilustrações a modelos de computação funcionais e inspecionáveis.
Gostando do artigo? Receba um assim na sua caixa de entrada toda manhã.
um e-mail por dia · cancele em dois cliques · sem rastreadores de terceiros
Onde a mágica termina — e como experimentá-la
Este Claude Code Skill é realmente insano, mas não espere que ele substitua suas ferramentas de diagramação do dia a dia. Gerar esses modelos complexos e interativos exige orçamentos significativos de computação e tokens. Cada ilustração detalhada geralmente requer inúmeras linhas de geometria, múltiplas execuções de agente e validação baseada em navegador para garantir a precisão.
O Anatomy se destaca em explicar mecanismos específicos e comportamentos de sistemas — como o funcionamento interno de um cache LRU ou os handshakes de protocolo em TCP. Ele não é um substituto para gráficos Mermaid, bibliotecas de gráficos padrão, painéis financeiros ou mapas geográficos. Use-o para esclarecer como algo funciona, não apenas que ele existe.
Para experimentar o Anatomy, acesse o projeto licenciado pelo MIT no GitHub em wheresryan22/anatomy. Você encontrará o comando da CLI Agent Skills lá. Comece pequeno: escolha um único conceito, gere seu modelo interativo e inspecione o código SVG, HTML ou componente React resultante. Isso garante que a interação e a lógica geradas estejam alinhadas com sua intenção antes de compartilhar.
A skill gera código, não imagens estáticas. Essa diferença fundamental permite as visualizações precisas e interativas mostradas em This Claude Code Skill Is Actually Insane. De uma simples fechadura de pinos a um motor Raptor de múltiplas montagens com uma pluma de exaustão WebGL, o Anatomy torna as abstrações tangíveis.
Perguntas Frequentes
O que é a skill Anatomy para Claude Code?
Uma skill de agente de código aberto que orienta agentes de codificação a construir ilustrações interativas baseadas em código de conceitos como mecanismos físicos funcionais.
Como o Anatomy explica conceitos de software?
Ele mapeia um conceito para uma analogia mecânica e, em seguida, cria uma ilustração interativa que permite aos usuários observar ou manipular seu comportamento.
O Anatomy pode substituir o Mermaid ou bibliotecas de gráficos?
Não. Ele complementa ferramentas de fluxograma para explicar mecanismos, mas não se destina a painéis, gráficos financeiros ou mapas geográficos.
Como posso instalar o Anatomy para Claude Code?
O projeto documenta a instalação com a CLI Agent Skills: npx skills add wheresryan22/anatomy -g -a claude-code.