Ich kann nicht programmieren. Jedenfalls nicht so, dass dabei etwas Vorzeigbares herauskäme. Trotzdem habe ich eine funktionierende Lernkarten-App gebaut, mit Spaced-Repetition-Algorithmus, 3D-Animationen, Deck-Verwaltung und allem, was dazugehört. Das Werkzeug war Claude & Claude Code. Die Methode nennt sich Vibe Coding. Und das Ergebnis heißt Vanki.
Hier ist der ehrliche Bericht, wie das lief. Was funktioniert hat, wo die KI daneben lag und was ich dabei über das Programmieren gelernt habe, ohne eine Zeile selbst zu schreiben.
Warum ausgerechnet eine Lernkarten-App?
Anki ist die bekannteste App für Spaced Repetition, eine Lernmethode, bei der Karteikarten in wachsenden Abständen wiederholt werden. Was du gut kannst, siehst du seltener. Was du vergisst, kommt öfter dran. Das Prinzip ist wissenschaftlich belegt und funktioniert hervorragend.
Das Problem: Anki sieht aus wie 2005 und erschlägt Einsteiger mit Optionen. Ich wollte etwas Einfacheres. CSV-Datei reinwerfen, lernen, fertig. Keine Installation, keine Registrierung, keine Cloud. Außerdem wollte ich für bildungssprache.net fertige Kartensets anbieten, die man direkt im Browser durchspielen kann. Also brauchte ich eine eigene App.
Perfektes Vibe-Coding-Projekt. Überschaubar genug, um es an einem Wochenende zu schaffen. Komplex genug, um etwas dabei zu lernen. Vanki steht natürlich für Vibecodeanki, mehr ist nicht beabsichtigt.
Alles steht und fällt mit dem God Prompt
Beim Vibe Coding gilt: Je präziser du beschreibst, was du willst, desto besser das Ergebnis. Wir starten nicht mit »Bau mir eine Lernkarten-App« (das gibt Chaos), sondern mit einem durchdachten Anforderungsdokument. In der Szene heißt das God Prompt.
Die Kurzversion:
Vision: Minimalistische Lernkarten-App im Browser
Kernfunktionen: CSV-Import, Karten lernen, Spaced Repetition
Technik: Single HTML-Datei, Vanilla JS, LocalStorage
Design: Warm, freundlich, sanfte Farben, große SchriftDas vollständige Dokument war etwa 150 Zeilen lang. Datenstrukturen, User Flow, der komplette SM-2-Algorithmus in Pseudocode, Design-Vorgaben bis hin zu Farbwerten. Das klingt nach viel Vorarbeit, und das war es auch. Aber genau hier liegt der Unterschied zwischen »die KI hat irgendwas produziert« und »die KI hat das gebaut, was ich wollte«.
Den Algorithmus habe ich so beschrieben:
Bei »Gewusst!« klicken:
- Erstes Mal richtig: Intervall = 1 Tag
- Zweites Mal richtig: Intervall = 6 Tage
- Danach: Intervall = Intervall × Schwierigkeitsfaktor
Bei »Wiederholen« klicken:
- Intervall zurück auf 1 Tag
- Schwierigkeitsfaktor sinkt leichtPräzise genug, dass die KI es korrekt umsetzen konnte. Beim ersten Anlauf. Das spart später Stunden an Debugging.
Wie sich Vibe Coding anfühlt
Du gibst Claude Code das Anforderungsdokument und den ersten Prompt:
Lies die Spezifikation und erstelle die App. Starte mit der Grundstruktur und dem Import-Screen.Dann passiert etwas Seltsames. Die KI schreibt Code. Viel Code. Dateien entstehen, CSS wird generiert, JavaScript-Funktionen tauchen auf. Nach drei Minuten hast du eine index.html, die du im Browser öffnen kannst. Und sie funktioniert. Nicht perfekt, aber der Import-Screen ist da, man kann eine Datei reinziehen, und es passiert etwas.
Dieses Gefühl ist schwer zu beschreiben. Du hast gerade Code produziert, den du nicht geschrieben hast, den du nicht vollständig verstehst, der aber tut, was du wolltest. Es ist ein bisschen wie Zauberei. Und ein bisschen wie Kontrollverlust.
Dann testest du und siehst: Die Vorschau fehlt. Nächster Prompt:
Der Import klappt. Füge jetzt die Vorschau hinzu – zeige die ersten 5 Karten nach dem Datei-Upload.So arbeitest du dich Feature für Feature durch. Testen, Prompt, testen, Prompt. Das Tempo ist verrückt. In zwei Stunden hast du mehr geschafft, als ein Anfänger in zwei Wochen. Allerdings hast du auch weniger verstanden.
Irgendwann kommt der Feinschliff:
Die Karte soll einen sanften Schatten haben und beim Umdrehen eine 3D-Animation zeigen. Mach die Buttons größer und füge Hover-Effekte hinzu.Und plötzlich dreht sich eine Karte im 3D-Raum, mit einer flüssigen Animation, die du in CSS nie hinbekommen hättest. Die KI schon.
Wo es schief ging
Es geht immer irgendwo schief. Das ist der Teil, den die Vibe-Coding-Enthusiasten gern auslassen.
Die KI baut Features, die du nicht wolltest. Ich bat um einen Export-Button. Die KI baute einen Export-Button, einen Import-Dialog, eine Backup-Funktion und ein Einstellungsmenü. Alles auf einmal, alles halb fertig. Die Lösung: expliziter sein. »Füge einen Export-Button hinzu, der alle Karten als CSV herunterlädt. Sonst nichts.«
Der Code wird mit jedem Fix schlechter. Das Jenga-Prinzip. Du bittest die KI, einen Bug zu fixen. Sie fixt ihn und bricht dabei etwas anderes. Du fixst das und etwas Drittes geht kaputt. Nach fünf Runden ist der Code Spaghetti. Die Lösung: Feature löschen und mit frischem Kontext neu bauen lassen. Das fühlt sich nach Rückschritt an, ist aber schneller als endloses Flicken.
Der SM-2-Algorithmus hatte einen Bug. Die KI hatte »interval« statt »repetitions« geprüft. Sah richtig aus, klang richtig, funktionierte aber falsch. Karten kamen nie über das erste Intervall hinaus. Erst Wochen später aufgefallen. Das ist das Risiko von Code, den man nicht selbst geschrieben hat: Man sieht Bugs nicht, die man nie gemacht hätte.
Es funktionierte lokal, aber nicht nach dem Neuladen. LocalStorage-Problem. Die Daten wurden geschrieben, aber die Lade-Logik las sie nicht korrekt zurück. Browser-DevTools auf, »Application« → »Local Storage«, und man sieht, ob die Daten überhaupt ankommen. Den Fix hat die KI in 30 Sekunden erledigt, sobald ich das Problem präzise beschrieben hatte.
Git macht Probleme. Ja, das ist normal. Für den Anfang reicht ein Ordner pro Projekt, ab und zu als ZIP sichern. Git kannst du später lernen. Oder ignorieren.
Was man dabei lernt, auch ohne zu programmieren
Das Überraschende am Vibe Coding: Man versteht am Ende mehr, als man erwartet hätte. Nicht jede Zeile Code, aber die Konzepte dahinter. Wie Spaced Repetition funktioniert, ist nach diesem Projekt glasklar. Wie ein Browser Daten speichert, auch. Wie CSS-Animationen aufgebaut sind, ebenfalls. Und wofür man gutes Prompting braucht, sowieso.
Du musst den Code nicht schreiben. Aber du solltest ihn lesen können. Zumindest so weit, dass du merkst, wenn die KI Unsinn baut. Das ist die eigentliche Kompetenz beim Vibe Coding: nicht das Programmieren, sondern das Prüfen.
Was Vanki heute kann
Die App hat sich seit dem ersten Prototyp weiterentwickelt. CSV-Import per Drag & Drop, auch mehrere Dateien gleichzeitig. Separate Decks für verschiedene Themen, jedes mit eigenem Lernfortschritt. Spaced Repetition mit SM-2-Algorithmus (diesmal korrekt). Automatisches Shuffling. Maximal 20 neue Karten pro Tag und Deck, damit das Lernen nachhaltig bleibt. 3D-Flip-Animation. Tastatursteuerung. Alles lokal im Browser, keine Registrierung, keine Cloud.
Fertige Kartensets lassen sich per URL-Parameter vorladen, so kann man von einem Artikel direkt in die passenden Lernkarten springen.
Interessant ist, dass die App nicht in einem Rutsch entstanden ist. Den ersten Prototyp hat Claude Code gebaut, der liegt auch noch auf GitHub. Aber Deck-Verwaltung, Shuffle, Bugfixes und das Farbdesign sind später im Chat mit Claude auf claude.ai entstanden. Ich habe die Datei hochgeladen, die Probleme beschrieben, Claude hat den Code angepasst, ich habe getestet. Auch das ist Vibe Coding, nur mit einem anderen Werkzeug. Wer sagt, dass man dafür ein Terminal braucht?
Eine komplette Web-App, gebaut von jemandem, der kein Programmierer ist, mit zwei verschiedenen KI-Werkzeugen, über mehrere Wochen verteilt. Womöglich das beste Argument für Vibe Coding, das ich liefern kann.
Kannst du das auch?
Ja. Wenn du weißt, was du willst. Das ist die Bedingung, an der die meisten scheitern. Nicht an der Technik, nicht am Coding-Tool, sondern an der Vorstellung. »Bau mir eine App« funktioniert nicht. »Bau mir eine Lernkarten-App mit diesen Features, diesem Algorithmus, diesem Flow« funktioniert.
Das Anforderungsdokument ist die halbe Arbeit. Investiere Zeit dort, bevor du die KI losschickst. Dann klappt auch der Rest. Nicht per Knopfdruck, nicht beim ersten Versuch, und nicht ohne Frustmomente. Aber es klappt.
Wenn du Ideen brauchst, was sich mit Vibe Coding bauen lässt: Hier sind 199 Vibe Coding Ideen für den Anfang.
