Geometrie in Claude interaktiv erlebbar machen und als Artefakt veröffentlichen

Veröffentlicht am 1. Juli 20261. Juli 2026 von Matthias Kindt

Freie Nutzung von Text & Abbildungen & Video mit einem Unidigital-Zugang

In Claude lassen sich interaktive Anwendungen entwickeln, die ich beliebig erweitern und als Artefakt veröffentlichen kann. Auch mit einem Free Plan ist die Erstellung solcher Apps täglich in einem begrenzten Umfang möglich. Hierbei kommt das leistungsstarke Sprachmodell Claude-Sonnet von Anthropic zum Einsatz.

Und so funktioniert es:

1) In Claude anmelden
2) Mit Claude einen detaillierten Prompt formulieren
3) Interaktive Anwendung im Vollbildmodus testen
4) App gezielt über Folgeprompts mit neuen Funktionen erweitern
5) Anwendung als HTML-Datei herunterladen oder als Artefakt veröffentlichen

PROMPT: 

Erstelle eine vollständige, interaktive 3D-Webanwendung (in einer einzigen HTML-Datei mit eingebettetem CSS und JavaScript), mit der ich eine Pyramide (geometrische Form) visualisieren und manipulieren kann. 

Nutze dafür die Three.js-Bibliothek (per CDN eingebunden) für die 3D-Grafik und OrbitControls für die Interaktion.

Folgende Funktionen müssen enthalten sein:

1. 3D-Darstellung & Steuerung:
- Eine dreidimensionale Pyramide (quadratische Grundfläche) im Zentrum.
- Der Nutzer muss die Pyramide per Maus/Touch frei drehen (Rotate) und heranzoomen (Zoom) können.
- Ein schlichter, moderner Hintergrund (z. B. dunkelgrau oder weiß) mit einem dezenten Gitternetz (Grid) am Boden zur Orientierung.

2. Kanten-Farbwechsel (Edge Coloring):
- Jede Kante der Pyramide muss einzeln ansteuerbar sein. Eine Pyramide hat 8 Kanten (4 Basis-Kanten, 4 Seiten-Kanten).
- Erstelle ein übersichtliches UI-Menü (Sidebar oder Overlay), in dem jede Kante aufgelistet ist (z. B. "Basis-Kante 1", "Seiten-Kante 1" etc.).
- Neben jeder Kante im Menü soll ein Color-Picker (<input type="color">) platziert sein, mit dem der Nutzer der jeweiligen Kante eine individuelle Farbe zuweisen kann. Die Änderung muss sofort im 3D-Modell sichtbar sein.

3. Winkel-Einblendung (Angles):
- Füge einen Toggle-Schalter (Checkbox/Button) im Menü hinzu, mit dem man die Winkel (z. B. die Basiswinkel oder den Spitzenwinkel) ein- und ausblenden kann.
- Wenn aktiviert, sollen die Gradzahlen der Winkel als Text-Labels (entweder als 3D-Text oder 2D-HTML-Overlays an den richtigen Positionen) direkt an der Pyramide angezeigt werden.

4. Design & Usability:
- Das Interface soll sauber, modern und responsiv sein.
- Keine externen Assets (Bilder/Modelle) laden, alles soll prozedural in JavaScript generiert werden.
Gib mir den kompletten, funktionstüchtigen Code in einer einzigen HTML-Datei aus, sodass ich ihn direkt speichern und im Browser öffnen kann.

Den Prompt hatte ich im Vorfeld über Claude Sonnet 5 formuliert und per Copy & Paste in einen neuen Chat eingefügt. Die einzelnen Versionen lassen sich im Chat jederzeit aufrufen, falls zum Beispiel die erste Version im Nachhinein am besten funktioniert hat.

Im oberen Screenshot wurde die Anwendung „Pyramide 3D“ programmiert, um die geometrische Form zu visualisieren und über Regler beliebig einzustellen. Insbesondere für den Mathematikunterricht bieten sich im Rahmen solcher Visualisierungen spannende Möglichkeiten, auch komplexe Themen den Schülerinnen und Schülern KI-generiert über Claude & Co zu präsentieren.

Oberhalb der Pyramide kann ich mit einem Klick auf den Button „Code“ den von Claude programmierten Code jederzeit einsehen, herunterladen und auf anderen Umgebungen ausführen. Mit einem Klick auf das „Augen-Icon“ und die „Vorschau“ geht es wieder zurück zur bedienbaren Anwendung.

FOLGEPROMPT: 

Füge oben links einen Chat hinzu, der mich zu dieser Thematik unterstützt. Dieser lässt sich über ein Frageezeichen öffnen.

Auf der rechten Seite befinden sich Schieberegler, die die Größenverhältnisse und Winkel der Pyramide verändern. Zusätzlich lassen sich alle Kanten individuell farblich anpassen. Fehlt eine Funktion bzw. möchte man einen Zusammenhang über einen zusätzlichen Regler oder Button genauer erklären, so lässt sich die App jederzeit über Folgeprompts erweitern.

Die obere Abbildung zeigt auf der linken Seite einen Chat, der mich bei inhaltlichen Fragen unterstützen soll. Diesen habe ich über einen Folgeprompt hinzugefügt. Klicke ich auf das Fragezeichen oben links, öffnet sich ein Chat mit geeigneten Starter-Questions, um direkt in diese Thematik einzusteigen. Hier kann ich meine Fragen formulieren.

Oben rechts lässt sich über einen Klick auf den Pfeil direkt neben dem Button „Kopieren“ die Geometrie-App als HTML-Datei herunterladen und in einem Browser öffnen oder über die Erstellung eines Artefakts frei zugänglich machen, damit auch Lernende die App innerhalb von Claude nutzen können. Viel Erfolg!