VibeCoding: Website mit KI erstellen – Wie wir als Agentur vorgehen
Agenturen sind durch KI unter Druck, spüren die wirtschaftliche Lage als Erste und konkurrieren gegen 16-Jährige Glücksritter, denen man auf Instagram erzählt, sie könnten mit KI-Websites Millionär werden.
Wir nehmen unser aktuelles Projekt “PizzaSupport Freiburg” zum Anlass, um einen ehrlichen und tiefen Einblick in die KI-Realität der Agenturen zu geben. Denn eine Website mit KI erstellen zu lassen erfordert Ahnung von vielen Teilbereichen der Technik, der Planung, der Content Creation und so weiter.
Doch der Reihe nach: Was ist eigentlich PizzaSupport.de und warum wurde die Website mit KI statt mit WordPress aufgesetzt?
In Freiburg gibt es seit Kurzem eine Verpackungssteuer. Die ohnehin schon gestresste Gastronomie muss nun für jede Pizzaschachtel, jeden Kaffeebecher, jede Alufolie eine Steuer abführen. Als ob die Parkgebühren von bis zu 4,30 Euro pro Stunde und die entkoppelten Mieten nicht schon schlimm genug wären…
Die Verpackungssteuer in Freiburg klingt erstmal nach einem Problem für die Gastro. Unser Mindset verbietet es uns, Dinge als “Problem” zu sehen. Also haben wir eine Lösung entwickelt, die Spaß macht, Nutzen bringt und mit jedem Pizzakarton ein Statement in Richtung des Gemeinderats ist.
Die Idee: Kostenlose Pizzakartons für Freiburger Pizzerien.
Finanziert werden die kostenlosen Pizzakartons über Werbeflächen auf genau diesen Kartons, die lokale Unternehmen buchen. Während das Konzept einfach klingt, stellte uns die technische Umsetzung er Website vor Herausforderungen.
Die Entscheidung vorab: Website mit KI erstellen oder doch per WordPress?
Der Umfang der Aktion, die benötigten Features und Workflows entscheiden über das verwendete Tech Stack. Eine kleine Landingpage mit Formular erfordert nicht viel und ist auch ohne viel Ahnung schnell umsetzbar.
Was wir gebraucht haben, war aber komplexer. Zwei komplett unterschiedliche Zielgruppen (Gastronomen und Werbepartner, jeweils eigene Ansprache und Informationsbedarfe), eine Buchungslogik mit verbindlicher Auswahl der Werbeflächen, Anzeige der Formatpakete und Preise, eine Landkarte mit allen Teilnehmern, ein Fortschrittsbalken, der zeigt, wie nah wir am „Startschuss” sind, und im Hintergrund eine Datenbank, die mit sensiblen Firmendaten sauber und DSGVO-konform umgeht.
Und da wir in Hinsicht auf eine Skalierung die Prozesse automatisieren werden, muss schon jetzt in der Zukunft geplant und die erforderliche Architektur vorbereitet werden.
Wie beschreibe ich der KI die besonderen Anforderungen für die Website?
Die Kartons sollen ähnlich eines Crowdfundings erst produziert werden, wenn die kritische Masse sowohl bei Pizzerien als auch bei Werbekunden erreicht wurde. Aber es ist doch kein Crowdfunding, sondern unsere eigene Lösung. Das musste die Seite nicht nur erklären, sondern technisch abbilden.
Besonderheit dabei war, dass Statusbalken und optische Fortschritts-Elemente erst angezeigt werden sollen, wenn wirklich Buchungen vorliegen. Sonst hemmt es Kunden am Anfang während es Kunden später motiviert. Also sollten die Elemente über ein Admin-Board deaktiviert werden können. Auch sind sie an gewisse Zahlen bzw. Buchungen gebunden. Es muss also ein Datenabgleich stattfinden, der sich auf die Logik der dynamischen Elemente auswirkt.
Bei der Erhebung von Daten der Werbekunden und Pizzerien ist eine besondere Verschlüsselung und Schutz der Datenbank erforderlich. Wir erhaben keine Kontodaten, aber Namen und Adressen. So haben wir auch einen eigenen Sicherheits-Audit der Website, Datenbank und generellen Struktur durchgeführt. Mit sg.. WhiteHat-Hacking-Techniken haben wir also Angriffe auf den eigenen Server und die eigenen Daten gefahren. Dabei sind Lücken aufgefallen, die wir behoben haben. Somit sind die Daten nun besonders gut geschützt.
Und da sich Deutschland durch eine wilde Abmahnindustrie selber gerne blockiert, gehören ausgefeilte DSGVO-Tests bei uns zum Standardprogramm. Google Fonts werden also lokal gehostet, Analytics wird durch ein eigenes System innerhalb der Installation ersetzt (zeigt nur Zugriffe und Verweildauer) und es werden keine externen Services eingebunden. Das DSGVO- bzw. Cookie Banner blockiert alle Scripte, bis der Nutzer zustimmt. Diese Zustimmung wird nach geltenden Richtlinien dokumentiert.
Schritt für Schritt wird geplant, bevor die Website mit KI erstellt wird
Wir haben Claude Code nicht Stück für Stück mit Prompts gefüttert. Kein „bau mir mal einen Button”, dann „jetzt noch ein Formular”, dann „ach und die Datenbank fehlt noch”. Das ist der Fehler, den die meisten machen, wenn sie eine Website mit KI erstellen. Sie planen nicht. Und dann wundern sie sich, warum am Ende nichts zusammenpasst und teure Tokens verbrannt werden.
Stattdessen haben wir ein komplettes Briefing entworfen. Mit wirklich allem, was es braucht. Der Businessplan wird quasi zum Prompt. Denn je mehr Details die KI hat, desto besser kann sie umsetzen.
Wir haben von Geschäftslogik, Sitemap, Preisen, Datenbankstruktur, Sicherheitsanforderungen, in die KI gegeben. Alles in einem eigenen Chat. Und die klare Ansage an die KI: Erst alle offenen Fragen stellen und selber wiedergeben, wie sie die Aufgabe versteht. Als alles geklärt war, wurde die Anweisung gegeben, daraus einen Prompt für Claude Code zu generieren. Die KI hat sich also selber die Anweisung gegeben.
Wichtig: Es waren immer Menschen mit Fachwissen beteiligt. Bei Fragen zu Content Delivery, Workload, Datenbankmanagement, Datenstruktur etc. wurden klare Anweisungen gegeben, die aus fundiertem Fachwissen stammen.
Genau das ist der Unterschied zwischen „KI spuckt einem 16-jährigen irgendeine Website für einen Handwerker aus, der auch keine Ahnung hat.” und einer professionellen Website, das man als Agentur guten Gewissens verkauft.
Darum sind wir als Agentur schneller und günstiger, als fast alle anderen Agenturen!
Als Agentur verkaufen wir Wissen und Zielerreichung. Nicht einfach nur “eine Website an der 200 Stunden programmiert wurde.” Professionellen Kunden geht es nicht darum, wie schnell wir sind. Sondern darum, dass wir mit der Website von der Agentur genau das Werkzeug liefern, was unseren Kunden seinem gewünschten Ziel näher bringt.
Daher berechnen wir auch keine Stunden, sondern das Ergebnis. Wie wir es erreichen, geht niemanden etwas an. Dass wir es im Rahmen des Budgets erreichen, ist unsere Herausforderung. Dass wir unsere Kunden begeistern und dabei günstiger sein können, als Agenturen mit 2010er-Workflows, ist das einzig Entscheidende.
Webdesign und Webentwicklung mit KI: Welche Technik hinter PizzaSupport.de steckt
PizzaSupport ist eine Aktionswebsite, die Elemente von Crowdfunding und OnlineShop beinhaltet. Sie soll aber keine wöchentlichen Blogposts bekommen. Vielmehr soll das Projekt in Kürze auf weitere Städte skaliert werden, was in der regionalen Ausrichtung für SEO und Kunden zu beachten und einzuplanen ist.
Die komplexen Buchungsformulare mit grafischer Darstellung der tatsächlich gekauften Fläche auf dem Pizzakarton war eine der größten Herausforderungen. Mit WordPress wäre das nur kompliziert umsetzbar gewesen, Auch wäre bei WordPress mit seinen umfassenden Themes und Plugins sehr viel mehr Ballast auf dem Server gelandet, als nötig gewesen wäre.
Wir haben also bewusst kein aufgeblähtes Framework eingesetzt, sondern auf schlanke PHP-Architektur mit ausgelagertem CSS gesetzt.
Sicherheitstechnisch haben wir alles eingesetzt, was dem aktuellen Standard entspricht: Prepared Statements gegen SQL-Injection, CSP-Header gegen XSS, CSRF-Token auf jedem Formular, Rate-Limiting gegen Spam. Verschlüsselte Datenfelder. Ein Freigabe-Workflow, bei dem nichts ungeprüft auf der öffentlichen Karte landet. Eine eigene QR-Redirect-Infrastruktur, damit wir die Hoheit über jeden Werbelink behalten.
Und weil FTP-only bedeutet, dass man nicht mal eben schnell was live patcht: Wir haben die Arbeit in klar nummerierte Etappen zerlegt. Jede mit exakter Dateiliste. Kein Chaos, kein „welche Version läuft jetzt eigentlich live”.
UX, UI und professionelles Webdesign aus Freiburg
Als erfahrene Webdesign Agentur in Freiburg sind wir seit 2015 immer im Kopf des Kunden unterwegs. Gutes Webdesign und Webentwicklung sieht man am Ergebnis, die Arbeit dahinter sieht man aber nicht. Die Seite wirkt einfach und fokussiert, weil im Hintergrund sauber gedacht wurde. Wir haben bewusst auf visuelle Effekte verzichtet und plakative Bilder vermieten. Für beide Zielgruppen – Werbetreibende und Pizzerien – zählt die Information und Zuverlässigkeit und das Vertrauen.
SEO- Optimierung von Anfang an – auch bei Websites die mit KI erstellt werden
Eine Webseite, die keiner findet, kann man auch gleich abschalten. Als erfahrene SEO-Agentur gehen wir jedes Webdesign-Projekt und jede Website immer auch mit dem Blick auf professionelle SEO-Optimierung an. Und dies schließt die GEO-Optimierung der Website, also die Ausrichtung auf KI-Suche, immer mit ein.
Deshalb war SEO für uns fester Teil des Bauplans. Saubere Meta-Tags und Open-Graph-Daten für jede Seite, strukturierte Daten nach JSON-LD (Organization, WebSite, bei der Verpackungssteuer-Ratgeberseite zusätzlich FAQPage), sprechende URLs statt kryptischer Parameter, eine klare Überschriften-Hierarchie (H1, H2, H3 etc) und systematische interne Verlinkung zwischen Startseite, Werbepartner-Seite, Teilnehmerkarte und Ratgeberseite.
Dazu eine dynamisch generierte Sitemap, ein sauberes robots.txt mit Sitemap-Verweis — und Rechtsseiten wie Impressum und Datenschutz konsequent auf noindex, damit Google seine Zeit auf den Seiten verbringt, die wirklich zählen.
Auch das gehört heute dazu: Inhalte so aufbereiten, dass sie nicht nur bei Google, sondern auch in der KI-Suche als verlässliche Antwort ausgespielt werden. Genau dafür stehen wir bei den legendären Class Brothers.
Die User-Experience: Bei UI & UX macht der Live-Audit den Unterschied
Eine Website mit KI zu bauen ist die eine Sache. Interessant wird’s, wenn man danach hingeht und die eigene Seite kritisch auseinandernimmt. Genau das haben wir gemacht. Mit unserem erprobten Live-Audit, der verschiedene Personas und Devices durchspielt und kritisch alles hinterfragt.
Dabei haben wir Sachen gefunden, die sonst erst ein Kunde bemerkt hätte, und zwar an der unangenehmsten Stelle: mitten im Bestellprozess.
Die Formulare & Logiken in der Programmierung und Datenverarbeitung
Ein Widerspruch im Funnel, der Interessenten verwirrt hätte. Eine falsche Behauptung auf der Steuer-Ratgeberseite — ein Steuerdeckel, den es in der Realität gar nicht gibt. Ein Testeintrag, der versehentlich live sichtbar war. Wir haben’s gefunden, korrigiert, sauber dokumentiert. Kein Kunde hat je gemerkt, dass es das Problem gab.
Das Bestellformular wurde zum dreistufigen, dynamischen Formular mit Live-Kalkulator, damit man beim Ausfüllen sofort sieht, was man bekommt. Und nach dem Absenden gibt’s keine trockene Erfolgsmeldung, sondern eine kleine Überraschung: ein sich öffnender Pizzakarton, aus dem Konfetti springt. Klein, aber genau solche Details entscheiden, ob sich eine Seite lebendig anfühlt oder nach Formular.
Das ist der Teil, den bei „KI baut Websites” fast niemand zeigt. Nicht der erste Wurf ist die Leistung. Sondern dass man systematisch nachschärft, bis es wirklich trägt.
Was das für Dich bedeutet, wenn Du eine Website mit KI erstellen willst
pizzasupport.de läuft. Wächst gerade Richtung Startschuss. Und ist der Beweis, dass man mit dem richtigen Prozess auch komplexe, sicherheitskritische Projekte in einem Bruchteil der klassischen Entwicklungszeit produktionsreif bekommt — ohne dabei an der Qualität zu sparen.
Wir sind Class Brothers. Genau solche Web-Projekte sind unser Ding.
Du willst wissen, was mit KI-gestützter Entwicklung für Dein Projekt drin ist? Schreib uns, frag uns, quetsch uns aus.
