Website selber erstellen mit Vibe Coding: So entstand die RV-Arbon-Beta
- vor 11 Minuten
- 6 Min. Lesezeit
Eine einfache Website kann bei einer Agentur schnell mehrere Tausend Franken kosten. Gleichzeitig war es noch nie so realistisch, eine professionelle Beta selbst zu entwickeln, auch ohne Programmierkenntnisse.
Genau das habe ich beim RV Arbon ausprobiert. Aus vorhandenen Unterlagen, klaren Zielen, mehreren Feedbackschlaufen und vielen Prüfungen entstand eine neue Vereinswebsite unter einer Testdomain. Ich habe dabei keine Zeile Code selber geschrieben.
Der Code ist trotzdem real. Codex hat ihn erzeugt und verändert. Meine Aufgabe war eine andere: Ziel und Anforderungen klären, Quellen liefern, Entscheide treffen, Resultate prüfen und Verbesserungen verlangen.
Das ist für mich Vibe Coding in einer brauchbaren Form. Nicht ein Prompt und fertig, sondern eine neue Art, digitale Produkte zu entwickeln.
Eine einfache Website ist schnell ein Projekt für mehrere Tausend Franken
Eine Website besteht nicht nur aus ein paar Texten und Bildern. Struktur, Gestaltung, mobile Darstellung, Suchmaschinenoptimierung, Formulare, Datenschutz, Betrieb und spätere Pflege gehören ebenfalls dazu.
Eine aktuelle Einordnung einer Ostschweizer Agentur zeigt, dass eine einfache Unternehmenswebsite bereits bei rund CHF 3'000 beginnen kann. Für diesen Praxisvergleich verwende ich bewusst eine Spanne von CHF 3'000 bis CHF 5'000. Sie ist keine allgemeingültige Marktstatistik, verdeutlicht aber, weshalb selbst überschaubare Projekte schnell mehrere Tausend Franken kosten können.
Das bedeutet nicht, dass Agenturen zu teuer sind. Eine gute Agentur übernimmt Strategie, Design, Text, Technik, Projektleitung, Qualitätssicherung und oft auch den laufenden Betrieb. Wer diese Arbeit vollständig abgeben möchte, kauft nicht bloss ein paar Seiten, sondern Erfahrung und Verantwortung ein.
Neu ist etwas anderes: Wer bereit ist, selber zu denken, Inhalte aufzubereiten, klare Entscheide zu treffen und sorgfältig zu prüfen, kann heute einen viel grösseren Teil der Umsetzung selbst übernehmen.
Was Vibe Coding für Einsteiger bedeutet
Beim Vibe Coding beschreibst du in normaler Sprache, was eine Website können und wie sie wirken soll. Ein KI-gestützter Entwicklungsagent übersetzt dieses Briefing in echten Code. Danach schaust du dir das Ergebnis an, gibst Feedback und lässt gezielt weiterarbeiten.
Ein typischer Auftrag klingt nicht so:
Bau mir eine moderne Website.
Er ist konkreter:
Erstelle eine mobile Startseite für einen Radsportverein. Sie soll Rennvelo, Gravel, MTB, E-MTB und Kids Bike als gemeinsame Velofamilie zeigen. Neue Interessierte müssen sofort zu den nächsten Terminen, Gruppen und zum Schnupperangebot gelangen. Nutze die bestehenden Vereinsunterlagen als Quelle und markiere unbestätigte Angaben sichtbar.
Der Unterschied liegt im Briefing. Je klarer Ziel, Zielgruppe, Inhalte, Grenzen und Qualitätskriterien sind, desto brauchbarer wird das Resultat.
OpenAI beschreibt ChatGPT Work als Arbeitsmodus für substanzielle Aufgaben mit überprüfbaren Ergebnissen. Dateien, Werkzeuge und mehrere Arbeitsschritte können zusammengeführt werden. Der Mensch kann den Fortschritt begleiten, die Richtung ändern und wichtige Aktionen freigeben.
Für die technische Umsetzung kam Codex zum Einsatz. Codex arbeitete mit den Projektdateien, erzeugte Code, prüfte Seiten und setzte Korrekturen um. ChatGPT Work bildete den Arbeitsrahmen, Codex übernahm die konkrete agentische Umsetzung.
Der Praxisfall RV Arbon
Der RV Arbon verbindet Radsporttradition seit 1911 mit Rennvelo, Gravel, MTB, E-MTB und Nachwuchsarbeit. Die neue Website sollte all das als eine gemeinsame Velofamilie zeigen und gleichzeitig für neue Interessierte leicht verständlich sein.
Die Ausgangslage war typisch für viele Organisationen:
Informationen lagen in verschiedenen Dokumenten und auf der bisherigen Website.
Inhalte hatten nicht überall denselben Aktualitätsstand.
Termine, Gruppen, Routen, Verein, Kids Bike und Bikerennen brauchten eine klare Struktur.
Desktop und Mobile mussten separat funktionieren.
Die bestehende offizielle Website durfte während der Entwicklung nicht verändert werden.
Darum entstand zuerst eine getrennte Beta unter staging.rvarbon.ch. Sie ist öffentlich per Link erreichbar, aber mit noindex von der Suchmaschinenindexierung ausgeschlossen. Die offizielle Vereinswebsite bleibt davon getrennt.
So ist die Beta entstanden
1. Ziel und Grenzen klären
Am Anfang stand nicht die Frage nach Farben oder Animationen. Zuerst musste klar sein, wofür die Website da ist, wen sie anspricht und welche Inhalte öffentlich sein dürfen.
Für den RV Arbon bedeutete das unter anderem: neue Interessierte abholen, alle Bike-Arten verbinden, Tradition und Nachwuchs zeigen und klare Einstiege zu Terminen, Gruppen, Kids Bike, Bikerennen und Mitgliedschaft schaffen.
2. Quellen statt Fantasie verwenden
Bestehende Vereinsunterlagen, das Brandbook, freigegebene Dokumente und die bisherige Website bildeten die Grundlage. Unbestätigte Angaben wurden nicht einfach als Fakten übernommen.
Das ist beim Arbeiten mit KI entscheidend. Sie kann Inhalte sehr überzeugend formulieren. Überzeugend ist aber nicht automatisch richtig.
3. Struktur und erste Version erstellen
Aus den Zielen und Quellen entstand zuerst eine Seitenstruktur. Danach setzte Codex eine erste funktionierende Version um. Diese Version musste noch nicht perfekt aussehen. Sie musste zeigen, ob Navigation, Inhalte und Einstiege grundsätzlich funktionieren.
4. Feedback in konkrete Änderungen übersetzen
Rückmeldungen wurden nicht als allgemeines «gefällt mir» oder «gefällt mir nicht» behandelt. Sie wurden in überprüfbare Aufträge übersetzt: Navigation kompakter machen, Vereinsdokumente zusammenführen, mobile Abstände verbessern oder einen Einstieg sichtbarer platzieren.
Genau hier wird Vibe Coding produktiv. Eine Rückmeldung wird direkt zur nächsten Iteration.
5. Auf einer sicheren Testdomain veröffentlichen
Die Beta wurde als separate WordPress-Installation im bestehenden Hosting eingerichtet. Sie besitzt eine eigene Testdomain und ein SSL-Zertifikat. Die produktive Website und die E-Mail-Konten blieben unverändert.
Auch OpenAI empfiehlt beim Website-Praxisfall mit Codex, zuerst mit einer überprüfbaren Vorschau zu arbeiten und Produktionsänderungen ausdrücklich zu behandeln.
6. Desktop, Mobile und öffentliche Grenzen prüfen
Eine Website ist nicht fertig, weil sie auf einem grossen Bildschirm gut aussieht. Die wichtigsten Seiten wurden deshalb separat auf Desktop und Mobile geprüft. Zusätzlich wurde kontrolliert, welche Inhalte öffentlich sichtbar sind und welche Angaben vor einer späteren offiziellen Veröffentlichung noch bestätigt werden müssen.
Die Beta ist damit ein echter Arbeitsstand. Sie funktioniert, sie kann betrachtet werden und sie zeigt die neue Richtung. Sie ist aber bewusst noch nicht die endgültige offizielle Vereinswebsite.
Was die KI übernommen hat
Codex unterstützte bei:
Strukturierung und technischer Umsetzung der Seiten
Erzeugung und Änderung von HTML, CSS, JavaScript und WordPress-Dateien
Übertragung von Feedback in konkrete Anpassungen
Prüfung von Links, Seitenzuständen und responsiver Darstellung
Einrichtung und Kontrolle der Vorschau
Dokumentation von Änderungen und offenen Punkten
Ich musste dafür die verwendeten Programmiersprachen nicht selber beherrschen. Ich musste aber beschreiben können, was ich erreichen wollte und woran ich ein gutes Ergebnis erkenne.
Was weiterhin beim Menschen bleibt
Vibe Coding nimmt mir das Tippen von Code ab. Es nimmt mir nicht die Verantwortung ab.
Beim Menschen bleiben:
Ziel und Prioritäten
Auswahl und Prüfung der Quellen
inhaltliche und gestalterische Entscheide
Datenschutz, Rechte und Freigaben
Tests auf echten Geräten und in realen Abläufen
Entscheidung über eine Veröffentlichung
Verantwortung für das sichtbare Ergebnis
Das ist der Punkt, der in vielen schnellen KI-Demos fehlt. Eine Website kann technisch in kurzer Folge verändert werden. Ob sie korrekt, verständlich, rechtlich sauber und für die Organisation passend ist, muss trotzdem geprüft werden.
Einfacher ja. Ein-Prompt-Projekt nein.
Mit den heutigen Werkzeugen ist der Einstieg deutlich leichter geworden. Du brauchst keine Programmierausbildung, um eine Website-Idee in eine funktionierende Beta zu verwandeln.
Du brauchst aber:
ein klares Ziel
brauchbare Inhalte und Quellen
die Fähigkeit, präzises Feedback zu geben
Geduld für mehrere Iterationen
einen Qualitätscheck vor jeder Veröffentlichung
ein Bewusstsein für Datenschutz, Bildrechte und Betrieb
Das ist gut machbar. Es verlangt aber weiterhin saubere Arbeit.
Wann eine Agentur weiterhin sinnvoll ist
Nicht jedes Websiteprojekt sollte selbst umgesetzt werden. Eine Agentur bleibt besonders sinnvoll, wenn eine umfassende Markenstrategie, professionelles Foto- und Textmaterial, komplexe Schnittstellen, ein Onlineshop, hohe Verfügbarkeit oder eine langfristige technische Betreuung benötigt werden.
Vibe Coding erweitert die Möglichkeiten. Es macht Agenturen nicht überflüssig. Es gibt dir aber eine echte Wahl: Du kannst einen Prototyp selbst entwickeln, Anforderungen besser verstehen und gezielt entscheiden, welche Aufgaben du selber übernimmst und wo externe Unterstützung ihren grössten Wert schafft.
So kannst du selbst starten
Wenn du eine erste Website mit Vibe Coding entwickeln möchtest, beginne nicht mit dem Tool. Beantworte zuerst fünf Fragen:
Für wen ist die Website gedacht?
Was sollen Besucherinnen und Besucher als Erstes verstehen?
Welche drei Handlungen sollen besonders einfach sein?
Welche Quellen und Inhalte sind verlässlich?
Was darf die KI verändern und wo muss sie vor einer Aktion stoppen?
Aus diesen Antworten entsteht dein erstes Briefing. Danach folgt eine kleine Vorschau, nicht sofort die produktive Website. Prüfe die Vorschau, sammle konkretes Feedback und verbessere sie Schritt für Schritt.
Fazit
Der Praxisfall RV Arbon zeigt: Eine funktionierende Website ist heute auch für Menschen ohne Programmierkenntnisse realistisch. Nicht weil kein Code mehr nötig wäre, sondern weil Codex den Code erzeugen kann und der Mensch die Arbeit über Ziele, Kontext, Feedback und Freigaben steuert.
Die wichtigste Fähigkeit ist deshalb nicht Programmieren. Es ist gutes Briefing, kritisches Prüfen und die Bereitschaft, Verantwortung für das Ergebnis zu übernehmen.
Dieser Beitrag wurde mit KI-Unterstützung erstellt und von einem Menschen geprüft.
Kommentare