Was zur Hölle ist “Vibe Coding”?

Andrej Karpathy (Ex-OpenAI, Ex-Tesla AI Chef) hat es treffend formuliert: “I just vibe, I don’t really code anymore.”

Beim Vibe Coding geht es nicht mehr darum, jede Klammer und jedes Semikolon selbst zu setzen. Es geht darum, der KI zu erklären, was du willst (den “Vibe”), den Output zu prüfen, und schnell zu iterieren. Du bist nicht mehr der Maurer, du bist der Architekt.

Und das beste Tool dafür aktuell? Google AI Studio mit dem brandneuen Gemini 3 Pro.

Warum?

1 Million Token Context: Du kannst ganze Libraries in den Kontext werfen.
Speed: Gemini 3 ist verdammt schnell.
Kostenlos: AI Studio ist (noch) komplett free to use.

Hier ist mein Schritt-für-Schritt Tutorial, wie du deine erste App “vibe-codest”.

Schritt 1: Das Setup (Dauer: 2 Minuten)

Geh auf aistudio.google.com und logge dich mit deinem Google Account ein.

Das Interface ist sehr clean:

Modell wählen: Oben rechts sollte “Gemini 3.0 Pro” stehen. Wenn nicht, wähle es aus.
System Instructions (Optional): Hier kannst du dem Model eine Rolle geben. Für Vibe Coding empfehle ich:

“Du bist ein Senior Frontend Developer. Du schreibst sauberen, modernen React-Code mit Tailwind CSS. Du lieferst immer komplette, funktionierende Dateien.”

Schritt 2: Der “Vibe” (Der Prompt)

Wir bauen heute ein Server-Monitoring Dashboard im Glassmorphism-Look (passt ja zu meinem neuen Blog-Design 😉).

Statt Code zu schreiben, beschreibe ich den Vibe.

Mein Prompt:

“Erstelle ein modernes Dashboard für Server-Metriken.

Design:

Dark Mode (tiefes Blau/Schwarz)

Glassmorphism Cards (translucent, weißer Border 10% opacity)

Neon-Akzente für Graphen (Cyan, Pink)

Inhalt:

Header mit User-Profil und Search

3 Key-Metriken oben (CPU, RAM, Disk) mit kleinen Sparkline-Charts

Ein großer Main-Chart in der Mitte (Network Traffic)

Eine Liste mit ‘Active Processes’ unten

Tech Stack: React, Tailwind CSS, Recharts für die Diagramme. Lucide-React für Icons.

Gib mir den kompletten Code in einer einzigen Datei, damit ich ihn direkt in eine Preview-Umgebung pasten kann.”

Schritt 3: Iterate & Refine

Gemini wird loslegen und Code ausspucken.

Jetzt kommt der Vibe-Part. Du kopierst den Code (z.B. in StackBlitz oder eine lokale Vite-App).

Sieht gut aus? Wahrscheinlich zu 80%. Vielleicht ist der Hintergrund zu hell? Oder die Charts sind zu klein?

Sag dem Model einfach:

“Der Vibe ist gut, aber mach den Hintergrund viel dunkler, fast schwarz (#030712). Und mach die Cards runder (rounded-2xl).”

Du musst nicht im CSS suchen. Du sagst einfach, was anders sein soll.

Pro-Tipp: Screenshots füttern

Gemini 3 ist multimodal. Siehst du ein Design auf Dribbble oder Twitter, das dir gefällt? Mach einen Screenshot, zieh ihn in AI Studio rein und sag:

“Klau diesen Style für mein Dashboard.”

Das funktioniert erschreckend gut.

Warum das für dich als Einsteiger genial ist

Manche sagen: “Aber so lernt man doch nichts!”

Bullshit.

Gerade als Anfänger oder Umschüler bleibst du oft an Syntax-Fehlern hängen. Ein fehlendes ; kann dich Stunden kosten. Vibe Coding eliminiert diese Frustration.

Du lernst:

Konzepte: Was ist eine Component? Wie sind Daten strukturiert?
Review: Du liest den Code der KI und lernst “Best Practices” (meistens).
Architektur: Du denkst darüber nach, was die App tun soll, nicht wie man Array.map schreibt.