anatomy erklärt: isometrische, interaktive Illustrationen mit Claude Code
anatomy ist ein Skill, mit dem Coding-Agenten detaillierte, bedienbare Isometrie-Zeichnungen echter Maschinen in SVG bauen. Wir haben nach seinen Regeln eine Tischkreissäge mit Höhenkurbel, Parallelanschlag und Schalter gezeichnet und die Bedienung als Video festgehalten.
Was ist anatomy? anatomy ist ein Skill für Coding-Agenten, der interaktive isometrische Illustrationen baut: Zeichnungen in gleichmässiger Schrägansicht, wie man sie aus technischen Handbüchern kennt. Die Grundidee steht gleich am Anfang der Anleitung: «The object is the explanation». Statt ein Konzept mit Pfeilen zu erklären, erfindet der Agent eine echte Maschine, deren Funktion das Konzept ist.
Die Anleitung nennt Beispiele: Ein Cache-Schlüssel wird zum Stiftschloss, verschiedene Speichergrössen werden zu einer Kommode mit unterschiedlich tiefen Schubladen.
Warum anatomy gerade so gefragt ist
wheresryan22/anatomy wurde am 08.10.2026 angelegt, Version 1.0.0 erschien am 10.10.2026, Version 1.1.0 am 12.10.2026. Am 04.11.2026 zählte das Repository 24'717 Sterne und 2'064 Forks (Stand 04.11.2026, Quelle: GitHub). Die Beispiele im Repository zeigen, was der Skill anstrebt: ein Raketentriebwerk im Teststand mit WebGL-Flamme, einen Arcade-Automaten mit rollender Münze, eine Wellenwanne mit Lichtbrechung. Laut Changelog kamen danach unter anderem druckbare A4-Blätter und Unterstützung für weitere Agenten wie Antigravity und MiniMax Code hinzu.
So funktioniert es
Der Ablauf in zehn Schritten, verkürzt:
- Grösse festlegen: Figure (eine Mechanik, 40 bis 80 Teile), Hero (80 bis 150 Teile) oder Epic (ganze Anlagen, wird nicht ohne Rückfrage gebaut).
- Wahrheit zuerst: echte Masse und Verhalten sammeln, ein kleines Modell schreiben, das Bewegung und Anzeige speist.
- Objekt erfinden und in einem Satz sagen, was sich bewegt und was das bedeutet.
- Teileliste: Sockel, Füsse, Schrauben, Schienen, Massband, Knöpfe, Federn.
- Kamera: Azimut 45 Grad, Elevation 30 Grad, Welteinheiten in Millimetern.
- Geometrie einmal bauen mit dem Kit.
- Von hinten nach vorne malen (Malerreihenfolge), damit Vorderes Hinteres verdeckt.
- Rahmen: «Fig n» oben links, Titel oben rechts, Bedienhinweis unten links, Live-Anzeige unten rechts.
- Leben: ruhige Bewegung, eine Leerlauf-Tour, Reaktion auf Maus und Tastatur, Stillstand bei reduzierter Bewegung.
- Prüfen wie ein Kritiker: Screenshots, Audit auf Durchdringungen und lose Linienenden, Nahaufnahmen in vierfacher Vergrösserung.
Die Stilregeln sind streng: Volumen statt Drahtgitter, vier Grautöne nach Ausrichtung der Flächen, genau ein hervorgehobenes Teil, kein Text in der Zeichnung ausser einer kleinen Gravur, jede Linie endet auf etwas.
Installation
Laut README für Claude Code:
npx skills add wheresryan22/anatomy -g -a claude-code
Alternativ per GitGit ist ein Versionskontrollsystem, das jede Änderung am Code einer Software oder Website mit Zeitpunkt, Autor und Beschreibung speichert. Damit lassen sich…Mehr erfahren →, ebenfalls laut README: git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy. Der Skill braucht laut seiner Kompatibilitätsangabe Node.js 20.10 oder neuer sowie Chrome oder Chromium für die Prüfungen.
Unser Test
Skill-Dateien von GitHub (Commit 1482e84), angewendet von Claude Opus 5.5 am 04.11.2026, Ergebnis eine Stichprobe von eins. Aufgabe: eine isometrische, interaktive Illustration eines echten Geräts aus dem Handwerk. Gewählt haben wir eine Tischkreissäge, Grösse «Figure». Das Kit (iso-kit, lathe, tube, audit) und die Prüfskripte haben wir nicht ausgeführt. Projektion, Flächen, Schattierung und Malerreihenfolge haben wir deshalb in eigenem JavaScript nachgebaut, genau nach den Regeln aus SKILL.md und der Datei craft.md.
Das Modell hat drei Grössen: Schnitthöhe 0 bis 80 Millimeter bei einem 250-Millimeter-Blatt, Anschlag 20 bis 400 Millimeter vom Blatt und Motor ein oder aus. Diese Werte sind Modellwerte unserer Zeichnung, keine Herstellerangaben. Die Kurbel zieht man mit der Maus, der Anschlag fährt seitlich, der Schalter am Gehäuse startet die Drehung. Pfeiltasten und Leertaste tun dasselbe. Unten rechts zeigt die Karte laufend Teil, Schnitthöhe, Anschlag und Motorzustand.
Was gut war: Die Regeln machen den Unterschied zwischen Diagramm und Zeichnung greifbar. Ohne die Vorgaben zu Tonwerten, Schrauben an den Ecken, Massband mit Haupt- und Nebenstrichen und Halo unter dem Sockel wäre das Ergebnis deutlich flacher geworden. Auch der Grundsatz «eine Quelle für Bewegung und Anzeige» führt zu einer Figur, deren Zahlen stimmen.
Was nicht gut war: Mit rund 45 Körpern liegt unsere Figur am unteren Rand einer «Figure» und weit unter den Beispielen im Repository. Der Absaugstutzen und das Neigungsrad wirken flach, und der Gehrungsanschlag wird beim Überfahren manchmal von der Tischplatte überdeckt. Das Audit des Skills hätte solche Fehler gefunden; ohne das Kit fehlt diese Sicherheit. Eine dunkle Fassung, eine WebGL-Ebene und die Prüfung bei 390 Pixeln Breite haben wir nicht umgesetzt.
Beispiele aus der Praxis
- Hersteller und Händler von Maschinen: eine bedienbare Erklärfigur auf der Produktseite statt eines statischen Datenblatts, etwa wie sich eine Hubhöhe oder ein Anschlag einstellen lässt.
- Software-Anbieter: abstrakte Abläufe wie Caching oder Warteschlangen als Mechanik zeigen, wie es die Beispiele des Skills tun.
- Schulung und Dokumentation: dieselbe Figur später als A4-Poster oder Handout drucken, was der Skill laut Changelog unterstützt.
Grenzen, Risiken, Lizenz
MIT-Lizenz, kostenlos. Das Kit und die Prüfskripte sind ausführbarer Code, der einen Browser steuert; vor dem ersten Lauf in einem eigenen Projektordner lesen. Laut Anleitung veröffentlicht der Skill Figuren nur auf ausdrücklichen Wunsch in einer Community-Galerie, dabei verlassen die Dateien das Gerät. Der Aufwand ist nicht zu unterschätzen: Schon eine kleine Figur ist echte Zeichenarbeit, auch für einen Agenten. Grundlagen zum Format stehen in unserem Glossar unter SVG.
Für wen lohnt sich anatomy?
Für Teams, die Technik erklären müssen und bereit sind, ein bis vier Stunden in eine einzelne, sehr gute Figur zu stecken. Für die typischen KI-Gestaltungsmuster auf ganzen Seiten sind die Skills aus unserem Vergleich der Anti-Slop-Skills passender. Wer eine interaktive Erklärgrafik als Teil einer Web-AppEine Web-App ist eine Anwendung, die im Browser läuft und sich wie ein Programm bedienen lässt — mit Login, Eingaben, gespeicherten Daten und Abläufen. Anders…Mehr erfahren → braucht, findet den Einstieg bei Web-App entwickeln lassen.
Weitere Projekte aus dieser Serie finden Sie in der Übersicht über alle 20 GitHub-Trends vom November 2026.
Häufige Fragen
Was ist der anatomy-Skill?+
anatomy ist ein frei verfügbarer Skill für Coding-Agenten, der technische Ideen als detaillierte isometrische Zeichnung einer echten Maschine darstellt. Die Figuren bestehen aus SVG, reagieren auf Maus und Tastatur und zeigen Werte, die aus demselben Modell stammen wie die Bewegung.
Brauche ich React für anatomy?+
Nein. Laut Anleitung funktioniert anatomy ohne Framework mit einem Node-Build-Skript, das eine eigenständige HTML-Seite schreibt, oder in React und Next.js mit Server- und Client-Komponenten.
Kann anatomy auch PDFs erzeugen?+
Ja. Laut Changelog kann ein Skript Posen einer fertigen Figur einfrieren und als A4- oder Letter-PDF in den Formaten Poster, technische Zeichnung oder ausführliches Handout ausgeben. Diese Funktion haben wir nicht getestet.
Wie lange dauert eine Figur?+
Der Skill unterscheidet Grössen: Eine einfache Figur mit 40 bis 80 Teilen ist oft in unter einer Stunde fertig, eine dichte Hero-Figur braucht laut Anleitung etwa zwei bis vier Stunden. Für ganze Fahrzeuge oder Anlagen nennt er sechs Stunden und mehr und schlägt zuerst eine kleinere Fassung vor.
Über den Autor
Daniel MüllerSenior Developer & SEO-Stratege
Daniel Müller ist Senior Developer und SEO-Stratege bei DLM Digital in Zürich. Mit über 10 Jahren Erfahrung in Webentwicklung, SEO, GEO/AEO und KI-Integration begleitet er Schweizer KMU bei der digitalen Transformation. Im DLM Magazin schreibt er über KI, Vibe Coding und moderne Suchmaschinen-Sichtbarkeit.
