Vibe Coding Praxis: Einen Vokabeltrainer bauen in 30 Minuten

Theorie ist das eine. Jetzt wird es praktisch. In diesem Artikel bauen wir gemeinsam einen Vokabeltrainer – von der Idee bis zur fertigen App, die du auf dem Handy nutzen kannst.

Falls du noch nicht weißt, was Vibe Coding ist oder wie Claude Code funktioniert: Lies die Grundlagen zuerst. Hier geht es ums Machen.

Das Ergebnis vorab

Bevor wir loslegen: Hier ist der fertige Vokabeltrainer. Probier ihn aus – das ist das Ergebnis von etwa 20 Minuten Arbeit mit einer KI.

Dunkles Design, Spaced Repetition, Statistik am Ende. Funktioniert auf dem Handy, keine Installation nötig. Und jetzt zeige ich dir, wie du so etwas selbst baust.

Was wir bauen

Ein Spanisch-Vokabeltrainer mit folgenden Funktionen:

Die App zeigt ein deutsches Wort, du tippst die spanische Übersetzung. Richtig? Grünes Feedback, nächstes Wort. Falsch? Rotes Feedback, die richtige Lösung wird angezeigt – und das Wort kommt später nochmal dran. Am Ende siehst du deine Statistik: wie viele richtig, wie viele falsch, welche Wörter du noch üben solltest.

Das Prinzip nennt sich Spaced Repetition: Wörter, die du nicht kannst, werden häufiger wiederholt. Das ist effektiver als stures Durchgehen einer Liste.

Drei Wege zum Ziel

Bevor wir loslegen: Es gibt verschiedene Ansätze, je nachdem wie viel Zeit du investieren willst.

Der schnelle Weg – Du packst alles in einen Prompt: Was die App können soll und gleich die Vokabeln dazu. Fünf Minuten, fertig. Nachteil: Wenn du später die Vokabeln ändern willst, musst du praktisch von vorn anfangen. Für ein Wegwerfprojekt okay, für echtes Lernen unpraktisch.

Der praktische Weg – Du trennst Daten und Logik. Die Vokabeln stehen als einfache Liste im Code, der Rest ist die App-Logik. So kannst du die Wortliste austauschen, ohne alles neu zu bauen. Eine Viertelstunde Aufwand, deutlich flexibler. Das machen wir heute.

Der Projektweg – Du erstellst eine Spezifikation in einer separaten Datei: Was die App können soll, wie sie aussehen soll, welche Sonderregeln gelten. Dazu eine externe Datendatei (JSON oder CSV) mit den Vokabeln. Dauert eine halbe Stunde, aber du kannst das Projekt beliebig erweitern und anderen erklären, wie es funktioniert. Sinnvoll für komplexere Tools oder wenn du das Projekt mit einer Lerngruppe teilen willst.

Was du brauchst

Nicht viel:

Einen Zugang zu Claude, ChatGPT oder einem ähnlichen KI-Tool. Die kostenlose Version reicht für dieses Projekt. Einen Texteditor – der vorinstallierte auf deinem Computer genügt. Unter Windows ist das Notepad, auf dem Mac TextEdit (auf reinen Text umstellen). Einen Browser. Das war’s.

Das Ergebnis ist eine Web-App – eine einzelne HTML-Datei, die du im Browser öffnest. Keine Installation, läuft auf jedem Gerät. Du kannst die Datei später auf einen Webserver laden und dann auch vom Handy darauf zugreifen. Oder du schickst sie per Messenger an Freunde.

Schritt 1: Die Vokabeln vorbereiten

Zuerst brauchst du deine Wortliste. Für unser Beispiel nehmen wir zehn spanische Grundvokabeln:

Hallo – hola
Danke – gracias
bitte – por favor
Guten Morgen – buenos días
Gute Nacht – buenas noches
Auf Wiedersehen – adiós
ja – sí
nein – no
Wasser – agua
Brot – pan

In der Praxis nimmst du natürlich die Vokabeln aus deinem aktuellen Lehrbuch oder Kurs. Tipp: Fang mit 10–20 Wörtern an. Mehr kannst du später immer noch hinzufügen.

Schritt 2: Der Prompt

Jetzt kommt der eigentliche Vibe-Coding-Teil. Du beschreibst der KI, was du willst. Je präziser, desto besser das Ergebnis.

Hier ist der Prompt, den ich verwendet habe:

Erstelle eine Web-App als einzelne HTML-Datei: Ein Spanisch-Vokabeltrainer.

Funktionen:
- Zeigt ein deutsches Wort, ich tippe die spanische Übersetzung
- Richtige Antwort: grünes Feedback, nächstes Wort
- Falsche Antwort: rotes Feedback, richtige Lösung anzeigen, Wort kommt später nochmal dran (Spaced Repetition)
- Am Ende: Statistik (richtig/falsch/Prozent) und Liste der Wörter, die ich falsch hatte

Design:
- Mobilfreundlich, große Buttons und Eingabefelder
- Dunkles Design (schont die Augen beim Lernen)
- Einfach und ablenkungsfrei

Die Vokabeln sollen im Code stehen, damit ich sie leicht austauschen kann:
Hallo – hola
Danke – gracias
bitte – por favor
Guten Morgen – buenos días
Gute Nacht – buenas noches
Auf Wiedersehen – adiós
ja – sí
nein – no
Wasser – agua
Brot – pan

Das sind etwa 30 Zeilen Text. Keine Programmiersprache, nur eine Beschreibung dessen, was du haben willst.

Schritt 3: Code generieren und speichern

Du gibst den Prompt in Claude oder ChatGPT ein. Die KI antwortet mit einem Block HTML-Code. Den kopierst du komplett.

Dann öffnest du deinen Texteditor, fügst den Code ein und speicherst die Datei als vokabeltrainer.html. Wichtig: Die Endung muss .html sein, nicht .txt.

Jetzt doppelklickst du auf die Datei. Sie öffnet sich im Browser – und du siehst deine App.

Schritt 4: Testen und anpassen

Die erste Version wird wahrscheinlich nicht perfekt sein. Vielleicht ist die Schrift zu klein, vielleicht funktioniert die Enter-Taste nicht, vielleicht gefällt dir die Farbe nicht.

Das ist normal und kein Problem. Du gehst zurück zur KI und sagst, was nicht stimmt:

Die Schrift ist zu klein fürs Handy. Mach alles größer, besonders das Eingabefeld und den Button.

Oder:

Wenn ich Enter drücke, soll die Antwort geprüft werden.

Die KI liefert eine korrigierte Version. Du kopierst den neuen Code, ersetzt den alten, speicherst, testest. Nach zwei, drei Runden hast du meistens, was du willst.

Falls etwas komplett schiefgeht – Fehlermeldung im Browser, weiße Seite, gar nichts passiert – kopierst du die Fehlermeldung in den Chat. Die KI versteht das und korrigiert.

Die App auf dem Handy nutzen

Eine HTML-Datei auf dem Computer ist praktisch, aber unterwegs willst du vielleicht auf dem Handy lernen. Dafür gibt es mehrere Wege:

Der einfachste: Du schickst dir die Datei selbst per E-Mail oder Messenger. Auf dem Handy öffnest du sie im Browser. Funktioniert, ist aber umständlich bei Updates.

Der bessere: Du lädst die Datei auf einen kostenlosen Webspace. GitHub Pages ist dafür ideal – kostenlos, zuverlässig, keine Werbung. Einmal eingerichtet, hast du eine URL, die du überall aufrufen kannst. Änderungen an der Datei sind sofort live.

Der Profi-Weg: Du machst aus der Web-App eine Progressive Web App (PWA). Dann kannst du sie auf dem Handy wie eine echte App installieren – mit Icon auf dem Homescreen. Dafür brauchst du ein paar Zeilen Extra-Code, die dir die KI logischerweise ebenfalls schreiben kann.

Eigene Vokabeln eintragen

Im generierten Code findest du einen Bereich, der etwa so aussieht:

const vocabulary = [
    { german: "Hallo", spanish: "hola" },
    { german: "Danke", spanish: "gracias" },
    // ... weitere Wörter
];

Das ist deine Vokabelliste. Um sie zu ändern, kopierst du einfach das Format und fügst neue Zeilen ein. Achte auf die Anführungszeichen und Kommata – ein kleiner Tippfehler kann die App kaputt machen. Im Zweifel fragst du die KI: »Hier sind meine neuen Vokabeln, bau sie in den Code ein.«

Teilen mit anderen

Das Beste an selbstgebauten Tools: Du kannst sie weitergeben. Die Kommilitonin, die denselben Spanischkurs belegt, bekommt deine HTML-Datei und hat sofort denselben Trainer.

Noch besser: Sie kann die Vokabeln austauschen und den Trainer für sich anpassen. Oder ihr baut gemeinsam – einer macht die Fragen, der andere kümmert sich ums Design, die KI setzt beides um.

So entstehen Lerntools, die perfekt auf euren Kurs zugeschnitten sind. Kein App Store, keine Abo-Kosten, keine Funktionen, die niemand braucht. Nur das, was ihr braucht.

Ideen zum Weiterbauen

Der Vokabeltrainer oben ist ein Anfang. Mit ein paar zusätzlichen Prompts kannst du ihn ausbauen:

Abfrage in beide Richtungen – Ein Toggle-Button, der zwischen Deutsch→Spanisch und Spanisch→Deutsch wechselt. So trainierst du aktives und passives Vokabular.

Kategorien – Statt einer langen Liste mehrere Themenblöcke: Essen, Reisen, Zahlen, Smalltalk. Ein Dropdown-Menü lässt dich wählen, was du heute üben willst.

Aussprache – Ein Lautsprecher-Button, der das Wort vorliest. Browser können das mit der Web Speech API, die KI weiß wie.

Bilder – Statt nur Text ein Bild zum Wort anzeigen. Besonders gut für konkrete Begriffe wie »Manzana« (Apfel) oder »Perro« (Hund).

Beispielsätze – Nach der richtigen Antwort einen Satz einblenden, der das Wort im Kontext zeigt. Hilft beim Einprägen.

Lernfortschritt speichern – Mit LocalStorage merkt sich der Browser, welche Wörter du schon kannst. Beim nächsten Mal startest du nicht bei null.

Streak-Counter – Zählt, wie viele Tage am Stück du geübt hast. Kleine Gamification, große Wirkung auf die Motivation.

Import aus CSV – Statt Vokabeln im Code zu ändern, eine CSV-Datei hochladen. Praktisch, wenn du viele Wörter hast oder die Liste aus Quizlet exportierst.

Prüfungsmodus – Ein Timer, der nach 30 Sekunden automatisch zur nächsten Frage springt. Simuliert den Druck einer echten Prüfung.

Fehler-Export – Die Liste der falsch beantworteten Wörter als PDF oder Textdatei herunterladen. Zum Ausdrucken oder für die nächste Lernsession.

Jede dieser Erweiterungen ist ein Prompt entfernt. Fang mit dem an, was dir am meisten bringt.

Was du daraus mitnimmst

Vibe Coding ist kein Hexenwerk. Du beschreibst, was du willst. Die KI liefert Code. Du testest, korrigierst, fertig.

Die Hürde liegt nicht im Programmieren – die übernimmt die KI. Die Hürde liegt im Wissen, was du eigentlich willst. Je klarer du beschreibst, desto besser das Ergebnis.

Und falls du jetzt denkst »Das probiere ich mal aus«: Tu es. Nicht einmal eine halbe Stunde, ein Vokabeltrainer, der genau das kann, was du brauchst. Das ist mehr, als die meisten Lern-Apps aus dem Store bieten.