Mit ChatGPT oder Gemini programmieren: Vibe-Coding-Anleitung für Anfänger

Vibe Coding heißt, in einfachen Worten zu beschreiben, was du willst, und ChatGPT oder Gemini den Code schreiben zu lassen. Als Anfänger bittest du am besten um ganze Dateien, immer nur einen kleinen Schritt und speicherst jede funktionierende Version. Die kostenlose Erweiterung AI Code Harvester listet alle Dateien aus dem Chat auf und lädt sie mit einem Klick herunter, sodass du nicht nach Code scrollen musst. Sie läuft im Browser und braucht kein Konto.

Was Vibe Coding ist und wo Anfänger hängen bleiben

Beim Vibe Coding schreibst du den Code nicht selbst. Du sagst der KI, was sie bauen soll (eine Seite für meine Bäckerei), sie schreibt die Dateien, du testest sie und sagst, was sich ändern soll. Das ist ein echter Einstieg, weil du in Minuten Ergebnisse siehst. Das Problem kommt nach einer Stunde. Der Chat ist sehr lang, der Code verteilt sich auf viele Antworten, und du scrollst hoch und runter, um die letzte Version jeder Datei zu finden. Du kopierst, fügst ein, verlierst den Überblick und machst etwas kaputt, das funktioniert hat. Die Gewohnheiten unten lösen das meiste davon.

Sieben Gewohnheiten, die das Programmieren mit KI leichter machen

1. Beginne mit einem klaren Satz. Sag, was du baust, für wen und wie es aussehen soll. Eine einseitige Website für einen Hundesitter, mit Foto, Preisen und Kontaktformular. Ein klares Ziel schlägt einen langen Prompt.
2. Bitte jedes Mal um die komplette Datei. Schreib: Zeig immer die vollständige Datei, nicht nur die geänderten Zeilen. Teilstücke sind der häufigste Grund, warum Anfänger Code an die falsche Stelle einfügen.
3. Lass die KI jede Datei benennen. Bitte sie, über jedem Codeblock Dateiname und Endung zu schreiben, etwa index.html oder style.css. Speichere das als feste Regel: In ChatGPT unter Settings → Personalization → Custom Instructions.
4. Ändere immer nur eine Sache. Eine Bitte, dann testen. Wenn du zehn Änderungen auf einmal verlangst und etwas bricht, weißt du nicht, welche schuld war.
5. Kopiere die Fehlermeldung zurück in den Chat. Ist die Seite leer oder tut ein Button nichts, füge den genauen Fehlertext ein und schreib behebe das. Du musst ihn noch nicht verstehen.
6. Speichere vor jeder größeren Änderung eine funktionierende Version. Lade die Dateien herunter, leg sie in einen Ordner und behalte diese Kopie. Wenn die nächste Antwort alles zerstört, bist du in einer Minute zurück.
7. Frag nach dem Warum, in einfachen Worten. Sag erkläre, was dieser Teil macht, als wäre ich neu. Ein kurzer Grundlagenkurs neben dem Chatten hilft sehr, weil du dann merkst, wenn die KI falsch liegt.

Der Helfer gegen das Scrollen: AI Code Harvester

• Eine Dateiliste statt eines langen Chats. Das Panel zeigt jeden Codeblock der letzten Antwort als Zeile mit Dateiname und farbigem Punkt für den Typ.
• Kopieren oder springen. Jede Zeile hat einen Copy-Button und einen Pfeil-Button, der den Chat zu diesem Block scrollt.
• Wähle, was gespeichert wird. Setze oder entferne bei jeder Datei den Haken bei Include in download.
• Ein Klick für alles. Download all as ZIP speichert die ganze Antwort als ZIP. Lieber einzelne Dateien? Wechsle auf 1-by-1.
• Praktische Extras. Ein Jump to Bottom-Button, ein Transparenzregler, damit das Panel den Chat nicht verdeckt, und ein Button, der die Einrichtung erklärt.
• Es bleibt, wo du es hinlegst. Ziehen, Größe ändern oder minimieren, und es kann sich die Position merken.

Auch das Aussehen lässt sich ändern. In den Einstellungen wählst du eine von vier Akzentfarben: Lila, Blau, Grün oder Bernstein, und legst fest, wohin die Dateien kommen: in einen Ordner AI_Code_Harvester in Downloads, direkt in Downloads oder jedes Mal nachfragen. Die Einrichtung dauert eine Minute: im Chrome Web Store hinzufügen und ChatGPT oder Gemini öffnen.

Warum am ersten Tag installieren

Am Anfang machst du viele kleine Versuche, und jeder erzeugt Dateien. Ohne Helfer ist jeder Handarbeit: scrollen, markieren, kopieren, in eine Datei einfügen, benennen. Mit dem Harvester ist es ein Klick, und die Dateien haben schon die richtigen Namen, sodass dein Projektordner vom ersten Tag an aufgeräumt bleibt. Das macht Gewohnheit sechs (eine funktionierende Version speichern) fast kostenlos und ist der Grund, warum die Erweiterung am Anfang am nützlichsten ist. Sie ist kostenlos, funktioniert nur auf chatgpt.com und gemini.google.com, und deine Chats bleiben auf deinem Rechner. Mehr auf der AI-Code-Harvester-Seite.

Ehrliche Grenzen

• Sie sammelt nur Codeblöcke. Gibt die KI nur ein PDF, ein Bild oder einen Dateilink aus, gibt es auf dem Bildschirm nichts zu speichern.
• Sie legt keine Ordner an. Das ZIP ist flach, die Dateien sortierst du selbst in Ordner.
• Sie schreibt und repariert keinen Code. Das bleibt Aufgabe der KI, und das Testen bleibt deine.
• Canvas-Ansichten (das Seitenfenster mancher Chats) werden eventuell nicht gefunden. Bitte die KI, den Code in den Chat zu schreiben.

Das Speichern als ZIP kennst du schon? Die Schritt-für-Schritt-Anleitung steht in unserem Leitfaden zum Herunterladen von KI-Code als ZIP.

Gut zu wissen, bevor du loslegst

FAQ