Wie erstelle ich mit Vibe Coding eine Website für mein Geschäft?

Welche Website du mit Vibe Coding für deinen Betrieb bauen kannst

Vibe Coding heißt: Du sagst, was du willst, und die KI schreibt den Code. Für kleine Betriebe ist das ideal, denn eine gute Website muss vor allem eins: deinen Kunden schnell die Infos geben, die sie suchen.

• Laden: Sortiment, Öffnungszeiten, Anfahrt und aktuelle Angebote.
• Restaurant oder Café: Speisekarte, Fotos, Tischreservierung per Formular und ein QR-Code für die Karte auf dem Tisch.
• Friseur- oder Kosmetiksalon: Leistungen mit Preisen, Team, Galerie und Terminanfrage.
• Praxis, Studio oder Kanzlei: Schwerpunkte, Ablauf, Kontakt und häufige Fragen.

Du brauchst dafür keine Vorkenntnisse. Wenn du einem Freund erklären kannst, wie dein Geschäft funktioniert, kannst du auch deine Website beschreiben.

Was du vor dem Start bereitlegen solltest

Du kannst auch ganz spontan loslegen, aber mit ein paar Minuten Vorbereitung wird die erste Version deutlich besser. Leg dir diese Dinge zurecht:

• Grunddaten: Name, Adresse, Telefonnummer, Öffnungszeiten und eventuelle Ruhetage.
• Angebot: eine Liste deiner Leistungen oder Produkte, gern mit Preisen und kurzen Beschreibungen.
• Fotos: Bilder von deinem Laden, deinem Team oder deinen Produkten. Ein paar Handyfotos reichen für den Anfang.
• Logo und Farben: Wenn du schon ein Logo hast, häng es im Chat an. Der Agent übernimmt die Farben für die Website.
• Vorbilder: zwei oder drei Websites, die dir gefallen, als Screenshot.

Fehlt dir etwas davon, ist das kein Problem. Der Agent setzt dann passende Platzhalter oder KI-Bilder ein, und du tauschst sie später im Admin-Panel oder im Chat gegen deine echten Inhalte aus. Wichtig ist nur, dass du die Platzhalter kontrollierst, bevor die Website online geht.

Schritt für Schritt: von der Idee zur fertigen Website

1. Beschreiben: Lege ein kostenloses Konto an, wähle „Website“ und schreib in den Chat, was du brauchst. Ist etwas unklar, stellt dir der Agent ein oder zwei kurze Fragen mit Antwortvorschlägen.
2. Planen (optional): Im Modus „Planen“ denkt der Agent mit dir über Seiten und Inhalte nach, ohne Dateien anzufassen. Wenn du schon weißt, was du willst, startest du direkt mit „Erstellen“.
3. Zuschauen: Die Website entsteht in einer Live-Vorschau neben dem Chat, in Handy- oder Desktop-Ansicht.
4. Verfeinern: Zeig in der Vorschau auf ein Element, etwa eine Überschrift oder ein Foto, und sag, was sich ändern soll. Du kannst auch Fotos oder Screenshots im Chat anhängen.
5. Zeigen und online bringen: Jedes Projekt hat eine private Vorschau-Adresse wie deinname.previewmyvibe.com, die nur du und die Personen öffnen, denen du Zugriff gibst. Den Namen wählst du selbst. Für den echten Start lädst du den Code herunter und stellst ihn auf ein Hosting deiner Wahl.

Ein gutes Beispiel für deine Anfrage und warum es funktioniert

Die KI kann nur mit dem arbeiten, was du ihr gibst. Eine vage Anfrage wie „Mach mir eine Website für meinen Salon“ führt zu einer brauchbaren, aber allgemeinen Seite. Viel besser ist eine Anfrage mit echten Inhalten:

• der Name deines Betriebs und die Stadt,
• deine Leistungen mit Preisen,
• die Öffnungszeiten und die Adresse,
• die Stimmung, die die Seite haben soll, zum Beispiel hell und ruhig oder modern und kräftig.

So muss der Agent nichts erfinden, und schon die erste Version ist nah an dem, was du dir vorstellst. Unten auf dieser Seite findest du eine Beispielanfrage, die du direkt kopieren und anpassen kannst.

Schreib außerdem, welche Seiten du brauchst, zum Beispiel Startseite, Leistungen, Über uns und Kontakt. Wenn du das nicht weißt, bitte im Modus „Planen“ einfach um einen Vorschlag. Der Agent schlägt dir eine sinnvolle Struktur für deine Branche vor, und du entscheidest, was bleibt.

Was deine Website mitbringt

• Responsives Design: Die Seite sieht auf dem Handy genauso gut aus wie am Computer.
• Fertiges Admin-Panel: Jede Website hat ihren eigenen Verwaltungsbereich, in dem du Inhalte, Daten, Benutzer und Dateien pflegst, zum Beispiel neue Preise oder Fotos.
• Daten und Formulare: Braucht deine Seite eine Reservierungs- oder Kontaktanfrage, legt der Agent die nötigen Tabellen selbst an. Im Tab „Backend“ siehst du sie.
• KI-Bilder: Hast du noch keine guten Fotos, erzeugt der Agent passende Bilder und setzt sie an die richtige Stelle.
• QR-Codes: für die Speisekarte, das WLAN oder deine Kontaktdaten.
• Versionen: Jede Änderung wird als Version mit Changelog gespeichert, und du kannst jederzeit zurückgehen.

Tipps für ein besseres Ergebnis

• Starte klein: Lass zuerst die Startseite bauen und füge dann Seite für Seite hinzu.
• Eine Änderung pro Nachricht: So siehst du sofort, was passiert ist, und kannst gezielt nachbessern.
• Zeig statt zu erklären: Ein Screenshot einer Website, die dir gefällt, oder ein Foto deines Ladens sagt oft mehr als lange Beschreibungen.
• Nutze deine echten Texte: Wenn du schon eine Speisekarte oder Preisliste hast, kopiere sie in den Chat.
• Keine Angst vor Fehlern: Schlägt etwas fehl, repariert der Agent den Build selbst, und Fehler im Browser schickst du ihm mit einem Klick.

So bringst du deine Website online

Solange du baust, ist deine Website unter ihrer privaten Vorschau-Adresse erreichbar. Die öffnen nur du und die Personen, denen du Zugriff gibst, ideal, um sie deinem Team oder einer Freundin zu zeigen und Feedback zu sammeln. Du kannst die Seite schließen, während der Agent arbeitet: Das Ergebnis ist fertig, wenn du zurückkommst.

Für den echten Start lädst du den kompletten Quellcode als ZIP herunter, auch kostenlos: Website, Admin-Panel, PHP-API und Datenbankdaten, bereit für Docker oder ein normales Hosting. Den stellst du auf das Hosting deiner Wahl, oder du lässt das jemanden für dich erledigen. Hosting mit einem Klick direkt aus CodeMyVibe kommt bald. Du kannst dein Projekt außerdem mit GitHub, GitLab oder Bitbucket verbinden.

Ist die Website online, teilst du die Adresse mit deinen Kunden, auf Social Media oder über einen QR-Code im Schaufenster. Inhalte pflegst du über das Admin-Panel, größere Änderungen wünschst du dir im Chat und lädst danach die neue Version herunter.

Häufige Fragen