Deine eigene Webseite mit Vibe Coding
Vom Fragebogen bis zur Live-Seite: wie eine Website mit KI entsteht – und welche Schritte man besser nicht dem Zufall überlässt.
Eine Website zu bauen hieß lange: Baukasten mit Grenzen oder Agentur mit Budget. Mit KI gibt es einen dritten Weg. Man beschreibt, was man will, und die KI schreibt den Code. Das klappt erstaunlich gut – solange jemand weiß, was vorher geklärt und hinterher geprüft werden muss. Hier beschreibe ich den Ablauf, mit dem ibetmax.com und mehrere weitere Seiten entstanden sind: vom ersten Fragebogen über das Style Book bis zu Domain, Deployment, Barrierefreiheit und Sicherheit.
Der Weg zur eigenen Website
Was Vibe Coding ist, in welcher Reihenfolge eine Seite entsteht und warum Fragebogen und Style Book wichtiger sind als der erste Prompt.
Was Vibe Coding ist – und was nicht
Programmieren in Alltagssprache – mit einem Menschen, der die Richtung hält.
Den Begriff hat der KI-Forscher Andrej Karpathy Anfang 2025 geprägt: Man beschreibt einer KI in normaler Sprache, was entstehen soll, schaut sich das Ergebnis an und steuert nach – statt jede Zeile selbst zu schreiben. Für Websites funktioniert das besonders gut, weil HTML, CSS und JavaScript zu den Sprachen gehören, die KI-Modelle am sichersten beherrschen.
Beschreiben statt programmieren
„Eine Startseite mit großem Foto, drei Leistungen als Karten und einem Kontaktformular – dunkel, ruhig, hochwertig.“ Aus so einem Satz entsteht in Minuten ein erster Entwurf.
Iterieren in kleinen Schritten
Die eigentliche Arbeit sind die vielen kleinen Runden danach: Abstand größer, Farbe wärmer, Text kürzer, Menü auf dem Handy reparieren. Jede Runde ist ein Gespräch.
Der Mensch hält die Richtung
Die KI entscheidet nicht, was die Seite erreichen soll, für wen sie ist und was rechtlich gilt. Ohne klares Ziel produziert sie schnell viel – aber nicht unbedingt das Richtige.
Kein Selbstläufer
Vibe Coding heißt nicht „blind übernehmen“. Wer nicht prüft, was die KI baut, hat am Ende eine Seite, die gut aussieht, aber Daten an Dritte schickt, auf dem Handy bricht oder für Screenreader unbenutzbar ist.
Der Ablauf in acht Schritten
Die Reihenfolge, in der bei mir jede Website entsteht.
-
1
Fragebogen
Ziel, Zielgruppe, Inhalte, Stil und Technik klären – bevor eine Zeile Code entsteht.
-
2
Style Book
Farben, Schriften, Abstände, Bildsprache und Tonalität verbindlich festhalten.
-
3
Struktur & Inhalte
Seiten, Menü und Texte festlegen. Gute Inhalte sind das, was eine Seite wirklich trägt.
-
4
Bauen mit KI
Seite für Seite mit der KI entwickeln, lokal ansehen, nachsteuern, sichern.
-
5
Grafik & Bewegung
Bilder, Icons und Animationen im Stil des Style Books – leicht und barrierearm.
-
6
Prüfen
Barrierefreiheit, Sicherheit, Ladezeit, Sichtbarkeit, Rechtstexte – mit Checkliste.
-
7
Domain & Livegang
Domain, Hosting und Deployment einrichten, Sicherung anlegen, veröffentlichen.
-
8
Pflege
Inhalte aktuell halten, Sicherungen, kleine Verbesserungen – eine Website ist nie ganz fertig.
Schritt 1 bis 3 entscheiden über die Qualität. Wer hier spart, zahlt später mit endlosen Änderungsschleifen.
Der Fragebogen zuerst
Sechs Themenblöcke, die vor dem ersten Prompt geklärt sein sollten.
Ein guter Fragebogen ist das wertvollste Werkzeug im ganzen Prozess. Er zwingt dazu, Entscheidungen zu treffen, bevor die KI sie zufällig trifft. Und er wird später zum Briefing: Die Antworten wandern fast wörtlich in den ersten Prompt.
Ziel
Was soll die Seite leisten? Anfragen bringen, Vertrauen aufbauen, Arbeiten zeigen, informieren? Woran merkt man, dass sie funktioniert?
Zielgruppe
Wer besucht die Seite, mit welcher Frage im Kopf, auf welchem Gerät? Eine Künstlerin spricht anders als ein Makler.
Inhalte
Welche Seiten, welche Texte, welche Fotos gibt es schon? Was fehlt noch, und wer liefert es?
Stil
Drei Adjektive für die Wirkung, Lieblingsseiten als Beispiel, vorhandenes Logo, Farben, die gesetzt oder tabu sind.
Technik
Gibt es schon eine Domain oder ein Hosting? Wer pflegt die Seite später? Braucht es Formulare, Termine, einen geschützten Bereich?
Recht & Verantwortung
Wer steht im Impressum? Werden Daten erhoben? Liegen die Rechte an allen Fotos und Texten vor?
Bereit für den ersten Prompt?
Das Style Book als Gedächtnis
Damit Seite zwölf noch genauso aussieht wie Seite eins.
KI-Modelle haben kein Gedächtnis für Gestaltung. Ohne Vorgabe wählen sie bei jeder neuen Seite etwas andere Farben, andere Abstände, andere Knöpfe. Das Style Book – manche sagen Corporate-Design-Handbuch oder Design-System – legt all das einmal fest. Es wird jeder Anfrage an die KI mitgegeben und ist damit das wichtigste Dokument des Projekts.
Für ibetmax.com gibt es zwei Fassungen: eine HTML-Seite mit allen Bausteinen zum Ansehen und eine kurze Prompt-Vorlage, die Bild- und Design-KIs auf denselben Stil einschwört.
Beispiel: die Grundfarben von ibetmax.com
- Nachtschwarz
#07080bSeitenhintergrund - Türkis
#12c5bcHauptakzent, Links - Gold
#c99240Warmer Kontrast - Fließtext
92 % WeißGut lesbar auf Dunkel
Farben & Kontraste
Exakte Farbwerte mit Rolle (Hintergrund, Text, Akzent, Warnung) und geprüftem Kontrast, damit Texte für alle lesbar bleiben.
Schriften
Schriftarten, Größen für Überschriften und Fließtext, Zeilenabstand. Schriften lokal einbinden statt von fremden Servern laden.
Abstände & Raster
Ein festes Maßsystem für Abstände, Ecken-Rundungen und Breiten. Es sorgt dafür, dass die Seite „aus einem Guss“ wirkt.
Bausteine
Knöpfe, Karten, Formulare, Menüs – einmal gestaltet, überall gleich. Die KI baut neue Seiten aus diesen Bausteinen.
Bildsprache
Licht, Stimmung, Motive, Verbotenes. Als fertige Prompt-Vorlage, damit KI-Bilder zur Seite passen.
Tonalität
Du oder Sie, kurz oder ausführlich, sachlich oder verspielt. Auch Texte brauchen einen Stil.
Bauen mit KI
Werkzeuge, Arbeitsweise und ein paar Regeln, die viel Ärger sparen.
Im Chat entwerfen
Für erste Entwürfe und einzelne Seiten reicht ein KI-Chat wie Claude oder ChatGPT. Die Vorschau zeigt sofort, wie es aussieht.
Im Projektordner bauen
Sobald es mehrere Seiten werden, arbeiten Coding-Agenten wie Claude Code oder Codex direkt im Ordner der Website: Sie lesen alle Dateien und ändern sie gezielt.
Versionen sichern
Mit Git und einem privaten Repository lässt sich jeder Zwischenstand zurückholen. Mindestens aber: vor jeder größeren Änderung eine Sicherungskopie.
So arbeite ich mit der KI
- Eine Aufgabe pro Runde. „Baue die Kontaktseite“ funktioniert besser als „Mach alles schöner“.
- Style Book und Fragebogen immer mitgeben – oder im Projektordner ablegen, damit die KI sie selbst liest.
- Einfach vor schick. Reines HTML, CSS und etwas JavaScript, ohne schwere Frameworks. Das lädt schnell und läuft bei jedem Hoster.
- Lokal ansehen, dann erst hochladen. Auf großem Bildschirm, auf dem Handy, mit Tastatur statt Maus.
- Übergaben schreiben. Eine kurze Datei pro Aufgabe – was ist fertig, was ist offen – macht die Arbeit über Tage und Werkzeuge hinweg anschlussfähig.
Typische Fallen
Was KI gern baut – und warum man es prüfen sollte.
Fremde Server ohne Not
KI bindet gern Schriften, Bibliotheken oder Icons direkt von fremden Servern ein. Dabei wird die IP-Adresse jedes Besuchers übertragen. Das Landgericht München hat 2022 bei Google Fonts deshalb Schadensersatz zugesprochen. Besser: alles vom eigenen Server laden.
Geheimnisse im Code
API-Schlüssel, Passwörter oder Zugangsdaten haben im Quelltext einer Website nichts zu suchen – alles im Browser ist für jeden lesbar.
Formulare, die nur so aussehen
Ein schönes Kontaktformular verschickt noch lange keine Mail. Jedes Formular einmal echt testen – und gegen Spam absichern.
Die endlose Schleife
Weil Änderungen so leicht sind, hört man nie auf. Ein klares „fertig“ vorher festlegen – und neue Ideen auf eine Liste für später schreiben.
Selbstbewusste Fehler
KI behauptet manchmal, etwas sei erledigt, das nicht funktioniert – oder erfindet Funktionen. Nachsehen statt glauben.
Nur am großen Bildschirm geprüft
Die meisten Besuche kommen vom Handy. Menüs, Tabellen und breite Bilder brechen dort zuerst.
Der Werkzeugkasten
Domain, Hosting, Deployment, Passwortschutz, Grafik, Qualität und Recht – die Bausteine rund um die Seite, die über einen sauberen Livegang entscheiden.
Domain & Hosting
Die Adresse und das Zuhause der Website.
Domain
Der Name der Seite, etwa ibetmax.com. Kurz, gut auszusprechen, ohne Bindestrich-Ketten. Für Deutschland bietet sich .de an, für internationale Auftritte .com.
Hosting
Der Server, auf dem die Dateien liegen. Klassisches Webhosting (z. B. Strato, IONOS, all-inkl) kann auch PHP für Formulare und Passwortschutz. Statisches Hosting (z. B. Netlify, Cloudflare Pages, GitHub Pages) ist schnell und oft kostenlos, aber ohne Server-Logik.
DNS
Das Telefonbuch des Internets: Es verbindet den Domainnamen mit dem Server. Domain und Hosting können bei verschiedenen Anbietern liegen.
SSL-Zertifikat (HTTPS)
Verschlüsselt die Verbindung, zeigt das Schloss im Browser und ist heute Standard. Bei fast allen Hostern kostenlos über Let’s Encrypt.
Deployment: vom Ordner ins Netz
Wie die fertigen Dateien auf den Server kommen.
Per FTP
Der Klassiker: Mit einem Programm wie FileZilla oder WinSCP werden die Dateien in den Webordner des Hosters kopiert. Einfach, überall verfügbar – so läuft auch ibetmax.com. Immer die verschlüsselte Variante SFTP/FTPS wählen.
Per Git
Die Seite liegt in einem Repository, etwa bei GitHub. Jede freigegebene Änderung geht automatisch live, und jeder alte Stand lässt sich zurückholen.
Mit Testumgebung
Größere Umbauten erst auf einer Test-Adresse ansehen, dann übernehmen. Bei kleinen Seiten reicht oft ein unverlinkter Unterordner.
Drei Regeln für jeden Upload
- Der lokale Ordner ist die Quelle der Wahrheit. Nie direkt auf dem Server bearbeiten – sonst überschreibt der nächste Upload die Änderung.
- Vor dem Upload sichern. Ein datierter Sicherungsordner kostet Sekunden und rettet im Ernstfall den Tag.
- Den Knopf drückt ein Mensch. Die KI darf bauen und vorbereiten. Was live geht, entscheidet die verantwortliche Person – bei mir ohne Ausnahme.
Passwortschutz & Arbeitsräume
Bereiche, die nicht jeder sehen soll – und was wirklich schützt.
Nicht jede Seite ist für die Öffentlichkeit gedacht: Entwürfe, Unterlagen für Kunden, ein interner Bereich. Beim Schutz gibt es große Unterschiede – und eine Variante, die nur so aussieht.
Schutz durch den Server
Der Webserver fragt Name und Passwort ab, bevor er überhaupt eine Datei ausliefert – etwa per .htaccess-Schutz im Hosting-Menü. Einfach und solide.
Eigene Anmeldeseite mit Server-Logik
Ein kleines PHP-Skript prüft das Passwort auf dem Server und merkt sich die Anmeldung in einer Sitzung. Schöner gestaltbar – so ist der AI Room auf ibetmax.com geschützt. Passwörter nur als Hash speichern.
Nur unverlinkt
Eine Seite ohne Link ist nicht geheim, nur schwer zu finden. Für harmlose Entwürfe in Ordnung – mit „noindex“, damit Suchmaschinen sie nicht aufnehmen.
Passwort im JavaScript
Kein Schutz. Das Passwort steht im Quelltext und ist mit einem Rechtsklick lesbar. KI schlägt diese Lösung trotzdem gern vor.
Der persönliche Arbeitsraum
Eine Idee, die aus der Praxis entstanden ist: Statt Unterlagen per Mail zu verschicken, bekommt ein Projekt eine eigene Unterseite. Dort liegen Analyse, Empfehlungen, nächste Schritte, ein Glossar und offene Fragen – übersichtlich, im Stil der Seite und jederzeit abrufbar. Wie so ein Arbeitsraum in einer KI-Beratung entsteht, zeigt das Praxisbeispiel Vom Erstgespräch zum KI-Arbeitsraum.
Ob mit oder ohne Passwort, hängt vom Inhalt ab. Vertrauliches gehört hinter Schutz der Stufe 1 oder 2 – und Namen Dritter, Adressen oder Vertragsdetails im Zweifel gar nicht ins Netz.
Grafik, Bilder & Animation
Eigene Bildwelten mit KI – leicht, passend und ehrlich gekennzeichnet.
KI-Bilder im eigenen Stil
Mit der Prompt-Vorlage aus dem Style Book entstehen Bilder, die zur Seite passen. Echte Fotos von Menschen und Orten wirken trotzdem oft stärker – die Mischung macht’s.
Kennzeichnen
Ich markiere KI-Bilder im Alternativtext. Bei realistischen Darstellungen echter Personen, Orte oder Ereignisse verlangt der EU AI Act (Art. 50) ohnehin einen Hinweis.
Leichte Formate
Bilder als WebP, in passender Größe, Titelbilder unter 200 KB. Weiter unten liegende Bilder erst laden, wenn sie gebraucht werden.
Icons & Illustrationen als SVG
Vektorgrafiken bleiben auf jedem Bildschirm scharf, sind winzig und lassen sich per Code einfärben und animieren.
Animation mit Maß
Animationen erklären Abläufe oder lenken den Blick. Wer in den Systemeinstellungen „Bewegung reduzieren“ gewählt hat, bekommt eine ruhige Fassung.
Alternativtexte
Jedes inhaltliche Bild bekommt eine kurze Beschreibung für Screenreader. Rein dekorative Bilder werden bewusst als solche markiert.
Barrierefreiheit, Sicherheit, Sichtbarkeit
Drei Prüfungen, die aus einer hübschen Seite eine gute machen.
Barrierefreiheit
Ausreichende Kontraste, Bedienung per Tastatur, sinnvolle Überschriften, Alternativtexte, verständliche Formulare. Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz für viele Angebote an Verbraucher; Kleinstunternehmen mit Dienstleistungen sind oft ausgenommen. Gut ist es trotzdem – für alle.
Sicherheits-Check
HTTPS überall, Sicherheits-Header beim Server, keine Geheimnisse im Code, Formulare mit Spamschutz, keine offenen Ordner, eigene Fehlerseite, getrennte Passwörter für geschützte Bereiche. Ersetzt keinen Penetrationstest, schließt aber die häufigsten Lücken.
Sichtbarkeit
Aussagekräftige Seitentitel und Beschreibungen, eine Sitemap, strukturierte Daten, schnelle Ladezeit. Beispiel ibetmax.com: Durch Komprimierung schrumpfte die Startseite beim Audit von 315 auf 66 KB.
Vertiefung: Website Quality Framework 2026 und KI für Websites & Sichtbarkeit.
Recht & Verantwortung
Was jede geschäftsmäßige Website in Deutschland braucht.
Impressum
Name, Anschrift, Kontakt und je nach Fall weitere Angaben. Von jeder Seite aus mit einem Klick erreichbar.
Datenschutzerklärung
Beschreibt, welche Daten wie verarbeitet werden – vom Server-Log bis zum Formular. Etablierte Generatoren wie eRecht24 sind ein guter Ausgangspunkt.
Cookie-Banner
Wer auf Tracking und Einbettungen von Dritten verzichtet, braucht oft gar keins. Die beste Einwilligung ist die, die man nicht einholen muss.
Rechte an Bildern & Texten
Fremde Fotos, Logos oder Texte nur mit Erlaubnis. Auf Fotos erkennbare Personen müssen einverstanden sein.
Die Website als Teil eines Ablaufs
Wenn die Seite nicht nur informiert, sondern Arbeit abnimmt.
Spätestens beim Kontaktformular stellt sich die Frage: Was passiert danach? Eine Website kann mehr sein als eine Visitenkarte – sie kann der Anfang eines Ablaufs sein, der sich teilweise automatisieren lässt.
Anfragen sortiert
Formularanfragen landen strukturiert im Postfach, in einer Tabelle oder im Kundensystem – statt als lose Mail.
Wiederkehrendes automatisiert
Eingangsbestätigung, Terminvorschlag, Erinnerung: Werkzeuge wie Make oder Zapier verbinden Website, Mail und Kalender.
Mensch an der richtigen Stelle
Antworten an Kunden schlägt die Automation höchstens vor. Abschicken tut ein Mensch.
Checkliste: Vor dem Livegang
Zwölf Fragen, bevor die Seite öffentlich wird.
Wo Begleitung den Unterschied macht
Alles auf dieser Seite lässt sich allein schaffen. An diesen Stellen hilft ein zweites Paar Augen besonders.
Fragebogen & Style Book
Gemeinsam die richtigen Fragen stellen, Antworten schärfen und daraus ein Style Book ableiten, mit dem die KI verlässlich arbeitet.
Einrichtung
Domain registrieren, Hosting wählen, HTTPS, Projektordner, Versionierung und Deployment so aufsetzen, dass es danach ohne Hilfe läuft.
Gemeinsam bauen
Die ersten Seiten zusammen mit der KI entwickeln, Grafiken und Animationen im eigenen Stil, Arbeitsräume und geschützte Bereiche.
Prüfen & Übergeben
Barrierefreiheit, Sicherheit und Sichtbarkeit prüfen – und eine Anleitung, mit der die Seite selbstständig gepflegt werden kann.
Mein Ziel ist dabei immer Hilfe zur Selbsthilfe: Am Ende soll die Person die Seite selbst verstehen, ändern und weiterentwickeln können.
Passt dazu
Diese Wissenskarten vertiefen Qualität, Sichtbarkeit und Sicherheit.
Quellen & Stand
Stand: Oktober 2026
- Andrej Karpathy prägte den Begriff „Vibe Coding“ in einem Beitrag auf X im Februar 2025
- Barrierefreiheitsstärkungsgesetz (BFSG) – in Kraft seit 28.06.2025, Ausnahme für Kleinstunternehmen bei Dienstleistungen
- Verordnung (EU) 2024/1689 – KI-Verordnung (EU AI Act), Art. 50: Transparenzpflichten
- LG München I, Urteil vom 20.01.2022, Az. 3 O 17493/20 – dynamische Einbindung von Google Fonts
- eRecht24 – Generatoren für Impressum und Datenschutzerklärung
Diese Seite erklärt Prinzipien statt Klickpfade: Menüs und Werkzeuge ändern sich, die Logik bleibt. Genannte Anbieter und Werkzeuge sind Beispiele – herstellerneutral, ohne Werbung oder Partnerlinks.