Anatomy para Claude Code: SVG interactivos en documentación

Volver

Kevin Riedl

12 min de lectura · 12 de octubre de 2026
Última revisión 12 de octubre de 2026

Siguiente

Deja que el lector desmonte un motor, cambie la frecuencia de una onda o envíe una ráfaga de peticiones a una API. Haz que cada acción tenga una consecuencia visible. Ese es un buen punto de partida para una ilustración técnica, y Anatomy da al agente de programación un método para construirla.

Anatomy es una skill de código abierto para agentes, creada por wheresryan22, que genera ilustraciones isométricas interactivas como código web editable. SVG aporta la geometría; JavaScript controla el comportamiento. WebGL puede añadir efectos como agua o gases de escape, mientras que un modo 3D independiente se encarga de las piezas que giran. El README de Anatomy documenta las salidas HTML autónoma, SVG y React/Next.js.

Lo interesante es poder crear un componente de documentación que los lectores exploren y los desarrolladores revisen. Veamos cómo instalar la skill, darle instrucciones precisas y elegir una forma de integrarla que conserve la interacción.

Revisión de fuentes: 12 de octubre de 2026, commit del repositorio 689dcf9. Las descripciones de las demos proceden del código fuente del proyecto. El prompt y el ejemplo de aceptación que aparecen a continuación son una propuesta de Wavect; no hemos medido el rendimiento de Anatomy ni ejecutado ese prompt.

¿Qué muestran las demos del motor de cohete, la cubeta de ondas y el dial?

Empieza por la galería interactiva del creador. Los tres ejemplos del anuncio muestran distintas formas de hacer comprensible un mecanismo.

La referencia de 3D identifica ese modo como beta. Estos ejemplos muestran cómo funciona el renderizado. Una ilustración detallada de un motor no demuestra precisión de ingeniería, aptitud para fabricación ni una simulación validada.

¿Cómo se instala Anatomy en Claude Code?

Para instalar la skill en tu entorno personal de Claude Code, ejecuta el comando que documenta el README:

npx skills add wheresryan22/anatomy -g -a claude-code

La opción -g lo instala para tu usuario; -a claude-code selecciona Claude Code. La carpeta de la skill debe contener ~/.claude/skills/anatomy/SKILL.md junto con su kit y sus archivos de referencia.

Comprueba por separado los dos requisitos de Node. Anatomy indica Node.js 20.10+ para sus propias compilaciones y comprobaciones. Su README señala que la versión de la CLI de skills descrita allí requiere Node.js 22.20+. Necesitas Chrome o Chromium para la verificación en el navegador; React 18+ solo es necesario para la salida React.

Si prefieres Git, el repositorio documenta esta alternativa:

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

Revisa una skill de terceros antes de utilizarla en un proyecto. Guarda la revisión elegida en las notas del proyecto para que una actualización posterior sea una decisión consciente. El README actual también documenta la compatibilidad con OpenCode y Codex, aunque esta guía utiliza Claude Code.

Invócala con /anatomy seguido de las instrucciones. Si has creado el directorio de skills durante la sesión actual de Claude Code y la skill no aparece, el README recomienda /reload-skills.

Dale a Anatomy un mecanismo, un objetivo de aprendizaje y cifras verificables

Una buena primera figura responde a una sola pregunta. En la documentación de una API, podría ser esta: ¿por qué se acepta una ráfaga breve, pero se rechaza la siguiente petición?

El siguiente prompt es un ejemplo original. Describe un token bucket deliberadamente sencillo, con un reloj didáctico. Ajusta el modelo al comportamiento de tu API antes de publicarlo.

/anatomy
Crea una ilustración isométrica interactiva para la documentación de una API.
Explica los límites de ráfaga con un dispensador que admite como máximo 8 tokens.

Modelo:
- Empieza con 8 tokens. Cada petición aceptada consume 1 token.
- Repón 2 tokens por segundo, hasta un máximo de 8.
- Rechaza una petición si queda menos de 1 token. No la pongas en cola.
- Usa un reloj didáctico: el tiempo solo avanza mediante sus controles.

Controles:
- Enviar 1 petición; enviar 10 peticiones en el mismo instante.
- Avanzar 0.5 segundos; avanzar 10 segundos; restablecer.
- Mostrar el saldo de tokens y los contadores acumulados de aceptadas y rechazadas.
- Derivar las piezas móviles y todos los indicadores del mismo estado.

Entrega un único archivo HTML autónomo y el código fuente editable que lo genera.
Usa SVG; no añadas fuentes remotas, analítica ni llamadas a modelos.
Admite teclado, interacción táctil, foco visible y movimiento reducido.
Mantén los controles utilizables al desactivar el movimiento decorativo.
Incluye una explicación estática y los resultados esperados de cada control.
Enumera las simplificaciones y las comprobaciones realizadas.

El tamaño reducido del modelo permite revisarlo. La reposición sigue la fórmula balance = min(8, balance + 2 * elapsedSeconds). Una petición solo consume un token si queda al menos uno. La animación del dispensador debe respetar esas reglas.

Comprueba la explicación con una secuencia repetible

Son resultados calculados para nuestro ejemplo, no mediciones de Anatomy. Comprobarlos permite detectar una ilustración que parece correcta, pero repone tokens demasiado deprisa, supera su capacidad o muestra un contador desconectado de la animación.

¿Cómo integras una ilustración de Anatomy en una web?

Elige el formato de salida según la interacción que necesitas. Una página HTML autónoma es un primer objetivo práctico porque reúne el marcado, los estilos y el comportamiento de la figura. Un componente React permite integrarla más estrechamente con una aplicación existente.

¿Por qué deja de responder el SVG dentro de una etiqueta img?

Un SVG utilizado como imagen se ejecuta con las restricciones propias de ese contexto. MDN documenta que JavaScript queda desactivado y los recursos externos están restringidos en ese caso. Por tanto, <img src="figure.svg"> sirve para una ilustración estática; no conserva los controles JavaScript de una página interactiva.

Para insertarla con interacción, pide la salida HTML o integra el SVG y su comportamiento en la aplicación. Conserva una imagen estática para las vistas previas y para compartir.

Insertar un HTML autónomo

Después de guardar la salida autónoma revisada en la ruta de ejemplo que aparece abajo, puedes partir de este código:

<iframe
  class="anatomy-figure"
  src="/illustrations/anatomy-rate-limit.html"
  title="Explicación interactiva de los límites de ráfaga de una API"
  loading="lazy"
  sandbox="allow-scripts">
</iframe>

Añade dimensiones adaptables en la hoja de estilos de tu sitio:

.anatomy-figure {
  display: block;
  width: 100%;
  height: clamp(24rem, 65vw, 42rem);
  border: 0;
}

La referencia de iframe de MDN explica los atributos title, loading y sandbox. Es una configuración inicial para un archivo autónomo, no un contrato universal de integración. Comprueba tu política de seguridad de contenido y la carga de los recursos que necesite. Todos los controles deben seguir siendo accesibles en una pantalla estrecha.

Incluye el objetivo de aprendizaje, las suposiciones y los resultados esperados como HTML normal en el artículo que rodea a la figura. El lector debe poder entender el mecanismo aunque el contenido integrado no cargue. Las recomendaciones de Google para las funciones de IA en la Búsqueda también aconsejan ofrecer el contenido importante en formato textual. Las explicaciones estructuradas ayudan a los lectores y a los sistemas de recuperación de información, pero no garantizan posiciones ni citas.

Utilizar Anatomy con React y Next.js

La guía de integración con React del proyecto separa la geometría estática y los gráficos renderizados en el servidor del componente cliente que gestiona el movimiento. También pide que las posiciones de reposo coincidan antes de la hidratación.

Conserva esa separación al integrar una figura. Durante la revisión, carga la página de documentación completa, incluidas las instancias repetidas. Busca avisos de hidratación, colisiones de IDs y bucles de animación que sigan activos después de navegar a otra página. Para la tipografía, los colores y los patrones de interfaz aprobados, proporciona al agente tus archivos del sistema de diseño para Claude Code.

¿Qué debes comprobar antes de publicar?

El flujo de verificación de Anatomy incluye controles geométricos y visuales. Estas comprobaciones pueden detectar defectos de renderizado. Una revisión del dominio debe establecer por separado que el mecanismo, las etiquetas, las unidades y las simplificaciones enseñan lo correcto.

Su guía de movimiento e interacción describe el uso del teclado, la interacción táctil, el movimiento reducido y la detención del procesamiento fuera de pantalla. Trátalos como requisitos que debes verificar en el resultado generado.

• Comprueba el modelo. Ejecuta una secuencia breve con resultados conocidos. Restablece el estado a mitad de una animación y confirma que las etiquetas siguen coincidiendo con él.
• Usa un teclado y un móvil. Todas las acciones esenciales deben funcionar sin pasar el puntero por encima. Muestra el foco, explica los controles y evita que el lector de pantalla anuncie cada fotograma de la animación.
• Desactiva el movimiento y WebGL por separado. El movimiento reducido debe conservar los controles útiles. El SVG y el texto deben seguir explicando el tema si un shader no está disponible.
• Mide la página completa. Comprueba el tamaño de los recursos, la respuesta a las interacciones y el desplazamiento con todas las figuras presentes. Empieza con SVG y añade efectos de GPU cuando ayuden a explicar algo.
• Inspecciona las peticiones de red. Una figura generada para el navegador puede funcionar sin nuevas llamadas a modelos. Confirma que el resultado real no contiene fuentes remotas, analítica ni servicios inesperados.
• Conserva código fuente que puedas mantener. Guarda juntos el prompt, las suposiciones del modelo, la revisión de la skill elegida, el código que genera la figura y la salida aceptada. Asigna un responsable para las correcciones posteriores.

El kit de código fuente utiliza la licencia MIT. Conserva el aviso exigido al redistribuir su código. La licencia de código abierto es independiente del coste de utilizar un agente de programación y revisar su resultado.

Elige una explicación que ahora cueste entender

El orden de montaje de un componente, un búfer que se llena o una válvula que modifica un caudal son buenos candidatos. Empieza por una explicación que ya genere preguntas. Pide a unos cuantos lectores del público objetivo que predigan el siguiente estado y compara su respuesta con la ilustración. Así tienes una forma concreta de evaluar su utilidad.

Para un grafo de dependencias sencillo, puede bastar un diagrama convencional. Para tendencias numéricas, usa un gráfico. Anatomy aporta valor cuando manipular un mecanismo ayuda a comprenderlo.

Lo habitual es construir, revisar y publicar una ilustración generada como recurso de una página. Si buscas una interfaz que se adapte durante una conversación, nuestra guía de implementación de Intelligent UI y OpenUI aborda esa arquitectura de aplicación.

Para incorporar este enfoque al proceso de documentación de tu equipo, empieza con una explicación difícil y el comportamiento correcto que debe mostrar. El servicio de AI enablement de Wavect es la opción pertinente para establecer un flujo repetible con agentes y un proceso de revisión.