Praktische Anleitung
Diese Vibe-Coding-Anleitung für Anfänger führt dich Schritt für Schritt durch die Erstellung einer einfachen Aufgabenliste. Beschreibe, was sie können soll, prüfe das Ergebnis und nutze deine Beobachtungen für die nächste Änderung.
Eine kleine Aufgabenliste reicht aus, um den gesamten Ablauf zu üben. Du musst nicht eine ganze App planen, bevor du deinen ersten Prompt schreibst.
Nutze bei jedem Vibe-Coding-Durchlauf diesen kurzen Ablauf: Fordere ein klar begrenztes Ergebnis an, probiere es selbst aus und bitte dann um eine konkrete Korrektur.
Bitte um eine Aufgabenliste mit einem Textfeld, einem Button zum Hinzufügen, Checkboxen und einer Möglichkeit, erledigte Aufgaben zu löschen. Beschreibe, was nach dem Neuladen passieren soll, und halte die Vorgaben für das Aussehen einfach.
Füge eine Aufgabe hinzu, markiere sie als erledigt, lösche erledigte Aufgaben und lade die Seite neu. Notiere genau, welche Aktion nicht funktioniert, statt das ganze Projekt nur nach seinem Aussehen zu beurteilen.
Beschreibe die fehlschlagende Aktion und das erwartete Verhalten: Zum Beispiel verschwinden Aufgaben nach dem Neuladen, obwohl sie erhalten bleiben sollten. Teste dieselbe Aktion nach der Änderung erneut.
Die erforderlichen Dinge richten dieses Tutorial auf beobachtbares Verhalten aus. Mit den optionalen Dingen lassen sich Schwachstellen leichter erkennen.
Ein Browser, in dem du die erstellte Seite öffnen und bedienen kannst — Du musst auf Bedienelemente klicken und die Seite neu laden, um das Verhalten zu überprüfen.
Eine Beschreibung deiner Aufgabenlistenseite in einem Satz — Benenne die Aktion und was danach passieren soll.
Eine kurze Testliste: hinzufügen, erledigen, löschen und neu laden — Verwende nach jeder relevanten Änderung dieselben Prüfungen.
Beispielaufgaben ohne private Informationen — Probiere zuerst gewöhnlichen Text aus, dann einen leeren und einen langen Eintrag.
Ein schmales mobiles Browserfensteroptional — Prüfe damit, ob Schaltflächen und Aufgabentext weiterhin gut nutzbar sind.
Sobald diese kleine Seite funktioniert, gehe zu einem Projekt mit einer neuen Herausforderung über, statt alle Funktionen auf einmal hinzuzufügen.
Die Tools haben sich verändert, aber die hilfreiche Gewohnheit aus diesem Tutorial ist dieselbe geblieben: Prüfe ein Ergebnis, bevor du ein weiteres anforderst.
Die technische Vorschau von GitHub Copilot brachte KI-Codevorschläge in den Editor-Arbeitsablauf. Entwickler mussten die Vorschläge weiterhin lesen und entscheiden, ob sie passten.
Mit der öffentlichen Einführung von ChatGPT wurde es einfach, eine Programmieraufgabe in Alltagssprache zu beschreiben und Rückfragen zu einem Ergebnis zu stellen.
Tools mit Vorschauen generierter Benutzeroberflächen machten es leichter, einen gewünschten Bildschirm mit dem tatsächlichen Ergebnis zu vergleichen und anschließend eine konkrete Änderung zu beschreiben.
Andrej Karpathy machte den Begriff Vibe Coding bekannt. Für Anfänger ist die praktische Lehre nicht, jedes Ergebnis zu akzeptieren: Starte die Seite und berichte, was tatsächlich passiert.
Betrachte ein unerwartetes Ergebnis als Hinweis für den nächsten Prompt. Diese Prüfungen sind verlässlicher, als wiederholt nach einer besseren Version zu fragen.
1
Klicke mit einem kurzen Aufgabennamen auf Add. Wenn keine neue Zeile erscheint, teile Vibe Code mit, auf welche Schaltfläche du geklickt hast, was du eingegeben hast und was du erwartet hast. Bitte darum, zuerst genau diese Interaktion zum Laufen zu bringen, bevor du Änderungen am Design anforderst. Probiere nach der Korrektur auch eine leere Eingabe aus: Die Seite sollte sie entweder eindeutig zurückweisen oder bewusst verarbeiten.
2
Prüfe zuerst, ob das Hinzufügen und Abschließen von Aufgaben funktioniert, bevor du die Seite neu lädst. Aktualisiere sie dann und beobachte, ob die Liste wieder erscheint. Falls sie verschwindet, fordere an, dass die Aufgaben für die Browsersitzung oder auf dem lokalen Gerät gespeichert bleiben, und weise darauf hin, dass das Hinzufügen und Abschließen weiterhin funktionieren muss. So lässt sich die Korrektur überprüfen und vermeiden, dass sie eine andere Funktion beeinträchtigt.
3
Verringere die Browserbreite und achte auf abgeschnittene Schaltflächen, überlaufende Aufgabennamen oder Bedienelemente, die zu dicht beieinanderliegen. Beschreibe das konkrete Bildschirmproblem, statt um eine vollständige Neugestaltung zu bitten. Teste nach der Layoutänderung die Aufgabenfunktionen erneut bei schmaler und breiter Ansicht; visuelle Änderungen können versehentlich die anklickbaren Bereiche beeinflussen.
Eine funktionierende Demo ist ein nützlicher Meilenstein, aber kein Beweis dafür, dass jeder Sonderfall gelöst ist. Behalte diese Grenzen im Blick, wenn du sie erweiterst.
Die Aufgabenlistenseite kann fertig aussehen, obwohl ein Kontrollkästchen, die Löschfunktion oder das Verhalten beim Neuladen nicht funktioniert.
Was du stattdessen tun solltest
Gehe nach jeder Änderung dieselbe Testliste mit vier Aktionen durch und halte genau fest, welche Aktion fehlschlägt.
Eine kleine lokale Übung kann nicht belegen, dass generierter Code für sensible Daten oder eine öffentliche Bereitstellung sicher ist.
Was du stattdessen tun solltest
Verwende fiktive Beispielaufgaben, gib keine Geheimnisse ein und lass Code und Sicherheit gesondert prüfen, bevor du echte Nutzerdaten verarbeitest.
Leere Eingaben, ungewöhnlich lange Texte und wiederholte Klicks können sich anders verhalten als im Idealfall.
Was du stattdessen tun solltest
Ergänze deine Testliste um jeweils einen Sonderfall und fordere für jeden Fehler eine gezielte Korrektur an.
Wenn Aufgaben auf einem Gerät nach dem Neuladen erhalten bleiben, bedeutet das nicht, dass sie auch in einem anderen Browser oder auf einem anderen Gerät erscheinen.
Was du stattdessen tun solltest
Entscheide, ob du wirklich geräteübergreifenden Zugriff brauchst, bevor du Funktionen zur Speicherung oder für Benutzerkonten anforderst.
Beginne mit dem Prompt für die Aufgabenliste und prüfe dann jede Aktion selbst. Dieses Tutorial zu Vibe Coding für Einsteiger ist am nützlichsten, wenn du bei jeder Folgeanfrage ein beobachtetes Problem und ein überprüfbares Ergebnis nennst.
Erstelle eine Aufgabenlistenseite mit einem Eingabefeld, einer Hinzufügen-Schaltfläche, Kontrollkästchen und einer Funktion zum Entfernen erledigter Aufgaben. Jede Funktion hat ein sichtbares Ergebnis. Dadurch lässt sich die Seite leichter testen als eine große, nur vage beschriebene App.
Du kannst damit anfangen, die Seite in Alltagssprache zu beschreiben und ihre Funktionen im Browser zu testen. Wenn du lernst, einfache Fehlermeldungen zu lesen und die Bestandteile einer Seite zu erkennen, kannst du gezieltere Korrekturen vornehmen.
Beschreibe die Seite, ihre wichtigsten Bedienelemente und was jedes davon tun soll. Nenne eine wichtige Anforderung, etwa dass Aufgaben nach dem Neuladen erhalten bleiben. Dekorative Details kannst du später ergänzen.
Beschreibe, was du getan hast, was passiert ist und was du stattdessen erwartet hast. Sage zum Beispiel, dass nach der Eingabe einer Aufgabe beim Klicken auf „Hinzufügen“ kein neuer Eintrag erscheint. Bitte dann darum, diese Funktion zu korrigieren, und teste sie erneut.
Für diese Übung ist es fertig, wenn du eine Aufgabe hinzufügen, als erledigt markieren und erledigte Aufgaben entfernen kannst und beim Neuladen keine Aufgaben unerwartet verloren gehen. Teste auch eine leere Eingabe und einen schmalen Bildschirm, bevor du die erste Version als fertig betrachtest.