VibeBuddy
Vibe Coding für Einsteiger

Beschreibe, was du willst. Lerne, was dabei entsteht.

Beim Vibe Coding schreibt eine KI den Code nach deiner Beschreibung. Damit du dabei wirklich etwas lernst und nicht nur Code einsammelst, gehst du hier in festen Schritten vor: planen, beschreiben, testen, verbessern, verstehen.

Bereit zum Ausprobieren?

Im VibeBuddy beschreibst du dein Projekt in Feldern, die Eule gibt dir Tipps, Qwen baut es, und ein Browser prüft das Ergebnis.

VibeBuddy öffnen

In 6 Schritten zum eigenen Projekt

Idee eingrenzen

Wähle ein kleines Projekt, das du in einem Satz erklären kannst: „Ein Quiz zu Vokabeln“ statt „ein Lernportal“.

Faustregel: Ein Bildschirm, eine Hauptfunktion, höchstens drei Extras.

Strukturiert beschreiben

Ein guter Prompt hat vier Teile: Ziel, Aussehen, Regeln und Fertig-wenn. Der Baukasten unten hilft dir dabei.

Je konkreter („blaue Buttons, große Schrift“), desto weniger Rätselraten für die KI.

Generieren lassen

Schicke den Prompt ab und speichere das Ergebnis als .html-Datei. Öffne sie im Browser.

Für den Anfang reicht eine einzige Datei mit HTML, CSS und JavaScript.

Ausprobieren und prüfen

Klicke alles durch. Was funktioniert, was nicht? Schreibe die Fehler in eigenen Worten auf, bevor du die KI fragst.

Mit F12 siehst du Fehlermeldungen in der Konsole. Kopiere sie in deinen nächsten Prompt.

In kleinen Schritten verbessern

Ändere immer nur eine Sache pro Anfrage: „Mache den Sprung höher“ statt „Verbessere das Spiel“.

Funktioniert eine Version, speichere sie als Kopie. So kannst du jederzeit zurück.

Verstehen und erklären

Lass dir einen Teil des Codes Zeile für Zeile erklären und ändere dort selbst einen Wert. Erkläre dann in zwei Sätzen, was passiert.

Wenn du es erklären kannst, hast du es gelernt. Wenn nicht, frage nach.

Prompt-Baukasten


          

Checkliste vor dem Absenden

Modellvergleich: Welche KI eignet sich?

Drei Modelle der RWTH Aachen haben dieselben drei Aufgaben mit exakt demselben Prompt bekommen. Unten siehst du die Ergebnisse zum Ausprobieren, die Messwerte und eine Einschätzung.

Lade Ergebnisse ...

Agenten, die sich selbst prüfen und verbessern

Aufgabe: Ein 3D-Endless-Runner mit richtig guter Grafik. Mehrere Agenten arbeiten in einer Schleife: Einer baut, ein automatischer Tester spielt das Spiel in einem echten Browser, eine KI mit Bildeingabe beurteilt die Screenshots, und eine zweite liest den Code. Aus allem zusammen schreibt der Baumeister eine bessere Version. Schlechtere Versionen werden verworfen.

Lade Ergebnisse ...