Interaktive Grafiken in natürlicher Sprache erstellen und öffentlich zugänglich machen

Veröffentlicht am 17. August 202517. August 2025 von Matthias Kindt

Wie erstelle ich eine interaktive Infografik und kann diese samt Code ohne Anmeldung etwa Kollegen zur Verfügung stellen? Dies klappt unter anderem mit der App-Funktion im Gemini-Chat in Kombination mit der Anwendung Codepen. Und dies alles komplett kostenlos!

Und so kann es gehen:

1) Infografik im Gemini-Chat erstellen mit App-Bezug im Prompt ***Erstelle eine App für eine futuristische Infografik als Single-Page-Application zum Thema „XYZ“ ***

2) Sieht die Grafik gut aus und ist korrekt ausgegeben, dann einfach den Code rüber in Codepen kopieren. Vorab anmelden.

3) Der Link ist automatisch öffentlich und lässt sich teilen. User sehen die Grafik und den Code und können diesen dann auch verwenden. Hier geht es zur öffentlichen Ansicht.

4) User können Code live anpassen. Gerne kurz testen.

Vibe-Coding: Input über natürliche Sprache und Output in Code

Für den Gemini-Chat zuerst über ein Google-Konto anmelden und schon kann es losgehen. Die obere Abbildung zeigt die Startoberfläche des Chatbots von Google und die Promptleiste mit einem Textinput. Der untere Screenshot stellt den geteilten Bildschirm mit einem linken Chat und der Infografik auf der rechten Seite dar. Wichtig ist hierbei, oben rechts den Switch zwischen „Code“ und „Vorschau“ zu beachten. Möchte man die Grafik sehen, dann einfach auf „Vorschau“ klicken und ist man an dem zugehörigen Code interessiert, dann einfach auf den Button „Code“ klicken. Teilen lässt sich die interaktive Abbildung oben rechts über den Button „Freigeben“ und dem Erstellen eines Links. Mehr ist das im Prinzip nicht.

Die Grafik wurde mit dem simplen Prompt ***Erstelle eine App für eine futuristische Infografik als Single-Page-Application zum Thema Quantencomputing*** generiert, also komplett ohne Coding-Kenntnisse. Zusätzlich lässt sich der Output noch mit weiteren Prompts anpassen, falls z.B. ein Button nicht richtig funktioniert oder es soll die Farbe geändert werden und Ähnliches. Fällt euch irgendein Fehler auf, dann schreibt dies ganz genauso in den Chat auf der linken Seite und Gemini erkennt und korrigiert dies direkt, bis die Version X zufriedenstellend ist. Dies wird auch gerne als Vibe-Coding bezeichnet, also ohne jegliche Programmierkenntnisse locker prompten und den Code von einer künstlichen Intelligenz wie einem Chatbot bzw. einem großen Sprachmodell erstellen lassen. Der Input erfolgt mit Wörtern in natürlicher Sprache und der Output wird mit Code z.B. in Form von HTML, CSS, JavaScript dargestellt.

Der obere Screenshot zeigt nun den Wechsel von Vorschau auf Code und schon wird dem User das „Grundgerüst“ der interaktiven Abbildung aufgezeigt. Der Code lässt sich manuell verändern und hat direkte Auswirkungen auf die Darstellung der Grafik. Wechselt man wieder zurück, dann ist wieder alles in Form von Überschriften und beweglichen Elementen sichtbar. Wird alles zufriedenstellend abgebildet, lässt sich der gesamte Code einfach kopieren und „drüben“ auf der Plattform Codepen wieder einfügen. Das funktioniert wirklich sehr einfach per copy & paste.

Meldet euch kurz bei Codepen an und klickt links in der Navigation auf „Pen“. Dann sieht es aus wie im oberen Screenshot, nämlich komplett leer und mit den Möglichkeiten oben den Code in HTML, CSS und JavaScript einzufügen. Im Beispiel habe ich den gesamten Code ins Feld HTML kopiert. Dieser wird nun im Stile einer Webseite ausgegeben. Unten seht ihr, wie der Code dann visualisiert wurde und komplett öffentlich die interaktive Grafik zum Quantencomputing mit Klickmöglichkeiten und Live-Änderungen am Code dargestellt wird. Nutzt gerne den „Schieber“, um die Fenstergrößen zu ändern. So wird es übersichtlicher. Viel Spaß!

Hier geht es zum öffentlich Pen

Was sind denn nun diese Qubits?

⏭️ Bit: 0 oder 1

⏭️ Qubit: 0 oder 1
„Schwebt“ ein Qubit, dann ist der Wert nicht genau messbar, kann also 1 oder 0 sein. Zum Beispiel zu 30 % 0 und zu 70 % 1. Ist das Qubit wieder „auf dem Boden“, dann erfolgt die Messung zu 100 % von 0 oder 1. Der Vergleich mit einer schwebenden und in Bewegung stehenden Münze wäre möglich, um die Thematik bildlich darzustellen. (Vereinfachte Darstellung)