Andrej Karpathy nannte es "not really programming — I just see stuff, say stuff, run stuff, and it mostly works." Für statische Websites ist dieser Workflow besonders mächtig: Das Ergebnis ist reines HTML/CSS/JS. Kein Build-Schritt, keine Abhängigkeiten. Die Datei die du erstellst ist die Datei die der Browser lädt. Aber Achtung: CodeRabbit (Dez 2025) zeigt dass AI-Code 2,74-mal mehr Security-Issues enthält. Bei 5.600 analysierten Vibe-coded Apps fanden Forscher über 2.000 Schwachstellen — Review vor jedem Deploy ist Pflicht.
Der 4-Komponenten-Prompt
Ein guter Einstiegs-Prompt hat vier Bestandteile: Typ (was wird gebaut — Landing Page, Portfolio, Blog), Ästhetik (Farbschema, Fonts, Stil), Inhalt (Texte, Sektionen, CTAs), Priorität (Performance vs. visuelle Komplexität).
Fortgeschrittene nutzen "Vibe PMing": Zürst einen Plan oder README anfordern bevor Code generiert wird. Das reduziert Iterationsschleifen erheblich — Forschung zeigt dass Vibe Coders mit Trial-and-Error dominieren, aber kuratierte Prompts besser skalieren. Fange mit dem Layout-Skelett an, iteriere dann Sektion für Sektion. Mega-Prompts die alles auf einmal fordern erzeugen Halluzinationen. Sektion-für-Sektion reduziert Fehler drastisch.
Von der Datei zum Live-Deploy: 7 Schritte
1Prompt strukturieren
Typ, Stil, Inhalte, Priorität festlegen. Je spezifischer, desto weniger Iterationen.
2HTML generieren
Claude gibt eine einzelne index.html aus — alles inline oder via style/script Tags.
3Lokal öffnen
Doppelklick auf die Datei. Kein lokaler Server nötig für statisches HTML.
4Iterieren
"Hero braucht mehr Abstand", "Mobile-Ansicht zu eng". 3-5 Runden sind normal.
5GitHub Repo anlegen
git init, git add, git push. Das Repository ist gleichzeitig dein Backup.
6Vercel verbinden
GitHub-Repo importieren, Framework auf "Other" setzen — kein Framework-Preset für Static Sites.
7Auto-Deploy
Jeder git push triggert automatisch ein Re-Deploy. Vercel deployt in unter 60 Sekunden.
Chaos-Prompting: Der häufigste Fehler und sein Fix
Wenn ein Projekt nach dem fünften "lass mich nochmal erklären"-Prompt stecken bleibt, ist der Context kontaminiert. Die KI versucht widersprüchliche Anweisungen gleichzeitig zu befolgen — das Ergebnis wird mit jedem Prompt schlechter.
Kernerkenntnis
Fix: Die KI bitten den bisherigen chaotischen Kontext als strukturierten Prompt zusammenzufassen. Dann neuen Chat starten. Stage 1: Architektur ohne Code. Stage 2: Implementierung nach Spec. Zwei saubere Stages schlagen zehn chaotische Iterationen.
Case Study: while.chat
while.chat — 35+ Artikel, komplett vibe-coded
Stack: Vanilla HTML/CSS/JS + Three.js via CDN. Null npm-Pakete.
Performance: Lighthouse 100/100. Ladezeit unter 200ms.
Workflow: Prompt → Claude generiert HTML → Preview prüfen → Git push → Vercel Auto-Deploy.
Gesamtzeit pro Artikel inkl. Recherche, Content und 3D-Hero: unter 60 Minuten.
Jeder Artikel wurde mit dem gleichen Workflow gebaut. Die Konsistenz kommt nicht von einem Framework — sie kommt von einer Snippet-Bibliothek und einem Claude Skill der den Stil, die Farben und die Accessibility-Regeln kennt.
Weiter im Cluster: Alle Vibe Coding Tools im Vergleich, Lighthouse 100 erreichen, und der komplette Guide.
Häufige Fragen
Welches Tool eignet sich am besten für Website Vibe Coding?
Für statische Seiten: Claude (claude.ai oder Claude Code). Für komplexere Apps: Cursor oder Windsurf. Für absolute Anfänger ohne Code-Erfahrung: Lovable oder Bolt.new.
Muss ich Git und Vercel verstehen?
Grundlegend: ja. git init, git add, git commit, git push — vier Befehle. Vercel: GitHub-Repo verbinden, Deploy klicken. Das Minimum lässt sich in 10 Minuten lernen.
Wie vermeide ich den generischen KI-Look?
Zwei Wege: Erstens, spezifische Ästhetik im Prompt definieren (nicht "modern" sondern konkrete Farben, Fonts, Spacing). Zweitens, Three.js 3D-Heros statt Stock-Bilder — das durchbricht den Inter-Font-Gradient-Look sofort.
Was wenn die KI React vorschlägt?
Explizit sagen: "Vanilla HTML/CSS/JS, kein Framework, keine npm Dependencies." Claude schlägt React vor weil die Trainingsdaten voll davon sind — das bedeutet unnötig 421 KB+ Bundle und ein First Build von über einer Minute statt 0,8 Sekunden bei Vanilla. Warum Vanilla meistens reicht, steht im Vergleichsartikel.
Quellen
Karpathy, Andrej — X/Twitter, 2. Feb 2025
ufii4.com — "Case Study: When Vibe Coding Fails" (Chaos-Prompting-Analyse)
Codecademy — "Deploy your Vibe Coding Projects for Free" (Vercel-Anleitung)
IJSAT — "Vibe Coding: A Mixed-Methods Case Study" (2025)
ICSE 2026 — "Vibe Coding in Practice" (Peer-Reviewed)
Forbes/CodeRabbit — Security-Analyse (März 2026)
dev.to/clevertech88 — "The Hidden Cost of JavaScript Frameworks" (2026)