Anatomy für Claude Code: Interaktive SVG für die Dokumentation

Zurück

Kevin Riedl

12 Min Lesezeit · 12. Oktober 2026
Zuletzt geprüft 12. Oktober 2026

Weiter

Lass Leser ein Triebwerk zerlegen, eine Wellenfrequenz verändern oder mehrere API-Anfragen auf einmal senden. Jede Aktion bekommt eine sichtbare Folge. Das ist eine konkrete Aufgabe für eine technische Illustration, und Anatomy gibt einem Coding-Agenten einen Weg, sie umzusetzen.

Anatomy ist ein Open-Source-Agent-Skill von wheresryan22, der interaktive isometrische Illustrationen als bearbeitbaren Webcode erzeugt. SVG liefert die Geometrie, JavaScript steuert das Verhalten. WebGL kann Effekte wie Wasser oder Abgasstrahlen ergänzen; ein eigener 3D-Modus übernimmt rotierende Bauteile. Das Anatomy-README dokumentiert Ausgaben als eigenständige HTML-Datei, SVG oder React-/Next.js-Komponenten.

Daraus kann eine Dokumentationskomponente entstehen, die Leser erkunden und Entwickler prüfen können. Hier erfährst du, wie du den Skill installierst, eine präzise Aufgabe formulierst und die Grafik so einbettest, dass sie bedienbar bleibt.

Quellen geprüft am 12. Oktober 2026, Repository-Commit 689dcf9. Die Beschreibungen der Demos stammen aus dem Projektcode. Der Prompt und das Abnahmebeispiel unten sind ein von Wavect vorgeschlagener Workflow; wir haben Anatomy weder einem Benchmark unterzogen noch diesen Prompt ausgeführt.

Was zeigen die Demos mit Raketentriebwerk, Wellenwanne und Drehregler?

Schau dir zuerst die interaktive Galerie des Entwicklers an. Die drei Beispiele aus der Ankündigung zeigen unterschiedliche Wege, einen Mechanismus verständlich zu machen.

Die 3D-Referenz kennzeichnet diesen Modus als Beta. Die Beispiele belegen den Darstellungsansatz. Eine detaillierte Triebwerksgrafik ist noch kein Nachweis für technische Korrektheit, Fertigungstauglichkeit oder eine validierte Simulation.

Wie installierst du Anatomy in Claude Code?

Für deine persönliche Claude-Code-Installation nutze den im README dokumentierten Befehl:

npx skills add wheresryan22/anatomy -g -a claude-code

Mit -g installierst du den Skill für deinen Benutzer; -a claude-code wählt Claude Code aus. Im Skill-Ordner sollte ~/.claude/skills/anatomy/SKILL.md zusammen mit dem Kit und den Referenzdateien liegen.

Beachte die beiden Node-Anforderungen getrennt. Anatomy nennt Node.js 20.10+ für seine eigenen Builds und Prüfungen. Die im README beschriebene Version der skills CLI benötigt laut dortiger Angabe Node.js 22.20+. Für die Browserprüfung brauchst du Chrome oder Chromium; React 18+ ist nur für die React-Ausgabe nötig.

Wenn du Git bevorzugst, dokumentiert das Repository diese Alternative:

git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy

Prüfe einen fremden Skill, bevor du ihn in einem Projekt einsetzt. Halte die gewählte Revision in deinen Projektnotizen fest, damit ein späteres Update bewusst erfolgt. Das aktuelle README dokumentiert auch Unterstützung für OpenCode und Codex; diese Anleitung verwendet Claude Code.

Rufe den Skill mit /anatomy auf und ergänze die Aufgabenbeschreibung. Falls du den Skill-Ordner während einer laufenden Claude-Code-Sitzung angelegt hast und der Skill fehlt, empfiehlt das README /reload-skills.

Gib Anatomy einen Mechanismus, ein Lernziel und prüfbare Zahlen

Eine gute erste Grafik beantwortet genau eine Frage. Für eine API-Dokumentation könnte sie lauten: Warum wird ein kurzer Anfrageschub noch akzeptiert, die nächste Anfrage aber abgewiesen?

Der folgende Beispielprompt stammt von uns. Er beschreibt einen bewusst einfachen Token Bucket mit manuell gesteuertem Zeitablauf. Passe das Modell vor der Veröffentlichung an das Verhalten deiner API an.

/anatomy
Erstelle eine interaktive isometrische Illustration für eine API-Dokumentation.
Erkläre Burst-Limits mit einem Token-Spender, der höchstens 8 Tokens enthält.

Modell:
- Beginne mit 8 Tokens. Jede angenommene Anfrage verbraucht 1 Token.
- Fülle 2 Tokens pro Sekunde nach, bis zur Obergrenze von 8.
- Weise eine Anfrage ab, wenn weniger als 1 Token verfügbar ist. Keine Warteschlange.
- Die Zeit läuft nur weiter, wenn die entsprechenden Bedienelemente betätigt werden.

Bedienelemente:
- 1 Anfrage senden; 10 Anfragen zum selben Zeitpunkt senden.
- Zeit um 0.5 Sekunden weiterstellen; Zeit um 10 Sekunden weiterstellen; zurücksetzen.
- Zeige den Tokenbestand und die aufsummierten angenommenen/abgewiesenen Anfragen.
- Leite bewegte Teile und sämtliche Anzeigen aus demselben Zustand ab.

Liefere eine eigenständige HTML-Datei mit allen benötigten Ressourcen und den bearbeitbaren Build-Quellcode.
Nutze SVG; keine externen Schriftarten, Analytics oder Modellaufrufe.
Unterstütze Tastatur und Touch, sichtbaren Fokus und reduzierte Bewegung.
Die Bedienelemente müssen auch bei deaktivierter dekorativer Bewegung nutzbar bleiben.
Ergänze eine statische Erklärung und die erwarteten Ergebnisse der einzelnen Aktionen.
Liste Vereinfachungen und tatsächlich durchgeführte Prüfungen auf.

Das kleine Modell macht die Prüfung überschaubar. Für das Nachfüllen gilt balance = min(8, balance + 2 * elapsedSeconds). Eine Anfrage verbraucht nur dann ein Token, wenn mindestens eines vorhanden ist. Die Animation des Spenders darf diese Regeln nicht verändern.

Prüfe die Erklärung mit einer wiederholbaren Abfolge

Diese Werte sind berechnete Erwartungen für unser Beispiel. Sie stammen aus keinem Anatomy-Testlauf. Mit der Abfolge erkennst du eine plausibel wirkende Grafik, die zu schnell nachfüllt, ihre Kapazität überschreitet oder einen von der Animation unabhängigen Zähler anzeigt.

Wie bettest du eine Anatomy-Grafik in eine Website ein?

Wähle das Ausgabeformat danach, welche Interaktion du brauchst. Eine eigenständige HTML-Seite ist ein praktischer erster Schritt, weil sie Markup, Gestaltung und Verhalten der Grafik zusammenhält. Eine React-Komponente lässt sich enger in eine vorhandene Anwendung integrieren.

Warum reagiert die SVG in einem img-Tag nicht mehr?

Wird SVG als Bild eingebunden, gelten die Einschränkungen dieses Bildkontexts. MDN dokumentiert dafür deaktiviertes JavaScript und eingeschränkte externe Ressourcen. Ein <img src="figure.svg"> eignet sich daher für eine statische Illustration; JavaScript-Bedienelemente aus der interaktiven Seite werden damit nicht übernommen.

Für eine interaktive Einbettung fordere die HTML-Ausgabe an oder integriere SVG und Verhalten in deine Anwendung. Behalte zusätzlich ein statisches Bild für Vorschauen und zum Teilen.

Eine eigenständige HTML-Datei einbetten

Wenn du die geprüfte, eigenständige Ausgabe unter dem folgenden Beispielpfad gespeichert hast, kann die Einbettung so aussehen:

<iframe
  class="anatomy-figure"
  src="/illustrations/anatomy-rate-limit.html"
  title="Interaktive Erklärung von API-Burst-Limits"
  loading="lazy"
  sandbox="allow-scripts">
</iframe>

Ergänze responsive Abmessungen im Stylesheet deiner Website:

.anatomy-figure {
  display: block;
  width: 100%;
  height: clamp(24rem, 65vw, 42rem);
  border: 0;
}

Die iframe-Referenz von MDN erklärt die Attribute title, loading und sandbox. Diese Konfiguration ist ein Ausgangspunkt für eine eigenständige Datei. Prüfe sie mit deiner Content Security Policy und allen benötigten Ressourcen. Auch auf einem schmalen Bildschirm muss jedes Bedienelement erreichbar bleiben.

Schreibe Lernziel, Annahmen und erwartete Ergebnisse als gewöhnliches HTML in den umgebenden Artikel. Leser sollten den Mechanismus auch dann verstehen, wenn die Einbettung nicht lädt. Googles Hinweise zu KI-Funktionen in der Suche empfehlen ebenfalls, wichtige Inhalte in Textform bereitzustellen. Strukturierte Erklärungen helfen Lesern und Suchsystemen, garantieren aber weder Rankings noch Zitate.

Anatomy mit React und Next.js verwenden

Die React-Integrationsanleitung des Projekts trennt statische Geometrie und serverseitig gerenderte Grafik von der Client-Komponente für die Bewegung. Sie verlangt außerdem übereinstimmende Ruhepositionen vor der Hydration.

Behalte diese Aufteilung bei der Integration bei. Prüfe die vollständige Dokumentationsseite, auch mit mehreren Instanzen derselben Grafik. Achte auf Hydration-Warnungen, kollidierende IDs und Animationsschleifen, die nach einem Seitenwechsel weiterlaufen. Für Typografie, Farben und freigegebene Oberflächenmuster gib dem Agenten deine Designsystem-Dateien für Claude Code.

Was solltest du vor der Veröffentlichung prüfen?

Anatomys Prüfworkflow umfasst Geometrie- und Sichtprüfungen. Damit lassen sich Darstellungsfehler finden. Eine fachliche Prüfung muss zusätzlich klären, ob Mechanismus, Beschriftungen, Einheiten und Vereinfachungen den richtigen Zusammenhang vermitteln.

Die Anleitung für Bewegung und Interaktion beschreibt Tastaturbedienung, Touch, reduzierte Bewegung und das Anhalten außerhalb des sichtbaren Bereichs. Prüfe diese Anforderungen an deiner tatsächlich erzeugten Ausgabe.

• Modell prüfen. Führe eine kurze Abfolge mit bekannten Ergebnissen aus. Setze die Grafik mitten in einer Animation zurück und kontrolliere, ob die Beschriftungen weiterhin zum Zustand passen.
• Tastatur und Smartphone verwenden. Jede wesentliche Aktion muss ohne Hover funktionieren. Zeige den Fokus, erkläre die Bedienung und verhindere, dass ein Screenreader jedes einzelne Animationsbild ansagt.
• Bewegung und WebGL getrennt deaktivieren. Bei reduzierter Bewegung muss die Bedienung sinnvoll bleiben. Die zugrunde liegende SVG und der Text sollten den Inhalt weiterhin erklären, wenn ein Shader nicht verfügbar ist.
• Die ganze Seite messen. Prüfe die geladene Datenmenge, die Reaktion auf Eingaben und das Scrollen mit allen eingebundenen Grafiken. Beginne mit SVG und ergänze GPU-Effekte, wenn sie einen Zusammenhang erklären.
• Netzwerkanfragen kontrollieren. Eine erzeugte Browsergrafik kann ohne weitere Modellaufrufe laufen. Prüfe, ob deine tatsächliche Ausgabe unerwartet externe Schriftarten, Analytics oder Dienste lädt.
• Bearbeitbaren Quellcode aufbewahren. Speichere Prompt, Modellannahmen, gewählte Skill-Revision, Build-Quellcode und freigegebene Ausgabe zusammen. Lege fest, wer spätere Korrekturen verantwortet.

Das Quellcode-Kit steht unter der MIT-Lizenz. Erhalte den vorgeschriebenen Hinweis, wenn du den Code weitergibst. Die Open-Source-Lizenz ist unabhängig von den Kosten für den Coding-Agenten und die Prüfung seiner Ausgabe.

Wähle eine Erklärung, bei der heute noch Fragen offenbleiben

Geeignete erste Aufgaben sind etwa die Montagereihenfolge einer Komponente, ein sich füllender Puffer oder ein Ventil, das einen Durchfluss verändert. Beginne mit einer Erklärung, die bereits Rückfragen auslöst. Bitte einige Personen aus der Zielgruppe, den nächsten Zustand vorherzusagen, und vergleiche ihre Antwort mit der Grafik. So kannst du ihren Nutzen konkret beurteilen.

Für einen einfachen Abhängigkeitsgraphen genügt oft ein herkömmliches Diagramm. Zahlenverläufe gehören in ein Datendiagramm. Anatomy ist dann hilfreich, wenn die Bedienung eines Mechanismus das Verständnis verbessert.

Eine generierte Illustration wird üblicherweise erstellt, geprüft und als Bestandteil einer Seite ausgeliefert. Wenn du eine Oberfläche suchst, die sich während eines Gesprächs anpasst, erklärt unser Leitfaden zur Umsetzung mit Intelligent UI und OpenUI die dafür passende Anwendungsarchitektur.

Für die Einführung in den Dokumentationsprozess deines Teams brauchst du zunächst eine schwierige Erklärung und das korrekte erwartete Verhalten. Wavects AI Enablement für dein Team hilft dabei, daraus einen wiederholbaren Agenten-Workflow mit festem Prüfprozess zu machen.