Vibecoding 101: So erstellt ihr in wenigen Minuten eure eigene App – auch ohne Erfahrung

Mit Vibecoding braucht es keine Programmierkenntnisse – zur eigenen App in wenigen Schritten mit Claude. (Bildquelle: GameStar Tech; Lerbank-bbk22 / Adobe Stock)

Vibecoding ist ein Begriff, den man immer wieder hört. Wer ihn nicht kennt: Damit ist eine Art des Codings gemeint, bei dem KI einen großen Teil, wenn nicht sogar die gesamte Arbeit übernimmt.

Während es vor einigen Jahren noch eine gewisse Grunderfahrung oder zumindest ein Code-Verständnis gebraucht hat, ermöglichen es Tools wie Claude heute, auch ohne Programmiererfahrung eigene Anwendungen zu erstellen.

Das kann besonders praktisch sein, wenn ihr eine bestimmte App für euren persönlichen Wunsch braucht. Das kann ein kleines Dashboard, eine To-Do-Liste oder etwas Ähnliches sein.

Wie ihr eure eigene Anwendung mit Vibecoding erstellen könnt, erfahrt ihr in einer anfängerfreundlichen Schritt-für-Schritt-Anleitung im Folgenden.

Aaron Hofmann

Anmerkung des Autors: Größere Projekte und vor allem solche, die für die Öffentlichkeit gedacht sind, sollten aus meiner Sicht niemals ohne Verständnis für die Software veröffentlicht werden. Insbesondere dann, wenn sensible Daten zum Einsatz kommen und keine Gegenprüfung auf Sicherheitslecks und potenzielle Gefahren durchgeführt werden kann.

Was genau ist Vibecoding?

Der Begriff »Vibe-Coding« stammt von einem X-Post des OpenAI-Gründungsmitglieds Andrej Karpathy und bezeichnet die Nutzung natürlicher Sprache, um Künstliche Intelligenz dazu zu bringen, Code zu schreiben. Oder eben auch ganze Apps zu entwickeln. Seiner Aussage zufolge könnte man es aber auch als »Programmieren für Faule« bezeichnen:

0:49 Claude Opus 4.5: Anthropic stellt neues KI-Modell vor und macht Google und OpenAI Konkurrenz

Im Gegensatz zu klassischen Programmierenden geht es also nicht um das Austüfteln eines komplexen Codes oder das manuelle Beheben von Fehlern, sondern darum, alle Aufgaben an eine KI abzutreten.

Das passiert allerdings in einem kontinuierlichen Dialog. Zuerst wird eine Idee geäußert, die KI generiert den Code, man probiert das Ergebnis aus und gibt anschließend Feedback – so lange, bis das Endergebnis passt.

Das sieht dann beispielsweise so aus:

• Tool wählen: Für den Anfang reichen browserbasierte KI-Modelle wie Claude, Lumo, Gemini oder Replit. Manche Modelle liefern euch jedoch nur den fertigen Code, den ihr dann noch in Editoren einfügen und speichern müsst.
• Ersten Prompt schreiben: Wenn ihr nur grobe Anweisungen gebt, bekommt ihr oft andere Ergebnisse als gewollt. Ein guter Prompt beschreibt die genauen Funktionen eurer Anwendung und deren Optik. Ein hilfreicher Trick: Verwendet ein KI-Modell, um euch einen detaillierten Start-Prompt zu erstellen.
• Nachbessern: Die erste Version entspricht selten den genauen Vorstellungen. Gebt der KI Feedback zu möglichen Fehlern, Designwünschen oder zusätzlichen Vorstellungen, bis ihr mit dem Ergebnis zufrieden seid.

Vibecoding in der Praxis: Claude-Beispiel zur eigenen App

Damit ihr auch ein konkretes Beispiel habt, wie ein Vibecoding-Prozess aussehen kann, bauen wir jetzt gemeinsam eine kleine Web-App – und das aus möglichst einfachen Prompts.

Um das zu ermöglichen, verwenden wir für das Beispiel Claude, da das KI-Modell auch in der kostenfreien Variante komplexes Coding ermöglicht – also genau das, was wir für eine vollständige App brauchen.

Als Projekt lassen wir uns einfach mal eine Anwendung gegen den Pile of Shame, also den Berg ungespielter Videospiele in unserer Bibliothek, programmieren. Würden wir jedoch nur den Prompt »Schreibe eine App gegen meinen Pile of Shame« geben, bekämen wir vermutlich nicht das, was wir wollen.

Mehr zum Thema

Spieleflut auf Steam: Psychologen erklären, wie ihr euren Pile of Shame abbaut [Best of GameStar]

von Natalie Schermann

Also heißt es erst einmal, einen Start-Prompt festzulegen. Als smarten Trick verwenden wir dafür KI selbst und lassen uns unseren Prompt einfach von ChatGPT schreiben. Dadurch sparen wir uns Tokens bei Claude und können länger vibecoden.

Das Ziel ist es, eine Art »Pile of Shame Killer« zu erstellen – zumindest ist das erst einmal der Arbeitstitel. Dieser soll nun folgende Funktionen haben:

• Eine Spiele-Verwaltung, in der Titel eingetragen und nach Status (»Ungespielt«, »In Arbeit«, »Durchgespielt«) gefiltert werden können.
• Ein Zufalls-Roulette, das per Klick die lästige Entscheidung abnimmt, was als Nächstes gespielt wird.
• Einen 60-Minuten-Timer für die erste Anspiel-Session.
• Ein Mini-Dashboard für eine Fortschritts-Übersicht.
• Das Design: übersichtlich im düsteren Gamer-Look mit coolen Neon-Akzenten.

Damit haben wir auch schon die größte Arbeit hinter uns. Denn nun reicht es, wenn wir die Stichpunkte in ChatGPT oder eine andere KI schmeißen und mit dem Satz ergänzen: »Erstelle mir daraus einen detaillierten Prompt für Claude, mit dem er eine fertige Web-App baut«.

Sobald die KI unseren fertigen Claude-Prompt ausgespuckt hat, kopieren wir ihn, wechseln zu Claude und fügen den Befehl einfach nur noch ein.

Jetzt heißt es: kurz zurücklehnen. Claude setzt im Hintergrund alle Bausteine zusammen. Das dauert bei kompletten Code-Blöcken manchmal zwei bis drei Minuten – perfekt für eine kurze Kaffeepause.

Und schon sind wir am ersten Ziel: In wenigen Minuten spuckt Claude das Ergebnis aus und wir haben unsere fertige Anwendung. Sollte uns dabei etwas nicht gefallen oder ein Fehler auftreten, sagen wir der KI Bescheid und diese setzt sich an die Lösung.

Im Fall der »Pile of Shame Killer«-App funktionierte der Button zum Löschen der eingetragenen Spiele zunächst nicht. Claude konnte den Fehler aber in wenigen Sekunden finden und unser Programm verbessern.

Nun steht uns nichts mehr im Weg und wir haben unsere erste, voll einsatzbereite Web-App gegen den Pile of Shame erstellt – und das, ohne eine einzige Zeile zu coden.

Vom Web zur App: So klappt die Umwandlung

Wenn ihr eine per Vibe-Coding erstellte Web-App nicht nur im Browser nutzen, sondern als eigenständige Android-App (.apk) auf dem Smartphone installieren möchtet, gibt es mehrere Möglichkeiten.

Zum Beispiel könnt ihr auf Open-Source-Projekte wie WebToApp (auf GitHub) zurückgreifen. Dabei handelt es sich um eine kostenlose App, mit der ihr in wenigen Klicks eure Projekte in Apps verwandeln könnt.

Mit der WebToApp-Anwendung lassen sich Web-Apps unkompliziert in richtige Apps umwandeln. (Bildquelle: GameStar Tech)

Dafür wählt ihr in der App einfach eure Anwendung (HTML, CSS, Python oder Node.js) aus und lasst euch von WebToApp vollautomatisch eure App erstellen. Dabei könnt ihr auf Wunsch eurem Programm einen Namen sowie ein App-Logo verpassen und kleinere Einstellungen wählen.

Sobald alle Einstellungen passen, tippt ihr einfach auf den Erstellen-Button. Ganz ohne Computer oder externe Cloud-Dienste baut WebToApp dann auf eurem Smartphone die fertige App-Struktur zusammen.

Die Web-App wurde in eine APK umgewandelt und läuft nun lokal auf dem Handy. (Bildquelle: GameStar Tech)

Aus technischer Sicht funktioniert das Ganze so, dass das Open-Source-Projekt im Hintergrund einen kleinen lokalen Server startet. Sobald ihr auf eurem Handy eure Anwendung öffnet, wird diese darüber betrieben, sodass eure App auch ohne Internetverbindung gestartet werden kann. Damit stehen euch eure selbst gebauten Werkzeuge auch offline unterwegs jederzeit zur Verfügung.

Fazit

Vibecoding ist extrem praktisch – besonders dann, wenn ihr maßgeschneiderte Lösungen für eure ganz eigenen Probleme sucht. Egal ob ein kompaktes Dashboard, eine individuelle To-Do-Liste oder sogar eine kleine Mod für euer Lieblingsvideospiel: Die Grenzen setzt hier einzig eure eigene Kreativität.

Mehr zum Thema

Hört auf, die falsche KI zu nutzen: Wann ihr ChatGPT, Claude oder Gemini wählen müsst

von Jan Stahnke

Trotz aller Begeisterung solltet ihr jedoch im Hinterkopf behalten: Komplexe oder datenschutzsensible Projekte gehören vor einer Veröffentlichung immer gründlich überprüft. Auch braucht es manchmal ein wenig Geduld und mehrere Anläufe, bis ein Prompt wirklich exakt sitzt und die KI genau das spuckt, was ihr wollt.

Doch unter dem Strich ist Vibecoding kinderleicht. Ihr müsst weder nach Fehlern suchen noch programmieren lernen, um euer Tool zu erstellen. Stück für Stück mit einfachen Anpassungen im KI-Chat. Schnappt euch also eure erste Idee und probiert es doch einfach mal selbst aus!