Mit der Vibe-Coding-Funktion kannst du nicht nur Abschnitte oder Seiten erstellen, sondern komplette Interaktionen, Layouts und Website-Features generieren lassen.
In den folgenden Beispielen zeigen wir dir typische Anwendungsfälle, die du direkt ausprobieren kannst.
Sprachumschalter (Language Switcher)
Mit der KI kannst du einen automatischen Sprachumschalter für deine Website erstellen lassen.
Das funktioniert jedoch nur, wenn die gesamte Seite mit Vibe-Coding erstellt wurde. Bei einzelnen klassischen Abschnitten ist diese Funktion nicht möglich. Die KI erstellt dabei pro Abschnitt separate Sprachversionen (z.B. Deutsch & Englisch).
So gehst du vor:
Schritt 1: Seite öffnen
Öffne deine Seite in Onepage.
Schritt 2: KI-Chat öffnen
Klicke bei einem beliebigen Abschnitt oben rechts auf Chat in Onepage und entferne den ausgewählten Abschnitt über das "X", sodass nicht nur ein einzelner Abschnitt, sondern die komplette Seite im Kontext des Chats berücksichtigt wird.
Schritt 3: Prompt eingeben
Du kannst nun deinen Prompt formulieren und dabei deine Anforderungen genau beschreiben.
Beispielprompt:
"Erstelle eine Benutzeroberfläche mit einem Sprachumschalter (Language Switcher) oben rechts in der Ecke der Seite.
Der Sprachumschalter soll folgende Sprachen unterstützen:
Deutsch (DE), Englisch (EN), Spanisch (ES), Französisch (FR)
Anforderungen:
Dropdown oder kompakter Button (DE / EN / ES / FR)
Fixiert oben rechts (sticky/fixed position)
Beim Sprachwechsel soll sich der gesamte Seiteninhalt anpassen
Optional: sanfte Animation beim Wechsel
Aktive Sprache soll visuell hervorgehoben sein"
Schritt 4: Vorschlag der KI prüfen
Nachdem du den Prompt abgeschickt hast, analysiert die KI zunächst die technische Machbarkeit deiner Anfrage und erklärt, wie der Sprachumschalter umgesetzt werden kann.
Dabei kann die KI darauf hinweisen, dass einzelne Abschnitte in separaten Umgebungen laufen und deshalb nicht automatisch alle Inhalte der Seite übersetzen können. In diesem Fall schlägt die KI eine Lösung vor, bei der ein zentraler Sprachumschalter erstellt wird und die einzelnen Bereiche der Seite auf den Sprachwechsel reagieren.
Lies dir die vorgeschlagene Umsetzung aufmerksam durch und bestätige sie, falls sie deinen Anforderungen entspricht.
📌 Hinweis: Die Antwort der KI kann je nach Aufbau deiner Seite variieren.
Schritt 5: Ergebnis prüfen
Sobald die KI die Umsetzung abgeschlossen hat, kannst du den Sprachumschalter auf deiner Seite testen.
Falls das Ergebnis noch nicht deinen Vorstellungen entspricht, kannst du der KI weitere Anweisungen geben. Oft sind 2-3 zusätzliche Iterationen erforderlich, bis das gewünschte Ergebnis erreicht wird.
Beschreibe dabei möglichst genau, was angepasst werden soll. Screenshots können ebenfalls hilfreich sein, da die KI dadurch besser nachvollziehen kann, welche Änderungen du dir wünschst.
Schritt 6: Weitere Anpassungen vornehmen
Nachdem der Sprachumschalter erfolgreich erstellt wurde, kannst du die KI jederzeit bitten, weitere Sprachen hinzuzufügen oder zusätzliche Bearbeitungsmöglichkeiten einzurichten.
Besonders praktisch ist es, sogenannte Controls erstellen zu lassen. Dadurch kannst du die Texte für jede Sprache später direkt im Editor bearbeiten, ohne die KI darum zu bitten.
Beispiel-Prompt:
"Füge bitte Italienisch (IT) und Niederländisch (NL) zum Sprachumschalter hinzu. Erstelle außerdem Controls für alle Texte, damit ich die Inhalte jeder Sprache direkt im Editor bearbeiten kann. Die bestehenden Übersetzungen sollen erhalten bleiben."
📌 Hinweis: Du kannst die KI auch bitten, einzelne Bereiche deiner Seite mehrsprachig zu machen oder bestehende Übersetzungen zu verbessern.
Anpassung für Mobile, Tablet & Desktop
Mit der KI kannst du das Layout deiner Abschnitte gezielt für verschiedene Bildschirmgrößen optimieren. Dabei kannst du festlegen, wie Elemente auf Desktop-, Tablet- und Mobilgeräten dargestellt werden sollen.
Mögliche Anpassungen sind beispielsweise:
Anordnung von Elementen
Reihenfolge von Bildern und Texten
Schriftgrößen
Abstände (Padding & Margin)
Anzahl der Spalten
Größe von Bildern, Icons oder Buttons
Ausrichtung von Inhalten
Sichtbarkeit einzelner Elemente auf bestimmten Geräten
Schritt 1: Abschnitt auswählen
Scrolle zum gewünschten Abschnitt und öffne den KI-Chat.
Schritt 2: Anforderungen beschreiben
Beschreibe möglichst genau, wie der Abschnitt auf den verschiedenen Geräten aussehen soll.
Beispiel 1: Timeline anpassen
"Die Timeline soll auf Desktop weiterhin vertikal dargestellt werden. Auf Tablet und Mobilgeräten soll sie in eine horizontale Timeline umgewandelt werden, die per Wischen oder Scrollen durchlaufen werden kann."
Ergebnis:
Beispiel 2: Gleichgewicht ändern
"Auf Desktop soll das Hauptbild groß und dominant bleiben. Auf Tablet soll das Bild verkleinert und weniger prominent dargestellt werden. Auf Mobile soll das Bild nur als Hintergrund-Element mit leichter Transparenz erscheinen."
Ergebnis:
Schritt 3: Ergebnis prüfen
Veröffentliche die Seite und teste anschließend die Darstellung auf verschiedenen Geräten oder Bildschirmgrößen. Alternativ kannst du die Entwicklertools deines Browsers nutzen, um unterschiedliche Geräte zu simulieren:
Öffne dazu die Entwicklertools (F12 oder Strg + Shift + I auf Windows, Cmd + Option + I auf Mac) und aktiviere anschließend die Geräteansicht. Dort kannst du verschiedene Bildschirmgrößen wie Smartphone, Tablet oder Desktop auswählen und direkt testen, wie deine Seite dargestellt wird.
Falls das Ergebnis noch nicht deinen Vorstellungen entspricht, kannst du der KI gezielt Feedback geben und genau beschreiben, was angepasst werden soll.
Schritt 4: Responsive Controls erstellen lassen
Wenn du die Darstellung später selbst steuern möchtest, kannst du die KI bitten, entsprechende Controls anzulegen.
Beispiel-Prompt:
"Erstelle responsive Controls für diesen Abschnitt. Ich möchte die Ausrichtung, die Anzahl der Spalten, die Schriftgrößen und die Abstände separat für Desktop, Tablet und Mobilgeräte über die Controls konfigurieren können."
Dadurch kannst du viele Einstellungen später direkt im Editor anpassen, ohne erneut Änderungen durch die KI vornehmen zu lassen.
📌 Hinweis: Mehrere Iterationen können notwendig sein. Je genauer deine Beschreibung (gern mit Screenshots), desto besser wird das Ergebnis.
Einheitlicher Hintergrund für die gesamte Seite
Du kannst einen durchgehenden Hintergrund für mehrere Abschnitte oder die gesamte Seite erstellen lassen.
So gehst du vor:
Schritt 1: Seite öffnen
Öffne deine Seite in Onepage.
Schritt 2: KI-Chat öffnen
Klicke bei einem beliebigen Abschnitt oben rechts auf Chat in Onepage und entferne den ausgewählten Abschnitt über das "X", sodass nicht nur ein einzelner Abschnitt, sondern die komplette Seite im Kontext des Chats berücksichtigt wird.
Schritt 3: Prompt eingeben
Jetzt kannst du den gewünschten Hintergrund direkt über einen Prompt definieren. Formuliere dabei deinen Wunsch möglichst klar und konkret.
Beispielprompt:
"Verwende das folgende Bild als durchgängigen Hintergrund für die gesamte Seite. Der Hintergrund soll sich über alle Abschnitte hinweg erstrecken und durchgehend sichtbar sein. Die einzelnen Abschnitte bleiben dabei klar voneinander getrennt, sollen jedoch optisch auf diesem gemeinsamen Hintergrundbild "liegen" und sich harmonisch darauf beziehen."
Du kannst das gewünschte Bild direkt im Chat hochladen, entweder:
per Copy & Paste direkt in das Chatfenster, oder
über das "+"-Symbol deines Geräts zum Hochladen.
📌 Hinweis: Du kannst nicht nur eigene Bilder verwenden, sondern den Hintergrund auch direkt von der KI erstellen lassen. Beschreibe dafür den gewünschten Hintergrund so genau wie möglich, zum Beispiel:
Farben
Stimmungen
Lichtverhältnisse
Effekte (z.B. Blur, Glow, Noise)
ggf. Animationen oder Bewegungsgefühl
Je detaillierter deine Beschreibung ist, desto besser kann der Hintergrund passend zur Seite generiert werden.
Chatbot als Website-Widget
Mit Vibe Coding kannst du dir einen eigenen Chatbot (nicht KI-basiert) für deine Website erstellen lassen. Dieser kann Besucher anhand der Informationen beraten, die du ihm im Prompt zur Verfügung stellst.
Der Chatbot kann beispielsweise:
häufig gestellte Fragen beantworten,
Öffnungszeiten oder Kontaktdaten nennen,
Besucher zu Formularen oder Unterseiten weiterleiten,
Informationen zu Produkten oder Dienstleistungen bereitstellen,
oder als allgemeiner Ansprechpartner auf deiner Website dienen.
Je detaillierter du den Prompt formulierst, desto besser kann der Chatbot auf deine Besucher eingehen.
So gehst du vor:
Schritt 1: KI-Chat öffnen
Klicke bei einem beliebigen Abschnitt oben rechts auf Chat in Onepage und entferne den ausgewählten Abschnitt über das "X", sodass nicht nur ein einzelner Abschnitt, sondern die komplette Seite im Kontext des Chats berücksichtigt wird.
Schritt 2: Prompt eingeben
Beschreibe nun möglichst genau, wie sich dein Chatbot verhalten soll.
Dazu gehören beispielsweise:
Name des Unternehmens
Kontaktdaten
Öffnungszeiten
angebotene Produkte oder Dienstleistungen
häufig gestellte Fragen
gewünschte Tonalität (z.B. freundlich, professionell oder locker)
Verhalten bei unbekannten Fragen
Weiterleitungen zu Formularen oder bestimmten Seiten
Position des Chatbots auf der Website
Je mehr Informationen du dem Chatbot gibst, desto hilfreicher und natürlicher werden seine Antworten.
Beispielprompt:
"Erstelle einen Chatbot für mein italienisches Restaurant. Der Chatbot soll Besucher freundlich, natürlich und hilfsbereit beraten, so, als würde ein echter Mitarbeiter antworten.
Grundinformationen zum Restaurant:
Name: Neo Crust
Adresse: Hackenstraße 7, 80331 München
Öffnungszeiten: täglich 12:00 - 23:00 Uhr
Reservierungen: ausschließlich über ein Online-Formular
Allergien: glutenfreie Optionen verfügbar
Einbindung auf der Website:
Der Chatbot soll auf der gesamten Website verfügbar sein und als festes Element eingebunden werden, z.B. als Chat-Widget unten rechts auf der Seite. Er soll jederzeit geöffnet werden können und dauerhaft zugänglich bleiben.
Der Chatbot soll:
freundlich, warm und einladend wirken
natürlich formulieren (keine reinen Stichpunkt-Antworten)
beratend statt nur informierend antworten
kurze, verständliche Sätze verwenden
aktiv weiterhelfen und Nutzer durch den Prozess führen
Beispiel für Antwortverhalten:
Wenn jemand fragt: "Wie sind eure Öffnungszeiten?"
soll der Bot nicht nur antworten: "12-23 Uhr"
sondern z.B.: "Wir haben täglich von 12:00 bis 23:00 Uhr für dich geöffnet, du kannst uns also sowohl zum Mittagessen als auch am Abend besuchen."
Typische Fragen (inkl. gewünschtem Verhalten):
Öffnungszeiten & Besuch
freundlich erklären, ggf. Zusatzinfo geben
auf Restaurantatmosphäre eingehen
Speisekarte / Essen
italienische Gerichte erwähnen (Pizza, Pasta, Antipasti etc.)
bei Unsicherheit eher allgemein beraten statt zu raten
Allergien / Ernährung
aktiv auf glutenfreie Optionen hinweisen
verantwortungsvoll und vorsichtig antworten
Beispiel: "Ja, wir bieten glutenfreie Optionen an. Sag unserem Team bei der Bestellung einfach kurz Bescheid, dann helfen wir dir gerne weiter."
Reservierungen:
immer aktiv zum Reservierungsformular führen
keine direkte Buchung im Chat
Beispiel: "Gerne kannst du direkt über unser Reservierungsformular einen Tisch reservieren, ich leite dich gerne dorthin."
Unbekannte Informationen:
nichts erfinden
freundlich bleiben
auf Kontaktmöglichkeit verweisen
Beispiel: "Dazu habe ich gerade keine sicheren Informationen. Am besten kontaktierst du uns kurz telefonisch unter +49 89 123456, dann helfen wir dir direkt weiter."
Zusätzliche typische Fragen
vegane / vegetarische Optionen (Ja)
beliebte Pizzen (Pizza Hawaii & Pizza Tonno)
Sitzplätze draußen (Ja)
Kindergerichte (Ja)
spontane Besuche vs. Reservierung (spontan wäre möglich, bei mehreren Personen und ab 20 Uhr empfehlen wir eine Reservierung)
Lieferung oder nur Vor-Ort-Service (nur Vor-Ort-Service)
Der Chatbot soll:
Besucher aktiv zur Reservierung führen
Unsicherheiten reduzieren
ein warmes, italienisches Restaurantgefühl vermitteln
wie ein echter Gastgeber wirken"
📌 Hinweis: Die Generierung kann etwas Zeit in Anspruch nehmen, bitte habe etwas Geduld.
Schritt 3: Chatbot testen
Nach der Fertigstellung kannst du deinen Chatbot direkt auf der Website testen und ihm verschiedene Fragen stellen. So kannst du prüfen, ob er wie gewünscht antwortet und alle wichtigen Informationen kennt.
Sollte dir die Art, wie der Chatbot schreibt, noch nicht gefallen oder sollten Informationen fehlen, kannst du diese jederzeit im KI-Chat ergänzen oder anpassen.
Gib der KI einfach neue Anweisungen, beispielsweise zur Tonalität, zum Antwortverhalten oder zu zusätzlichen Informationen, die der Chatbot kennen soll. Du kannst den Chatbot beliebig oft weiter optimieren, bis er genau deinen Vorstellungen entspricht.
Schritt 4: Änderungen vornehmen
Du kannst deinen Chatbot auch nach der Erstellung jederzeit direkt über die Controls weiter anpassen und optimieren.
Je nach Chatbot stehen dir dort verschiedene Einstellungsmöglichkeiten zur Verfügung, beispielsweise:
Name des Chatbots / Assistenten ändern
Begrüßungsnachricht anpassen
Unternehmens- oder Restaurantinformationen bearbeiten
Reservierungs- oder Kontaktlink hinterlegen
Schnellantworten hinzufügen, entfernen oder bearbeiten
Farben des Chatfensters anpassen
Position des Floating-Buttons festlegen (z.B. unten rechts oder unten links)
Weitere individuelle Einstellungen je nach Funktionsumfang des Chatbots
So kannst du viele Änderungen direkt über die Oberfläche vornehmen, ohne den Chatbot komplett neu erstellen zu müssen. Klicke dazu einfach auf das Chat-Icon im Editor und nehme die Änderungen vor.
Solltest du größere Anpassungen am Verhalten oder an den Antworten vornehmen wollen, kannst du diese jederzeit zusätzlich über den KI-Chat ergänzen.
Tab-Wechsel
Mit Vibe Coding kannst du interaktive Tab-Bereiche erstellen, mit denen Inhalte übersichtlich auf einer Seite dargestellt werden. Besucher können per Klick zwischen verschiedenen Kategorien wechseln, ohne dass die Seite neu geladen werden muss.
Diese Funktion eignet sich besonders, wenn viele Informationen platzsparend dargestellt werden sollen.
Beispiele:
Fitnessstudio-Wochenplan (Montag bis Sonntag)
Preisübersicht (Basic / Pro / Premium)
Kursangebote nach Tagen oder Kategorien
Speisekarte nach Vorspeisen, Hauptgerichten und Desserts
Dienstleistungen nach Themenbereichen
Häufig gestellte Fragen nach Kategorien
Schritt 1: Neuen Abschnitt erstellen
Erstelle zunächst einen neuen Abschnitt an der Stelle, an der die Tabs erscheinen sollen. Klicke dazu auf das "+"-Symbol zwischen zwei bestehenden Abschnitten und füge einen neuen Abschnitt hinzu.
Wähle anschließend die Option "Vibe-Abschnitt – Mit KI erstellen" aus, um den Bereich direkt über die KI generieren zu lassen.
Schritt 2: Prompt formulieren
Beschreibe möglichst genau, wie dein Tab-Bereich aufgebaut sein soll.
Du kannst unter anderem festlegen:
welche Tabs vorhanden sein sollen,
welche Inhalte sich hinter jedem Tab befinden,
Animationen beim Wechsel,
Icons,
Hover-Effekte,
sowie das Verhalten auf mobilen Geräten.
Beispielprompt:
"Erstelle einen interaktiven Wochenplan für ein Fitnessstudio. Es soll Tabs für Montag bis Sonntag geben. Beim Klick auf einen Wochentag sollen die jeweiligen Kurse mit Uhrzeit, Kursname und Trainer angezeigt werden.
Der aktive Tab soll farblich hervorgehoben werden. Beim Wechsel zwischen den Tabs soll eine moderne, flüssige Animation abgespielt werden. Das Design soll modern, übersichtlich und responsiv sein, sodass die Tabs auch auf Smartphones einfach bedienbar sind."
Schritt 3: Änderungen vornehmen
Du kannst den erstellten Tab-Bereich sowohl über den KI-Chat als auch direkt über die Controls anpassen.
In den Controls lassen sich je nach Aufbau des Tabs unter anderem folgende Inhalte direkt bearbeiten:
Kurse oder Inhalte innerhalb der Tabs
Uhrzeiten und Zeitpläne
Namen
Farben und Design-Einstellungen etc.
Je nachdem, was du genau erstellt hast. Klicke dazu auf den erstellten Abschnitt und nehme die gewünschten Änderungen vor:
So kannst du schnelle Anpassungen vornehmen, ohne jedes Mal den KI-Chat verwenden zu müssen. Sollten weitere Änderungen erforderlich sein, kannst du diese zusätzlich direkt im KI-Chat beschreiben, zum Beispiel:
weitere Tabs hinzufügen
Inhalte ändern
Farben anpassen
Animationen erweitern
Icons ergänzen
Abstände oder Schriftgrößen optimieren
weitere Controls hinzufügen
So kannst du den Tab-Bereich Schritt für Schritt an deine Vorstellungen anpassen.
Bilder generieren lassen
Mit der KI kannst du auch Bilder erstellen lassen. Wenn du im Chat beschreibst, dass du ein Bild generieren möchtest, greift das System automatisch auf eine integrierte Bildgenerierung zurück (Image-Generation mit dem Modell NanoBanana).
Damit kannst du individuelle Bilder für Hero-Bereiche, Landingpages, Werbekampagnen oder für Abschnitte erstellen, ohne externe Tools verwenden zu müssen.
So gehst du vor:
Schritt 1: KI-Chat öffnen
Es kommt darauf an, wo und wie du das Bild verwenden möchtest. Wenn du das Bild als Hintergrund für einen bestehenden Abschnitt (z.B. Header, Hero-Bereich oder ein bestimmtes Layout) generieren lassen willst, gehst du genau in den KI-Chat dieses Abschnitts.
Wenn du das Bild hingegen zum Beispiel als eigenes Element in einem neuen Abschnitt haben möchtest (z.B. nur ein einzelnes Bild ohne weiteren Inhalt), dann erstellst du zunächst einen neuen Abschnitt und öffnest dort den KI-Chat.
So stellst du sicher, dass das Bild genau dort erstellt wird, wo du es später auch auf deiner Seite verwenden möchtest.
Schritt 2: Angeben, dass ein Bild erstellt werden soll
Formuliere klar, dass ein Bild generiert werden soll (z.B. "Erstelle ein Bild…", "Generiere ein Hero-Image…").
Schritt 3: Prompt eingeben
Beschreibe das gewünschte Bild so detailliert wie möglich.
Beispielprompt:
"Erstelle ein hochwertiges, futuristisches Bild für ein Büro-Setup mit einem eleganten Laptop auf einem minimalistischen Schreibtisch. Um den Laptop herum schweben abstrakte UI-Elemente, Charts und Datenvisualisierungen in einem modernen Hologramm-Stil. Cinematic lighting, blau-weiße Farbwelt, clean, high-end Tech-Ästhetik, kein Text."
Ergebnis:
Schritt 4: Bild prüfen und anpassen
Nach der Generierung kannst du das Bild direkt im Chat optimieren lassen, zum Beispiel durch Anweisungen wie:
"Mache das Bild heller und moderner."
"Reduziere die Farben und mache es minimalistischer."
"Füge mehr Kontrast und eine hochwertigere Lichtstimmung hinzu.“
"Ändere den Stil in Richtung Premium-Tech / SaaS-Look."
"Mache das Bild weniger überladen und reduziere die Details im Hintergrund."
"Passe das Bild so an, dass mehr freier Raum für eine Überschrift links bleibt."
"Mache es realistischer und entferne zu starke KI-Effekte."
"Erstelle eine weichere, natürlichere Lichtstimmung."
So kannst du das Bild Schritt für Schritt genau an deine Vorstellung anpassen.
📌 Hinweis: Das Bild wird zunächst in deiner Bibliothek gespeichert. Du kannst die KI aber auch anweisen, es direkt als Hintergrund in einem Abschnitt zu verwenden oder es automatisch als Bild in deine Seite einzufügen.
💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂