Anatomy: skill de Claude para ilustraciones isométricas

Anatomy es una skill de Claude Code que explica una idea técnica dibujándola como una máquina real: un caché se convierte en una cerradura, una cola de mensajes en un circuito de canicas y un handshake TCP en un teleférico de correo. El resultado es una ilustración isométrica interactiva en SVG (y WebGL cuando hace falta fuego, agua o luz) que puedes poner en una landing page, en la documentación de un producto o en un artículo. En este post te contamos qué hace exactamente, qué no hace, cuánto tarda y cómo puede aprovecharla un desarrollador o una agencia.

Si es la primera vez que instalas una skill, empieza por la guía de skills de Claude Code. En la parte 2 de esta guía la instalamos y la usamos paso a paso con un ejemplo real.

Página oficial de Anatomy con un movimiento de reloj mecánico dibujado por Claude en isométrico — La web oficial de Anatomy. El movimiento de reloj salió de una sola línea de petición · skills.wheresryan.sh/anatomy

Qué es Anatomy

Es un repositorio de GitHub, wheresryan22/anatomy, con licencia MIT. Contiene una skill que sigue el estándar Agent Skills, así que funciona en Claude Code, Codex, OpenCode y Antigravity. Datos a fecha de esta prueba (14 de octubre de 2026):

Versión: 1.1.0, publicada el 12 de octubre de 2026.
Popularidad: unas 9.300 estrellas y 668 forks en GitHub, pocos días después de su presentación el 9 de octubre.
Requisitos: Node.js 20.10 o superior y Chrome o Chromium para las comprobaciones. Cero dependencias: no hay que hacer npm install ni tener claves de API.
Contenido: el SKILL.md con el flujo de trabajo, un kit de dibujo (kit/), guías de referencia (references/), scripts de verificación con Chrome sin interfaz (scripts/) y ocho ejemplos completos.

Repositorio wheresryan22/anatomy en GitHub con licencia MIT y la versión Anatomy 1.1 — El repositorio en GitHub. La propia skill es la raíz del repo: un `SKILL.md` más el kit y los ejemplos · codigoagente

La idea central: el objeto es la explicación

La regla que manda en toda la skill está escrita al principio del SKILL.md: *"The object is the explanation"*. Nada de cajas, flechas y etiquetas flotando. Claude tiene que inventar un objeto físico cuyo funcionamiento sea el concepto, y construirlo con decenas de piezas pequeñas: tornillos, raíles, muelles, diales, cables con su conector.

Algunos ejemplos de la colección oficial, que tiene 33 figuras:

Concepto técnico	Objeto que inventó Claude
Colisiones en un hash map	Un mostrador de clasificación de correos
Búsqueda binaria	Una balanza de laboratorio
Resolución DNS	Un sistema de tubos neumáticos
Cola de mensajes	Un circuito de canicas
Caché LRU	Una estantería de libros
Filtro de Bloom	Una máquina tragaperras
Mutex	Un tanque con llave de bloqueo
Temperatura de un LLM	Una ruleta

Colección de figuras de Anatomy: estantería para caché LRU, tragaperras para filtro de Bloom y circuito de canicas para colas — Parte de la colección: cada concepto (en gris) se explica con una máquina (en negro) · skills.wheresryan.sh/anatomy

Cada figura sale en una tarjeta con número de figura, título, una pista de interacción y una lectura en vivo ("bloque 2 · lee 14,1 px", "8 caracteres · tecla c"). Esa lectura sale del mismo modelo que mueve las piezas, así que el dibujo y los números nunca se contradicen.

Qué tipos de figura genera

Tipo	Qué es	Para qué
SVG	Piezas sólidas en isométrico con cuatro tonos de sombra, movimiento suave y lectura en vivo	La mayoría de los casos: mecanismos, flujos, algoritmos
SVG + WebGL	Un shader entre dos capas SVG, en la misma cámara isométrica	Fuego, escape de un motor, agua, cáusticas, luz
3D (beta)	Piezas que giran de verdad en 3D y se re-sombrean en cada fotograma	Diales, plataformas giratorias, piezas que se sueltan

Y tres formatos de entrega: una página HTML independiente, un archivo .svg suelto con los estilos incluidos, o componentes React/Next.js (un componente de servidor para el dibujo estático y uno de cliente para el movimiento). Todas las figuras tienen tema claro y oscuro, responden al ratón y al teclado, se paran cuando salen de pantalla, se quedan quietas con "reducir movimiento" y anuncian la lectura a los lectores de pantalla.

Ejemplo desk-computer de Anatomy: un ordenador de sobremesa de 1984 en isométrico con teclado en el que se puede escribir — El ejemplo `desk-computer`, tema claro: lo que tecleas aparece en la pantalla CRT. Captura hecha con el script `capture.mjs` de la propia skill · codigoagente

Lo que Anatomy no hace

Conviene aclararlo porque hemos visto expectativas equivocadas sobre esta skill:

No indexa ni analiza páginas web. No rastrea sitios, no mejora el SEO y no lee tu web para resumirla.
No genera páginas web completas. No es un generador de landings ni de componentes de interfaz. Produce una figura (o varias) que luego insertas en tu web.
No es una librería de gráficos. No hay ejes, series ni gráficos de datos. Para un dashboard necesitas otra herramienta.
No dibuja personas ni mapas exactos. Dibuja máquinas, instrumentos, herramientas y muebles. Una idea sin mecanismo que construir sale peor.
No es rápida. Una figura pequeña ("Figure", 40-80 piezas) tarda entre 30 y 90 minutos de trabajo de Claude. Una "Hero" (80-150 piezas), de 2 a 4 horas. Las "Epic" (un vehículo, un edificio) superan las 6 horas y Claude no las empieza sin preguntarte.

Lo que sí hace muy bien es lo que casi nadie puede producir a mano en un día: ilustraciones técnicas a medida, interactivas y ligeras, con calidad de estudio de diseño y código que es tuyo.

Para qué sirve en el desarrollo web

Hero de una landing page. En lugar de una ilustración de stock o una captura de la app, una máquina que explica qué hace tu producto y que el visitante puede tocar.
Documentación técnica. "Cómo funciona el pool de conexiones" o "cómo se invalida la caché" se entiende mejor con una figura que se mueve. Uno de los prompts de prueba de la skill pide exactamente eso para una documentación en Next.js.
Artículos de blog y newsletters. Un SVG estático o una página HTML embebida que hace el post memorable y compartible.
Onboarding de producto. Explicar el flujo de tu SaaS (colas, webhooks, reintentos) a clientes no técnicos.
Formación interna. Explicar a un equipo nuevo cómo funciona una parte del sistema.

Cómo puede aprovecharla una agencia de software

Para una agencia, Anatomy no sustituye al diseñador ni al desarrollador. Es una herramienta de producción para un tipo de entregable concreto que antes era caro: la ilustración técnica a medida.

Un servicio nuevo que vender. "Ilustración interactiva del producto" para la home de un cliente SaaS o fintech. Es un entregable visible y diferencial en una propuesta.
Propuestas que se entienden. Una figura que explica la arquitectura que propones (colas, caché, réplicas) convence más que un diagrama de cajas en un PDF.
Documentación entregable. Muchas agencias entregan proyectos con documentación pobre. Dos o tres figuras de los flujos clave elevan la percepción de calidad.
Contenido propio. Para el blog y las redes de la agencia: piezas que se comparten porque se pueden tocar.
Código que el cliente posee. El resultado es un script de Node o componentes React en el repositorio del cliente, con licencia MIT. No hay suscripción ni plataforma de terceros.

Cosas a tener en cuenta antes de ofrecerlo:

Presupuesta el tiempo real. La primera versión llega rápido, pero la calidad está en la segunda revisión. Su autor cuenta que el motor Raptor tuvo una versión funcional en 38 minutos y necesitó 10 horas más para quedar perfecto.
El consumo de tokens importa. Una sesión larga de Claude Code consume bastante de tu plan. Trátalo como horas de producción.
Itera con el cliente. La propia documentación lo dice: trata la primera figura como un borrador, juega con ella, di qué falla y pide otra vuelta.

Licencia y uso comercial

Tanto la skill como las figuras tienen licencia MIT: puedes usarlas en proyectos de clientes y en productos comerciales. Mantén el aviso de copyright del kit si lo copias al proyecto. Las figuras de la colección oficial también están publicadas como paquete npm, `anatomy-figures` (versión 0.1.0), con componentes React y cinco temas: dark, light, paper, blueprint y sepia.

Preguntas frecuentes

¿Anatomy necesita React?

No. Por defecto genera una página HTML independiente o un SVG. React y Next.js son una opción más.

¿Necesito una clave de API o pagar algo aparte?

No. Funciona con tu Claude Code (o Codex, OpenCode, Antigravity) y Node.js. El kit usa solo módulos integrados de Node.

¿Afecta al rendimiento de mi web?

Poco. Las figuras se paran fuera de pantalla y solo redibujan las piezas que se mueven. Los shaders WebGL solo se renderizan mientras el efecto está activo y visible.

¿Puedo editar la figura después?

Sí. Es código normal en tu proyecto. Pídele cambios a Claude o edita el modelo: como piezas, lectura y movimiento leen del mismo modelo, cambiar un número lo actualiza todo.

¿Sirve para crear páginas web dinámicas?

No directamente. Sirve para crear las ilustraciones interactivas que van dentro de esas páginas. Para generar páginas completas necesitas otras skills o pedírselo a Claude Code sin Anatomy.

Conclusión

Anatomy es una skill muy específica y muy buena en lo suyo: convierte una idea técnica en una máquina isométrica interactiva, ligera y con código propio. No indexa webs ni construye sitios. Para desarrolladores y agencias es una forma realista de producir ilustraciones técnicas a medida para landings, documentación y contenido. En la parte 2 la instalamos, le pedimos una figura sobre la caché de una web y te enseñamos el resultado y cómo meterlo en un proyecto.