Entwicklung von KI-Systemen mit Claude in einer interaktiven Timeline darstellen

Veröffentlicht am 3. Mai 20263. Mai 2026 von Matthias Kindt

✅ Freie Nutzung von Text & Abbildungen & Video für Premium-User

Claude ist ein Chatangebot von Anthropic mit Top-Modellen wie Claude Sonnet und Claude Opus. Im folgenden Beitrag wird versucht, die Entwicklung von bedeutenden KI-Systemen in einer interaktiven Darstellung auszugeben, um diese im Anschluss als HTML-Datei im Browser anzuzeigen.

Zum öffentlichen Link geht es hier

Die untere Abbildung zeigt die Startseite von Claude AI und rechts unten über das Drop-Down-Menü habe ich das Modell Claude Sonnet 4.6 als Grundlage festgelegt. Anschließend wurde der Prompt ***stelle die Entwicklung von KI-Systemen in einem interaktiven Diagramm dar*** ins Kontextfenster eingefügt und mit Enter bestätigt.

Nach wenigen Minuten ist der Prozess auch schon beendet und man kann sich durch die interaktive Grafik klicken. Oberhalb ist eine Navigation dargestellt mit Reitern wie „Alle Epochen“, „Pionierzeit“ und „LLM-Ära“. Thematisch hat Claude Sonnet den Prompt gut umgesetzt.

Mir fällt direkt auf, dass nach einem Button-Klick auf einen der KI-Meilensteine der erweiterte Inhalt weiter unten angezeigt wird und nicht direkt unter dem Textfeld. Dies würde ich gerne ändern, denn je nach Browser-Zoom kann es sein, dass das Textfeld wie im unteren Screenshot sichtbar nicht vollständig dargestellt wird.

Über den Folgeprompt *** nun sollen sich die anklickbaren Felder mit weiterem Text öffnen. aktuell funktioniert dies nicht*** habe ich Claude angewiesen, eine Änderung vorzunehmen und die 2. Version der interaktiven Darstellung zu generieren. Es lohnt sich, solche Prompts einfach zu halten.

Der Folgeprompt wurde optimal umgesetzt und nun finde ich die Darstellung wirklich gut, da der erweiterte Text direkt unter dem klickbaren Feld öffnet und wieder schließt. Alle Reiter und Buttons funktionieren. Falls diese fehlerhaft sein sollten, dann kann man dies Claude direkt so locker mitteilen und das Sprachmodell passt den Code in der Regel zuverlässig an.

Um die fertige Anwendung als HTML-Datei herunterzuladen, fahre ich mit der Maus über die KI‑Timeline und parke diese dort. Jetzt tauchen rechts neben der Navigation drei Punkte auf und nach einem Klick öffnet sich das Feld „Download file“. Nach einem Blick auf die Beschreibung der Datei wird direkt klar: Es handelt sich mit „v2″ und die 2. Version und der Download findet als HTML statt. Dies ist sehr übersichtlich gehalten.

Die untere Abbildung zeigt die geöffnete HTML-Datei in einem Browser-Fenster und auch hier lässt sich die Timeline mit den KI-Meilensteinen einfach durchklicken, auch wenn das Design etwas anders als im Chat von Claude ausgegeben wird. Gerne mal probieren!