Vibe Coding: Website erstellen bis zum Deploy
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.
// 01 / 04Der 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).
promptErstelle eine deutschsprachige Landing Page für einen
SEO-Dienstleister.
TYP: Single-Page, Vanilla HTML/CSS/JS, kein Framework
AESTHETIK: Dunkelblau (#25201A), Accent Blau (#2d5fc2),
DM Sans, clean/minimalistisch
INHALT: Hero mit Tagline, 3 Service-Karten,
Testimonial-Section, CTA mit Kontaktformular
PRIORITAET: Lighthouse 100, Mobile-First, SEO-Tags
Fortgeschrittene nutzen "Vibe PMing": Zuerst 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.
// 02 / 04Von der Datei zum Live-Deploy: 7 Schritte
01
Prompt strukturieren
Typ, Stil, Inhalte, Priorität festlegen. Je spezifischer, desto weniger Iterationen.
02
HTML generieren
Claude gibt eine einzelne index.html aus, alles inline oder via style/script Tags.
03
Lokal öffnen
Doppelklick auf die Datei. Kein lokaler Server nötig für statisches HTML.
04
Iterieren
"Hero braucht mehr Abstand", "Mobile-Ansicht zu eng". 3-5 Runden sind normal.
05
GitHub Repo anlegen
git init, git add, git push. Das Repository ist gleichzeitig dein Backup.
06
Vercel verbinden
GitHub-Repo importieren, Framework auf "Other" setzen, kein Framework-Preset für Static Sites.
07
Auto-Deploy
Jeder git push triggert automatisch ein Re-Deploy. Vercel deployt in unter 60 Sekunden.
// 03 / 04Chaos-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.
// 04 / 04Case Study: while.chat
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
Verwandt: Leseliste: 5 Vibe Coding Artikel
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)
// micro-journal
Welche Website baust du als Erstes mit Vibe Coding?
Ein Satz reicht. Das Journal bleibt lokal in deinem Browser — kein Konto, kein Server.
notierenMG
Max Götte
SEO Strategist · Founder · while.chat
Ich bin Max, SEO Strategist aus Bochum. Von Audit über Content-Strategie bis Local SEO. KMU im DACH-Raum, evidenzbasiert, ohne Hype-Versprechen.
FAQ
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.
Weiterlesen
while., Arbeiten, während du lebst
while ist keine Firma. Es ist eine Schleife. Bumblebee ist der Beweis. Claude regelt. Du lebst. Das neue Arbeitsmodell für eine Gesellschaft nach dem Büro.
JETZT LESEN →
Web Dev for Vibe Coders: Guide 2026
Websites bauen mit Vibe Coding: Vom Prompt über Vanilla JS und Three.js bis zum Vercel-Deploy. Der Komplett-Guide mit Workflow, Performance und Praxis.
JETZT LESEN →
Cursor AI Pricing 2026 & Vibe-Coding-Tools im Vergleich
Cursor AI Pricing 2026 erklärt, plus Windsurf, Copilot, Claude Code, Lovable, Bolt, v0 im direkten Pricing- & Feature-Vergleich. Mit Empfehlungsmatrix.
JETZT LESEN →