Vibe Coding a Game
Um zu sehen, wie gut Vibe Coding derzeit funktioniert, haben wir heute ein kleines Computerspiel für den Browser erstellt.
Was ist Vibe Coding?
Beim Vibe Coding, einem Ansatz in der Softwareentwicklung, wird ein Programm (nahezu) vollständig mittels Prompts von einem „KI“-Assistenten generiert. Das heißt, man beschreibt dem Assistenten in natürlicher Sprache, was das Programm machen soll. Anschließend generiert der Assistent den Code oder nimmt Änderungen daran vor.
Was haben wir gemacht?
Konkret haben wir ein Browser-Spiel (HTML und Javascript) mit Visual Studio Code und GitHub Copilot nach den Vorgaben eines Grundschulkindes erstellt. Die Vorgaben von einem Kind machen zu lassen, sollte unser Experiment möglichst neutral gestalten. So wollten wir unbewusste Einflüsse auf das Experiment vermeiden (z. B. Annahmen darüber, welche Vorgaben für eine KI leicht oder schwer umsetzbar sind).
Zur Erstellung des Spiels haben wir zunächst eine grobe Beschreibung eingegeben und das generierte Spiel begutachtet. Anschließend haben wir in kleineren Iterationen Änderungen und Erweiterungen am Code vornehmen lassen. Auch diese Anpassungen wurden in natürlicher Sprache formuliert und enthielten keine Details, die sich auf den generierten Code bezogen. Formuliert wurde das „Was” und nicht das „Wie”. Während der Entwicklung haben wir uns den Code nicht angesehen. Allerdings haben wir das Ergebnis nach jedem Schritt ausprobiert.
Copilot war im „Agent-Mode” aktiv. Es wurde GPT 4.1 verwendet.
Hat es funktioniert?
Bei unserem Versuch hat dieser Ansatz relativ gut funktioniert. Allerdings sind wir an einigen Stellen in Sackgassen gelaufen. Das heißt, es wurde Code generiert, der nicht funktionierte oder bestehende Funktionalitäten unbrauchbar gemacht hat. In solchen Fällen haben wir nicht versucht, das Problem zu beheben. Stattdessen haben wir eine frühere, noch funktionierende Version unseres Spiels in die Entwicklungsumgebung eingespielt. Anschließend haben wir versucht, die gewünschte Änderung mit einem anderen Prompt zu erreichen. Dies hat in den meisten Fällen zu einem funktionierenden Ergebnis geführt.
Dennoch ist unser Spiel nicht fehlerfrei geworden. So wird es beispielsweise auf Bildschirmen mit niedriger Auflösung nicht vollständig angezeigt. Vermutlich könnte man dieses Problem mit weiteren Prompts beheben. Dies haben wir allerdings nicht weiter verfolgt.
Was hat beispielsweise nicht auf Anhieb funktioniert?
- Die Anweisung die Spielkarte auf mobilen Geräten im Vollbildmodus anzuzeigen, führte dazu, dass die mobile Steuerung nicht mehr funktionierte und die Karte auf Desktop-Bildschirmen unschön skaliert wurde: Teile der Karte wurden abgeschnitten. Wir haben diese Änderung rückgängig gemacht.
- Die Anweisung, einen Timer sowie eine Highscore-Liste einzubauen, die auf einem Server gespeichert wird, und gleichzeitig Cheaten zu verhindern, führte zu einer leicht umgehbaren Lösung, also einer Sicherheitslücke. Als wir dies verbessert haben wollten, wurde teilweise ungültiger Code generiert. Wir haben den Versuch an dieser Stelle abgebrochen.
Wie lange hat die Erstellung gedauert?
Wir haben etwa eineinhalb Stunden an dem Spiel gearbeitet.
Wo kann man sich das Spiel ansehen?
https://www.erras-it.de/baumrettung/index.html
Funktioniert dieser Ansatz auch bei großen Projekten?
Dieser Ansatz wird sich für größere Projekte nicht eignen. Einerseits ist der generierte Code nicht fehlerfrei. Andererseits wird ein LLM bei einem größeren Projekt Probleme haben, den Überblick zu behalten.
Auf welche Probleme sind wir gestößen?
- Der generierte Code ist nicht immer fehlerfrei. Das kann insbesondere bei Sicherheitslücken zu großen Problemen führen.
- Manchmal erhält man auch nach mehreren Prompts kein brauchbares Ergebnis. In diesem Fall kann das Entwickeln schnell frustrierend werden.
Was haben wir noch ausprobiert?
Neben dem Spiel haben wir einen Restful-Webservice basierend auf Spring Boot mit Claude Sonnet 4 generieren lassen. Es handelte sich um einen CRUD-Service mit pessimistic Offline-Lock und einigen Validierungen. Die Generierung hat in diesem einfachen Fall ebenfalls relativ gut funktioniert. Allerdings war der generierte Code auch hier nicht fehlerfrei. Es gab beispielsweise Probleme beim Locking.