Jonas Keil
KI-Kompass →
Jonas Keil
KI-Kompass →
← Alle Artikel
Jonas Keil Jonas Keil 5 Min. Lesezeit

Vibe Coding einfach erklärt: Apps bauen ohne Programmieren

Vibe Coding einfach erklärt: Apps bauen ohne Programmieren – YouTube Video

Vibe Coding ist gerade einer der spannendsten Wege, um ganz ohne Vorkenntnisse eine eigene App zu bauen. Die Idee dahinter: Du beschreibst in normalen Sätzen, was du haben willst, und ein KI-Agent schreibt den kompletten Code für dich. Vor drei Jahren wäre das noch absolut unvorstellbar gewesen. Heute kannst du so als absoluter Beginner eine Webanwendung erstellen, die dir Arbeit abnimmt oder sogar Geld einbringen kann. In diesem Artikel erkläre ich dir, was Vibe Coding genau ist und was du brauchst, um selbst loszulegen.

Was ist Vibe Coding?

Beim klassischen Programmieren lernst du eine Programmiersprache, schreibst jede Zeile selbst und suchst stundenlang nach Fehlern. Beim Vibe Coding drehst du das um. Du gibst in normaler Sprache die Richtung vor, ein KI-Agent schreibt den Code. Du sagst zum Beispiel: „Bau mir eine App, mit der ich meine Abos im Blick behalte", und die KI kümmert sich um alles Technische dahinter.

Das Tool, das ich dafür nutze und dir für den Einstieg empfehle, ist Claude Code von Anthropic. Falls dir das nichts sagt, findest du in Was ist Claude Code? die Grundlagen. Du könntest theoretisch auch mit Codex arbeiten, die Tools funktionieren am Ende des Tages sehr ähnlich. Wenn du mit Claude Code gut wirst, fällt dir ein Wechsel später leicht.

Eine Sache solltest du trotzdem wissen: Vibe Coding heißt nicht, dass du nichts mehr zu tun hast. Du wirst vom Programmierer zum Auftraggeber. Du beschreibst, was du willst, liest die Pläne gegen und gibst Feedback. Nur den Code tippt die KI.

So läuft ein Vibe-Coding-Projekt ab

Claude Code arbeitet immer in einem Ordner auf deinem Rechner. Das ist ein wesentlicher Unterschied zum normalen Claude-Chatbot, bei dem du Dateien ständig hoch- und runterladen musst. Für ein neues Projekt legst du also einen leeren Ordner an, öffnest ihn in Claude Code und beschreibst deine Idee.

Ich empfehle dir dabei dringend, nicht sofort bauen zu lassen. Claude Code hat einen Planmodus, in dem er erst einen Plan erstellt, bevor er irgendetwas programmiert. Den Plan liest du dir durch, gibst bei Bedarf Feedback, und erst dann geht es los. Das klingt nach einem Umweg, spart dir aber später enorm viel Korrekturarbeit, weil die KI von Anfang an einen klaren Auftrag hat.

Danach testest du die App erst einmal lokal auf deinem Rechner. Du kannst herumexperimentieren, so viel du willst, und stellst sie erst online, wenn alles passt.

Die vier Bausteine, die du brauchst

Jetzt zum wichtigsten Teil dieses Artikels. Die meisten bekommen ihre Webanwendung nicht zum Laufen, weil sie bei den Komponenten die falschen Entscheidungen treffen, nicht weil die KI schlechten Code schreibt. Dabei ist es eigentlich ganz einfach. Du brauchst für eine Webapp genau vier Bestandteile: einen KI-Agenten, eine Datenbank, einen Server und GitHub.

Die vier Bausteine einer Webapp: Claude Code als KI-Agent, Supabase als Datenbank, Hostinger als Server und GitHub als Code-Cloud KI-AGENT Claude Code schreibt den Code deiner App DATENBANK Supabase speichert Daten, übernimmt Logins SERVER Hostinger macht die App online erreichbar CODE-CLOUD GitHub Brücke zwischen KI und Server Du arbeitest nur mit Claude Code. Die anderen drei laufen im Hintergrund.

Mein eigenes Setup besteht aus Claude Code, Supabase, Hostinger und GitHub:

Das Schöne an diesem Setup: Du musst nur lernen, wie du mit Claude Code richtig arbeitest. GitHub, Supabase und Hostinger sind am Ende nur Accounts, die du einmal anlegst. Danach läuft dieses System komplett im Hintergrund.

Was kostet Vibe Coding?

Rechnen wir kurz zusammen: GitHub gratis, Supabase gratis, Hostinger 4 € im Monat, Claude Pro 15 € im Monat bei jährlicher Abrechnung. Du kommst also mit unter 20 € im Monat aus und kannst mit dem Hosting sogar fünf Apps gleichzeitig betreiben.

Ein Punkt, der gerade in Deutschland zählt: Hostinger und Supabase sind die beiden Komponenten, über die Nutzerdaten laufen. Beide kannst du in Deutschland hosten, Supabase zum Beispiel in Frankfurt. Damit ist das Setup auch aus DSGVO-Sicht eine valide Kombination.

Was du mit Vibe Coding bauen kannst

Ein Beispiel: Ich habe mit genau diesem Setup einen Abotracker gebaut. Eine Webapp, die mir zeigt, wie viel Geld ich pro Monat für Abos ausgebe, die Analysen zu meinen Ausgaben erstellt und bei der sich neue Nutzer online registrieren und einloggen können. Von der Datenbank bis zum Login hat Claude Code fast alles selbstständig erledigt, sogar das Datenbankschema hat er ohne mein Zutun angelegt.

Der gleiche Ablauf funktioniert genauso für Websites, Spiele oder Automationen. Sobald du das Prinzip einmal verstanden hast, ist die Webapp nur der Anfang.

Ehrlich gesagt: ein bisschen Arbeit bleibt

Glaub mir, die meisten Projekte scheitern nicht am Code. Sie scheitern daran, dass jemand ohne Plan drauflosbaut und irgendwann frustriert aufgibt. Nimm dir deshalb die Zeit, den Plan von Claude Code wirklich durchzulesen, bevor du ihn freigibst.

Und schreib klare Aufträge: Welche App willst du, welche Funktionen soll sie haben, welche Datenbank und welcher Server kommen zum Einsatz. Lass dir außerdem von der KI Rückfragen stellen, bevor sie loslegt. Das räumt Unklarheiten aus dem Weg, die dich später Stunden kosten würden.

Wie du am besten startest

Wenn du eine Sache aus diesem Artikel mitnimmst, dann diese: Leg dir die Gratis-Accounts bei GitHub und Supabase an und hol dir den Claude-Pro-Plan. Damit steht dein Setup. Wie du daraus dann Schritt für Schritt deine erste eigene App baust, zeige ich dir in der Anleitung Webapp mit KI erstellen. Und falls Claude Code für dich komplett neu ist, hilft dir vorher der Blick in die Einrichtungs-Anleitung. Der Einstieg ist wirklich nicht schwer, du musst ihn nur machen.

Jonas Keil
Jonas Keil Ich zeige dir, wie du KI wirklich für dich nutzt. Jede Woche neu auf YouTube, Schritt für Schritt lernst du alle Essentials im KI-Kompass.