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.

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).

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.

Von 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.

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.

Case 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.

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)