Anatomy: Claude baut deine Idee als echte Maschine

Mit Anatomy beschreibst du eine Idee in einer Zeile, und Claude baut dir eine Maschine, die genau das tut, als interaktive, isometrische Figur. Hier findest du den Link, die Installation, deinen ersten Aufruf und die Beispiel-Prompts aus der Galerie zum Kopieren.

Was Anatomy baut

Anatomy ist ein kostenloser Open-Source-Skill unter MIT-Lizenz. Das Repo liegt auf github.com/wheresryan22/anatomy und hat in seiner ersten Woche über 12.000 Sterne gesammelt. Alle fertigen Figuren zum Ausprobieren findest du in der Galerie auf skills.wheresryan.sh.

Der Skill zeichnet keine Kästen mit Pfeilen. Claude erfindet zu deiner Idee ein echtes Objekt, dessen Funktionsweise die Idee ist: Ein Bloom-Filter wird zum Spielautomaten, dessen drei Walzen die drei Hash-Funktionen sind, ein LRU-Cache zum Bücherregal mit vier Plätzen. Das Objekt besteht aus Dutzenden bis Hunderten kleiner Teile, reagiert auf Maus und Tastatur, und jede Zahl, die es anzeigt, kommt aus demselben Modell, das die Teile bewegt.

Du bekommst die Figur als eigenständige HTML-Seite, als einzelne SVG-Datei oder als React-Komponente für Next.js, jeweils hell oder dunkel. Feuer, Wasser und Licht kommen per WebGL dazu, Teile, die sich echt im Raum drehen, über den 3D-Modus.

Was du brauchst

• Claude Code. Anatomy läuft genauso in Codex, OpenCode, Antigravity und MiniMax Code.
• Node.js ab Version 22.20 für den Installbefehl. Hast du es noch nicht, lad dir auf nodejs.org die LTS-Version und installier sie.
• Chrome oder Chromium. Damit prüft Claude jede Figur über Screenshots und Nahaufnahmen, bevor sie fertig ist. Die Prüf-Skripte finden den Browser an den üblichen Orten selbst.
• React 18 oder neuer, aber nur, wenn du die Figur als React-Komponente willst.

API-Keys brauchst du keine, und nachinstallieren musst du auch nichts.

Anatomy installieren

Öffne das Terminal und gib ein:

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

Damit landet der Skill unter ~/.claude/skills/anatomy und steht dir in jedem Projekt zur Verfügung. Der Installer kopiert das ganze Repo mit allen Beispielen, rund 10 MB.

Für die anderen Agents tauschst du nur das Ende aus:

• Codex: -a codex
• OpenCode: -a opencode
• Antigravity: -a antigravity
• MiniMax Code: -a minimax-code

Lässt du -a ganz weg, fragt dich der Installer, für welche Agents er den Skill einrichten soll.

Läuft Claude Code schon, erkennt es den neuen Skill direkt. Gab es den Ordner ~/.claude/skills beim Start der Session noch nicht, tipp einmal /reload-skills. Codex, OpenCode, Antigravity und MiniMax Code startest du neu, falls der Skill nicht auftaucht.

Wenn du das Terminal nicht anfassen willst, gib Claude Code diesen Prompt. Claude führt den Befehl aus, du bestätigst ihn nur.

Deine erste Figur

Tipp in Claude Code /anatomy und schreib dahinter in einer Zeile, was die Figur erklären soll:

In Codex schreibst du $anatomy statt /anatomy. Den Befehl musst du aber nicht mal tippen: Bittest du Claude um eine isometrische Illustration oder eine interaktive Erklärgrafik, lädt es Anatomy von selbst.

Drei Wörter steuern, was du bekommst, und Claude nutzt sie nur, wenn sie in deiner Zeile stehen:

• interactive: Die Figur reagiert auf Maus und Tastatur. Ohne das Wort bekommst du ein Standbild.
• WebGL: Shader für Feuer, Wasser, Plasma, strömende Luft und Licht.
• 3D: Teile drehen sich echt im Raum, statt nur isometrisch auszusehen.

Und drei Regeln machen die Figur besser:

1. Nenn die Idee, nicht die Zeichnung. Schreib, was erklärt werden soll, und gib echte Zahlen mit: Größen, Mengen, Raten, Grenzwerte. Welches Objekt passt, entscheidet Claude.
2. Oder nenn das Objekt. Weißt du schon, welche Maschine es sein soll, sag es und sag, was sich bewegen soll.
3. Sag, wo die Figur landet. HTML-Seite, SVG-Datei oder React-Komponente, hell oder dunkel.

Beispiel-Prompts aus der Galerie

Mit genau diesen Zeilen sind die Figuren in der Galerie entstanden. Kopier sie direkt in Claude Code.

Das Raketentriebwerk aus dem Reel gehört zu den acht Beispielen, die mit dem Skill mitkommen. Im Skill-Ordner liegt unter examples/raptor-engine/ die fertige Seite raptor-engine.html. Öffne sie im Browser und fahr mit der Maus darüber, dann zerlegt sich das Triebwerk in 11 Baugruppen.

Ein Galerie-Beispiel als Vorlage nehmen

So machst du aus einer Figur der Galerie deine eigene:

1. Such dir die passende Figur. Öffne die Galerie und nimm die Figur, die deiner Idee am nächsten kommt. Auf ihrer eigenen Seite steht unter „Prompt“ die Zeile, mit der sie entstanden ist.
2. Tausch nur die Idee aus. Kopier die Zeile und ersetz das Thema. Den Aufbau „explain how … works, interactive“ lässt du stehen.
3. Häng an, was du zusätzlich willst. Das Wort WebGL für Feuer, Wasser oder Licht, 3D für echte Drehung und am Ende, wo die Figur landen soll. Jeden Zusatz trennst du mit einem Komma ab.

Aus dem Nachbrenner wird so zum Beispiel ein Gasbrenner mit Shader:

Kennst du das Objekt schon, nennst du es direkt, mit den Zahlen, auf die es ankommt:

Und soll die Figur auf deine Website, sagst du dazu, in welcher Form:

Vor dem Start öffnet Claude selbst das passende der acht mitgelieferten Beispiele, eine Vorlage musst du also nicht extra mitgeben. Gibst du ein Foto als Referenz, übernimmt Claude daraus Oberfläche, Material und Stimmung, das Objekt erfindet es neu.

Bauzeit und Grenzen

Anatomy baut bewusst gründlich: Teileliste, Geometrie, automatische Prüfung und Nahaufnahmen jeder Verbindung. Vor dem Start ordnet Claude deine Anfrage einer von drei Größen zu:

Eine Figure baut Claude ohne Rückfrage, eine Hero kündigt es vorher an. Ein Epic startet es nie ohne dein OK und schlägt dir stattdessen eine Hero vor, die den Kern der Idee behält. Eine laufende Seite im Browser hast du in jeder Größe innerhalb der ersten Stunde, der Rest der Zeit geht in die Details. Zum Vergleich aus der Galerie: Die Uhr hat knapp zwei Stunden gebraucht, das Flugzeugtriebwerk 14 Stunden. Brauchst du etwas Schnelles, sag es dazu, dann bekommst du eine Figure statt einer Hero.

Anatomy zeichnet Maschinen, Instrumente, Werkzeuge und Möbel. Menschen und exakte Karten zeichnet es nicht, und Diagramme mit Achsen und Datenreihen auch nicht. Je klarer deine Idee einen Mechanismus hat, desto besser wird die Figur. Shader brauchen WebGL im Browser, ohne läuft die SVG-Zeichnung trotzdem. Der 3D-Modus ist noch in der Beta.

Nimm die erste Figur als Entwurf: Spiel damit, sag Claude, was nicht passt, und lass es nachbessern. Die Figur ist normaler Code in deinem Projekt, jede Änderung gibst du einfach als nächsten Prompt.