Der KI-Assistent (AI Assistant) ermöglicht es dir, in wenigen Schritten komplette Webseiten automatisch zu erstellen, von der ersten Idee bis zur finalen Landingpage.
Mit nur einem Prompt kannst du ein professionelles Design generieren lassen, das du anschließend flexibel anpassen kannst.
📌 Hinweis: Bevor du mit der KI-Erstellung startest, empfehlen wir dir eine eigene Farbpalette anzulegen und die Schriftart zu definieren.
Alles rund um Design erklären wir dir im weiterführenden Artikel:
Design, Branding & Layout mit dem KI-Assistenten.
Wie genau funktioniert die KI-Webseiten-Erstellung?
Die Webseiten-Erstellung mit dem KI-Assistenten ist intuitiv und schnell:
Schritt 1: Neues Projekt starten
Klicke auf den blauen Button "Projekt erstellen".
Schritt 2: Erstelle eine Seite mit der KI
Klicke auf den Button "Webseite mit KI erstellen" und gib deiner Seite einen Seitennamen.
Schritt 3: Prompt eingeben
Beschreibe dein Ziel, z. B. „Erstelle eine Landingpage für eine Gesundheits- und Fitness-App mit einem Call-to-Action-Button ‚Jetzt anmelden‘".
Schritt 4: Stil & Thema auswählen
Wähle den gewünschten Stil für deine Webseite. Du kannst zwischen Modern, Direkt oder Formell entscheiden.
Zusätzlich legst du fest, ob die KI ein helles oder dunkles Design wählen soll.
Schritt 5: Wähle die Sprache
Über das Zahnrad kannst du die Sprache und Region einstellen. So wird deine Seite in der passenden Sprache angezeigt und auf die richtige Zielgruppe ausgerichtet.
Klicke anschließend auf den blauen Button unten rechts.
Schritt 6: KI-Vorschau erhalten
Du kannst jetzt deinen Strukturplan einsehen und prüfen, ob die Struktur für dich passt. Bei Bedarf kannst du Abschnitte ergänzen, löschen oder ändern.
Klicke anschließend wieder auf den blauen Button unten rechts.
Schritt 7: Final generieren
Die KI erstellt deine vollständige Webseite in nur wenigen Augenblicken.
Schritt 8: Endergebnis überprüfen
Überprüfe nun gerne deine Webseite.
Du kannst diesen Vorschlag akzeptieren oder von vorne beginnen.
So entsteht in nur wenigen Minuten eine komplette Webseite, die bereits den Großteil deiner Anforderungen erfüllen sollte. Jetzt kannst du diese noch individuell verfeinern.
📌 Hinweis: Mehr Informationen zur Seitenerstellung, findest du im folgenden Artikel: Seitenerstellung mit KI-Assistent.
Änderungen vornehmen
Mit dem KI-Assistenten hast du maximale Flexibilität, deine Seite jederzeit weiterzuentwickeln.
Option 1: Abschnitte bearbeiten
Nicht gewünschte Abschnitte kannst du entfernen, indem du in deiner Seitenstruktur beim jeweiligen Abschnitt auf die drei Punkte klickst und anschließend „Löschen“ auswählst.
Du kannst dir für Abschnitte Alternativen anzeigen lassen, indem du auf das AI-Widget klickst → „Abschnitt bearbeiten“ wählst → den gewünschten Abschnitt anklickst → und auf „Layout-Alternative“ gehst.
Du kannst die Rechtschreibung und Grammatik überprüfen lassen, indem du auf das AI-Widget klickst → „Abschnitt bearbeiten“ wählst → den gewünschten Abschnitt anklickst → und auf „Rechtschreibung und Grammatik prüfen“ klickst.
Und zu guter Letzt kannst du deinen Abschnitt auch in eine andere Sprache übersetzen lassen, indem du auf das AI-Widget klickst → „Abschnitt bearbeiten“ wählst → den gewünschten Abschnitt anklickst → und auf „Übersetzen“ klickst.
Option 2: Komplette Seite anpassen
Du hast auch die Möglichkeit, die Rechtschreibung und Grammatik der gesamten Seite zu prüfen oder die Seite in eine andere Sprache zu übersetzen.
Klicke dazu auf das AI-Widget → „Seite bearbeiten“ und wähle entweder „Rechtschreibung und Grammatik“ oder „Übersetzen“ aus.
Option 3: Neue Inhalte generieren
Erstelle einen neuen Abschnitt mithilfe der KI. Klicke dazu auf das AI-Widget → „Abschnitt erstellen“ → und gib in der Eingabeaufforderung deinen Prompt ein, z. B. „Häufig gestellte Fragen“.
Eine weitere Möglichkeit wäre, im Editor einen neuen Abschnitt hinzuzufügen und "Create section with AI" zu wählen.
Oder generiere die komplette Seite neu, wenn du ein ganz frisches Ergebnis möchtest. Klicke dazu auf das AI-Widget → „Seite erstellen“ und gehe wie zuvor vor: Prompt eingeben, Stil auswählen. Sprache und Region auswählen und Vorschau überprüfen.
Du kannst dann das neue Endergebnis wieder überprüfen und den Vorschlag annehmen oder den Vorgang erneut starten.
⚠️Wichtig: Wenn du die Seite komplett neu erstellst, gehen vorherige Versionen verloren. Lege am besten eine neue Seite an, falls du mehrere Varianten vergleichen möchtest.
Formulare & Funnels erstellen
Um ein neues Formular zu erstellen, klickst du zunächst auf das AI-Widget und wählst anschließend "Mehrschrittformular erstellen" aus.
Danach gibst du deinen Prompt ein, also eine kurze Beschreibung dessen, was dein Formular oder Funnel leisten soll.
Beispiel: "Erstelle ein mehrstufiges Formular für eine Gesundheits- und Fitness-App, das neue Nutzer Schritt für Schritt durch die Registrierung führt. Das Formular soll folgende Schritte enthalten:
Persönliche Daten (Name, Alter, Geschlecht)
Gesundheitsinformationen (Größe, Gewicht, Vorerkrankungen, Allergien)
Fitnessziele (Gewichtsabnahme, Muskelaufbau, allgemeine Fitness, andere Ziele)
Ernährungspräferenzen (vegetarisch, vegan, Low Carb, andere)
Bestätigung und Einverständnis zu Datenschutz und AGB"
Das Endergebnis würde dann folgendermaßen aussehen:
Du kannst außerdem zwischen zwei Formular-Typen unterscheiden:
Single-Step-Formular: Das klassische, einseitige Kontaktformular, ideal für schnelle Anfragen oder Newsletter-Anmeldungen.
Multi-Step- Formular: Ein mehrstufiges Formular, das Nutzer Schritt für Schritt durch den Prozess führt, besonders sinnvoll bei komplexeren Abläufen wie Umfragen oder Verkaufsfunnels.
📌 Hinweis: Mehrstufige Formulare können von der KI nur erstellt werden, wenn du das Add-on "Formulare & Funnels" mindestens in der Launch-Version besitzt. Ohne dieses Add-on können nur einseitige Formulare erstellt werden.
Mehr Informationen zu den Plänen findest du auf unserer Preiseseite.
Details zur Formularerstellung mit der KI findest du im Artikel: Formulare mit KI-Assistent erstellen.
REMIX mit AI
Du kannst vorhandene Vorlagen durch die KI optimieren.
Schritt 1: Vorlage hinzufügen
Du kannst eine passende Vorlage als Grundlage verwenden.
Wähle "Remix with AI" und beschreibe dein Ziel, z. B. „Erstelle eine Landingpage für eine Gesundheits- und Fitness-App mit einem Call-to-Action-Button ‚Jetzt anmelden‘"
Schritt 2: Endergebnis
Deine Seite wird nun basierend auf der Vorlage erstellt. Du kannst sie anschließend prüfen und bei Bedarf Änderungen vornehmen oder die Seite weiter optimieren.
Dir stehen mehrere Optionen offen:
Abschnitt bearbeiten
→ Layout-Alternativen anzeigen, Rechtschreibung & Grammatik prüfen und übersetzen lassenSeite bearbeiten
→ Gesamte Seite auf Rechtschreibung & Grammatik prüfen und übersetzenAbschnitt erstellen
Mehrschrittformular erstellen
Seite erstellen
📌 Hinweis: Du musst nicht zwingend eine neue Vorlage erstellen. Du hast auch die Möglichkeit, bereits bestehende Vorlagen von dir überarbeiten zu lassen, mit der KI.
Custom-Code mit KI schreiben
Mit Custom-Code kannst du die Möglichkeiten deiner Seite noch erweitern, die KI hilft dir dabei, eigenen Code zu erstellen und sogar Bilder einzubinden.
Schritt 1: Abschnitt hinzufügen
Füge einen neuen Abschnitt hinzu und wähle "Personalisierter Code" aus.
Schritt 2: Beschreibe deine Idee
Du hast jetzt die Möglichkeit, detailliert zu schreiben, was die KI dir erstellen soll.
Beispiel: "Erstelle mir einen Kalorienrechner auf Deutsch und bringe folgende Farbe mit ein: #00d54b."
Schritt 3: Endergebnis
Du kannst das Ergebnis prüfen und anschließend entscheiden, ob du es akzeptierst oder ablehnst.
Wenn du das Ergebnis ablehnst, kannst du einen neuen Prompt eingeben.
Wenn du das Endergebnis akzeptierst, hast du die Möglichkeit, weitere Anpassungen vorzunehmen.
Beispiel: „Bitte den Button ‚Kalorien berechnen‘ rund machen mit Radius: 25px."
Mit der KI hast du praktisch endlose Möglichkeiten, kleine Anpassungen auf deiner Webseite vorzunehmen. Du kannst ganze Abschnitte erstellen, eigene Bilder hochladen, die von der AI eingebunden werden und vieles mehr.
📌 Hinweis: Damit die Umsetzung realistisch bleibt, wähle am besten Aufgaben, die technisch umsetzbar sind und keine extrem komplexen Funktionen erfordern.
Beispiele:
Geeignet: „Preistabelle mit 3 Spalten und 3 Buttons.“
Nicht geeignet: „3D-Produktkonfigurator wie bei Apple.“
Was nicht geht: Funktionen, die ein Backend benötigen, z. B. ein Blog oder andere datenbankgestützte Elemente.
Generell gilt: Die KI passt nur das ausgewählte Element an, nicht weitere Teile der Webseite. Der Code (HTML, CSS, JS) wird nur verändert, wenn du zusätzliche Anpassungen vornimmst. Wenn du mit dem ersten Ergebnis zufrieden bist, kannst du den Code bei dir extern speichern.
Du kannst so lange mit der KI experimentieren, bis du das gewünschte Ergebnis erreicht hast, kleine Anpassungen Schritt für Schritt sind der Schlüssel zum perfekten Resultat.
Weitere Informationen zu Custom-Code mit KI erfährst du im folgenden Artikel: Codegenerierung mit KI-Assistent.
Häufig gestellte Fragen (FAQ)
Wie lange dauert die Erstellung einer Webseite?
Wie lange dauert die Erstellung einer Webseite?
Das hängt von der Komplexität der Anfrage ab. Die Generierung deiner Webseite dauert in der Regel maximal 1–2 Minuten.
Wenn dein Skript bereits vorbereitet ist und du die Reihenfolge der Sektionen nicht stark anpasst, kannst du in nur rund 2 Minuten eine vollständige Website erstellen.
Ist die KI für alle Nutzer verfügbar oder nur für bestimmte Tarife?
Ist die KI für alle Nutzer verfügbar oder nur für bestimmte Tarife?
Die KI ist nicht automatisch in allen Tarifen enthalten. Sie steht als separates Add-on „KI Assistant“ zur Verfügung, das zusätzlich gebucht werden muss.
Mehr Details findest du in diesem Artikel: Credits verstehen und verwenden.
💡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. 🙂