Cómo usar Anatomy en Claude Code: instalación, prompts y un ejemplo real paso a paso

En este tutorial instalamos Anatomy en Claude Code, le pedimos una figura y la llevamos hasta una página publicada. El ejemplo es real: una ilustración interactiva que explica cómo funciona la caché de una web con stale-while-revalidate. Claude Code la generó en 11 minutos y 44 segundos, y puedes abrirla y jugar con ella aquí. Verás los comandos exactos, el prompt, lo que hace Claude mientras trabaja, cómo revisar el resultado y cómo meterlo en tu web o en un proyecto de cliente.

Si todavía no sabes qué es Anatomy ni para qué sirve, lee antes la parte 1 de la guía. Si nunca has instalado una skill, la guía de skills de Claude Code explica lo básico.

Requisitos

Probado el 14 de octubre de 2026 con:

• Claude Code 2.1.284 con el modelo Claude Opus 5.5, en Windows 11.
• Node.js 20.10 o superior para la skill (usamos Node 24.14). Para instalar con npx skills add hace falta Node 22.20 o superior.
• Google Chrome o Chromium instalado. La skill lo usa sin interfaz para hacer capturas y comprobar su propio trabajo.
• Anatomy 1.1.0 (rama main, commit e6600ff).

No hace falta ninguna clave de API ni npm install: el kit solo usa módulos integrados de Node.

Paso 1: instalar Anatomy en Claude Code

Desde la carpeta de tu proyecto:

npx skills add wheresryan22/anatomy -a claude-code

Eso la instala solo en ese proyecto, en .claude/skills/anatomy. Para tenerla en todos tus proyectos, añade -g (se instala en ~/.claude/skills/anatomy). Nosotros añadimos -y para aceptar las opciones por defecto sin preguntas.

La instalación copia el repositorio entero, ejemplos incluidos (unos 10 MB). Si prefieres git:

git clone https://github.com/wheresryan22/anatomy.git .claude/skills/anatomy

¿Global o por proyecto? Para una agencia recomendamos por proyecto y subir la carpeta al repositorio: quien trabaje en ese proyecto tendrá la misma versión de la skill y podrá regenerar las figuras.

Claude Code detecta la skill sin reiniciar. Si la carpeta .claude/skills no existía al abrir la sesión, ejecuta /reload-skills.

Paso 2: escribir el prompt

La regla de oro de Anatomy: describe la idea, no el dibujo. Inventar el objeto es el trabajo de Claude, y lo hace mejor que tú describiendo cajas y flechas. Tu prompt tiene que llevar:

1. Qué explicar, con números reales. Tiempos, tamaños, umbrales, cantidades. La figura los usará en su modelo y en la lectura en vivo.
2. Las palabras clave que quieras. interactive (o "interactivo") para que responda al ratón y al teclado; sin ella obtienes un dibujo quieto. WebGL si necesitas fuego, agua o luz. 3D si una pieza tiene que girar de verdad (beta y lento).
3. Dónde va a vivir. Página HTML independiente, archivo SVG suelto o componentes React/Next.js, y tema claro u oscuro.
4. El tamaño, si quieres acotar. "Figure" es una figura pequeña (40-80 piezas). Si no lo dices, Claude decide y te avisa del tiempo cuando es más grande.

Nuestro prompt, tal cual:

/anatomy explica cómo funciona la caché de una web con revalidación
(stale-while-revalidate): la primera visita es un MISS que va al servidor
de origen (unos 800 ms), las siguientes son HIT servidas desde la caché
del CDN (unos 30 ms), y a los 60 s el contenido caduca: la siguiente visita
recibe la copia vieja al instante mientras la caché se revalida en segundo
plano. Interactivo, una sola página HTML standalone en la carpeta figura/,
tema claro (genera también la oscura). Tamaño Figure, sin WebGL.

No hace falta escribir /anatomy. Si pides "una ilustración técnica interactiva de cómo funciona X para la documentación", Claude carga la skill solo. Escribirla al principio del mensaje lo garantiza.

Paso 3: qué hace Claude mientras trabaja

Anatomy obliga a Claude a seguir un orden fijo. En nuestra sesión se vio así:

1. Elige el tamaño. Lo primero que escribió fue "Tamaño: Figure (un mecanismo, 40-80 piezas, SVG sin WebGL)".
2. Lee el ejemplo más parecido. Abrió examples/dial-indicator (el más pequeño), la referencia del kit, las reglas de oficio (craft.md) y la lista de verificación (verify.md).
3. Escribe el modelo antes que el dibujo. Todos los números salen de un único objeto. Este es el principio real de figura/build.mjs:

const MODEL = {
  ttl: 60, // s-maxage, in seconds
  rate: 10, // the age clock runs ten times real time, so the minute passes in 6 s
  out: 260, // ms, edge to origin
  render: 280, // ms, the origin builds the page
  back: 260, // ms, origin to edge
  hit: 30, // ms, served from the edge
  scale: 80, // s, full scale of the age dial
};
MODEL.trip = MODEL.out + MODEL.render + MODEL.back;

Los 800 ms del MISS que pedimos se reparten en ida (260), render (280) y vuelta (260). El reloj va 10 veces más rápido para que el minuto de TTL pase en 6 segundos, y la figura lo dice en su leyenda.

1. Inventa el objeto, construye la geometría y la pinta de atrás hacia delante con el kit isométrico.
2. Se revisa a sí misma. Hace capturas con Chrome sin interfaz, en escritorio y a 390 px de ancho, secuencias a cámara lenta y primeros planos, y pasa el chequeo de líneas sueltas hasta dejarlo en cero.

Datos de la sesión: 11 min 44 s, 53 llamadas a herramientas y unos 58.000 tokens de salida. Es una figura pequeña; las grandes tardan horas (ver la parte 1).

Permisos durante la sesión

Anatomy ejecuta node muchas veces (construir, capturar, comprobar). En una sesión interactiva, Claude Code te pedirá permiso para esos comandos. Para no aprobarlos uno a uno, permite Bash(node:*) en ese proyecto. En modo no interactivo lo hicimos así:

claude -p "/anatomy ..." --allowedTools "Bash(node:*)" "Read" "Write" "Edit" "Glob" "Grep" "Skill"

El resultado: qué inventó Claude

Para explicar la caché, Claude construyó un banco de pruebas:

• El origen es una torre de servidor con cuatro módulos de rack y una prensa que "imprime" la página.
• El viaje al origen es un carro que corre sobre raíles y una cremallera.
• La caché del CDN es un armario con la copia de la página en una ranura y dos contadores, HIT y MISS.
• Delante hay una bandeja donde cae la copia servida, un pulsador de visita y un reloj de edad de 0 a 80 s con el tramo de 60 a 80 s sombreado como "caducada". La aguja es la única pieza resaltada.

Y se comporta así: el MISS manda el carro al origen y tarda 800 ms; el HIT sirve la copia en 30 ms; pasados 60 s, la visita es STALE: recibe la copia vieja en 30 ms mientras el carro sale a revalidar, y el reloj vuelve a cero cuando regresa. Si llegan más visitas durante ese viaje, no se lanza un segundo viaje: es exactamente cómo funciona stale-while-revalidate.

Controles: clic, Espacio o Intro hace una visita y P purga la caché. Si nadie la toca, repite sola un ciclo de unos 13 segundos. Con "reducir movimiento" activado no hay recorrido automático.

[Abrir la figura interactiva (tema claro)](/demos/anatomy/cache-swr.html) · [tema oscuro](/demos/anatomy/cache-swr-dark.html)

Paso 4: revisar e iterar

La documentación de Anatomy insiste: trata la primera figura como un borrador. Ábrela, juega con ella y dile a Claude lo que no te convence, en la misma sesión:

El reloj de edad se lee pequeño: hazlo un 30 % más grande y mueve
la bandeja para que no lo tape. Vuelve a pasar las comprobaciones.

Añade un tercer contador "STALE" en el armario y que el pie de figura
explique la diferencia entre MISS y STALE en una frase.

Para regenerar las páginas después de editar el modelo a mano:

node figura/build.mjs
node figura/build.mjs --dark
node .claude/skills/anatomy/scripts/lines.mjs figura/cache-swr.html

Paso 5: meter la figura en tu web

Depende del formato que pediste:

Página HTML independiente (cualquier web)

Es un único archivo con todo dentro (dibujo, estilos y script), sin peticiones externas. Nuestra página pesa 182 KB. En Next.js, cópiala a public/ y enlázala o incrústala con un iframe:

<iframe
  src="/demos/anatomy/cache-swr.html"
  title="Cómo funciona la caché stale-while-revalidate"
  width="100%" height="560" loading="lazy" style="border:0">
</iframe>

Así lo hemos publicado en este blog. Funciona igual en WordPress, Webflow o una web estática.

SVG suelto

Pide "solo el archivo SVG" y la figura sale como .svg con los estilos incluidos. Úsalo como imagen en un post, una newsletter o una presentación. Pierdes la interacción, pero pesa menos.

Componentes React o Next.js

Pídelo en el prompt, por ejemplo: *"como componentes React para nuestra documentación en Next.js, tema oscuro"*. La skill copia el kit al proyecto, deja la geometría en módulos .ts, el dibujo estático en un componente de servidor y el movimiento en un único componente "use client".

Figuras ya hechas: anatomy-figures

Si te sirve una de las 33 figuras de la colección oficial, no hace falta generarla: están publicadas en npm como componentes React (licencia MIT).

npm install anatomy-figures

import { Watch } from "anatomy-figures";

export default function Page() {
  return <Watch theme="light" />;
}

Un flujo de trabajo para agencias

1. Brief. Con el cliente, elige *una* idea que su web necesite explicar: cómo funciona su producto, su proceso o su arquitectura. Pide los números reales.
2. Prompt. Idea + números + interactive + formato de destino + tema de la marca.
3. Primera versión. Una figura pequeña sale en minutos; deja que la skill termine sus comprobaciones.
4. Revisión con el cliente. Envía el enlace a la página HTML. Recoge comentarios concretos ("el contador no se entiende", "más grande el servidor").
5. Segunda vuelta e integración. Aplica los cambios en la misma sesión y entrega como HTML, SVG o componentes React en el repositorio del cliente.

Presupuesta el consumo de tokens y las rondas de revisión como horas de producción.

Prompts listos para copiar

/anatomy explica cómo funciona un pool de 10 conexiones a la base de datos:
las peticiones toman una y la devuelven, y cuando las 10 están ocupadas las
nuevas esperan en cola. Interactivo, componentes React para Next.js, tema oscuro.

/anatomy explica cómo un limitador de peticiones token bucket deja pasar
100 peticiones por minuto con ráfagas de 20. Interactivo, HTML standalone, tema claro.

/anatomy explica cómo una cola de webhooks reintenta un envío fallido
3 veces con espera exponencial (1 s, 4 s, 16 s) antes de mandarlo a la cola
de errores. Interactivo, HTML standalone.

/anatomy un SVG isométrico que explique cómo una pasarela de pago
autoriza y luego captura un cobro, para la landing de una fintech, tema claro.
Solo el archivo SVG y una vista previa PNG.

Errores frecuentes

Filename too long al instalar o clonar en Windows

Git en Windows choca con el límite de 260 caracteres si el proyecto está en una ruta muy larga. Nos pasó al clonar dentro de una carpeta temporal profunda. Usa una ruta corta o git -c core.longpaths=true clone ....

La skill no aparece en Claude Code

Comprueba que exista .claude/skills/anatomy/SKILL.md (sin carpetas extra como anatomy-main). Si creaste .claude/skills con la sesión abierta, ejecuta /reload-skills.

Chrome exited before startup: 0

Pasaba al lanzar las comprobaciones desde una terminal de Windows con permisos de administrador. Está corregido en la rama main (los scripts pasan --do-not-de-elevate). Actualiza la skill con npx skills add de nuevo o git pull. Si Chrome está en una ruta poco habitual, indícala con la variable CHROME_PATH.

Las comprobaciones fallan en Codex

El sandbox de Codex puede bloquear Chrome. La figura se genera igual; solo fallan las capturas. Aprueba esos comandos fuera del sandbox cuando Codex lo pida o ejecútalos tú: node scripts/capture.mjs pagina.html --out shots/pagina.png.

La figura tarda mucho más de lo esperado

Es normal en figuras grandes: pide explícitamente "tamaño Figure" o "algo rápido" para acotarla. Para una "Epic" (un vehículo, un edificio), Claude primero te propone una versión más pequeña.

Preguntas frecuentes

¿Cuánto cuesta generar una figura?

La skill es gratis (MIT). El coste es el uso de tu plan de Claude: nuestra figura pequeña consumió unos 58.000 tokens de salida en 12 minutos. Las grandes consumen bastante más.

¿Puedo usar Anatomy en proyectos de clientes?

Sí. La skill y las figuras tienen licencia MIT. Mantén el aviso de copyright del kit si lo incluyes en el proyecto.

¿La figura funciona en móvil?

Sí. La skill la comprueba a 390 px de ancho y verifica que no haya scroll lateral.

¿Puedo cambiar los textos al español?

Sí. Si escribes el prompt en español, los textos de la tarjeta salen en español, como en nuestro ejemplo ("CLIC O ESPACIO: VISITA").

¿Necesito saber programar?

Para generarla, no. Para integrarla en una web, lo justo para copiar un archivo a public/ o pegar un componente.

Conclusión

Con Anatomy instalada, una buena figura sale de un prompt con la idea, los números reales, la palabra "interactivo" y el formato de destino. En nuestro ejemplo, Claude Code tardó 12 minutos en convertir stale-while-revalidate en un banco de pruebas que se entiende de un vistazo, y lo comprobó solo. El siguiente paso es elegir el concepto que más le cuesta explicar a tu web o a la de tu cliente y pedírselo. Si quieres más skills para tu flujo de trabajo, mira también social-media-skills para crear contenido con tu propia voz.