Le problème des diagrammes : des composants sans comportement
La vidéo virale de Better Stack, This Claude Code Skill Is Actually Insane, met en lumière un problème fondamental des diagrammes traditionnels : les boîtes et les flèches confirment l'existence d'un composant mais révèlent rarement son comportement dynamique. Nous voyons les parties, mais les changements d'état et les relations causales restent souvent abstraits, nous obligeant à déduire le mécanisme.
Voici anatomy, une compétence d'agent open-source pour Claude Code qui inverse ce paradigme. Son principe directeur, explicitement énoncé dans le prompt racine, est : « Ne dessinez pas de boîtes, de flèches et d'étiquettes. Inventez un objet physique réel et bien conçu dont le fonctionnement incarne le concept. » Ce mandat force l'IA à générer des machines physiques interactives qui incarnent la logique du système.
Cette approche transforme la compréhension. Une clé de cache devient une serrure à goupilles ; la bonne clé aligne les goupilles, ouvrant la porte. Un cache LRU peut se manifester sous la forme d'une bibliothèque mécanique rotative, tandis qu'une poignée de main TCP s'anime comme des cordes et des poulies échangeant des lettres.
Au lieu de mémoriser des connexions statiques, les utilisateurs peuvent désormais suivre un mécanisme, en observant comment un cache LRU tourne ou comment le chariot d'un comparateur à cadran glisse pour lire chaque bloc. Cette incarnation physique et interactive démystifie les systèmes complexes, les rendant intuitifs tant pour l'enseignement que pour le débogage. Le résultat n'est pas une image statique, mais du code HTML, SVG ou WebGL inspectable.
Un cache devient une serrure, et un protocole devient une corde
Au lieu de boîtes abstraites, la compétence anatomy fait d'une clé de cache une serrure à goupilles. Mécanisme physique, elle montre la bonne clé alignant les goupilles, permettant à la serrure de tourner. Cela rend la validation tangible, révélant le fonctionnement interne d'un concept.
Un cache LRU se transforme en bibliothèque mécanique rotative ou en circuit à billes. Vous observez les éléments accédés, déplacés et supprimés au fur et à mesure que le mécanisme fonctionne, ce qui démystifie son comportement. De même, TCP devient un système de cordes ou de poulies principal, échangeant des lettres dans les deux sens, illustrant les changements d'état du protocole de poignée de main.
Cette approche s'étend aux assemblages physiques et aux mesures. Un moteur de fusée Raptor, par exemple, explose en 11 assemblages distincts au survol, avec un panache d'échappement WebGL. Un comparateur à cadran révèle son chariot glissant pour mesurer des blocs, l'aiguille lisant chaque bloc au fur et à mesure de votre interaction.
Ces modèles interactifs, rendus en SVG ou WebGL, n'existent pas seulement ; ils fonctionnent. Ils offrent un changement profond, passant de diagrammes statiques à des explications cinétiques, comblant le fossé entre l'existence d'un composant et sa fonction dynamique.
Sous le capot : des illustrations que vous pouvez inspecter
Anatomy, la compétence présentée dans la vidéo This Claude Code Skill Is Actually Insane, génère du code exécutable, pas des images statiques. Claude produit des composants SVG, HTML/JavaScript ou React autonomes. Ce résultat permet une interaction, une inspection et une modification directes, modifiant fondamentalement la façon dont nous visualisons le comportement des systèmes.
Une approche visuelle en couches favorise cette interactivité. Le rendu isométrique, l'ordre de profondeur strict de l'algorithme du peintre et les effets WebGL optionnels comme un panache de moteur (tel que vu sur le moteur de fusée Raptor) contribuent à un sentiment de tangibilité physique. Contrairement à une image matricielle plate, ce sont des machines avec lesquelles vous pouvez interagir.
Les différences pratiques par rapport à la génération d'images traditionnelle sont profondes. Les audits basés sur le navigateur peuvent détecter les collisions, les points de terminaison de pipeline invalides et les occlusions incorrectes, garantissant ainsi l'intégrité géométrique — un détail crucial pour un système destiné à incarner un concept. Le code lui-même peut être inspecté, débogué et versionné.
Il s'agit d'un bond significatif par rapport aux diagrammes abstraits. Pour une exploration plus approfondie des mécanismes sous-jacents, vous pouvez inspecter le code sur GitHub - wheresryan22/anatomy: An agent skill for creating detailed, interactive isometric illustrations. La capacité d'auditer, d'interagir et de versionner ces « machines » générées les élève du rang de simples illustrations à celui de modèles de calcul fonctionnels et inspectables.
Cet article vous plaît ? Recevez-en un comme celui-ci chaque matin.
un e-mail par jour · désinscription en deux clics · aucun traqueur tiers
Où la magie s'arrête — et comment l'essayer
Ce Claude Code Skill est vraiment incroyable, mais ne vous attendez pas à ce qu'il remplace vos outils de diagrammes habituels. La génération de ces modèles complexes et interactifs exige des budgets de calcul et de jetons importants. Chaque illustration détaillée nécessite souvent de nombreuses lignes géométriques, plusieurs exécutions d'agent et une validation basée sur le navigateur pour garantir la précision.
Anatomy excelle dans l'explication de mécanismes spécifiques et de comportements système — comme le fonctionnement interne d'un cache LRU ou les poignées de main de protocole dans TCP. Ce n'est pas un substitut aux diagrammes Mermaid, aux bibliothèques de graphiques standard, aux tableaux de bord financiers ou aux cartes géographiques. Utilisez-le pour clarifier comment quelque chose fonctionne, pas simplement pour montrer que cela existe.
Pour expérimenter avec Anatomy, accédez au projet GitHub sous licence MIT à l'adresse wheresryan22/anatomy. Vous y trouverez la commande CLI Agent Skills. Commencez petit : choisissez un concept unique, générez son modèle interactif et inspectez le code SVG, HTML ou React résultant. Cela garantit que l'interaction et la logique générées correspondent à votre intention avant de partager.
La compétence génère du code, pas des images statiques. Cette différence fondamentale permet les visualisations précises et interactives présentées dans This Claude Code Skill Is Actually Insane. D'une simple serrure à goupilles à un moteur Raptor multi-assemblage avec un panache d'échappement WebGL, Anatomy rend les abstractions tangibles.
Foire aux questions
Qu'est-ce que le Claude Code skill Anatomy ?
Une compétence d'agent open-source qui guide les agents de codage pour construire des illustrations interactives basées sur le code de concepts sous forme de mécanismes physiques fonctionnels.
Comment Anatomy explique-t-il les concepts logiciels ?
Il mappe un concept à une analogie mécanique, puis crée une illustration interactive qui permet aux utilisateurs d'observer ou de manipuler son comportement.
Anatomy peut-il remplacer Mermaid ou les bibliothèques de graphiques ?
Non. Il complète les outils de diagrammes de flux pour expliquer les mécanismes, mais il n'est pas destiné aux tableaux de bord, aux graphiques financiers ou aux cartes géographiques.
Comment puis-je installer Anatomy pour Claude Code ?
Le projet documente l'installation avec la CLI Agent Skills : npx skills add wheresryan22/anatomy -g -a claude-code.