Das Diagramm-Problem: Komponenten ohne Verhalten
Das virale Video von Better Stack, This Claude Code Skill Is Actually Insane, beleuchtet ein Kernproblem traditioneller Diagramme: Kästchen und Pfeile bestätigen zwar die Existenz einer Komponente, offenbaren aber selten ihr dynamisches Verhalten. Wir sehen die Teile, aber Zustandsänderungen und kausale Zusammenhänge bleiben oft abstrakt, sodass wir den Mechanismus nur erahnen können.
Hier kommt anatomy ins Spiel, eine Open-Source-Agenten-Skill für Claude Code, die dieses Paradigma auf den Kopf stellt. Ihr Leitprinzip, das explizit im Root-Prompt festgelegt ist, lautet: „Zeichne keine Kästchen, Pfeile und Beschriftungen. Erfinde ein echtes, gut gemachtes physisches Objekt, dessen Funktionsweise das Konzept darstellt.“ Dieser Auftrag zwingt die KI dazu, interaktive, physische Maschinen zu generieren, die die Logik des Systems verkörpern.
Dieser Ansatz verändert das Verständnis grundlegend. Ein Cache-Key wird zu einem Stiftschloss; der richtige Schlüssel richtet die Stifte aus und öffnet die Tür. Ein LRU-Cache könnte sich als rotierendes mechanisches Bücherregal manifestieren, während ein TCP-Handshake als Seil- und Flaschenzugsystem animiert wird, das Briefe austauscht.
Anstatt statische Verbindungen auswendig zu lernen, können Benutzer nun einem Mechanismus folgen und beobachten, wie sich ein LRU-Cache dreht oder wie der Schlitten einer Messuhr gleitet, um jeden Block zu lesen. Diese interaktive, physische Verkörperung entmystifiziert komplexe Systeme und macht sie sowohl für die Lehre als auch für das Debugging intuitiv. Das Ergebnis ist kein statisches Bild, sondern untersuchbarer HTML-, SVG- oder WebGL-Code.
Ein Cache wird zum Schloss – und ein Protokoll zum Seil
Anstelle von abstrakten Kästchen macht die anatomy-Skill einen Cache-Key zu einem Stiftschloss. Als physischer Mechanismus zeigt es, wie der richtige Schlüssel die Stifte ausrichtet und das Schloss öffnen lässt. Dies macht die Validierung greifbar und enthüllt das Innenleben eines Konzepts.
Ein LRU-Cache verwandelt sich in ein rotierendes mechanisches Bücherregal oder eine Kugelbahn. Sie beobachten, wie Elemente aufgerufen, verschoben und entfernt werden, während der Mechanismus arbeitet, was sein Verhalten entmystifiziert. Ähnlich wird TCP zu einem Seil- oder Flaschenzugsystem, das Briefe hin und her schickt und so die Zustandsänderungen des Handshake-Protokolls veranschaulicht.
Dieser Ansatz erstreckt sich auch auf physische Baugruppen und Messungen. Ein Raptor-Raketentriebwerk beispielsweise explodiert beim Hovern in 11 verschiedene Baugruppen, komplett mit einer WebGL-Abgasfahne. Eine Messuhr zeigt, wie ihr Schlitten über Blöcke gleitet, wobei die Nadel jeden Block abliest, während Sie damit interagieren.
Diese interaktiven Modelle, die als SVG oder WebGL gerendert werden, existieren nicht nur; sie laufen. Sie bieten einen tiefgreifenden Wandel von statischen Diagrammen hin zu kinetischen Erklärungen und schließen die Lücke zwischen der Existenz einer Komponente und ihrer dynamischen Funktion.
Unter der Haube: Illustrationen, die man untersuchen kann
Anatomy, die im Video This Claude Code Skill Is Actually Insane vorgestellte Skill, generiert ausführbaren Code, keine statischen Bilder. Claude erstellt in sich geschlossene SVG-, HTML/JavaScript- oder React-Komponenten. Diese Ausgabe ermöglicht direkte Interaktion, Untersuchung und Modifikation, was die Art und Weise, wie wir Systemverhalten visualisieren, grundlegend verändert.
Ein schichtweiser visueller Ansatz treibt diese Interaktivität an. Isometrisches Rendering, strikte Tiefensortierung nach dem Maler-Algorithmus und optionale WebGL-Effekte wie eine Triebwerksfahne (wie beim Raptor-Raketentriebwerk zu sehen) tragen zu einem Gefühl physischer Greifbarkeit bei. Im Gegensatz zu einem flachen Rasterbild sind dies Maschinen, mit denen man interagieren kann.
Die praktischen Unterschiede zur traditionellen Bilderzeugung sind tiefgreifend. Browserbasierte Audits können Kollisionen, ungültige Pipe-Endpunkte und fehlerhafte Okklusionen erkennen und so die geometrische Integrität sicherstellen – ein entscheidendes Detail für ein System, das ein Konzept verkörpern soll. Der Code selbst kann inspiziert, debuggt und versioniert werden.
Dies ist ein bedeutender Sprung gegenüber abstrakten Diagrammen. Für eine weitere Untersuchung der zugrunde liegenden Mechanik können Sie den Code unter GitHub - wheresryan22/anatomy: An agent skill for creating detailed, interactive isometric illustrations einsehen. Die Möglichkeit, diese generierten „Maschinen“ zu prüfen, mit ihnen zu interagieren und sie zu versionieren, hebt sie von bloßen Illustrationen zu funktionalen, überprüfbaren Berechnungsmodellen ab.
Gefällt Ihnen der Artikel? Erhalten Sie jeden Morgen einen wie diesen per E-Mail.
eine E-Mail pro Tag · Abmeldung mit zwei Klicks · kein Tracking durch Dritte
Wo die Magie endet – und wie man es ausprobiert
Dieser Claude Code Skill ist absolut verrückt, aber erwarten Sie nicht, dass er Ihre alltäglichen Diagramm-Tools ersetzt. Die Erstellung dieser komplexen, interaktiven Modelle erfordert erhebliche Rechenleistung und Token-Budgets. Jede detaillierte Illustration erfordert oft zahlreiche Geometrielinien, mehrere Agenten-Durchläufe und eine browserbasierte Validierung, um die Genauigkeit zu gewährleisten.
Anatomy eignet sich hervorragend zur Erklärung spezifischer Mechanismen und Systemverhaltensweisen – wie die Funktionsweise eines LRU-Caches oder die Protokoll-Handshakes in TCP. Es ist kein Ersatz für Mermaid-Diagramme, Standard-Charting-Bibliotheken, Finanz-Dashboards oder geografische Karten. Nutzen Sie es, um zu verdeutlichen, wie etwas funktioniert, nicht nur, dass es existiert.
Um mit Anatomy zu experimentieren, greifen Sie auf das MIT-lizenzierte GitHub-Projekt unter wheresryan22/anatomy zu. Dort finden Sie den Agent Skills CLI-Befehl. Fangen Sie klein an: Wählen Sie ein einzelnes Konzept, generieren Sie dessen interaktives Modell und inspizieren Sie den resultierenden SVG-, HTML- oder React-Komponentencode. Dies stellt sicher, dass die generierte Interaktion und Logik mit Ihrer Absicht übereinstimmen, bevor Sie sie teilen.
Der Skill generiert Code, keine statischen Bilder. Dieser grundlegende Unterschied ermöglicht die präzisen, interaktiven Visualisierungen, die in This Claude Code Skill Is Actually Insane gezeigt werden. Von einem einfachen Stiftschloss bis hin zu einem Raptor-Triebwerk mit mehreren Baugruppen und einer WebGL-Abgasfahne macht Anatomy Abstraktionen greifbar.
Häufig gestellte Fragen
Was ist der Anatomy Claude Code Skill?
Ein Open-Source-Agenten-Skill, der Coding-Agenten anleitet, interaktive, codebasierte Illustrationen von Konzepten als funktionierende physikalische Mechanismen zu erstellen.
Wie erklärt Anatomy Softwarekonzepte?
Es bildet ein Konzept auf eine mechanische Analogie ab und erstellt dann eine interaktive Illustration, die es Benutzern ermöglicht, dessen Verhalten zu beobachten oder zu manipulieren.
Kann Anatomy Mermaid oder Charting-Bibliotheken ersetzen?
Nein. Es ergänzt Flussdiagramm-Tools zur Erklärung von Mechanismen, ist aber nicht für Dashboards, Finanzdiagramme oder geografische Karten gedacht.
Wie kann ich Anatomy für Claude Code installieren?
Das Projekt dokumentiert die Installation mit der Agent Skills CLI: npx skills add wheresryan22/anatomy -g -a claude-code.