1. Die Aufgabe beschreiben
Claude kann interaktive Tools erstellen, mit denen du dich direkt mit Material auseinandersetzen kannst – sei es Anatomie, Chemiediagramme oder historische Zeitleisten. Die Präzision deines Prompts bestimmt die Raffinesse des Ergebnisses.
Beschreibe die Erfahrung, die du möchtest: was du lernst, wie du damit interagieren möchtest, woher die Daten stammen und welche ästhetischen Ansprüche du hast. Betrachte deinen Prompt als ein Design-Briefing.
Du musst nicht von Anfang an so spezifisch sein. Beginne mit der gewünschten Erfahrung und füge dann technische Einschränkungen wie die SVG-Füllung und UBERON-Hinweise ein, sobald du entdeckst, was den Build ins Stocken bringt.
Erstelle einen interaktiven Anatomie-Explorer mit @ebi-gene-expression-group/anatomogram von npm. Verwende homo_sapiens.male.svg und homo_sapiens.brain.svg. Generiere die Diagramme nicht selbst – diese SVGs enthalten bereits präzise Illustrationen mit eingebetteten UBERON-Ontologie-IDs. Bette die SVGs direkt in das HTML ein – keine Fetch-Anfragen nötig.
Wichtig: Die SVGs stylen standardmäßig alle Elemente mit fill:none;stroke:none, wodurch sie unsichtbar werden. Wende nach dem Laden Standardfüllungen und -konturen an, bevor du weiteres Styling vornimmst. Setze außerdem cleanupIds: false bei der Optimierung (die UBERON-IDs dienen zum Ansteuern der Elemente) und entferne das Attribut visibility:hidden in JavaScript.
Designanforderungen: Zurückhaltend und anspruchsvoll. Keine Leuchteffekte, keine Emojis, kein Neon. Warme Farben statt kalter. Serifenschrift für Überschriften, serifenlose Schrift für den Fließtext, Monospace für Daten. Denke an ein hochwertiges medizinisches Nachschlagewerk, nicht an generische KI-Ausgabe.
Füge Tab-Informationsfelder, physisch wirkendes Sound-Feedback und ausreichend reichhaltige Inhalte hinzu, aus denen man tatsächlich lernen kann. Baue von Anfang an auf Flaggschiff-Qualität – ich werde iterieren, bis das Ergebnis außergewöhnlich ist.
2. Claude Kontext geben
Der obige Prompt liefert seinen eigenen Kontext: die Datenquelle (das Anatomogram-Paket mit seinen UBERON-IDs), das Interaktionsmodell (Hover, Klick, Tab-Körpersysteme) und den Designstandard (hochwertiges medizinisches Nachschlagewerk, warme Farben, Serifenüberschriften). Claude baut genau auf dem auf, was du festlegst, sodass sich jede dieser Entscheidungen im Ergebnis widerspiegelt.
Erforderlicher Kontext
Artefakte sind eigenständige, interaktive Ausgaben, die Claude in einem dedizierten Fenster neben deiner Unterhaltung erstellt. Wenn du nach einem interaktiven Tool wie diesem Anatomie-Explorer fragst, erstellt Claude es in der Regel automatisch als Artefakt – gerendert und einsatzbereit.
Optionaler Kontext
Für komplexe Apps mit mehreren Komponenten aktiviere Erweitertes Denken(öffnet in neuem Tab), damit Claude die Architektur planen kann, bevor es mit dem Bau beginnt.
3. Was Claude erstellt
Claude erstellt eine voll funktionsfähige React-Anwendung mit dem visuellen Design, den Interaktionsmustern und den Lerninhalten, die du festgelegt hast – sofort einsatzbereit im Artefakt-Viewer.
Fertig! Ich habe deinen Anatomie-Explorer mit den medizinisch präzisen SVGs, korrektem UBERON-Targeting und dem zurückhaltenden Designsystem erstellt, das du beschrieben hast.
Was enthalten ist:
1. Dual-View-Explorer
Wechsle zwischen Ganzkörper- und Gehirnansicht. Die Ganzkörperansicht ordnet die Systeme nach Farbe (Skelett, Muskulatur, Nervensystem, Kreislauf, Atmung, Verdauung) mit korrekter anatomischer Positionierung.
2. Interaktive Elemente
Fahre mit der Maus über eine beliebige Struktur, um ihren Namen, ihre UBERON-ID und ihre Hauptfunktion zu sehen. Klicke für tiefergehende Informationen: klinische Relevanz, verwandte Strukturen und Kurzfakten. Ich habe etwa 40 Strukturen mit lernfähigen Inhalten gefüllt.
3. Systemfilter
Mit Tabs kannst du einzelne Körpersysteme isolieren. Wenn du „Skelett" auswählst, verblassen nicht-skelettale Strukturen, während relevante Knochen hervorgehoben werden und interaktiv werden.
4. Sounddesign
Dezentes Audio-Feedback bei Hover und Auswahl. Sanfte Klicks und Töne, die sich physisch anfühlen, nicht digital. Standardmäßig stummgeschaltet; umschaltbar in der Ecke.
5. Designdetails
Warmer beigefarbener Hintergrund, Terrakotta- und Schieferakzente, keine grellen Farben. Playfair Display für Überschriften, Inter für Fließtext, IBM Plex Mono für Daten. Großzügiger Weißraum, keine visuelle Unordnung.
4. Folgeprompts
Setze die Unterhaltung mit Claude fort, um zu verfeinern, zu erweitern oder weiter zu erkunden.
Selbsttest hinzufügen
Füge weitere Funktionalität hinzu, etwa einen aktiven Lernmodus, der das Behalten fördert.
Füge einen Quiz-Modus hinzu, bei dem mir eine Beschreibung oder Funktion gezeigt wird und ich die richtige Struktur identifizieren muss. Verfolge meine Genauigkeit und zeige, bei welchen Systemen ich Schwierigkeiten habe.
Erweiterte Funktionen hinzufügen
Bitte Claude, anatomische Details dort zu erweitern, wo du mehr Granularität möchtest.
Füge dem Diagramm weitere Körpersysteme hinzu. Mache außerdem die Gehirnansicht detaillierter.
Begleitmaterialien aus derselben Sitzung erstellen
Setze das Lernen mit anderen Medien fort. Die App und die Lernmaterialien können sich dieselbe Quelle der Wahrheit teilen.
Erstelle aus den anatomischen Daten in diesem Explorer einen druckbaren PDF-Lernleitfaden mit denselben nach System geordneten Strukturen sowie einen Satz Anki-kompatibler Karteikarten, die ich importieren kann. Halte die Terminologie und die klinischen Zusammenhänge konsistent mit dem, was in der App steht.
5. Tricks, Tipps und Fehlerbehebung
Fehler direkt in den Chat einfügen
Wenn etwas nicht funktioniert – etwa eine Struktur, die sich nicht hervorheben lässt, oder ein Systemtab, der nicht mehr filtert – füge die Fehlermeldung ein oder beschreibe, was du siehst. Claude kann die Logik nachvollziehen und das Problem identifizieren, sodass du den Code nicht selbst debuggen musst.
Lange Sitzungen summieren sich, statt abzudriften
Opus 4.5 behält deine Designentscheidungen und den technischen Kontext über längere Unterhaltungen hinweg bei. Deine zehnte Iteration erinnert sich noch an deine ursprünglichen ästhetischen Anforderungen, technischen Einschränkungen und jede Verfeinerung dazwischen. Du kannst langfristige Bau-Sitzungen einplanen, statt zu versuchen, von Anfang an alles festzulegen.
Bekannte Problemlösungen von Anfang an einbeziehen
Wenn du zuvor schon auf Eigenheiten gestoßen bist – aus früheren Claude-Sitzungen oder deinem eigenen Debugging –, erwähne sie im Prompt. Dieses Beispiel weist darauf hin, dass die Anatomogram-SVGs standardmäßig unsichtbar gerendert werden und dass UBERON-IDs bei der Optimierung entfernt werden. Ohne diese Hinweise schreibt Claude funktionierenden Code, der einen leeren Bildschirm erzeugt, und verbringt dann mehrere Iterationen mit der Diagnose.
Überprüfe die Infofelder stichprobenartig, bevor du damit lernst
Das Anatomogram-Paket liefert die präzisen Illustrationen, aber Claude schreibt den Text in den Informationsfeldern: die Funktion jeder Struktur, klinische Relevanz und Kurzfakten. Bevor du dich auf den Explorer als Lernwerkzeug verlässt, klicke dich durch ein paar Strukturen und vergleiche, was die Felder aussagen, mit deinem Lehrbuch oder deinen Vorlesungsnotizen. Markiere alles, was nicht übereinstimmt, und bitte Claude, es zu korrigieren.
Füge Quellen hinzu, um es zu deinem eigenen zu machen
Das Kontextfenster von Opus 4.5 bewältigt umfangreiches Material. Wenn du ein Lehrbuchkapitel, Vorlesungsnotizen oder einen Lehrplan hast, den die App abdecken soll, füge das Ganze ein, statt es zusammenzufassen. Claude extrahiert Struktur und priorisiert Inhalte effektiver aus vollständigen Quellen als aus deiner verkürzten Version.
6. Bereit, es selbst auszuprobieren?
Wähle etwas aus, das du schon immer verstehen wolltest. Claude baut das Tool; du übernimmst das Lernen.