Case Study Website mit KI erstellen: Wie gut ist Vibecoding mit komplexen Formularen und Berechnungen?
Manche Projekte klingen auf dem Papier einfach. „Baut uns eine Website für kostenlose Pizzakartons„. Das klingt nach einer Woche Arbeit. Was wir bei pizzasupport.de tatsächlich umgesetzt haben, war etwas anderes: eine mehrseitige, DSGVO-konforme, sicherheitsgehärtete Kampagnen-Plattform mit eigener Buchungslogik. Und zwar für zwei Zielgruppen. Einmal für Gastronomien, die kostenlose Pizzakartons bestellen können und auf der anderen Seite die Werbekunden regionaler Unternehmen, die Werbeflächen direkt im Formular fix auswählen und buchen können sollen. Zudem die Integration der teilnehmenden Unternehmen und Pizzerien in einer Kartenansicht, Buchungs- bzw. Bestell-Workflow und allen erforderlichen Rechtstexten, eigenem „Pizza“-Captcha und komplexer Buchungsverwaltung im eigenen Backend.
Dynamische Elemente der Website – Programmierung eines Admin- und Buchungs-Dashboards.
PizzaSupport.de ist ein gemeinschaftlich orientiertes Projekt, bei dem nicht klar ist, ob es die Aufmerksamkeit erhält, die es zum Start benötigt. Es kann also sein, dass de kritische Masse an Buchungen nicht erreicht wird und das Projekt scheitert. Gerade zum Start mit wenigen Teilnehmern sollen Elemente, die später zur Motivation dienen, erstmal ausgeblendet bleiben. Also wurden bestimmte Module auf der Website dynamisch angelegt um erst angezeigt zu werden, wenn gewisse Parameter erreicht wurden.
Dies betrifft Statusbalken zur Anzahl der teilnehmenden Gastronomien und Werbekunden sowie deren Adress-Liste neben der Karte und die dynamische Markerplatzierung innerhalb der Standort-Karte.
Hierzu wurde ein separates Steuermenü entwickelt, das die Elemente sichtbar oder unsichtbar schaltet. Sowohl manuell als auch in Abhängigkeit von erreichten Buchungen,
Websites mit KI erstellen – Was kann man mit VibeCoding als Agentur oder Unternehmen erreichen?
Wir zeigen, wie wir das Projekt komplett mit Claude Code und Claude Design umgesetzt haben. Und was das für Agenturen und Unternehmen bedeutet, die heute komplexe Web-Projekte mit KI umsetzen.
Die Anforderung – Das Briefing bzw. der Prompt entscheidet über die Qualität der KI-Website
Pizzasupport.de vermittelt kostenlose Pizzakartons an Freiburger Gastronomiebetriebe. Finanziert werden die kostenlosen Pizzakartons über Werbeflächen auf den Kartons, die lokale Unternehmen buchen. Der Anlass ist lokal begründet: die neue Freiburger Verpackungssteuer, die viele Betriebe unter Druck setzt.
Das Produkt ist also kein 08/15-Prospekt, sondern ein zweiseitiges Geschäftsmodell mit eigener Mechanik. Erst wenn genug Pizzerien und genug Werbebudget zusammenkommen, „gibt es den Startschuss“. Dann läuft die Produktion an, mit 50 % Anzahlung von den Werbepartnern.
UX & UI – Transparenz für den Nutzer bzw. die Zielgruppen
Das musste die Website nicht nur zeigen, sondern technisch abbilden. Also ein Formular für Gastronomen, ein separates B2B-Buchungsformular für Werbepartner, eine Fortschrittsanzeige, eine Teilnehmerkarte mit echten, freigegebenen Standorten und im Hintergrund eine Datenbank, die sensible Firmendaten DSGVO-konform verarbeitet und gegen unbefugte Zugriffe sichert.
Step by Step – Uh baby… Ein vollständiger Auftrag statt tausend Prompts.
Statt Claude Code Schritt für Schritt zu füttern, haben wir den kompletten Auftrag vorab als strukturiertes Briefing geschrieben. Rolle, Kernbotschaft, Sitemap, Preislogik, Datenbankstruktur, Sicherheitsanforderungen, Definition of Done. Bewusst als einmaliges, vollständiges Dokument, nicht als Prompt-Ping-Pong. Hier muss man klar sagen, dass wir in allen bisherigen Projekten immer unsere Learnings in unserem Digitalen Mitarbeiterhandbuch gesammelt haben. So konnten wir die besten Prompts, die Projektschritte und all die Details, die man gerne vergisst, zentral sammeln und durch Claude strukturieren lassen.
Der entscheidende Kniff: Wir haben Claude Code explizit angewiesen, offene Fragen zuerst zu bündeln, bevor auch nur eine Zeile Code entsteht. Hosting-Umgebung, Mengenlogik, Preisstruktur-Details, rechtliche Vorbehalte. Das hat verhindert, was bei KI-gestützter Entwicklung am häufigsten schiefgeht: dass das Modell plausible Annahmen trifft, die am Ende nicht zur Realität passen. Und es spart Tokens, die sonst sinnlos verbrannt werden würden.
Das technische Profil der mit KI generierten Website
Wir haben uns bewusst gegen WordPress und für ein schlankes PHP-Setup auf klassischem Webhosting entschieden. Weil es reicht und leicht wartbar bleibt. Und dennoch hat es alles, was eine produktionsreife Seite braucht:
- Sicherheit: Prepared Statements gegen SQL-Injection, konsequentes Output-Escaping und CSP-Header gegen XSS, CSRF-Token auf jedem Formular, Rate-Limiting, Honeypots gegen Spam, sympathisches Pizza-Captcha
- DSGVO: dokumentierte Einwilligungen mit Zeitstempel, Freigabe-Workflow (nichts erscheint ungeprüft auf der öffentlichen Karte), Löschkonzept, verschlüsselte sensible Felder
- Performance: ausgelagertes, kritisches CSS nur für den sichtbaren Bereich, self-hosted Fonts, lazy-loaded Bilder, kein Layout-Shift
- Eigene QR-Redirect-Infrastruktur, damit Werbepartner-Links über die eigene Domain laufen. Klick-Analyse ohne Personenbezug
- Responsives Layout für alle Devices.
Die größte Herausforderung war nicht der Code selbst, sondern unsre Entscheidung gegen GitHub. Das Hosting wurde wegen interner Anforderungen nicht lokal, sondern in einer Liveumgebung aufgesetzt.
Das heißt, jedes Deployment musste als klar abgegrenztes Paket mit exakter Dateiliste übergeben werden. Wir haben die Arbeit deshalb in nummerierte „Etappen“ zerlegt. Jede mit genauem Umfang, damit der Upload sauber und nachvollziehbar bleibt.
Das Testing der KI-generierten Website: Live-Audit statt Bauchgefühl
Eine Website mit KI „fertig zu bauen“ ist die eine Sache. Sie danach kritisch zu prüfen, eine andere. Und genau da zeigt sich, ob KI-gestützte Web-Entwicklung wirklich belastbar ist oder nur eine Spielerei. Wir haben die Live-Seite systematisch geprüft und dabei reale Probleme gefunden, die sonst erst Kunden aufgefallen wären. Oder Hackern.
- Ein Widerspruch im Funnel, den wir mit der klaren Formel „Reservierung, verbindlich erst mit unserer Auftragsbestätigung“ aufgelöst haben
- Eine sachlich falsche Behauptung auf der Steuerseite (ein nicht existierender Steuer-Deckel pro Mahlzeit), korrigiert, bevor sie Vertrauen gekostet hätte
- Ein Test-Datenbankeintrag, der live sichtbar war
- Ein Formular, das wir zu einem dreistufigen, dynamischen Formular mit Live-Kalkulator umgebaut haben
- Das ist der Punkt, den viele beim Thema „KI baut Websites“ unterschätzen: Der Wert liegt nicht nur im ersten Build, sondern in der Fähigkeit, systematisch zu auditieren, Fehler zu finden und strukturiert nachzuschärfen. In Etappen, die man versteht und kontrolliert, statt einer Blackbox.
Was eine KI-generierte VibeCoding Website für Auftraggeber bringt
Für uns als Agentur heißt das: ein dermaßen individuelles und mit komplexen Features versehenes Web-Projekt hätte früher Wochen an Entwicklungszeit gebunden. Mit allem, was dazugehört, von Sicherheitshärtung bis DSGVO-Dokumentation, Projektmanagement zwischen mehreren Entwicklern. Das lässt sich jetzt in einem Bruchteil der Zeit produktionsreif umsetzen. Bei absolut professioneller Qualität in Code und System. Und Zeitersparnis bedeutet immer auch Geldersparnis. Da der Prozess nun anders organisiert ist und Codes einfach sehr viel schneller vorliegen und getestet werden können, sind die ersten Ergebnisse in wenigen Stunden sichtbar, die früher mehrere Tage erforderten.
Die unverzichtbare Basis ist immernoch ein Mensch mit Ahnung
Das Wichtigste Learning aus mehreren KI-generierten Websites, die wir mittlerweile erstellt haben:
Die KI kann immer nur so gut liefern, wie es die Prompts und das Fachwissen des Menschen zulassen. Wer KI bedient, muss ein breites Wissen haben. Und damit ist KI die Stunde der Generalisten. Denn Generalisten können nichts wirklich richtig gut, aber sie können sehr vieles gut und wissen mehr, als Fachidioten, die sich nur in einem Bereich auskennen.
Es wäre also vermessen, anzunehmen, dass jemand ohne jegliche Kenntnis von Websites, Entwicklung, Sicherheit, rechtlicher Vorgaben, Programmierung, Servern und SEO eine professionelle Website mit KI erstellen lassen könnte.
Man kann natürlich der KI sagen „Erstelle eine Website für xyz.“ Dann bekommt man etwas, das wie eine Website aussieht, aber bei genauem Hinsehen massive Mängel und Lücken aufweist.
Wie kann ich eine Website mit KI erstellen?
Alles beginnt mit der Zieldefinition und der Klarheit. Und diese entsteht durch die richtigen Fragen.
- Warum soll die Website existieren? (Sinn & Zweck)
- Für wen ist die Website gemacht? (Zielgruppe/n)
- Was soll die Website der Zielgruppe vermitteln? (Message & CTA)
- Welche Funktionen sind zwingend erforderlich?
- Was sind Nice To Haves, die dem Zweck nicht wirklich dienen?
- Wie verdient die Website Geld? (Monetarisierung)
- Soll der Content regelmäßig aktualisiert bzw. erweitert werden (Blog-Artikel)
- Wird ein Admin Backend benötigt und wenn ja, wofür?
- Soll sie über Suchmaschinen gefunden werden?
- Werden Daten erhoben und wenn ja, wie werden sie geschützt?
Klares Briefing, strukturierte Etappen, systematisches Nachaudit. pizzasupport.de ist live, wächst gerade Richtung Startschuss und ist ein gutes Beispiel dafür, was möglich ist, wenn man KI-Entwicklung nicht als Abkürzung, sondern als Werkzeug für sauberes, methodisches Arbeiten einsetzt.
Kontakt eigene KI-Assistenz anfragen
Website mit KI generieren
Wir helfen bei Planung und Umsetzung von KI-generierten Websites und bieten Workshops für Unternehmen an, um in die Erstellung von Websites mit KI einzusteigen.
Künstliche Intelligenz ist gleichermaßen spannend und mit Vorsicht zu betrachten. Als erfahrener Gründer und Start Up Berater beschäftigt sich Sebastian Class intensiv mit den Möglichkeiten von KI, der Zukunft für Smart Cities und der Veränderung, die KI für den globalen Arbeitsmarkt bringen wird. Auf KI-Assistenz.com teilt er wichtige Insights aus seiner täglichen Arbeit mit KI und den Erfahrungen, die Kommunen und Mittelstand mit KI-Agents, KI-Frameworks und Robotik machen.
