--- title: "Anatomy für Claude Code: Interaktive SVG einbetten" canonical: https://wavect.io/de/blog/anatomy-claude-code-interactive-svg/ language: de description: "Anatomy in Claude Code installieren und interaktive SVG in deine Dokumentation einbetten: mit Prompt, HTML- und React-Ausgabe sowie WebGL- und Modellprüfung." image: "https://wavect.io/img/blog/headers/header_anatomy-claude-code-interactive-svg.png" author: ["Kevin Riedl"] published: "2026-10-12" updated: "2026-10-12" reviewed: "2026-10-12" --- # Anatomy für Claude Code: Interaktive SVG für die Dokumentation [**Zurück**](/de/blog/overview/) [![Kevin Riedl](/img/team/kevin.webp)](/de/team/kevin-riedl/) [Kevin Riedl](/de/team/kevin-riedl/) https://linkedin.com/in/wsdt 12 Min Lesezeit · 12. Oktober 2026 Zuletzt geprüft 12. Oktober 2026 [**Weiter**](/de/blog/claude-code-design-system-files/) TL;DR Anatomy macht aus einer technischen Aufgabenbeschreibung bearbeitbare isometrische Grafiken mit SVG und JavaScript. Optional kommen WebGL-Effekte und ein 3D-Modus in der Betaphase dazu. Installiere den Skill in Claude Code, beschreibe einen Mechanismus mit prüfbaren Zahlen und wähle für die Interaktion eine eigenständige HTML-Datei oder React-Komponenten. Ein img-Tag eignet sich für die statische Variante. Prüfe vor der Veröffentlichung das Modell, die Tastatur- und Touch-Bedienung, reduzierte Bewegung und die Leistung der gesamten Seite. 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](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/README.md) 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](https://skills.wheresryan.sh/anatomy) an. Die drei Beispiele aus der Ankündigung zeigen unterschiedliche Wege, einen Mechanismus verständlich zu machen. | Beispiel | Was es zeigt | Wo der Ansatz hilft | | --- | --- | --- | | [Raketentriebwerk](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/examples/raptor-engine/build.mjs) | Eine Explosionsansicht mit 11 Baugruppen und einer SVG-Struktur, ergänzt um einen WebGL-Abgaseffekt. | Erklärt, welche Komponenten zusammengehören und was jede Baugruppe macht. | | [Wellenwanne](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/examples/ripple-tank/model.mjs) | Ein Wellen- und Optikmodell steuert die Darstellung der Wanne einschließlich der Wassereffekte. | Zeigt, wie eine veränderte Eingabe das beobachtbare Ergebnis beeinflusst. | | [Drehregler](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/examples/turning-dial/build.mjs) | Bauteile rotieren im dreidimensionalen Raum und werden bei jeder Bewegung des Reglers in die Illustration projiziert. | Erklärt räumliche Orientierung oder einen mechanischen Zusammenhang, der erst durch Drehung verständlich wird. | Die [3D-Referenz kennzeichnet diesen Modus als Beta](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/references/3d.md). 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 | Aktion in dieser Reihenfolge | Tokens | Angenommen | Abgewiesen | | --- | --- | --- | --- | | Zurücksetzen | 8 | 0 | 0 | | 10 Anfragen zum selben Zeitpunkt senden | 0 | 8 | 2 | | Zeit um 0.5 Sekunden weiterstellen | 1 | 8 | 2 | | 1 Anfrage senden | 0 | 9 | 2 | | Zeit um 10 Sekunden weiterstellen | 8 | 9 | 2 | 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. | Ausgabe | Passt für | Integrationsaufwand | | --- | --- | --- | | SVG- oder PNG-Bild | Artikelgrafiken, Folien, Druck und statische Erklärungen | Beschreibenden Alternativtext ergänzen und die Erklärung lesbar halten. | | Eigenständige HTML-Datei | Eine bedienbare Grafik innerhalb einer Dokumentationsseite | Die geprüfte Datei hosten und mit einem passend konfigurierten iframe einbetten. | | Inline-SVG mit JavaScript | Bedienelemente, die ihren Zustand mit der umgebenden Seite teilen | Skripte prüfen, Styles eingrenzen und doppelte SVG-IDs bei mehreren Instanzen vermeiden. | | React-/Next.js-Komponenten | Eine gepflegte Komponente für Dokumentation oder Produkt | Modell, statische Grafik, Client-Verhalten und das Aufräumen beim Entfernen der Komponente 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image). Ein `` 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: ``` ``` 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe) 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](https://developers.google.com/search/docs/appearance/ai-features) 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](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/references/react.md) 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](/de/blog/claude-code-design-system-files/). ## Was solltest du vor der Veröffentlichung prüfen? Anatomys [Prüfworkflow](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/references/verify.md) 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](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/references/motion.md) 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](https://github.com/wheresryan22/anatomy/blob/689dcf966e63d92be10a5d593c6e19e10acd4422/LICENSE). 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](/de/blog/openai-intelligent-ui-vs-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](/de/services/ai-enablement/) hilft dabei, daraus einen wiederholbaren Agenten-Workflow mit festem Prüfprozess zu machen. ## Anatomy-Skill: praktische Fragen ### Was ist der Anatomy-Skill für Claude Code? Anatomy ist das Open-Source-Projekt wheresryan22/anatomy. Es leitet einen Coding-Agenten an, isometrische Illustrationen mit SVG und JavaScript zu erstellen, optional mit WebGL-Effekten und einem 3D-Modus in der Betaphase. Als Ausgabe sind eigenständige Seiten oder Anwendungskomponenten möglich. ### Ist Anatomy kostenlos? Das Quellcode-Kit steht unter der MIT-Lizenz. Die Nutzung des Coding-Agenten, die Umsetzung und die Prüfung können trotzdem Geld kosten. Die fertige Browsergrafik benötigt nicht grundsätzlich für jede Interaktion einen KI-Aufruf. ### Kann ich eine interaktive Anatomy-SVG mit einem img-Tag einbinden? Bei einer Einbettung als Bild bleibt die JavaScript-Interaktion nicht erhalten. Bette stattdessen eine eigenständige HTML-Datei ein oder integriere SVG, Skripte und Bedienelemente in die Seite. Behalte eine Bildversion für statische Vorschauen. ### Funktioniert Anatomy mit React und Next.js? Ja. Das Repository enthält eine React-Integrationsanleitung, die statische Grafik und clientseitige Bewegung trennt. Prüfe vor der Veröffentlichung die ganze Seite auf Hydration-Probleme, Fehler bei mehreren Instanzen und korrektes Aufräumen beim Entfernen der Komponente. ### Kann Anatomy eine technische Simulation ersetzen? Das Projekt liefert einen Workflow für Illustrationen und Prüfungen der Darstellung. Daraus folgt keine Eignung eines erzeugten Modells für technische Entscheidungen. Lass Gleichungen, Annahmen und Einheiten von einer fachlich verantwortlichen Person prüfen. ### Braucht jede Anatomy-Grafik WebGL? Nein. SVG bildet die Grundlage der Darstellung. WebGL ergänzt Effekte wie Wasser oder Abgasstrahlen. Nutze es, wenn der Effekt den Inhalt besser erklärt, und prüfe die SVG-Darstellung ohne WebGL gesondert. Agent Engineering ## Weiterlesen Coding Agents, MCP, Kontextsysteme, Evaluation und Kontrollen für verlässliche Automatisierung. [Hier starten**Graph Engineering für KI-Agenten: Wann lohnt sich ein Knowledge Graph?**](/de/blog/graph-engineering-ai-agents/) - [Google AX Agent Executor: Budgets und Selbsthosting](/de/blog/google-ax-agent-executor-security-self-hosting/) - [WikiSkill: Wie Agenten SKILL.md aus Erfahrung weiterentwickeln](/de/blog/wikiskill-self-evolving-agent-skills/) - [Tencent Octop im Review: Was Entwickler tatsächlich kostenlos bekommen](/de/blog/tencent-octop-ai-assistant-review/) - [Wigolo im Test: Lokale Web Intelligence für AI Agents](/de/blog/wigolo-local-web-intelligence-mcp-review/) - [Supermemory: KI-Agenten mit Gedächtnis, RAG und lokalem Betrieb](/de/blog/supermemory-ai-agent-memory/) [Nächster Artikel**Google AX Agent Executor: Budgets und Selbsthosting**](/de/blog/google-ax-agent-executor-security-self-hosting/) [**Zurück**](/de/blog/overview/) [![Kevin Riedl](/img/team/kevin.webp)](/de/team/kevin-riedl/) [Kevin Riedl](/de/team/kevin-riedl/) https://linkedin.com/in/wsdt 12 Min Lesezeit · 12. Oktober 2026 Zuletzt geprüft 12. Oktober 2026 [**Weiter**](/de/blog/claude-code-design-system-files/)