Alles begann, als mein Vorgesetzter eher beiläufig erwähnte, dass unser Team jemanden brauchte, der "mal eben ein schnelles Dashboard zusammenstellt". Plötzlich wurde ich als regulärer Entwickler – dessen HTML-Erfahrung hauptsächlich aus dem Kopieren und Einfügen von Stack Overflow-Lösungen bestand – in die Welt der Frontend-Entwicklung katapultiert.

Die KI-gestützte Reise ins Frontend

Dazu habe ich mir mit KI-Tools zur Unterstützung geholt. Freihändiges Programmieren? Ja, bitte. Ich habe Aider verwendet, einen Open-Source-Pair-Programming-Assistenten für das Terminal, zusammen mit Cursor für die Feinabstimmung.

Aider ermöglicht es, Code auch per Sprachbefehlen zu bearbeiten und übernimmt sogar Datei- und Verzeichnisänderungen. Das bedeutet, dass ich mich zurücklehnen, entspannen und buchstäblich durch Sprechen programmieren konnte. Es integriert sich zudem gut mit Git und vielem mehr. Cursor dagegen bietet KI-gestützte Code-Vorschläge. Dies half mir meine doch etwas “unordentliche“ Frontend-Logik zu bereinigen, meine Layouts zu verbessern und grundlegende Dokumentationen hinzuzufügen. In Kombination haben diese Tools den gesamten Prozess weit weniger einschüchternd gemacht.

Von vage zu präzise

Anfangs waren meine KI-Anfragen... nun ja, etwas chaotisch, und sahen etwa so aus:

Ich: "Mach den Button hübscher."

KI: "Möchten Sie den Border-Radius anpassen, einen Hover-Effekt hinzufügen oder das Farbschema ändern?"

Ich: "Ja. Alles davon. Ich will alles."

Oder wenn ich wirklich keine Ahnung hatte:

"Bitte erstelle einen Button, der nicht aussieht, als wäre er 1997 entworfen worden."

Aber als ich den Dreh raushatte, wurden meine Anfragen viel strukturierter, was zu deutlich besseren Ergebnissen führte.

"Erstelle einen Hero-Bereich mit einem Farbverlauf-Hintergrund, der von Blau zu Lila übergeht, mit zentriertem Text und einem Call-to-Action-Button darunter."

Was ich gelernt habe

• KI-Tools sind absolute Lebensretter – Mit Aider und Cursor konnte ich schnell iterieren, ohne mich in Syntaxkämpfen zu verlieren. Aiders Fähigkeit, mehrere Dateien gleichzeitig zu ändern und Änderungen nachzuverfolgen, machte das Debuggen viel reibungsloser, während Cursor half, meinen Code strukturiert und lesbar zu halten.
• Bessere Eingaben = bessere Ergebnisse – Je spezifischer ich war, desto besser wurde die Ausgabe der KI. Anstatt vager Stiländerungen begann ich, Layout-Strukturen, Barrierefreiheitsaspekte und Anforderungen an die Responsivität zu spezifizieren, was zu viel besseren Ergebnissen führte.

Gegen Ende der Woche hatte ich ein funktionierendes (und nicht allzu hässliches) Dashboard. Bin ich ein Frontend-Entwickler geworden? Nein. Aber für eine Woche sah ich zumindest wie einer aus.

Würde ich es wieder tun? Vielleicht... solange ich sogar von der Couch aus die KI die meiste Arbeit erledigen lassen kann.

Als Nächstes würde ich mich darauf konzentrieren, das DEVIN-KI-Tool einzubinden, das alle meine Agenten zusammenführt und meinen freihändigen Ansatz besser orchestrieren kann.

An alle Frontend-Entwickler: Es tut mir leid

An alle Frontend-Entwickler da draußen – mein tiefster Respekt. Falls ich jemals den Eindruck erweckt habe, dass Frontend einfach ist, nehme ich das hiermit zurück.

Ich habe kaum an der Oberfläche dessen gekratzt, was ihr tut. Meine KI-gestützten Abkürzungen funktionierten nur, weil Leute wie ihr jahrelang die echten Probleme gelöst haben.

‍

‍