Vibe Coding mit Cursor

Für einen Kurs wollte ich ausprobieren, wie gut das Erstellen von Code mit LLMs inzwischen funktioniert. Als Beispielprojekt habe ich mir eine einfache Liste ausgesucht, deren Einträge man ändern und die Reihenfolge per Drag and Drop sortieren kann.

Das soll dazu gut sein, mit einer Gruppe am Beamer Punkte in die richtige Reihenfolge zu bringen, um zum Beispiel die einzelnen Schritte beim Debuggen von Robotern sinnvoll zu ordnen, oder über Lieblingseissorten abzustimmen.

Hier ist das fertige Listentool:

Ich habe so etwas vor Jahren mal mit HTML, CSS und Javascript selber gebastelt, dass hat damals ungefähr zwei Stunden gedauert und war ehrlich gesagt nicht so schön.

Diesmal brauchte ich inklusive Ausprobieren verschiedener Tools und etwas Rumprobieren etwa eine halbe Stunde, und das Ergebnis ist viel ansehnlicher geworden.

Zunächst habe ich mein Prompt einfach bei DuckDuckGo in den Chat von Claude geschrieben:

Erstelle den Code für eine single page website mit html, css und JS. Die Seite soll eine ungeordnete Liste enthalten, groß genug, um sie auf einem Beamer zu präsentieren. Es sollen drei Einträge vorgegeben sein: "Editieren", "Ordnen", "Ergänzen". Der Nutzer soll in der Lage sein, die Einträge zu editieren, per drag and drop zu ordnen, und weitere Einträge hinzuzufügen.

Das Ergebnis war schon ganz ok, allerdings funktionierten einige Dinge nicht so, wie sie sollten, und optisch war auch noch Luft nach oben. Also habe ich ein paar Folgeprompts versucht:

Die Einträge sind nicht editierbar. Ich möchte, dass der Nutzer die Einträge ändern kann

Die Liste soll größer sein und den Bildschirm besser ausfüllen. Ausserdem soll das Farbschema freundlicher sein.

Die Überschrift "editierbare Liste" soll auch editierbar sein

Leider ist der dadurch erzeugte Code schnell zu lang für die Umsonstversion der LLM geworden, und wurde am Ende abgeschnitten. Also habe ich mir nur Snippets generieren lassen, die ich dann mühsam an der richtigen Stelle im Code einsetzen muss. Dabei hat häufig mal eine neue Version die Funktionalität der vorherigen kaputt gemacht, so dass ich doch wieder selber suchen und debuggen musste 😕

Das Problem gibt es zumindest nicht, wenn man einen Editor verwendet, der für so etwas vorgesehen ist, zum Beispiel Cursor.

Der erzeugt den Code, fügt Verbesserungen direkt an der richtigen Stelle ein, verwaltet Reverts und erzeugt direkt die nötigen Dateien, also zum Beispiel auch getrennte CSS- und Javascript-Dateien.

Damit ging das wirklich schnell und leicht. Ich musste die selben Folgeprompts eingeben, aber die Änderungen waren ratzfatz eingebaut.

Die Nachteile sind auch klar: Man muss sich anmelden, viele Features sind erst mal frei und später kostenpflichtig, und der Editor „lernt“ in der Grundeinstellung vom eingegeben Code, was ich nicht wollen würde, wenn ich was ernsthaftes programmieren würde.

Ich glaube auch, dass das ganze nur so lange gut funktioniert, wie man nicht zu ausgefallene Sachen ausprobiert. Schließlich tut so eine LLM ja nicht sehr viel mehr, als bestehende Codeschnipsel aus dem Internet zusammen zu kleben. Aber das ist ja manchmal auch schon was.