Wie ich dieses Portfolio mit Vibe Coding gebaut habe
Vier Tage hatte ich in mein Figma-Design gesteckt: Struktur, Wireframe, ein funktionierender Framer-Prototyp. Und dann habe ich es spontan halbwegs über Bord geworfen und etwas völlig anderes ausprobiert. Diese Portfolio-Website ist das Ergebnis.
Ich kann nicht programmieren. Das muss ich gleich am Anfang sagen, damit klar ist, woher ich komme. Mein Hintergrund ist Mediengestaltung Digital & Print, und in den letzten Monaten UX und Product Design im Bootcamp. HTML, CSS, JavaScript, das kenne ich alles von meiner Ausbildung, zumindest war mein Abschlussprojekt eine Website, wo ich diese drei Sprachen verwendet habe. Ich würde also sagen, dass ich mir der Grundstruktur auf jeden Fall bewusst bin... aber mehr auch nicht.
Trotzdem siehst du hier nun eine fertige Website. Wie das kam, erzähle ich hier ehrlich, inklusive der Stellen, an denen ich kurz davor war, es wieder zu lassen.
Der eigentliche Plan
Mein Weg war eigentlich vorgezeichnet und sauber: Erst die Informationsarchitektur, also welche Informationen ich wirklich zeigen möchte, welche wichtig sind und was ein Portfolio rausstechen lässt. Ich wusste natürlich die Antwort darauf: Persönlichkeit zeigen. Nur wie zeige ich meine? Als ich mir dessen bewusst war, habe ich angefangen die Low-Fidelity-Wireframes in Figma zu bauen, anschließend die Systeme (sprich Farb-, Typo- und Component-Systeme) zu definieren. Als das stand, bin ich zu Framer umgezogen und habe dort die Website gebaut, responsiv auf drei Devices ausgelegt. Nach vier Tagen hatte ich eine funktionierende, nutzbare Seite, alles in den Tools, mit denen ich mich auskenne.
Es hätte hier aufhören können. Tat es aber nicht. Ich hatte einen Fehler gemacht: Ich war mir so sicher, den richtigen Weg gewählt zu haben, doch leider war dem nicht so. Denn ich hatte mich vorher gar nicht damit auseinandergesetzt, dass ich auch einen kleinen Blog führen möchte. Zudem ist Framer für den gebotenen Umfang teurer geworden als erwartet: eine eigene Domain geht nur mit Monatsabo. Das war nicht das Ziel, also bin ich nochmal einen Schritt zurückgetreten und habe überlegt, was nun das Sinnvollste wäre.
Die spontane Entscheidung
In meinem Bootcamp gab es eine Person, die ich sehr interessant fand und der ich dann auf LinkedIn geschrieben habe. Wir sprachen über unsere Portfolios, und er erzählte mir, dass er Vibe Coding ganz interessant fand und damit versucht, seine Website zu bauen. Mein erster Gedanke war ehrlich gesagt: Langweilig. Die Person steckt selbst keine Arbeit rein und lässt einfach eine KI werkeln. Dass ich es selbst ausprobieren würde, hätte ich nicht gedacht. Aber nach einer Woche Stillstand fragte ich mich: Was, wenn ich das einfach mal ausprobiere? Was, wenn ich meine fertige Figma-Idee einfach beschreibe und schaue, was passiert? Nur aus Neugier, mein Framer-Prototyp lag ja sicher daneben.
Mein Vorteil war nicht, dass ich coden kann. Mein Vorteil war, dass ich genau wusste, wie das Ergebnis aussehen und sich anfühlen soll.
Und genau das war der Punkt, an dem mir mein Designhintergrund mehr geholfen hat als jede Programmierkenntnis. Ich konnte nicht den Code beurteilen, aber ich konnte sofort sagen: „Der Abstand ist zu groß", „das Grün sticht zu sehr raus", „auf dem Handy bricht das um". Ich habe nicht programmiert. Ich habe Design-Entscheidungen getroffen und sie so präzise wie möglich beschrieben. Mir wurde wirklich Arbeit abgenommen, weil ich mich auf das fokussieren konnte, was mir am Herzen liegt: das Gefühl, das die Website rüberbringt. Ich habe gemerkt, dass ich so viel mehr Zeit und Energie in die kleinsten Details legen konnte, auf jeden noch so kleinen Pixel. Das hat mich ehrlich sehr begeistert.
Was ich dabei gelernt habe
Ein paar Dinge nehme ich aus dem Prozess mit, die weit über diese eine Website hinausgehen:
- Klarheit schlägt Code. Je genauer ich beschreiben konnte, was ich wollte, desto besser das Ergebnis. Vage Wünsche führten zu vagem Output.
- Mein Auge war das Werkzeug. Das Gespür für Hierarchie, Abstände und Konsistenz aus der Mediengestaltung war wichtiger als technisches Wissen.
- Iterieren ist alles. Es war nie beim ersten Versuch richtig. Es war ein ständiges Hin und Her aus Ausprobieren, Anschauen, Korrigieren. Genau wie Design eben ist.
Würde ich es wieder so machen?
Ja. Nicht, weil Vibe Coding klassisches Lernen ersetzt, das tut es nicht, und ich verstehe den Code, der dabei entsteht, noch lange nicht vollständig. Sondern weil es mir gezeigt hat, dass ich Ideen umsetzen kann, auch wenn mir ein Werkzeug fehlt. Ich musste nur lernen, mein Werkzeug anders einzusetzen.
Diese ganze Seite ist letztlich genau das: ein Experiment, das gehalten hat. Und wenn du bis hierhin gelesen hast, danke. Schön, dass du hier bist. :)
