El problema de los diagramas: partes sin comportamiento
El video viral de Better Stack, This Claude Code Skill Is Actually Insane, destaca un problema central de los diagramas tradicionales: las cajas y flechas confirman la existencia de un componente, pero rara vez revelan su comportamiento dinámico. Vemos las partes, pero los cambios de estado y las relaciones causales a menudo permanecen abstractos, dejándonos inferir el mecanismo.
Aquí entra anatomy, una habilidad de agente de código abierto para Claude Code que cambia este paradigma. Su principio rector, establecido explícitamente en el prompt raíz, es: "No dibujes cajas, flechas y etiquetas. Inventa una cosa física real y bien hecha cuyo funcionamiento sea el concepto". Este mandato obliga a la IA a generar máquinas físicas interactivas que encarnan la lógica del sistema.
Este enfoque transforma la comprensión. Una clave de caché se convierte en una cerradura de pines; la llave correcta alinea los pines, abriendo la puerta. Una caché LRU podría manifestarse como una estantería mecánica giratoria, mientras que un handshake TCP se anima como cuerdas y poleas intercambiando cartas.
En lugar de memorizar conexiones estáticas, los usuarios ahora pueden seguir un mecanismo, observando cómo gira una caché LRU o cómo se desliza el carro de un indicador de cuadrante para leer cada bloque. Esta encarnación física e interactiva desmitifica sistemas complejos, haciéndolos intuitivos tanto para la enseñanza como para la depuración. El resultado no es una imagen estática, sino código HTML, SVG o WebGL inspeccionable.
Una caché se convierte en una cerradura, y un protocolo en una cuerda
En lugar de cajas abstractas, la habilidad anatomy convierte una clave de caché en una cerradura de pines. Como mecanismo físico, muestra cómo la llave correcta alinea los pines, permitiendo que la cerradura gire. Esto hace que la validación sea tangible, revelando el funcionamiento interno de un concepto.
Una caché LRU se transforma en una estantería mecánica giratoria o una pista de canicas. Observas cómo se accede a los elementos, cómo se desplazan y se eliminan a medida que opera el mecanismo, desmitificando su comportamiento. De manera similar, TCP se convierte en un sistema de cuerdas o poleas, intercambiando cartas de un lado a otro, ilustrando los cambios de estado del protocolo de handshake.
Este enfoque se extiende a ensamblajes y mediciones físicas. Un motor de cohete Raptor, por ejemplo, se descompone en 11 ensamblajes distintos al pasar el cursor, completo con una estela de escape en WebGL. Un indicador de cuadrante revela su carro deslizándose para medir bloques, con la aguja leyendo cada bloque a medida que interactúas.
Estos modelos interactivos, renderizados como SVG o WebGL, no solo existen; funcionan. Ofrecen un cambio profundo de diagramas estáticos a explicaciones cinéticas, cerrando la brecha entre la existencia de un componente y su función dinámica.
Bajo el capó: ilustraciones que puedes inspeccionar
Anatomy, la habilidad mostrada en el video This Claude Code Skill Is Actually Insane, genera código ejecutable, no imágenes estáticas. Claude produce componentes SVG, HTML/JavaScript o React autónomos. Este resultado permite la interacción directa, la inspección y la modificación, cambiando fundamentalmente cómo visualizamos el comportamiento del sistema.
El enfoque visual en capas impulsa esta interactividad. El renderizado isométrico, el orden de profundidad estricto del algoritmo del pintor y los efectos opcionales de WebGL, como la estela de un motor (como se ve en el motor de cohete Raptor), contribuyen a una sensación de tangibilidad física. A diferencia de una imagen rasterizada plana, estas son máquinas que puedes manipular.
Las diferencias prácticas con la generación de imágenes tradicional son profundas. Las auditorías basadas en navegador pueden detectar colisiones, puntos finales de tubería no válidos y oclusiones incorrectas, asegurando la integridad geométrica: un detalle crucial para un sistema destinado a encarnar un concepto. El código en sí puede ser inspeccionado, depurado y controlado mediante versiones.
Este es un salto significativo respecto a los diagramas abstractos. Para una mayor exploración de los mecanismos subyacentes, puede inspeccionar el código en GitHub - wheresryan22/anatomy: An agent skill for creating detailed, interactive isometric illustrations. La capacidad de auditar, interactuar y controlar mediante versiones estas "máquinas" generadas las eleva de simples ilustraciones a modelos de computación funcionales e inspeccionables.
¿Te está gustando? Recibe uno así en tu bandeja cada mañana.
un correo al día · date de baja en dos clics · sin rastreadores de terceros
Donde termina la magia y cómo probarla
Este Claude Code Skill es realmente una locura, pero no esperes que reemplace tus herramientas de diagramación cotidianas. Generar estos modelos intrincados e interactivos exige un presupuesto significativo de cómputo y tokens. Cada ilustración detallada a menudo requiere numerosas líneas de geometría, múltiples ejecuciones de agentes y validación basada en navegador para garantizar la precisión.
Anatomy destaca en la explicación de mecanismos específicos y comportamientos de sistemas, como el funcionamiento interno de una caché LRU o los protocolos de enlace en TCP. No es un sustituto para los diagramas de Mermaid, bibliotecas de gráficos estándar, paneles financieros o mapas geográficos. Úsalo para aclarar cómo funciona algo, no simplemente para indicar que existe.
Para experimentar con Anatomy, accede al proyecto de GitHub con licencia MIT en wheresryan22/anatomy. Allí encontrarás el comando CLI de Agent Skills. Empieza poco a poco: elige un solo concepto, genera su modelo interactivo e inspecciona el código resultante en SVG, HTML o componente de React. Esto asegura que la interacción y la lógica generadas se alineen con tu intención antes de compartirlo.
La habilidad genera código, no imágenes estáticas. Esta diferencia fundamental permite las visualizaciones precisas e interactivas que se muestran en This Claude Code Skill Is Actually Insane. Desde una simple cerradura de pines hasta un motor Raptor de ensamblaje múltiple con una estela de escape en WebGL, Anatomy hace que las abstracciones sean tangibles.
Preguntas frecuentes
¿Qué es la habilidad Anatomy para Claude Code?
Una habilidad de agente de código abierto que guía a los agentes de codificación para construir ilustraciones interactivas basadas en código de conceptos como mecanismos físicos funcionales.
¿Cómo explica Anatomy los conceptos de software?
Mapea un concepto a una analogía mecánica y luego crea una ilustración interactiva que permite a los usuarios observar o manipular su comportamiento.
¿Puede Anatomy reemplazar a Mermaid o a las bibliotecas de gráficos?
No. Complementa las herramientas de diagramas de flujo para explicar mecanismos, pero no está diseñado para paneles, gráficos financieros o mapas geográficos.
¿Cómo puedo instalar Anatomy para Claude Code?
El proyecto documenta la instalación con la CLI de Agent Skills: npx skills add wheresryan22/anatomy -g -a claude-code.