Ein praktischer Einstieg
Sie müssen weder eine perfekte Spezifikation schreiben noch jeden Programmierbegriff kennen. Beschreiben Sie eine kleine Aufgabe, prüfen Sie, was die KI erstellt, und bitten Sie dann um eine konkrete Änderung. Vibe Code hilft Ihnen, den ersten Entwurf als etwas zu betrachten, das Sie testen sollten – nicht als etwas, dem Sie ungeprüft vertrauen können.
Für Neulinge ist es oft am schwierigsten zu entscheiden, wonach sie fragen sollen und woran sie erkennen, ob das Ergebnis funktioniert.
Sie haben eine Idee, kennen aber noch keine Begriffe für Komponenten, Datenbanken oder Deployment. Wenn Sie auf einmal nach einer ganzen App fragen, lässt sich schwer erkennen, was schiefgelaufen ist.
Beginnen Sie mit einer Ansicht und einer Aktion, die Sie selbst ausprobieren können. Das Vibe Coding-Tutorial für Anfänger führt Sie Schritt für Schritt durch einen ersten Versuch.
Sie wechseln immer wieder das Projekt, bevor ein funktionsfähiger Entwurf fertig ist. Wählen Sie eine Aufgabe mit einer klaren Eingabe und einem Ergebnis, das Sie auf der Seite sehen können.
Eine kurze Liste mit Vibe Coding-Ideen für Anfänger kann Ihnen helfen, ein Projekt auszuwählen, das klein genug ist, um es fertigzustellen und anschließend zu überarbeiten.
Sie möchten eine App erstellen, packen aber Navigation, Benutzerkonten, Benachrichtigungen und Datenspeicherung in einen einzigen ersten Prompt. Jede zusätzliche Funktion bringt etwas mit sich, das Sie überprüfen müssen.
Beginnen Sie mit einer einzigen lokalen Interaktion. Wenn diese funktioniert, erfahren Sie unter „So erstellen Sie eine App mit Vibe Coding“, welche Entscheidungen beim weiteren Aufbau anstehen.
Wählen Sie den Arbeitsablauf, dessen Ergebnis Sie am leichtesten überprüfen können. Erstellen Sie jeweils einen ersten Entwurf, testen Sie eine tatsächliche Aktion und bitten Sie nur um die nächste notwendige Änderung.
Bitte um eine Seite mit einem Feld für den Titel, einer Schaltfläche „Hinzufügen“ und einer Möglichkeit, ein Buch als gelesen zu markieren. Gib zwei Bücher ein und prüfe, ob Hinzufügen, Markieren und Filtern wie gewünscht funktionieren. Wenn eine Schaltfläche nichts bewirkt, beschreibe genau, welche Schaltfläche es ist und welches Ergebnis du erwartet hast, statt die KI zu bitten, alles neu zu machen.
Bitte um eine Seite mit dem Namen der Veranstaltung, Datum, Ort und einem kurzen Programm. Ersetze beim Testen Platzhalter durch erfundene Beispieldaten. Sieh dir die Seite sowohl auf einem schmalen als auch auf einem breiten Bildschirm an und prüfe, ob Datum und Ort leicht zu finden sind.
Lege Rechnungsbetrag, Trinkgeldprozentsatz und angezeigten Gesamtbetrag fest. Teste einen üblichen Betrag, null und eine leere Eingabe. Wenn der Gesamtbetrag falsch aussieht, nenne die eingegebenen Zahlen und den erwarteten Gesamtbetrag. So gibst du der KI einen konkreten Fall, den sie korrigieren kann.
Ein brauchbarer Entwurf hat einen klar erkennbaren Zweck und Funktionen, die du testen kannst. Vergleiche die beiden visuellen Vorlagen und beurteile dein eigenes Ergebnis danach, was es kann – nicht danach, wie ausgefeilt es aussieht.
Dies sind separate visuelle Referenzen, keine nachweislich aufeinanderfolgenden Vorher-nachher-Bilder aus einem einzigen Prompt. Bei einem Entwurf für eine Leseliste wäre eine sinnvolle Verbesserung ein Hinzufügen-Button, der tatsächlich einen Titel hinzufügt, gefolgt von einem Filter für abgeschlossene Bücher, der die richtigen Bücher anzeigt. Testen Sie diese Funktionen direkt; ein Screenshot kann nicht beweisen, dass sie funktionieren.
Erste visuelle ReferenzZweite visuelle ReferenzVerwenden Sie in Ihren ersten Prompts erfundene Namen und Beispieldaten. Fügen Sie keine Passwörter, vertraulichen Unterlagen oder personenbezogenen Daten anderer Personen in eine Projektbeschreibung ein. Prüfen Sie generierte Texte auf Richtigkeit, kontrollieren Sie, wohin Formulareinträge gesendet werden, und geben Sie eine ungetestete Seite nicht als fertigen Dienst aus. Wenn ein Projekt echte Informationen erfassen oder wichtige Entscheidungen treffen soll, lassen Sie es vor der Veröffentlichung angemessen prüfen. Fangen Sie so klein an, dass Sie jede Aktion auf der Seite erklären und überprüfen können.
Jeder, der ein Ziel beschreiben und ein Ergebnis testen kann, kann es ausprobieren; für ein kleines erstes Projekt sind keine Programmierkenntnisse erforderlich. Erfahrung hilft allerdings, wenn etwas nicht funktioniert oder sensible Daten im Spiel sind. Halten Sie die erste Aufgabe daher einfach und bitten Sie um Hilfe, wenn Sie eine Korrektur nicht überprüfen können.
Wählen Sie eine Seite oder ein Tool mit einer einzigen klaren Aktion, zum Beispiel dem Hinzufügen eines Eintrags zu einer Liste. Sie sollten sagen können, was Sie eingegeben und angeklickt haben und was danach passieren sollte. Heben Sie sich größere Funktionen auf, bis diese grundlegende Aktion funktioniert.
Sie können zunächst das sichtbare Verhalten prüfen, ohne jede Zeile zu verstehen. Bevor Sie sich auf das Ergebnis verlassen oder es veröffentlichen, brauchen Sie jedoch eine Möglichkeit, sein Verhalten, den Umgang mit Daten und mögliche Fehler zu überprüfen. Bitten Sie um eine Erklärung unbekannter Teile in einfachen Worten, statt anzunehmen, dass sie korrekt sind.
Notieren Sie zwei oder drei Aktionen, die es ausführen muss, und testen Sie jede davon mit realistischen Beispieldaten. Prüfen Sie auch eine leere oder ungewöhnliche Eingabe. Ein Entwurf, der ansprechend aussieht, diese Tests aber nicht besteht, muss noch verbessert werden.
Beschreiben Sie anhand eines konkreten Beispiels den Unterschied zwischen dem, was angezeigt wurde, und dem, was Sie wollten. Fordern Sie jeweils nur eine Änderung an und wiederholen Sie dann denselben Test. So lässt sich leichter feststellen, ob die Überarbeitung geholfen hat.