Mit Onepage AI 2.0 (Vibe-Coding) starten wir eine völlig neue Art, in Onepage zu entwickeln, eine Methode, die die Lücke zwischen KI-gestützter Codegenerierung und visueller Bearbeitung schließt.
Zum ersten Mal kannst du vollständig anpassbare, auf React basierende Komponenten und Abschnitte direkt in deinem Onepage-Projekt per "Vibe-Coding" erstellen. Diese werden direkt neben deinen regulären, visuell bearbeitbaren Inhalten auf derselben Seite angezeigt.
So verbindest du brillante Designumsetzung mit voller Kontrolle. Kein anderer Builder oder Vibe-Coding-Tool bietet diese Möglichkeit.
📌 Hinweis: Um Vibe-Coding nutzen zu können, benötigst du unser Add-on "KI-Assistent", mindestens den T1000-Plan oder höher. Ohne dieses Add-on steht die Funktion nicht zur Verfügung.
Zugriff & Beta-Hinweis
Die Funktion ist aktuell nur über die Beta-Version verfügbar: https://beta.onepage.io
Bitte stelle sicher, dass du dich auch tatsächlich in der Beta-Umgebung befindest. Unter app.onepage.io stehen dir die neuen KI-Funktionen noch nicht zur Verfügung.
Wenn du Änderungen an einer Website vornehmen möchtest, in der du bereits die Funktionen der Beta-Version genutzt hast, ist dies bis zum Abschluss der Beta ausschließlich über den Link beta.onepage.io möglich.
Vergleich:
Beta: beta.onepage.io (neue KI-Funktionen verfügbar)
Standard: app.onepage.io (Live-Produktivsystem)
📌 Hinweis: Du musst bis zur offiziellen Veröffentlichung über https://beta.onepage.io auf die Projekte zugreifen, in denen du mit der KI arbeitest.
Bitte logge dich zuerst in deinen regulären Onepage-Account ein und öffne anschließend beta.onepage.io. Wenn du nicht eingeloggt bist, wirst du lediglich zurück zu deinem Standard-Account weitergeleitet.
Was neu ist und warum das wichtig ist
Bisher hat Onepage AI Seiten und Abschnitte aus unseren Standard-Bausteinen generiert. Das hat gut funktioniert, hatte aber (aus gutem Grund) seine Grenzen: Man konnte keine wirklich individuellen Designs oder Interaktionen erstellen, die über unsere Elementbibliothek hinausgingen.
Das ändert sich jetzt grundlegend. Mit Vibe-Coding in Onepage erhältst du die gleiche kreative Leistungsfähigkeit wie bei eigenständigen KI-Code-Generatoren (zum Beispiel Lovable, Bolt, v0), ohne das zu verlieren, was Onepage ausmacht: den visuellen Editor, DSGVO-Einwilligungen, Formulare & Funnels, hochwertige Vorlagen sowie die Möglichkeit, Websites an Kunden zu übergeben, die diese selbst verwalten können.
Warum das ein großer Schritt ist:
Erstelle alles, was du dir vorstellen kannst: individuelle Animationen, interaktive Rechner, einzigartige Layouts oder experimentelle Designs aus deinen Prompts.
→ Wenn KI es in React programmieren kann, kannst du es in Onepage nutzen.
KI-generierte Einstellungen für jede Komponente: Jede generierte Komponente enthält ein visuelles Einstellungsfenster, mit dem du Texte, Farben, Verhalten und Layout anpassen kannst, ohne den Code zu bearbeiten.
→ Du kannst die KI sogar anweisen, zusätzliche Einstellungen hinzuzufügen.
Vibe-Code ergänzt deine regulären Inhalte: Nutze KI-Abschnitte für Hero-Bereiche oder komplexe Interaktionen, während du andere Bereiche weiterhin klassisch im Editor baust.
Hybrider Ansatz: Eine Seite kombiniert zwei Stärken, KI-Generierung und klassischen Editor.
Kundenübergabe möglich: KI-generierte Elemente bleiben editierbar und können an Kunden übergeben werden. Sie verfügen über eigene Einstellungspanels und sind damit wartbar.
📌 Hinweis: Die KI arbeitet abschnittsbasiert und nicht auf kompletten Seiten gleichzeitig (zum Beispiel keine globalen Funktionen wie eine automatische Übersetzung der gesamten Webseite).
Wichtige Hinweise, bevor du beginnst
Das Feature ist leistungsstark, befindet sich jedoch noch in der Beta-Phase. Bitte beachte folgende Punkte:
Rechne mit Fehlern oder Unvollkommenheiten.
Nicht für geschäftskritische Live-Seiten empfohlen.
Beste Vorgehensweise: erst in einem neuen Projekt testen und Ergebnisse später übernehmen.
Jede Nutzung von Vibe-Coding kostet aktuell 10 Credits pro Generierung
Tab-Wechsel während der Generierung kann den Prozess unterbrechen
Die Inhalte sollten vor Live-Gang sorgfältig geprüft werden.
Abschnitt mit der KI erstellen
Um einen Abschnitt mit AI 2.0 erstellen zu können, gehe wie folgt vor:
Schritt 1: In Onepage einloggen
Melde dich bei beta.onepage.io Onepage an.
Schritt 2: Bestehendes Projekt öffnen oder neues erstellen
Du kannst entweder ein neues Projekt anlegen oder dein bestehendes Projekt öffnen, in dem du mit Vibe-Coding starten möchtest.
Schritt 3: Neuen Abschnitt hinzufügen
Wenn du deine gewünschte Seite geöffnet hast, kannst du einen neuen Abschnitt hinzufügen, indem du auf das blaue "+"-Symbol klickst und anschließend Vibe-Abschnitt auswählst.
Schritt 4: Prompt schreiben
Jetzt kannst du in das Eingabefeld deinen Prompt einfügen und der KI genau beschreiben, was sie erstellen soll. Je klarer und detaillierter dein Prompt ist, desto besser wird das Ergebnis.
Die KI kann dabei nicht nur Layouts erstellen, sondern auch Animationen, Effekte, interaktive Elemente und komplett individuelle Designs umsetzen.
Zum Beispiel: "Erstelle eine spektakuläre Hero-Section im 'Matrix'-Stil. Der Hintergrund soll eine tiefschwarze, digitale Leere sein, in der ein vertikaler Regen aus leuchtend neongrünen Code-Zeichen (Digital Rain) fällt. Das Design muss futuristisch und cyber-orientiert wirken, mit subtilen Glitch-Effekten und einer High-Tech-Ästhetik. Im Zentrum soll ein prominenter Call-to-Action Button platziert sein, der durch eine Animation wie ein plötzliches System-Popup erscheint und einen pulsierenden Neon-Glow-Effekt besitzt. Nutze eine monospaced Schriftart (wie bei Terminals) für die Überschrift, um das Hacker-Feeling zu verstärken. Die gesamte Sektion soll sich anfühlen wie ein Einstieg in eine digitale Simulation."
Die KI analysiert deinen Prompt und generiert daraus automatisch den passenden Code für deinen Abschnitt.
📌 Hinweis: Die Generierung kann etwas Zeit in Anspruch nehmen, bitte habe etwas Geduld. Vermeide außerdem währenddessen einen Tab-Wechsel, da dies aktuell dazu führen kann, dass die Generierung unterbrochen wird.
Schritt 5: Ergebnis überprüfen
Die KI informiert dich, sobald der Abschnitt fertig erstellt wurde. Dabei erhältst du eine kurze Übersicht darüber, was generiert wurde, sowie die verfügbaren Einstellungen ("Controls"), über die du Inhalte wie Texte, Farben oder Abstände selbst anpassen kannst.
Live würde der Abschnitt dann folgendermaßen aussehen:
Wie du an dem Abschnitt weitere Änderungen vornehmen kannst, erfährst du weiter unten im Artikel im Abschnitt "Änderungen nachträglich durchführen".
KI innerhalb eines bestehenden Abschnitts nutzen
Du kannst auch bestehende Abschnitte erweitern oder anpassen. Gehe dazu wie folgt vor:
Schritt 1: In Onepage einloggen
Melde dich bei beta.onepage.io Onepage an.
Schritt 2: Bestehendes Projekt öffnen
Öffne dein bestehendes Projekt und scrolle zu dem Abschnitt, in dem du mit dem Vibe-Coding beginnen möchtest.
Schritt 3: Element hinzufügen
Gehe mit der Maus zwischen die Elemente an die Stelle, an der du das neue Element einfügen möchtest. Klicke anschließend auf das "+"-Symbol und wähle Mit KI erstellen aus.
Schritt 4: Prompt schreiben
Jetzt kannst du in das Eingabefeld deinen Prompt einfügen und der KI genau beschreiben, was sie erstellen soll. Je klarer und detaillierter dein Prompt ist, desto besser wird das Ergebnis.
Zum Beispiel: "Erstelle einen modernen, cleanen Öffnungszeiten-Abschnitt. Zeige die Öffnungszeiten übersichtlich als Liste:
Montag, Mittwoch, Donnerstag: 10:00 - 18:00 Uhr
Dienstag, Freitag: 08:00 - 13:00 Uhr
Samstag, Sonntag: Geschlossen
Füge zusätzlich eine Live-Status-Anzeige hinzu, die automatisch erkennt, welcher Wochentag und welche Uhrzeit aktuell ist.
Wenn das Unternehmen aktuell geöffnet ist, soll angezeigt werden: "Jetzt geöffnet" (grün, mit dezenter Puls-Animation)
Wenn geschlossen: "Jetzt geschlossen" (rot, ruhig, ohne Animation)
Der Status soll sich automatisch aktualisieren und die aktuellen Öffnungszeiten berücksichtigen."
Die KI analysiert deinen Prompt und generiert daraus automatisch den passenden Code für deinen Abschnitt.
📌 Hinweis: Die Generierung kann etwas Zeit in Anspruch nehmen, bitte habe etwas Geduld. Vermeide außerdem währenddessen einen Tab-Wechsel, da dies aktuell dazu führen kann, dass die Generierung unterbrochen wird.
Schritt 5: Ergebnis überprüfen
Die KI informiert dich, sobald der Abschnitt fertig erstellt wurde. Dabei erhältst du eine kurze Übersicht darüber, was generiert wurde, sowie die verfügbaren Einstellungen ("Controls"), über die du Inhalte wie Texte, Farben etc. selbst anpassen kannst.
Live würde der Abschnitt dann folgendermaßen aussehen:
Änderungen nachträglich durchführen
Du kannst jederzeit mit der KI weiterarbeiten und Änderungen vornehmen. Dafür stehen dir zwei Optionen zur Verfügung:
Option 1: Inhalte über die Controls bearbeiten
Du kannst Texte, URLs, Farben, Effekte oder Abstände (je nachdem, was erstellt wurde) im Nachhinein jederzeit selbst anpassen, ohne dass die KI das erneut für dich generieren muss.
Klicke dazu einfach auf den Abschnitt, der mit Vibe-Coding erstellt wurde. Dort werden dir die einzelnen Elemente angezeigt, die du anschließend ganz einfach bearbeiten kannst.
Option 2: Code bearbeiten
Wenn du das Layout anpassen, Animationen hinzufügen oder entfernen oder Inhalte ergänzen möchtest, kannst du der KI einfach direkt mitteilen, was geändert werden soll, ein kompletter Neustart ist dafür nicht notwendig.
Du kannst auch gezielt neue Steuerungsmöglichkeiten anfordern, zum Beispiel dass du die Abstände oben und unten selbst einstellen möchtest oder andere individuelle Controls benötigst.
Klicke dafür einfach auf Edit Code und beschreibe der KI, welche Anpassungen vorgenommen werden sollen.
In unserem Beispiel haben wir der KI mitgeteilt: "Bitte passe die bestehende Hero-Section wie folgt an: Der Digital Rain soll nicht von oben nach unten, sondern von unten nach oben fallen, sodass der Effekt wirkt, als würde der Code aus der Tiefe der digitalen Leere aufsteigen.
Zusätzlich sollen Controls für Abstände hinzugefügt werden, sodass ich die Abstände oben und unten flexibel selbst einstellen kann (z. B. Padding/Margin der Sektion). Alle anderen bestehenden Design-Elemente, Animationen und der „Matrix“-Stil sollen unverändert beibehalten werden."
Die KI hat den "Digital Rain" jetzt so angepasst, dass er von unten nach oben aufsteigt. Zusätzlich wurde bei den Controls eine weitere Kategorie hinzugefügt, über die sich die Abstände individuell einstellen lassen.
Sollte die KI deine Anweisungen nicht direkt verstehen, kannst du einfach einen Screenshot hochladen und ihr so genau zeigen, was du meinst.
Tipps für bessere Ergebnisse
Damit du mit Vibe-Coding möglichst gute Ergebnisse erzielst, hilft vor allem eine klare und detaillierte Beschreibung deiner Idee. Je genauer du der KI erklärst, was du möchtest, desto besser kann sie das gewünschte Ergebnis umsetzen.
Beschreibe zum Beispiel den gewünschten Stil deines Elements. Das kann verspielt, minimalistisch, modern, technisch oder auch sehr kreativ sein. Auch kleine Stilhinweise wie Farben, Stimmung oder Layout-Vorlieben helfen der KI enorm.
Wichtig ist außerdem: Je präziser dein Prompt ist, desto besser wird das Ergebnis. Statt nur "Diagramm erstellen" solltest du genau beschreiben, was gebaut werden soll, also welche Funktionen, Effekte, Animationen oder Interaktionen enthalten sein sollen, je nachdem, wie du es dir vorstellst.
Du kannst jederzeit Feintuning betreiben, also nach der ersten Version weitere Anpassungen anfordern. So kannst du Schritt für Schritt das Ergebnis verfeinern, statt alles auf einmal perfekt beschreiben zu müssen.
Sehr hilfreich ist auch die Möglichkeit, Screenshots hochzuladen, um bestehende Designs nachzubauen oder visuell als Referenz zu nutzen.
Achte außerdem darauf, im Prompt nicht nur den Stil, sondern auch die konkreten Inhalte zu beschreiben.
Vibe-Coding ist ein sehr mächtiges Beta-Tool, mit dem du kreative und technische Website-Elemente schnell erstellen kannst. Die Möglichkeiten sind nahezu unbegrenzt, entscheidend ist eine klare Beschreibung deiner Idee.
Je besser du mit der KI kommunizierst, desto stärker werden die Ergebnisse.
Häufig gestellte Fragen (FAQ)
Warum werde ich auf beta.onepage.io weitergeleitet?
Warum werde ich auf beta.onepage.io weitergeleitet?
Du wirst auf beta.onepage.io weitergeleitet, weil du gerade die Beta-Version nutzt. Dort werden neue Funktionen zuerst ausprobiert und getestet, bevor sie später in die normale Version übernommen werden.
Warum sehe ich meine Elemente nicht im normalen Editor?
Warum sehe ich meine Elemente nicht im normalen Editor?
Das liegt daran, dass die KI-Generierten Elemente aktuell nur in der Beta-Umgebung unterstützt oder dort gespeichert werden. Im normalen Editor werden sie deshalb entweder noch nicht angezeigt oder sind dort (noch) nicht kompatibel.
Kann ich komplette Webseiten mit der KI erstellen?
Kann ich komplette Webseiten mit der KI erstellen?
Technisch kannst du über einen Prompt zwar auch eine komplette Seite erzeugen lassen. Das funktioniert grundsätzlich schon. Praktisch ist es aber besser, in Abschnitten zu arbeiten, weil:
die KI dann präziser arbeitet
du später viel einfacher Änderungen machen kannst
das Ergebnis insgesamt stabiler und sauberer bleibt
Komplette Seiten auf einmal gehen also, aber für gute Ergebnisse ist der modulare Aufbau eindeutig die bessere Methode.
Darf ich bestehende Live-Seiten bearbeiten?
Darf ich bestehende Live-Seiten bearbeiten?
Ja, du kannst bestehende Live-Seiten bearbeiten, allerdings mit etwas Vorsicht.
In der Beta-Umgebung kann es sein, dass Änderungen sich noch nicht ganz stabil verhalten. Deshalb ist es sinnvoll, Änderungen zuerst zu prüfen, bevor du sie veröffentlichst.
Sind die Texte suchmaschinenoptimiert?
Sind die Texte suchmaschinenoptimiert?
Die Texte sind grundsätzlich suchmaschinenlesbar, sodass Suchmaschinen sie erfassen und indexieren können.
Eine direkte SEO-Optimierung ist aktuell aber noch nicht vollständig im Editor integriert. Falls du möchtest, kann die KI jedoch SEO-relevante Elemente im Code ergänzen, zum Beispiel strukturierte Inhalte oder Meta-Informationen.
Wichtig ist auch: H1-H6-Überschriften kannst du im Editor nicht direkt festlegen, sie lassen sich aber über die KI im Code entsprechend erzeugen, wenn eine saubere Struktur benötigt wird.
Wie kann ich Änderungen rückgängig machen?
Wie kann ich Änderungen rückgängig machen?
Änderungen werden automatisch als Version gespeichert, sobald du deine Seite über "Update" speicherst. Über die Version History kannst du jederzeit eine frühere Version wiederherstellen. Mehr dazu findest du im folgenden Artikel unter "Versionsverlauf": Frühere Versionen wiederherstellen
Alternativ kannst du auch die KI bitten, bestimmte Änderungen gezielt rückgängig zu machen.
Welche Einschränkungen gibt es bei externen Inhalten?
Welche Einschränkungen gibt es bei externen Inhalten?
Externe Inhalte wie Musik, Videos (z.B. YouTube) oder Skripte können eigenen Nutzungsbedingungen der jeweiligen Anbieter unterliegen. Musik oder Sounds können nur über externe URLs eingebunden werden, direkte MP4-Dateien lassen sich nicht hochladen oder direkt einbetten.
Bitte beachte außerdem, dass bei der Einbindung externer Dienste wie YouTube oder ähnlichen Plattformen gegebenenfalls datenschutzrechtliche Anforderungen gelten. Es liegt in deiner Verantwortung zu prüfen, ob und wie diese Einbindungen in deiner Datenschutzerklärung berücksichtigt werden müssen.
Was kann ich tun, wenn etwas nicht funktioniert oder ein Fehler auftritt?
Was kann ich tun, wenn etwas nicht funktioniert oder ein Fehler auftritt?
Wenn die Generierung nicht funktioniert, kannst du zuerst die Seite neu laden. Wenn die Herausforderung weiterhin besteht, kannst du einen Screenshot an die KI senden und sie bitten, den Fehler zu analysieren und zu beheben.
Kann die Ladegeschwindigkeit durch Vibe-Coding beeinflusst werden?
Kann die Ladegeschwindigkeit durch Vibe-Coding beeinflusst werden?
Die Ladegeschwindigkeit kann beeinträchtigt werden, wenn sehr viele oder komplexe Custom-Codes und Animationen verwendet werden.
Da Vibe-Coding individuell generierten Code nutzt (z.B. für Effekte, Interaktionen oder dynamische Inhalte), kann dies, je nach Umfang und Komplexität, die Performance der Seite beeinflussen.
Achte darauf, nur die wirklich notwendigen Effekte einzusetzen, und teste deine Seite regelmäßig. Besonders viele Animationen oder aufwendige Skripte sollten gezielt und sparsam verwendet werden, um eine optimale Ladezeit sicherzustellen
Wie verlinke ich einen mit KI erstellten Button mit einem bestimmten Abschnitt?
Wie verlinke ich einen mit KI erstellten Button mit einem bestimmten Abschnitt?
Du kannst der KI einfach in natürlicher Sprache sagen, wohin der Button führen soll. Die Aktion "Scrollen bis" ist in den Code-Abschnitten nicht vorhanden.
Beispiel: "Bitte verlinke den Button 'Jetzt Termin Buchen' mit dem Abschnitt 'Termin vereinbaren‘“
Die KI erkennt dabei die genannten Bezeichnungen, durchsucht die Seite nach dem passenden Abschnitt und hinterlegt automatisch die entsprechende Verlinkung im Button.
Wo kann ich meine Fragen stellen oder Feedback geben?
Wo kann ich meine Fragen stellen oder Feedback geben?
Es gibt einen Telegram-Chat, über den du dich mit anderen austauschen, Fragen stellen oder Feedback geben kannst.
Du kannst dem Chat hier beitreten: https://t.me/+KcklAis694xkZGRi
💡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. 🙂