Ich habe unsere Website an einem Tag vibecodet. Was wirklich passiert ist.
Der Begriff „Vibecoding" steht für eine neue Art zu programmieren: Man beschreibt der KI was man will, sie baut es. Klingt magisch, ist es nicht. Ein Erfahrungsbericht aus zwölf Stunden Praxis — mit dem ehrlichen Blick auf Stärken, Grenzen und Kosten.
Ich habe die Website unseres Unternehmens in zwölf Stunden neu gebaut. Vom leeren Git-Repository bis live auf der Apex-Domain. Mit zwei Sprachen, vier Pillar-Pages, einer funktionierenden Multi-LLM-Demo, einem browserbasierten CMS, vollständigem DSGVO-Stack und einem sauberen DNS-Switch.
Ich habe das mit Claude Code als Pair-Programmer gemacht, auf einem Stack, den ich vorher nie produktiv eingesetzt hatte: Astro, Tailwind 4, Vercel. Ich bin seit über 30 Jahren im Microsoft- und etwa 15 Jahre im .NET-Umfeld unterwegs. Das war Neuland.
Das ist der ehrliche Bericht. Nicht die LinkedIn-Erfolgsversion. Die echte Timeline, die echten Fehler, die echten Kosten. Und die Dinge, die einem niemand über „Vibecoding” sagt, die mich aber trotzdem erwischt haben.
Was Vibecoding eigentlich ist
Der Begriff kommt von Andrej Karpathy und meint: Du beschreibst in natürlicher Sprache, was du willst. Eine KI baut es. Du steuerst mit Feedback. Und du vertraust der KI weitgehend mit der Syntax. Du bist Architekt und Qualitätssicherung. Die KI ist der Code-Monkey.
Klingt magisch. Ist es nicht. Es ist eine andere Disziplin mit einem eigenen Rhythmus, und die Lernkurve habe ich unterschätzt.
Was es nicht ist: aufwandslos, wissensfrei, ein Klick und fertig. Wenn du nicht weißt, was ein CNAME-Eintrag ist, kannst du mit Vibecoding keine Website schneller live bringen als ohne. Die KI tippt schneller als du. Sie denkt nicht für dich.
Die Ausgangslage
Mein Ziel war ein vollständiger Neuaufbau von soho.at — vier Service-Säulen (CRM, Custom Development, AI Engineering, Loyalty), About-Page, Referenzen, Kontakt und den üblichen Pflichtseiten. In zwei Sprachen. Mit einem Feature, das mir am Herzen lag: einer Live-AI-Demo auf der AI-Seite, in der Besucher die Antworten von drei verschiedenen Sprachmodellen parallel vergleichen können.
Die Inhalte hatte ich im Kopf. Es ist mein Business — ich wusste, was ich vermitteln will. Was ich nicht hatte: Zeit, einen modernen Frontend-Stack von Grund auf zu lernen.
Der Plan: keine feste Technologieentscheidung vorab, sondern Anforderungen formulieren und die KI Vorschläge machen lassen. Aus diesen Vorschlägen hat sich ein funktionierender Stack herauskristallisiert — Static-Site-Generator, Vercel, Claude Code für die syntaktische Schwerstarbeit. Meine Zeit blieb für Architektur, Texte und die wichtigen Entscheidungen.
Der Stack, bei dem ich gelandet bin
| Schicht | Wahl | Warum |
|---|---|---|
| Framework | Astro 6 | Statisch zuerst, schnell, zwei Sprachen sauber abbildbar |
| Styling | Tailwind 4 | Utility-First-CSS, ermöglicht schnelles Iterieren direkt im Markup |
| Sprache | TypeScript strict | Fängt Fehler ab, die die KI sonst durchwinkt |
| Hosting | Vercel | Free-Tier, automatische Builds via Git-Push, Serverless Functions für die AI-Demo |
| CMS | Sveltia | Browserbasiert, schreibt direkt ins Git-Repo, keine Datenbank |
| Analytics | GA4 mit Klaro Cookie-Consent | DSGVO-Pflicht in der EU |
| AI-Demo | Anthropic + OpenAI + Groq via SSE-Streaming | Drei Modelle parallel, mit echten Kosten-Caps |
| Bot-Schutz | Cloudflare Turnstile | Unsichtbar, gratis |
| Pair-Programmer | Claude Code | Hat etwa 90 Prozent der Tipparbeit erledigt |
Dieser Stack stand nicht von Anfang an fest. Manches hatte ich vorab entschieden. Manches hat sich im Tagesverlauf ergeben — wenn etwas nicht funktioniert hat und Claude Code eine Alternative vorgeschlagen hat, die funktioniert hat. Das gehört zum Rhythmus.
Wie der Tag wirklich verlaufen ist
Die Session hat um 8:34 Uhr morgens begonnen. Kaffee. Klare Vorstellung. Leeres Repo.
Bis zum Mittag stand das Fundament: Layout, Navigation, Design-Tokens, beide Sprachen verdrahtet. Bis zur Mittagspause hatten alle vier Pillar-Pages echte Inhalte in beiden Sprachen.
Der Nachmittag ist in die AI-Demo geflossen — das härteste Einzelstück der Site. Um sechs Uhr abends streamten drei Sprachmodelle live ihre Antworten parallel in drei Cards auf der AI-Page. Mit Rate-Limiting, Kosten-Caps und Cloudflare-Bot-Schutz davor.
Der Abend ging in den Cookie-Consent-Stack, das mobile Menü, das CMS-Setup, SEO und schließlich den DNS-Switch. Live auf der Apex-Domain um etwa acht Uhr abends. Zwölf Stunden nach dem Start.
Zweiundvierzig Iterationen. Etwa vierzig diskrete Code-und-Test-Zyklen. Jeder dokumentiert.
Klingt rund. War es nicht.
Die Fehler — und es waren viele
Der Sicherheitsvorfall
Etwa sechs Stunden drin, mitten im Bau des AI-Demo-Backends, hat Claude Code eine Datei mit allen fünf Live-API-Keys ins Repository commitet. Ich habe es innerhalb von Minuten gemerkt, weil ich vor jedem Push das Git-Log lese.
Das war die nützlichste Katastrophe des Tages. Ich hatte eine Datei mit allen fünf Live-API-Keys in VS Code abgelegt — und Claude Code hat sie ganz normal mit committed.
Es hat mich aber unmittelbar darauf hingewiesen. Reset, Force-Push, alle Keys rotiert — Anthropic, OpenAI, Groq, Cloudflare, Redis. Schaden begrenzt.
Die eigentliche Lektion: Die KI schützt dich nicht vor dir selbst. Sie arbeitet mit dem, was in deinem Workspace liegt. Wenn du Secrets im Projekt hast, behandelt sie sie wie ganz normalen Code.
Den Pre-Commit-Hook, der Secrets erkennt und Commits blockiert, hat mir die KI danach vorgeschlagen und gebaut. Aber das ist nicht der Punkt. Der Punkt ist: Du musst wissen, was du tust. Die KI nimmt dir die Verantwortung nicht ab.
Die Vercel-Environment-Variable-Falle
Lange Zeit konnte ich nicht herausfinden, warum meine AI-Demo jede Anfrage mit einem Cloudflare-Turnstile-Fehler abgelehnt hat. Der Secret stand in den Vercel-Environment-Variablen. Ich habe dreimal redeployed. Ich habe die Variable gelöscht und neu angelegt. Nichts.
Die Fehlermeldungen haben nicht geholfen. Die KI schon. Gemeinsam haben wir die Ursache eingegrenzt, Hypothesen getestet und den Fehler relativ schnell gefunden.
Das ist ein Muster, das sich durch den Tag gezogen hat: Die KI macht nicht nur Code. Sie ist auch ziemlich gut darin, systematisch nach Ursachen zu suchen — wenn man sie richtig einbindet.
Der Fix hat zwei Minuten gedauert, sobald die Ursache gefunden war.
Der Cloudflare-Turnstile-API-Bruch
Cloudflare hat Anfang 2025 den size: "invisible"-Parameter aus dem Bot-Schutz-Widget entfernt. Jeder Blogpost und jedes Tutorial im Trainingsstand der KI verwendete die alte Syntax. Also hat Claude Code die alte Syntax geschrieben. Also funktionierte das Widget nicht.
Der Fix: „Invisible Mode” serverseitig im Cloudflare-Dashboard konfigurieren und den Client-Code so umstrukturieren, dass er turnstile.render(), turnstile.execute() und turnstile.reset() programmatisch aufruft. Anderes mentales Modell als das, was in der Doku im Kopf der KI stand.
Diese Fehlerkategorie wird bei KI-Tooling weiter passieren. Das Web ändert sich schneller, als Trainingsdaten aktualisiert werden. Manchmal musst du einfach die aktuelle Doku lesen.
OneDrive und node_modules
Ich halte meine Projekte in OneDrive für Backup-Zwecke. OneDrive ist okay für Dokumente. Er ist feindselig gegenüber node_modules, das hunderttausende kleine Dateien enthält. Der Build hat sich aufgehängt oder produzierte seltsame Pfad-Fehler.
Fix: Die Build-Cache-Verzeichnisse (.astro, dist, .vercel) per Junction auf ein nicht-synchronisiertes Laufwerk auslagern. Jetzt sieht OneDrive den Code, nicht die Build-Artefakte. Das ist ein Windows-und-OneDrive-spezifischer Stolperdraht — wenn du in dieser Konstellation arbeitest, rechne damit.
Sveltia versus TypeScript
Sveltia, das CMS, kann JSON, YAML und Markdown editieren. TypeScript-Modul-Exports kann es nicht. Meine Content-Dateien waren .ts-Dateien mit getypten Objekten. Also konnte Sveltia sie nicht sehen.
Fix: jede Content-Datei in zwei aufgeteilt. Die Daten leben in JSON. Eine schmale TypeScript-Wrapper-Datei importiert das JSON und re-exportiert es mit dem ursprünglichen Interface. Die Astro-Pages funktionieren unverändert weiter. Sveltia editiert die JSON-Dateien.
Dieses Pattern hat dreißig Minuten Design gekostet und zwanzig Minuten in der Anwendung über sieben Dateien. Hat sich gelohnt. Die Pages mussten keine Zeile geändert werden.
Was es kostet
Echte Kosten, keine theoretischen:
| Posten | Kosten |
|---|---|
| Domain | Bereits vorhanden |
| Vercel | Free-Tier (Hobby) |
| Cloudflare Turnstile | Gratis |
| Anthropic API | Hard-Cap bei 5 USD/Monat |
| OpenAI API | Hard-Cap bei 5 USD/Monat |
| Groq API | Free-Tier reicht |
| Vercel Redis | Free-Tier reicht |
| Claude Code Subscription | Monatliches Developer-Abo |
Monatliche Run-Rate, ohne Claude-Code-Abo: unter 15 USD selbst bei voller Last. Mit dem Rate-Limiting und den Budget-Caps ist der Worst-Case bei einem Bot-Angriff auf die AI-Demo etwa 10 USD im Monat. Bei Erreichen des Budgets fällt die Demo elegant auf vorgefertigte Beispielantworten zurück. Die Site bleibt funktional.
Was ich unterschätzt habe, sind nicht die zwölf Stunden Bauen. Es ist die Zeit, um zu verstehen, was ich da baue. Die KI tippt schnell. Zu reviewen, was sie produziert hat, zu entscheiden, ob die Architektur stimmt, zwischen drei plausiblen Optionen zu wählen, die die KI vorschlägt — das kostet Zeit, die du nicht komprimieren kannst.
Was mich positiv überrascht hat
Die Iterationsgeschwindigkeit ist tatsächlich transformativ. „Bau ein Hamburger-Menü für Mobile” geht von einem halben Tag mit einem Junior auf einen zehn-minütigen Austausch. Über zwölf Stunden hinweg ist der Compounding-Effekt enorm.
Doku-Disziplin wird notwendig und einfach. Ich habe jede Iteration als Markdown-Datei in einem claude-log/-Ordner protokolliert. Zweiundvierzig Stück am Ende. Dieser Ordner ist jetzt das lebende Gedächtnis des Projekts. Wenn ich in sechs Monaten zurückkomme, lese ich die Logs und erinnere mich, warum ich welche Entscheidung getroffen habe. Die KI hat sogar beim Schreiben geholfen.
Der Rhythmus erzwingt Klarheit. Du kannst eine KI nicht vage prompten und ein sauberes Ergebnis erwarten. Du musst wissen, was du willst. Den Prompt zu schreiben, ist der Akt, das Feature zu entwerfen. Vage Prompts erzeugen vagen Code. Das ist ein Feature, kein Bug, und es macht dich zu einem besseren Denker darüber, was du tatsächlich brauchst.
Was mich weniger positiv überrascht hat
Die KI ist manchmal selbstbewusst falsch. Nicht oft. Aber wenn, dann klingt sie genauso, wie wenn sie richtig ist. Du brauchst einen Verifikationsweg — den Build laufen lassen, die deployed Page lesen, die echten Logs prüfen. „Vertrauen, aber prüfen” ist nicht optional.
Die langweiligen Teile kannst du nicht abgeben. Das Setup ist trotzdem aufwendig. DNS-Propagation dauert. OAuth-Callback-URLs müssen exakt registriert sein. Die KI hilft überall, außer dort, wo du außerhalb des Codes bist.
Kontext ist alles. Eine frische KI-Sitzung weiß nichts über deine vorherigen Entscheidungen. Jedes längere Projekt braucht ein Erinnerungs-Dokument — ein PROJECT.md oder ähnlich — das du der KI zu Beginn jeder Sitzung mitgibst. Sonst schlägt sie Dinge wieder vor, die du längst verworfen hast.
Solltest du es selbst probieren?
Hängt davon ab, wer „du” bist.
Wenn du technisches Bauchgefühl hast — du hast schon Websites ausgeliefert, kannst Code lesen, verstehst DNS, HTTPS und was eine Environment-Variable ist — wird Vibecoding dich Dinge schneller bauen lassen, als du es je getan hast. Das ist tatsächlich eine Stufenänderung.
Wenn du keinen technischen Hintergrund hast, wird Vibecoding dich Dinge produzieren lassen, die richtig aussehen und im ungünstigsten Moment auf unerwartete Art brechen. Die KI sagt dir nicht, wenn deine DNS-Records falsch konfiguriert sind. Sie wird nicht erkennen, dass dein Datenschutz-Hinweis für deine Jurisdiktion nicht ausreicht. Sie wird deine API-Keys committen.
Für die Mittelgruppe — technologie-affin, aber nicht täglich am Code — lautet die Antwort: ja, aber mit jemandem an der Seite, der die Architektur-Entscheidungen reviewen kann. Die schlechtesten Outputs der KI sind die überzeugend-aber-falschen, und dafür brauchst du einen kritischen Reviewer.
Die ehrliche Erkenntnis
Vibecoding komprimiert das Tippen. Es komprimiert nicht das Denken. Wenn überhaupt, verstärkt es das Denken — weil du deine Zeit mit Entscheidungen verbringst statt mit der Tastatur.
Das ist der Tausch. Ein guter. Mach dir nur nicht vor, die KI würde die Website ausliefern. Das tust du. Die KI hilft.
“The act of writing the prompt is the act of designing the feature.”
Gebaut mit Astro, Tailwind 4, Vercel und Claude Code. In zwölf Stunden, am 5. Mai 2026. Die Site ist live unter soho.at.