Vibe Coding: Vom Prompt bis zur Veröffentlichung auf GitHub (Ohne Code)

Veröffentlicht am 11. Oktober 202512. Oktober 2025 von Matthias Kindt

Vibe Coding ist seit dem Aufkommen von KI-Anwendungen wie ChatGPT, Claude, Gemini & Co sehr beliebt, denn User benötigen keinerlei Programmierkenntnisse in Sprachen wie HTML, CSS, Java oder Python, sondern es genügt, einfachen beschreibenden Text einzugeben. Im folgenden Beitrag wurde das kostenfrei nutzbare AI Studio von Google verwendet, um das Vibe Coding mit Startprompt, interaktiver Anwendung und der Veröffentlichung auf GitHub zu demonstrieren.

Und so kann es gehen:

1) Über ein Google-Konto im AI Studio anmelden
2) Links im Menü den Reiter „Build“ auswählen
3) Oben in der Leiste einen Prompt setzen und auf „Run“ klicken
4) Nun wird die Anwendung automatisch vom Sprachmodell Gemini erstellt. Dies kann ein wenig dauern und der Code wird dabei live angezeigt
5) Die Anwendung ist nun fertig und kann etwa im Rahmen einer Simulation oder interaktiven Grafik in den verfügbaren Feldern angeklickt werden
6) Die App lässt sich jederzeit über den linken Chat mit „Folgeprompts“ verändern bzw. anpassen, u.a. bei Fehlern oder Designänderungen
7) Die Anwendung lässt sich als Zip herunterladen und auch öffentlich teilen
8) Das Vibe Coding wird nun vollendet, indem User oben rechts den verfügbaren GitHub-Button klicken, sich über das eigene GitHub-Konto innerhalb vom AI Studio anmelden und die eigene App automatisch dort als „Repo“ veröffentlichen

Der obere Screenshot zeigt die Startseite des Google AI Studios und dort ist auf der linken Seite das Menü mit dem für uns relevanten Punkt Build dargestellt, über den sich Anwendungen programmieren lassen. Nach einem Klick auf das Feld, erscheint eine neue Oberfläche mit dem Schriftzug „Build apps with Gemini“. Oben ist die Promptleiste sichtbar, in die Nutzer ihren Textinput eingeben. Dies ist bei anderen KI-Anwendungen wie Chatbots sehr ähnlich aufgebaut.

Falls ihr eure Anwendungen wiederfinden möchtet, dann navigiert unter der Promptleiste auf die Kategorie „Your Apps“. In den dargestellten Feldern werden zudem vielfältige Showcases angeführt, also welche Tools Nutzer mithilfe von Gemini, dem Top-Sprachmodell von Google, programmieren können. Auch ein Grundschulkind könnte theoretisch mit dem simplen Prompt ***erstelle ein lustiges Spiel mit Knobelaufgaben*** solch eine App programmieren lassen. Genau dies macht das sogenannte Vibe Coding aus, also Anwendungen mithilfe eines Language Models zu entwickeln und dabei sind keinerlei Programmierkenntnisse notwendig.

Da dies aber durchaus ein Blogbeitrag für erwachsene User ist, erstellen wir im folgenden Beispiel kein lustiges Spielchen, sondern ein interaktives Dashboard. Auf einen Datei-Upload wird hierbei bewusst verzichtet, kann aber problemlos im Rahmen von Excel-Dateien oder Ähnlichem über die Upload-Funktion ausgeführt werden. Falls ich z.B. demnächst über das AI Studio ausschließlich interaktive Dashboards generieren und diesen Teil des Prompts nicht immer wieder per Copy & Paste einfügen möchte, so nutze ich im Vorfeld den System-Prompt. Der untere Screenshot zeigt diesen Schritt über den Button „Erweiterte Einstellungen“ rechts neben der Promptleiste und der im Anschluss geöffneten Sidebar mit der Bezeichnung „System instructions“. Genau dies ist der System-Prompt und dort habe ich folgenden Text eingetragen:

Prompt: ***Erstelle ausschließlich Dashboards. In jedem Dashboard ist ein Feld mit einem KI-Assistenten dargestellt, der beim Analysieren der Daten hilft.***

Um die Anwendung von Gemini programmieren zu lassen, wird der simple User-Prompt ***KI-Effizienz in Unternehmen*** in die Promptleiste geschrieben und danach auf „Run“ geklickt. Jetzt startet der Programmiervorgang und kann wenige Minuten dauern. Es ist wichtig, zwischen dem System-Prompt und dem User-Prompt zu unterscheiden, denn als Use Case benötige ich zum Beispiel 25 Dashboards etwa im Rahmen eines betrieblichen Arbeitsprozesses, aber nicht immer die gleichen Darstellungen, da die Dashboards u.a. variabel bezüglich des Designs und der Funktionalität ausgegeben werden sollen.

Der User-Prompt ist bewusst sehr einfach gehalten, um zu zeigen, dass es auch keinerlei komplexes Prompt-Engineering benötigt, um tollen Output im Rahmen des Vibe Codings zu entwickeln. Als Empfehlung: Drückt euch im Prompt einfach, kurz und klar aus. Insbesondere für Einsteiger ist das zu Beginn völlig ausreichend.

Nachdem Gemini jede Zeile Code für mich geschrieben hat, ist die Anwendung nach wenigen Minuten fertig und kann direkt im AI Studio ohne weitere Programme getestet werden. Auf der linken Seite befindet sich der „normale“ Chat, in den User „Folgeprompts“ eingeben können, falls sie Änderungen z.B. hinsichtlich der Farbe oder Anzahl der Felder, Buttons etc. vornehmen möchten. Gemini generiert dann die Version 1, 2, 3, 4 bis X oder bis eure kostenfreien Credits aufgebraucht sind. Die Credits werden übrigens monatlich von Google wieder aufgefüllt und ließen sich auch für andere Prozesse wie etwa der Bildgenerierung über „Nano Banana“ oder dem Speech-Tool „Talk to Gemini live“ verwenden. Gerne mal ausprobieren. Es lohnt sich.

Eine Besonderheit ist der zweite Chat auf der rechten Seite, der über unseren User-Prompt direkt in das Dashboard integriert wurde und ausschließlich für die Analyse der Daten vorhanden ist. Dies kann sehr nützlich sein, um zum Beispiel Credits zu schonen. Zusätzlich habt ihr im linken Chat mehr Ordnung und weniger insgesamt Durcheinander. Also Chat 1 gerne für die Anpassungen eures Dashboards nutzen und Chat 2 ausschließlich für die dargestellten Statistiken verwenden. Wird irgendetwas nicht korrekt dargestellt, dann schreibt dies direkt kurz und einfach in den User-Prompt. Es kann sein, dass eure App beim ersten Versuch gar nicht angezeigt wird oder ein schwarzer Bildschirm erscheint. Dann reicht ein Prompt wie ***Es wird nur ein schwarzer Bildschirm dargestellt*** aus und das Sprachmodell Gemini erkennt i.d.R. den oder die Fehler und behebt diese(n). Hierbei kommt die Vision-Fähigkeit des Large Language Models (LLMs) zum Einsatz.

Nun schauen wir uns die App „KI-Effizienz Dashboard“ etwas genauer hinsichtlich der Aufmachung an. Ohne explizit im Prompt das Design beschrieben zu haben, ist die Darstellung auf den ersten Blick sehr gelungen, wie ich finde und wirkt modern. Hieran ist gut erkennbar, dass im Prinzip jeder User mit relativ wenig Textinput ansprechend designte Anwendungen generieren kann. Das ist wichtig, also keine eher langweilig schwarz-grau gehaltenen Dashboards, die man als User eigentlich gar nicht nutzen mag.

Möchtet ihr den generierten Code einsehen, dann ist dies links oberhalb der Anwendung über den Button Code möglich. Mögt Ihr wieder eure App nutzen, klickt direkt daneben auf Vorschau. Auch ein regelmäßiger Switch ist so möglich, um ein Gefühl dafür zu bekommen, was ein Textprompt automatisch auslösen kann. Die KI übernimmt das Programmieren und der User passt im Anschluss „nur“ gezielt die Anwendung an. Aber Sprachmodelle wie Googles Gemini oder Top-Coding-Modelle wie Claude von Anthropic machen natürlich auch Fehler. Das sollte man immer beachtet! Ich würde davon abraten scheinbar korrekten Code direkt in die eigene Webseite oder ins Backend in sensible WordPress-Datein (Vorsicht!) zu kopieren. Aber ohne potenziellen Schaden eine App innerhalb einer „kontrollierten“ Umgebung über einen Login wie etwa dem AI Studio (Google) oder in ChatGPT (OpenAI) zu entwickeln und auszuführen, dies halte ich persönlich für unproblematisch.

Nach einem Switch wieder zurück auf das sichtbare Dashboard mit den einzelnen Elementen wird kurz überprüft, ob die Anwendung auf allen Endgeräte unabhängig von der Bildschirmgröße, also „responsive„, vernünftig dargestellt ist. Der untere Screenshot zeigt die Smartphone-Ansicht. Versucht gerne selber die Screen-Anpassung auf Desktop, Tablet und dem Smartphone. Dazu rechts oberhalb der App auf den Button „Mobile“ navigieren und im Drop-Down-Menü das gewünschte Geräte auswählen.

Um das Programm herunterzuladen oder mit Kollegen zu teilen, ist oben rechts eine erweiterte Menüleiste mit nützlichen Einstellungen angebracht. Der Download erfolgt als Zip-Datei.

Um den finalen Schritt zu gehen und die fertige App ohne Programmierkenntnisse für alle User frei zugänglich zu machen, ist ebenfalls oben rechts in der Navigation ein GitHub-Button integriert. Nach einem Klick darauf, ist eine Anmeldung über das eigene GitHub-Konto erforderlich, um das AI Studio zu connecten und schon kann die Anwendung im Rahmen eines sogenannten Repositorys (kurz: Repo) oder auch Projektarchivs veröffentlicht werden. Damit endet das Kapitel des Vibe Codings, also vom Textprompt über das Ausführen der App im AI Studio bis zur Veröffentlichung des Repos auf GitHub. Das Repository kann jederzeit weiterentwickelt und angepasst werden.

Meine beispielhafte Veröffentlichung, wie unten im Screenshot auf GitHub zu sehen ist, habe ich nicht auf Fehler geprüft, sondern nur zu Demonstrationszwecken verwendet, um zu zeigen, wie selbst IT-Einsteiger in der Lage sind, solche nützlichen Anwendungen wie Dashboards zu erstellen.

Fazit

Insbesondere für Einsteiger ohne Kenntnisse im Coding bieten Umgebungen wie das AI Studio von Google eine tolle Möglichkeit, ganze Apps programmieren zu lassen, ganz egal, ob nun Dashboards, Spiele oder Simulationen. Hier gilt es einfach mal zu testen und auch Fehler zu machen, um diese womöglich dann direkt wieder per Prompt zu beheben. Es macht auf jeden Fall Spaß!

Nutzung des Beitrags mit Text & Screenshots

✅ Lizenz für eine Organisation (Zum Shop)

✅ Lizenz für eine Einzelperson (Zum Shop)