Anatomy: Ein Skill für Claude Code zeichnet Ideen als bewegliche Maschinen

Markus Seyfferth

Autor Dr. Web

14. Oktober 2026

2 Min. Lesezeit

Ein mechanisches Uhrwerk, das sich über die Krone mit der Maus aufziehen lässt, entstand aus einer einzigen Zeile und knapp zwei Stunden Arbeit von Claude Code. Der Entwickler Ryan stellt das Werkzeug dahinter seit dem 9. Oktober als kostenlosen Skill namens Anatomy bereit. Erklärgrafiken für Dokumentationen und Landingpages landen damit als bearbeitbarer Code im eigenen Projekt.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Bis zum 14. Oktober sammelte das GitHub-Repository von Anatomy 8.957 Sterne, 644 Entwickler legten eine eigene Kopie an.^[2] Technische Schaubilder bestehen meist aus Kästen, Pfeilen und Beschriftungen, die Bewegung muss sich der Leser dazudenken.

Das Wichtigste in Kürze

Aus einer einzigen Anweisung baut Claude eine bewegliche isometrische Figur in SVG, auf Wunsch mit WebGL-Effekten.
Skill und Figuren stehen unter MIT-Lizenz, nötig sind ein Coding-Agent wie Claude Code, Node.js ab Version 20.10 und Chrome.
Eine detailreiche Figur beschäftigt den Agenten über Stunden, ein Triebwerk 14 Stunden lang.

Was macht Anatomy anders als ein Diagramm-Werkzeug?

Kugelbahn-Modell mit weißen Kugeln, einer blauen Kugel und Schild „WARTESCHLANGE“ — Anatomy erfindet zu jeder Idee eine Maschine: Eine Warteschlange wird zur Murmelbahn, ein Bloom-Filter zum Spielautomaten mit drei Walzen

Anatomy zeichnet kein Schema, sondern erfindet zu jeder Idee eine Maschine, deren bewegliche Teile das Konzept vorführen: Eine Warteschlange wird zur Murmelbahn, ein Bloom-Filter zum Spielautomaten mit drei Walzen.^[1]

Vor der ersten Linie schreibt Claude die echten Werte als kleines Rechenmodell auf. Bewegung, Messanzeige und Screenreader-Text lesen aus demselben Modell, Bild und Zahl können sich deshalb nicht widersprechen. Jede Figur braucht mindestens 40 Bauteile. Ein Prüfskript kontrolliert, dass kein Teil ein anderes durchdringt.^[1] Das Ergebnis hebt sich vom Einheitslook vibecodierter Oberflächen ab.

Text-zu-Diagramm-Werkzeuge arbeiten schneller und flacher. Napkin AI macht aus Text Flussdiagramme und Infografiken, die Plus-Stufe kostet 9 US-Dollar, rund 7,80 €, pro Person und Monat.^[3] Markdy beschreibt animierte Systemdiagramme in wenigen Zeilen Text.

Was kostet eine Figur?

Der Skill selbst ist kostenlos, bezahlt wird mit Rechenzeit: Claude Code steckt ab dem Pro-Abo für 20 US-Dollar im Monat, rund 17,40 €, im Paket.^[4]

Für die Uhr nennt Ryan 1 Stunde 54 Minuten aktive Arbeitszeit, für das Turbofan-Triebwerk eines Airbus A380 14 Stunden. Vor der größten Ausbaustufe legt der Agent eine Schätzung und einen kleineren Gegenvorschlag vor.^[1] Lange Läufe zehren am Nutzungskontingent, die Max-Stufe mit fünffachem Pro-Volumen beginnt bei 100 US-Dollar, rund 87 €.^[4]

Seit Version 1.1.0 vom 12. Oktober läuft der Skill auch in Codex von OpenAI und in OpenCode.^[5] Ähnlich verteilt Jakub Antalik seine sieben UI-Effekte von Libraries.dev an mehrere Coding-Agenten.

Anatomy im Überblick

Was der Skill für Claude Code verlangt und wie lange eine Figur dauert

Kennzahlen (Stand 14. Oktober 2026)

8.957

Sterne auf GitHub, sechs Tage nach dem Start des Repositorys

Bauteile verlangt der Skill mindestens für jede Figur

fertige Figuren in der Sammlung, alle per Maus und Tastatur bedienbar

0 €

Lizenzkosten unter MIT, Claude Code selbst ab dem Pro-Abo

Aktive Bauzeit von Claude je Figur

Mechanische Uhr (SVG)1 h 54 min

Jahreszeiten-Modell (3D)1 h 57 min

Raketentriebwerk Raptor 2 (WebGL)10 h 33 min

Turbofan-Triebwerk (WebGL)14 h

Anatomy liefert Erklärgrafiken als Code, den Ihr Team weiterbearbeiten kann. Den Preis zahlen Sie in Agentenstunden, beim Triebwerk 14.
Michael Dobler, Herausgeber Dr. Web

Worauf sollten Agenturen vor dem Einbau achten?

Prüfen Sie den Skill vor der Installation wie jedes fremde Paket: Anatomy startet zur Selbstkontrolle Node-Skripte und einen Chrome-Browser ohne Fenster auf Ihrem Rechner.^[2] Wie schnell ein Coding-Agent zum Einfallstor wird, zeigte ein Wurm in 73 GitHub-Repositorys von Microsoft.

Für die öffentliche Galerie liest das Skript publish.mjs Dauer und Tokenverbrauch aus dem Sitzungsprotokoll von Claude Code und zeigt beides vor dem Versand an. Der Schalter --no-session lässt die Werte weg.^[5] Bei Kundenprojekten gehört dieser Schalter zur Grundeinstellung.

Bei der Barrierefreiheit bringen die Figuren Tastaturbedienung, Messwerte für Screenreader und Stillstand bei reduzierter Bewegung mit, beim Überfahren mit der Maus pausiert die Animation.^[1] Die WCAG verlangen für Bewegung, die länger als fünf Sekunden läuft, eine Möglichkeit zum Anhalten.^[6] Ob die Pause per Mauszeiger dafür genügt, klären Sie besser im eigenen Test.

Für Entwickler-Dokumentationen und erklärungsbedürftige Produkte lohnt ein erster Versuch mit einer kleinen Figur. Welches KI-Abo dafür zu Ihrem Team passt, zeigt unser Vergleich der KI-Textgeneratoren.