Gemini-Workflow

So erstellst du mit Gemini per Vibe Coding Projekte, die du tatsächlich testen kannst

Beginne mit einer klar abgegrenzten Funktion, bitte Gemini um eine erste lauffähige Version und prüfe dann das Ergebnis. Betrachte jede Antwort als Entwurf: Führe den Code aus, melde den genauen Fehler und bitte jeweils nur um eine Änderung.

Prüfe generierten Code, bevor du ihn verwendest

Was dieses Szenario liefern muss (Tabelle)

Am Ende einer hilfreichen Coding-Sitzung mit Gemini steht etwas, das du ausführen und überprüfen kannst – nicht nur eine überzeugende Erklärung. Lege ein kleines Ziel fest, bevor du nach Code fragst.

Einsteiger

Du hast eine Idee für einen persönlichen Tracker, aber noch keine Projektstruktur. Bitte um eine einzelne Seite, die dafür benötigten Dateien und eine Anleitung zum lokalen Öffnen.

Du kannst einen Eintrag hinzufügen, die Seite neu laden und prüfen, ob die Daten erhalten bleiben. Wenn der erste Entwurf nicht funktioniert, füge die Fehlermeldung ein, statt um eine vollständige Neufassung zu bitten.

So funktioniert Vibe Coding mit Claude

Entwickler mit Editor

Du hast bereits ein Repository und möchtest ein Formular hinzufügen, ohne andere Dateien zu verändern. Gib Gemini die relevante Komponente und beschreibe die bestehenden Konventionen.

Du erhältst einen begrenzten Patch, den du anhand deines Projekts prüfen kannst. Vergleiche diesen chatbasierten Ansatz mit Vibe Coding mit Copilot, bei dem Vorschläge direkt im Editor erscheinen.

Vibe Coding mit Copilot

Wochenend-Prototypenbauer

Du brauchst eine kleine App-Demo, etwa eine Leseliste mit Suchfunktion. Lege die Datenfelder, den Leerzustand und das Verhalten nach dem Neuladen des Browsers fest.

Du hast einen testbaren Teil statt einer Wunschliste mit Funktionen. Ein Tutorial für Einsteiger kann dir helfen, die erste Anfrage so klein zu halten, dass du das Ergebnis überprüfen kannst.

Vibe Coding-Tutorial für Einsteiger

Jeder Eintrag

Erste Antwort von Gemini Ergebnis nach der Überprüfung
Umfang Kann eine weit gefasste Anfrage als mehrere Funktionen zugleich interpretieren. Benennt eine Aufgabe für Nutzer und legt fest, was nicht zur ersten Version gehört.
Dateien Zeigt möglicherweise Codeausschnitte, ohne anzugeben, wohin sie gehören. Listet alle erforderlichen Dateien auf und gibt an, wo jeder Codeabschnitt hingehört.
Abhängigkeiten Setzt möglicherweise voraus, dass ein Framework, Paket oder Tool bereits installiert ist. Nennt die benötigte Laufzeitumgebung und die erforderlichen Pakete oder verwendet Standardfunktionen des Browsers.
Verhalten Beschreibt, was die Benutzeroberfläche tun soll. Ermöglicht es dir, die genannte Aufgabe auszuführen und das Ergebnis zu sehen.
Datenverarbeitung Erweckt möglicherweise den Eindruck, dass eingegebene Informationen nach dem Neuladen erhalten bleiben. Macht ausdrücklich klar, ob Daten gespeichert bleiben, und sieht eine Prüfung durch Neuladen vor.
Fehlerbehandlung Berücksichtigt möglicherweise leere Eingaben und ungültige Werte nicht. Zeigt eine sinnvolle Reaktion auf leere, ungültige oder fehlende Daten.
Überprüfung Erklärt, warum der vorgeschlagene Code funktionieren sollte. Enthält Schritte, mit denen du überprüfen kannst, ob er tatsächlich funktioniert.

Häufige Nacharbeit

Die meiste Nacharbeit entsteht durch eine zu ungenaue Anfrage, eine nicht genannte Annahme über das Projekt oder Feedback, das nur „Es funktioniert nicht“ sagt. Diese Arbeitsabläufe machen die nächste Überarbeitung präziser.

  • Planen
  • Umsetzen
  • Debuggen
  • Beispieloberfläche zur Veranschaulichung eines kleinen, testbaren Prototyps
    Planen

    Aus einer groben Idee einen einzelnen Test machen

    Bitte Gemini nicht, eine komplette Produktivitäts-App zu erstellen. Beschreibe stattdessen eine einzelne Aufgabe: eine Gewohnheit hinzufügen und sie heute als erledigt markieren. Frage nach den Dateien, den Einrichtungsschritten und dem erwarteten Verhalten nach einem Neuladen.

    1. Beschreibe, wer die Funktion nutzt und was die Person damit tun muss.
    2. Lege die Eingabe, das sichtbare Ergebnis und das Verhalten nach einem Neuladen fest.
    3. Bitte Gemini, Annahmen zu benennen, bevor Code generiert wird.
    Eine klar umrissene Funktion entwerfen
  • Beispielansicht eines Prototyps zur Überprüfung des sichtbaren Verhaltens
    Umsetzen

    Den ersten lauffähigen Entwurf prüfen

    Lege die zurückgegebenen Dateien an den angegebenen Orten ab und befolge die Einrichtungsanweisungen genau. Teste den normalen Ablauf, eine leere Eingabe und ein Neuladen, bevor du um optische Verbesserungen bittest; ein gutes Aussehen kann fehlerhaftes Verhalten verdecken.

    1. Lies die Dateiliste und die Anweisungen zu den Abhängigkeiten.
    2. Starte das Projekt und führe die beschriebene Aufgabe aus.
    3. Halte das beobachtete Ergebnis getrennt vom erwarteten Ergebnis fest.
    Einen testbaren Entwurf erstellen
  • Beispielprojektansicht, die eine iterative Codeprüfung veranschaulicht
    Debuggen

    Behebe einen Fehler nach dem anderen

    Wenn ein Button nichts bewirkt, teile die relevante Datei, gegebenenfalls die genaue Fehlermeldung und die Schritte, mit denen sich der Fehler reproduzieren lässt. Bitte um die kleinstmögliche Korrektur und eine Erklärung der Änderung. Führe anschließend die fehlgeschlagene Prüfung erneut aus.

    1. Gib den Fehlertext und die Aktion an, die den Fehler ausgelöst hat.
    2. Bitte um eine minimale Korrektur statt um ein neues Projekt.
    3. Überprüfe die Korrektur und wiederhole die Prüfungen, die zuvor funktioniert haben.
    Meinen Prototyp überarbeiten

Beschreibe eine Nutzeraktion und das erwartete Ergebnis. Erstelle einen ersten Entwurf, teste ihn selbst und nutze deine Beobachtungen für den nächsten Prompt.

Beginne mit einer Funktion, die du überprüfen kannst

  • Halte die erste Anfrage eng gefasst
  • Teste das Verhalten, bevor du Details ausarbeitest
  • Prüfe jede Überarbeitung
Eine Funktion entwerfen

Szenario-FAQ

Gemini kann aus einer Beschreibung Code und Einrichtungsanweisungen entwerfen. Das Ergebnis hängt jedoch davon ab, wie klar du die Aufgabe und die Umgebung definierst. Führe den Code selbst aus: Auch bei einer Antwort, die vollständig aussieht, können Dateien fehlen, Abhängigkeiten inkompatibel sein oder das Verhalten von deiner Anfrage abweichen.

Nenne eine Aufgabe für Nutzer, die dafür benötigten Eingaben und das erwartete Ergebnis. Gib deine bevorzugte Programmiersprache oder dein bevorzugtes Framework an, falls du eines hast, und bitte um eine Dateiliste und Anweisungen zum Ausführen. So lässt sich das Ergebnis leichter überprüfen.

Kopiere die genaue Fehlermeldung, nenne den Befehl oder die Aktion, die sie ausgelöst hat, und stelle die relevante Datei bereit. Bitte um die kleinstmögliche Korrektur. Wiederhole anschließend sowohl die fehlgeschlagene Aktion als auch alle Prüfungen, die zuvor funktioniert haben.

Nein. Entferne Passwörter, Tokens, personenbezogene Daten und vertrauliche Quellmaterialien, bevor du Projektkontext teilst. Ein kleines, bereinigtes Beispiel und die relevante Fehlermeldung sind meist hilfreicher als ein ganzes privates Repository.

Prüfe die Hauptaufgabe, ungültige Eingaben, das Verhalten nach dem Neuladen und die Einrichtungsschritte bei einem sauberen Durchlauf. Prüfe den generierten Code auf unerwartete Abhängigkeiten oder unerwarteten Umgang mit Daten und benenne beim Teilen des Prototyps ehrlich, was noch nicht fertig ist.

Jetzt erstellen
Jetzt erstellen