Erstellen interaktiver Diagramm-Tools
Von Körpersystemen bis hin zu Molekularstrukturen – so wird ein detaillierter Prompt zu einer funktionierenden Referenz-App mit der von Ihnen festgelegten Komplexität und Gestaltung.
- AutorAnthropic
- KategoriePersönlich
- ModellOpus 4.5
- Funktionen
- TeilenLink kopieren
1
Beschreibung der Aufgabe
Claude kann interaktive Tools entwickeln, mit denen Sie alles, von Anatomie über chemische Diagramme bis hin zu chronologischen Zeitachsen, direkt analysieren können. Die Präzision Ihres Prompts bestimmt die Qualität des Ergebnisses.
Beschreiben Sie die von Ihnen gewünschte Erfahrung: Was Sie lernen, wie Sie damit interagieren möchten, woher die Daten stammen sowie Ihre ästhetischen Vorstellungen. Stellen Sie sich Ihren Prompt als Design-Briefing vor.
Erstellen Sie einen interaktiven Anatomie-Explorer mit @ebi-gene-expression-group/anatomogramm von npm. Verwenden Sie homo_sapiens.male.svg und homo_sapiens.brain.svg. Erstellen Sie keine eigenen Diagramme – diese SVGs enthalten genaue Illustrationen mit bereits eingebetteten UBERON-Ontologie-IDs. Betten Sie die SVGs direkt in HTML ein – keine Abrufanfragen erforderlich.
Ausschlaggebend: Die SVGs formatieren alle Elemente standardmäßig mit fill:none;stroke:none und machen sie unsichtbar. Nach dem Laden wenden Sie Standardfüllungen und Konturen vor jedem anderen Styling an. Stellen Sie auch bei der Optimierung cleanupIds: false ein (die UBERON-IDs sind Ihre Zielelemente) und entfernen Sie das Attribut visibility:hidden in JavaScript.
Designanforderungen: Restringiert und anspruchsvoll. Keine Glows, keine Emojis, kein Neon. Warme Farben anstatt kalter. Überschriften Serif, Text Sans-Serif, Daten Monospace. Kurz: Medizinische Premium-Referenzen, nicht generische KI-Ergebnisse.
Fügen Sie Register-Informationspanels, akustisches Feedback und Inhalte hinzu, die genug enthalten, um tatsächlich von ihnen zu lernen. Entwickeln Sie von Anfang an Flaggschiff-Qualitäts zu entwickeln – und fahren Sie fort, bis das Ergebnis außergewöhnlich ist.
2
Claude Kontext geben
Um interaktive Lerntools zu erstellen, beschreiben Sie zunächst, was Sie lernen und wie Sie damit interagieren möchten, und stellen Sie dann sicher, dass die dafür nötigen Funktionen und Features aktiviert sind.
Erforderlicher Kontext
Um Artefakte zu erstellen, vergewissern Sie sich, dass die Dateierstellung in den Einstellungen für Claude aktiviert ist.
No items found.
Optionaler Kontext
Aktivieren Sie für komplexe Multikomponenten-Apps Extended Thinking, damit Claude die Architektur vor der Erstellung planen kann.
Erweitertes Denken
3
Was Claude generiert
Claude erstellt eine voll funktionsfähige React-Anwendung mit dem visuellen Design, den Interaktionsmustern und den Bildungsinhalten, die von Ihnen festgelegt wurden und sofort im Artefakt-Viewer einsatzbereit sind.
Von Claude
Fertig! Ich habe Ihren Anatomie-Explorer mit den SVGs für medizinische Qualität, dem richtigen UBERON-Targeting und dem von Ihnen beschriebenen eingeschränkten Designsystem entwickelt.
Enthalten sind:
1. Explorer mit dualer Ansicht
Wechseln Sie zwischen Ganzkörper- und Gehirnansichten. Die Ganzkörperansicht organisiert Systeme nach Farbe (Skelett, Muskeln, Nerven, Kreislauf, Atmung, Verdauung) mit der richtigen anatomischen Positionierung.
2. Interaktive Elemente
Bewegen Sie den Mauszeiger über jede beliebige Struktur, damit der Name, die UBERON-ID und die primäre Funktion angezeigt wird. Klicken Sie hier, um detailliertere Informationen zu erhalten: klinische Relevanz, verwandte Strukturen und schnelle Fakten. Ich habe etwa 40 Strukturen mit Lerninhalten gefüllt.
3. Systemfilter
Mit Registerkarten können Sie einzelne Körpersysteme rein darstellen. Wenn Sie "Skelett" auswählen, verblassen die nicht-skelettalen Strukturen, während die skelettalen Knochen hervorgehoben und interaktiv werden.
4. Sound-Design
Subtiles Audiofeedback bei Mouseover und Auswahl. Soft Klicks und Töne, die sich real anhören, nicht digital. Standardmäßig stummgeschaltet; ändern in der Ecke.
5. Designdetails
Warme beige Hintergründe, Akzente in Terrakotta und Schiefer, keine harschen Farben. Playfair-Display für Überschriften, Inter für Text, IBM Plex Mono für Daten. Großzügiger Whitespace, kein visueller Clutter.
4
Nachfolgende Prompts
Führen Sie das Gespräch mit Claude fort, um die Ergebnisse zu verfeinern und zu verbessern.
Fügen Sie Selbsttests hinzu
Fügen Sie zusätzliche Funktionen hinzu, wie beispielsweise einen aktiven Lernmodus, um das Erinnerungsvermögen zu verbessern.
Fügen Sie einen Quizmodus hinzu, in dem ich eine aufgrund einer Beschreibung oder Funktion die korrekte Struktur identifizieren muss. Verfolgen Sie meine Genauigkeit, um zu sehen, mit welchen Systemen ich noch Probleme habe.
Erweiterte Funktionen hinzufügen
Bitten Sie Claude, die anatomischen Details zu erweitern, wenn Sie mehr Granularität benötigen.
Fügen Sie dem Diagramm weitere Körpersysteme hinzu. Machen Sie außerdem die Darstellung des Gehirns detaillierter.
Generieren Sie Begleitmaterialien aus derselben Sitzung
Lernen Sie weiter aus verschiedenen Medien. Die App und die Lernmaterialien können eine gemeinsame INformationsquelle haben.
Erstellen Sie aus den anatomischen Daten in diesem Explorer einen druckbaren PDF-Studienführer, in dem dieselben Strukturen nach System geordnet sind, plus eine Reihe von Anki-kompatiblen Flashkarten, die ich importieren kann. Halten Sie die Terminologie und klinische Zusammenhänge konsistent mit den Inhalten in der App.
5
Tricks, Tipps und Problemlösung
Fügen Sie Fehler direkt in den Chat ein
Wenn etwas nicht funktioniert, teilen Sie die Fehlermeldung mit oder beschreiben Sie das Problem. Claude kann die Logik verfolgen und per Troubleshooting das Problem identifizieren, damit Sie nicht selbst debuggen müssen.
Lange Sitzungen kompilieren statt zu driften
Opus 4.5 berücksichtigt Ihre Designentscheidungen und den technischen Kontext über längere Konversationen hinweg. Auch Ihre zehnte Iteration berücksichtigt immer noch Ihre ursprünglichen ästhetischen Anforderungen, technischen Einschränkungen und alle dazwischen liegenden Optimierungen. Sie können nachhaltige Vorbereitungssitzungen planen, anstatt zu versuchen, alles im Voraus festzulegen.
Geben Sie die bekanntes Troubleshooting im Voraus an
Erwähnen Sie bereits aufgetretene Quirks – von früheren Claude-Sitzungen oder Ihrem eigenen Debugging – im Prompt. Dieses Beispiel zeigt, dass die Anatomogramme SVGs standardmäßig unsichtbar darstellen und dass UBERON-IDs während der Optimierung entnommen werden. Ohne diese Notizen schreibt Claude Arbeitscode, der einen leeren Bildschirm erzeugt, und führt dann Iterationen zur Diagnose durch.
Fügen Sie Quellen nach Ihren eigenen Anforderungen hinzu
Das Kontextfenster von Opus 4.5 verarbeitet eine beträchtliche Menge Material. Wenn Sie ein Lehrbuchkapitel, Vorlesungsnotizen oder einen Lehrplan haben, die in der App behandelt werden sollen, können Sie diese komplett anstatt als Zusammenfassung einfügen. Claude extrahiert die Struktur und priorisiert Inhalte aus vollständigen Quellen effektiver als aus Ihrer komprimierten Version.
Möchten Sie es mal ausprobieren?
Wählen Sie etwas, das Sie gerne verstehen möchten. Claude entwickelt das Tool, Sie lernen
