Anatomy: 265 recursos para explorar, con demos y prompts en GitHub

Si queréis ver qué se puede hacer con Anatomy antes de instalarlo, he reunido 265 recursos y 68 prompts publicados en una recopilación con vistas previas y enlaces a las obras originales.

Ver la colección en GitHub: awesome-anatomy


Portada de la recopilación.

Anatomy es un skill de código abierto creado por Ryan para Claude Code. Le describes un mecanismo o un concepto y genera una figura técnica con vista isométrica. Según el ejemplo, puedes girarla, separar piezas o mover controles para seguir lo que ocurre.

Lo que me llamó la atención fue la variedad. Hay relojes y motores, pero también una cola de mensajes representada como un circuito de canicas o una caché LRU como una estantería que se reordena. En la última actualización añadí escenas de fábricas, un despiece de Starship, modelos de órganos, un switch de red y un cambio trasero de bicicleta.

¿Qué hay en el repositorio?

• Una galería para elegir por la imagen, con acceso a la demo o publicación original.
• Un catálogo por temas: mecánica, informática, física, biología y otros.
• Los prompts que sus autores han publicado, en páginas donde se pueden copiar, y enlaces al código cuando está disponible.

Muchas demos se pueden abrir directamente en el navegador. Para explorar la lista no hace falta instalar Anatomy. Los 265 registros incluyen 19 estudios de renderizado; las versiones claras, oscuras y los reposts no se cuentan por separado.

Mi aportación es reunir y ordenar las referencias. Anatomy es de Ryan y cada obra sigue siendo de su autor, con sus propias condiciones de uso. Tampoco daría por correcto un mecanismo solo porque la animación se vea bien: los trabajos más elaborados llevan revisiones.

Si queréis crear algo desde cero, esta es la página original de Anatomy. Si ya tenéis un ejemplo hecho con él, dejadlo por aquí y lo reviso para añadirlo.

Trabajo en aicost.tools y Anatomy me parece de lo más vistoso que he visto para documentación; lo de la caché LRU como una estantería que se reordena lo entiende cualquiera. Lo que yo vigilaría es justo lo que apuntas de las revisiones: cada vuelta en Claude Code suele reescribir un HTML o un componente React entero, así que una ilustración interactiva gasta bastante más que una explicación en texto. ¿Has visto si a alguien le funciona mejor sacar primero el SVG estático y añadir la interactividad al final?

Gracias por compartir la recopilación, susu su. Me parece un gran aporte que cada entrada conserve el autor y los enlaces originales, porque en este tipo de proyectos comunitarios la trazabilidad se pierde con mucha facilidad. La idea de usar Anatomy para contenido educativo y documentación me parece de lo más potente: una ilustración interactiva puede explicar en segundos mecanismos que solo con texto cuestan mucho de entender. Voy a revisar el repositorio por si encuentro algún ejemplo interesante que aportar.

Por cierto, si aún no has probado Meta Muse, puedes registrarte en https://muse.ai/join y canjear mi código de invitación YVX6C0 en Ajustes dentro de las 48 horas: nos dan 1 000 millones de tokens a cada uno.

aicost_tools dijo:

sacar primero el SVG estático y añadir la interactividad al final

Haz clic para expandir...

Buena pregunta. No tengo una comparación de costes entre los dos métodos, así que no te diría que uno sale más barato.

Yo probaría primero con la geometría, las etiquetas y un mecanismo que se entienda en estático. Después añadiría una interacción concreta: mover una pieza, cambiar un valor o separar un conjunto, pidiendo cambios sobre lo que ya está hecho. Así evitas seguir cambiando el dibujo mientras ajustas la animación.

Puede ahorrar vueltas, pero si luego hay que rehacer la estructura del SVG para que se mueva, la ventaja se pierde. Mi proyecto es sobre todo una recopilación de referencias, no una prueba de costes. Si pruebas ambos caminos con el mismo objeto, me interesaría ver el resultado.