Warum Vibe Coding?

Vibe Coding bedeutet nicht, einfach auf ein AI-Tool zu setzen und das Beste zu hoffen. Es bedeutet, einen Workflow zu entwickeln, bei dem Design, Intuition, Kontextverständnis und präzise Codegenerierung ineinandergreifen. Der Name steht für ein Coding-Gefühl – ein Flow zwischen Mensch und Maschine, zwischen Idee und Umsetzung.

1. Von der Illusion zum System: Was nicht funktioniert hat

Meine Annahme war simpel: Warum Figma-Screens bauen, wenn ich mit einem Prompt direkt funktionierenden Code generieren kann?

Spoiler: Das funktioniert (noch) nicht.

Tools wie Lovable, V0, oder Bolt sind beeindruckend schnell – aber nur, wenn man sie richtig „füttert“.

Die Realität: Ohne klare Anforderungen, saubere HTML-Strukturen und konsistente Designrichtlinien halluziniert das LLM und produziert Code, der sich nicht wiederverwenden lässt.

2. Der entscheidende Hebel: Kontext

Der wichtigste Hebel war nicht das Tool – sondern der Kontext:

• Klare PRDs (Product Requirement Documents)

• Entwicklungsrichtlinien und Namenskonventionen

• Klar definierte Komponenten (Box Model statt Monolith)
  
  

Ich habe gelernt, dass AI nicht „mein Design versteht“, wenn ich es nicht konkret und strukturiert aufbereite. Ein Figma-Layer namens „Rectangle 27“ hilft niemandem – weder Menschen noch Maschinen.

3. Babysteps statt Big Bang

Ich startete mit Prompts wie: „Bau mir diesen Screen“. Das Ergebnis? Unbrauchbar.

Stattdessen: Ein Task nach dem anderen. Eine Komponente nach der anderen.

Dieser modularisierte Ansatz – inspiriert vom klassischen Box Model – brachte endlich solide Resultate. Besonders, wenn ich schon in Figma klare Strukturen angelegt hatte.

4. Design System? Ja – aber im Code

Ich habe begonnen, ein Designsystem direkt im Code zu entwickeln. Ausgangspunkt waren Buttons, Inputs, Badges und so weiter. Ziel war eine Art Figma-Gefühl im Code – mit einer eigenen „Playground“-Umgebung, in der ich alle Komponenten isoliert testen konnte.

Funfact: Storybook + Angular? Keine gute Kombination. Der Playground war schneller, schlanker, pragmatischer und einfach 10x geiler.

5. Fehlerkultur: Trust, but verify

Einer meiner schmerzhaftesten Fehler: Ich habe dem IDE vertraut. Ich dachte, mein Code sei gespeichert.

Er war es nicht.

Daher heute meine goldene Regel: Neuer Git-Branch für jede Änderung, push sofort. Kein Fortschritt ist sicher, bis er versioniert ist.

6. AI trifft auf Figma: Der MCP Server verändert alles

Der Figma MCP Server (Model Context Protocol) ermöglicht es, direkt aus Figma-Designs Kontext an das LLM und Cursor IDE zu übermitteln.

Was früher manuelle Beschreibungen erforderte, wird jetzt automatisiert: Badge-Komponenten, Spacing, Farben – alles kann von der AI erkannt und in Code übersetzt werden. Es ist nicht perfekt – aber es ist der erste echte Schritt Richtung echtem Design-to-Code.

7. Fazit: Was ich gelernt habe

Nach sechs Monaten „Vibe Coding“ ziehe ich folgende Learnings:

• Kontext ist alles – klare Anforderungen, Regeln, Standards

• Kleine Schritte schlagen große Visionen – isoliert denken, bauen, testen

• Fundamente zählen – HTML-Struktur ist nicht optional

• Designsysteme helfen auch im Code – Konsistenz > Geschwindigkeit

• Git ist dein Freund – nie lokal vertrauen

• MCP verändert das Spiel – Design wird maschinenlesbar

Ich sehe eine Zukunft, in der Designer:innen und Entwickler:innen nicht mehr nebeneinander arbeiten – sondern gemeinsam mit einem AI-Co-Piloten iterieren. Vibe Coding ist ein Zwischenschritt dorthin. Kein Ersatz für Handwerk. Aber ein Verstärker für jede gute Idee.