Dein erstes Vibe-Coding-Projekt: Eine Todo-App in 1 Stunde

Du möchtest deine erste App mit KI erstellen, weißt aber nicht, wie du anfangen sollst? Eine Todo-App ist das perfekte Projekt zum Einstieg ins Vibe Coding. In einer Stunde wirst du eine funktionsfähige Anwendung bauen, mit der du Aufgaben hinzufügen, abhaken und löschen kannst. Keine Programmierkenntnisse erforderlich: Du beschreibst einfach, was du möchtest, und Claude Code generiert den Code für dich. Diese Anleitung zeigt dir genau, was du schreiben sollst, in welcher Reihenfolge, und wie du häufige Probleme löst. Am Ende hast du eine echte App, die du zeigen, verbessern und täglich nutzen kannst.

Warum mit einer Todo-App ins Vibe Coding starten?

Eine Todo-App vereint alle Grundlagen der Softwareentwicklung ohne technische Komplexität. Wenn du eine Aufgabenliste erstellst, lernst du, Informationen anzuzeigen, neue Daten hinzuzufügen, sie zu ändern und zu löschen. Diese vier Operationen (im Fachjargon CRUD genannt: Create, Read, Update, Delete) machen 80% dessen aus, was moderne Anwendungen tun.

Vibe Coding macht dieses Projekt in einer Stunde machbar, während es für einen Anfänger mit traditionellen Methoden mehrere Wochen dauern würde. Du musst die JavaScript-Syntax nicht verstehen, nicht wissen, wie DOM-Events funktionieren oder wie State Management geht. Du beschreibst einfach, was du möchtest, und Claude Code übersetzt deine Absichten in funktionierenden Code.

Einer Studie von GitHub aus 2025 zufolge erledigen Entwickler, die KI-Assistenten nutzen, ihre Projekte 55% schneller als diejenigen, die manuell programmieren. Für einen absoluten Anfänger ist der Zeitgewinn noch spektakulärer: Du brauchst statt mehrerer Monate Lernzeit nur wenige Stunden Praxis.

Dieses erste Projekt gibt dir auch eine konkrete Grundlage, um zu verstehen, wie Vibe Coding funktioniert. Du siehst in Echtzeit, wie deine Beschreibungen sich in eine Benutzeroberfläche verwandeln, wie du Fehler behebst und wie du deine App schrittweise verbesserst.

Die Tools, die du für dein erstes Projekt brauchst

Du benötigst drei Dinge: Ein Claude-Code-Konto, einen modernen Webbrowser und einen einfachen Text-Editor. Nichts zum Installieren, nichts zum Konfigurieren. Claude Code läuft vollständig online und generiert Code, den du direkt in deinem Browser testen kannst.

Um ein Claude-Code-Konto zu erstellen, gehe auf claude.ai und melde dich mit deiner E-Mail an. Die kostenlose Version reicht für dieses Projekt völlig aus: Du hast 50 Nachrichten pro Tag, mehr als genug, um deine Todo-App zu bauen und zu verfeinern. Wenn du mehr Details zur Ersteinrichtung möchtest, schau dir unser Claude-Code-Tutorial für Anfänger an.

Beim Browser funktionieren Chrome, Firefox, Safari oder Edge perfekt. Du öffnest einfach eine lokale HTML-Datei, um deine App zu testen. Kein Webserver nötig für dieses erste Projekt.

Für den Text-Editor funktionieren Windows Notepad oder Mac TextEdit, aber ich empfehle dir Visual Studio Code (kostenlos auf code.visualstudio.com). Es färbt Code automatisch ein, was das Lesen leichter macht, auch wenn du noch nicht alles verstehst.

Optional: Erstelle einen Ordner auf deinem Computer, in dem du dein Projekt speicherst. Nenne ihn zum Beispiel "meine-todo-app". Dort legst du die Dateien ab, die Claude generiert.

Der Anfangs-Prompt für deine Todo-App

Starten Sie mit diesem genauen Prompt: "Erstelle eine einfache Todo-App in HTML, CSS und JavaScript in einer einzigen Datei. Ich möchte Aufgaben hinzufügen, sie als erledigt abhaken und löschen können. Minimalistisches und modernes Design." Dieser Prompt enthält alle wesentlichen Elemente, ohne in technische Details zu gehen, die du noch nicht beherrschst.

Die Angabe "eine einzige Datei" ist entscheidend für den Anfang. Claude generiert eine HTML-Datei, die alles enthält: die Seitenstruktur, das visuelle Styling und die funktionale Logik. Du verwaltest nur eine Datei, was die Sache enormer vereinfacht.

Die Erwähnung "minimalistisches und modernes Design" lenkt Claude zu einer aufgeräumten und angenehmen Benutzeroberfläche ohne unnötige Schnörkel, die den Code komplizieren würde. Du kannst später fortgeschrittene Funktionen hinzufügen.

Wenn du diesen Prompt sendest, antwortet Claude normalerweise in 10 bis 20 Sekunden mit einem kompletten Code-Block. Du siehst einen großen Block, der mit <!DOCTYPE html> beginnt und mit </html> endet. Das ist normal: Das ist der Code deiner Anwendung.

Kopiere den gesamten Code, füge ihn in deinen Text-Editor ein und speichere die Datei als todo.html in deinem Projektordner. Dann doppelklickst du auf diese Datei: Sie öffnet sich in deinem Browser und du siehst bereits deine erste funktionsfähige Anwendung.

Wenn Claude dir mehrere separate Dateien gibt (HTML, CSS, JS), frag ihn: "Kannst du alles in eine einzige HTML-Datei packen?" Er wird alles für dich zusammenführen.

Deine Anwendung Schritt für Schritt testen und verbessern

Öffne deine todo.html-Datei im Browser und teste jede Funktion: Füge eine Aufgabe hinzu, hake sie ab, lösche sie. Wenn alles beim ersten Mal funktioniert, herzlichen Glückwunsch! Wenn nicht, notiere genau, was nicht funktioniert. Zum Beispiel: "Wenn ich auf Hinzufügen klicke, passiert nichts" oder "Die Aufgaben werden angezeigt, aber ich kann sie nicht löschen".

Gehe zurück zu Claude und beschreibe das Problem mit deinen eigenen Worten. Du musst nicht verstehen, warum es buggt: Erkläre einfach, was du beobachtest. Claude wird den Code analysieren, den er generiert hat, und dir eine Korrektur vorschlagen. Kopiere den neuen Code, ersetze den alten in deiner Datei, speichere und aktualisiere deinen Browser (F5).

Diese Test-Korrektur-Test-Schleife ist das Herzstück des Vibe Coding. Du musst den Code nicht selbst debuggen: Du beschreibst einfach, was nicht stimmt, und die KI korrigiert es. Laut Daten von Anthropic löst Claude Code 73% der Bugs beim ersten Versuch, wenn die Problembeschreibung klar ist.

Sobald die Grundfunktionen funktionieren, verbessere deine App schrittweise. Hier sind einfache Anfragen, die deine Todo-App transformieren:

• "Füge einen Zähler hinzu, der die Anzahl der verbleibenden Aufgaben anzeigt"
• "Ändere die Hintergrundfarbe zu Hellblau und die Buttons zu Grün"
• "Mache erledigte Aufgaben durchgestrichen und grau"
• "Füge eine Animation hinzu, wenn ich eine Aufgabe lösche"
• "Speichere die Aufgaben, damit sie bleiben, auch wenn ich den Browser schließe"

Jede Anfrage dauert 30 Sekunden zum Schreiben und 20 Sekunden für Claude, um die Änderung zu generieren. Du kopierst, testest, validierst. In 10 Minuten kannst du deine einfache Anwendung in etwas wirklich Persönliches verwandeln.

Häufige Fehler und wie du sie behebst

Fehler Nummer eins: Vergessen, die Datei zu speichern, nachdem du den neuen Code eingefügt hast. Du kopierst Claudes Code, aktualisierst den Browser und siehst keine Änderung. Lösung: Speichere immer (Strg+S oder Cmd+S), bevor du den Browser aktualisierst.

Zweiter häufiger Fehler: Nur einen Teil des Codes kopieren. Claude gibt manchmal lange Antworten, und du kannst das Ende übersehen, wenn du nicht nach unten scrollst. Überprüfe immer, dass du von <!DOCTYPE html> bis </html> einschließlich kopierst.

Dritte Falle: Widersprüchliche Anweisungen geben. Wenn du "mache die Buttons rot" fragst und zwei Nachrichten später "ich möchte überall ein blaues Theme", wird Claude versuchen, beides zu vereinbaren und das Ergebnis kann seltsam aussehen. Lösung: Wenn du deine Meinung änderst, sag es klar: "Vergiss das Rot, ich möchte alles in Blau".

Viertes Problem: Die Datei öffnet sich im Text-Editor statt im Browser. Das passiert, wenn die Dateierweiterung .txt statt .html ist. Wenn du speicherst, stelle sicher, dass du todo.html mit .html am Ende eingibst. Unter Windows musst du möglicherweise die Anzeige von Dateierweiterungen in den Explorer-Optionen aktivieren.

Fünfter Fehler: Zu viele Dinge auf einmal anfragen. "Füge Kategorien, Fälligkeitsdaten, ein Prioritätssystem und einen Dark Mode hinzu" wird wahrscheinlich fehlerhaften Code generieren. Gehe schrittweise vor: Eine Funktion nach der anderen, teste, validiere, dann weiter.

Wenn wirklich nichts nach mehreren Versuchen funktioniert, frag Claude: "Generiere mir eine komplette Todo-App in einer einzigen HTML-Datei, die einfachste Version möglich, nur Aufgaben hinzufügen und löschen". Starten Sie von dieser minimalen Basis und bauen Sie schrittweise auf.

Nach deiner ersten Todo-App weitermachen

Sobald deine Todo-App funktioniert, hast du die Grundlagen des Vibe Coding gelernt und kannst ehrgeizigere Projekte angehen. Die Logik bleibt gleich: Du beschreibst, was du möchtest, testest, korrigierst, verbesserst. Aber jetzt kannst du auf komplexere Anwendungen abzielen.

Nächster natürlicher Schritt: Füge Datenpersistenz hinzu. Frag Claude: "Speichere die Aufgaben im localStorage des Browsers, damit sie auch nach dem Schließen bleiben". Diese Funktion verwandelt deine Todo-App in ein wirklich nutzbares Alltagswerkzeug.

Danach erkunde Kategorien: "Füge die Möglichkeit hinzu, verschiedene Listen zu erstellen (Arbeit, Privat, Einkaufen) mit Tabs zum Wechseln zwischen ihnen". Du beginnst, komplexere Datenstrukturen zu organisieren, ohne eine Zeile Code zu schreiben.

Um noch weiter zu gehen, lerne, wie du eine komplette Anwendung mit KI erstellst. Dieser Guide zeigt dir, wie du von einem einfachen Projekt zu einer echten Web-App mit Datenbank und Authentifizierung kommst.

Du kannst auch deine Prompts verbessern, indem du die Techniken des Prompt Engineering anwendest. Je besser du mit Claude kommunizierst, desto genauer entspricht der generierte Code dem, was du möchtest.

Abschließend: Diversifiziere deine Projekte: Erstelle einen Trinkgeldrechner, einen Zufallszitat-Generator, einen Pomodoro-Timer. Jedes Projekt zeigt dir neue Möglichkeiten. Auf Skilzy, begleiten wir dich durch 12 progressive Projekte, die dich von absolutem Anfänger zu App-Entwickler bringen.

Vibe Coding öffnet eine Welt, in der du bauen kannst, was du dir vorstellst, ohne Monate mit Syntax-Lernen zu verbringen. Deine Todo-App ist der erste Stein. Experimentiere weiter, teste, frag. So lernt man.

Fazit

Du hast gerade deine erste App mit Vibe Coding erstellt. In einer Stunde bist du von Null zu einer funktionsfähigen Todo-App gekommen, die du nutzen und verbessern kannst. Diese Methode ermöglicht es dir, konkrete Projekte vom ersten Tag an zu bauen, ohne dich in Theorie zu verlieren. Experimentiere weiter mit anderen Ideen und tritt Skilzy bei, um dein Lernen mit progressiven Projekten und persönlicher Unterstützung zu strukturieren.