Website mit KI erstellen mit Onepage: Anleitung mit dem Vibe-Coding-Editor (AI 2.0)

Melde dich bei Onepage an — der permanente Free-Plan reicht zum Bauen und Ausprobieren, ganz ohne Zahlungsdaten. Nach dem Login landest du im Dashboard mit der linken Navigation: Projekte, Vorlagen, Domains und Personen.

Klicke oben rechts auf den blauen Button „Projekt erstellen", um dein erstes Website-Projekt zu starten.

Onepage bietet dir zwei Wege in eine neue Seite:

• Mit Vorlage beginnen: In der Vorlagen-Übersicht scrollst du rechts durch eine Live-Vorschau. Gefällt dir ein Template, klickst du auf „Mit einem Template beginnen".
• Per KI aus einer Beschreibung: Du startest mit einer leeren Seite und lässt die KI die Sektionen aus einem Prompt generieren.

Für dieses Tutorial nehmen wir den KI-Weg — das ist der eigentliche Kern von Onepage AI 2.0.

Öffne das Vibe-Coding-Panel und beschreibe deine Seite in normaler Sprache. Die KI liest zuerst dein Branding, die vorhandenen Komponenten und den Seiten-Kontext ein (Page Info, List Siteui Packages, Read Site Memory) und legt dann los.

In diesem Beispiel haben wir exakt diesen Prompt verwendet:

„Erstelle mir eine Landingpage für eine Zahnarztpraxis. Die Seite soll ein Termin-Buchungswidget beinhalten. Als Conversion zählt die Terminbuchung. Baue die Seite so, dass sie möglichst viele Conversions liefert."

Tipp: Je konkreter du Ziel und Conversion benennst, desto besser das Ergebnis. Onepage hat dazu einen Prompting-Guide.

Die KI baut eine komplette Hero-Sektion — hier mit dem Termin-Buchungswidget above the fold: Behandlung → Wunschdatum → Uhrzeit-Slots → Name/Telefon. Dazu Trust-Signale (Bewertungssterne, „Angstpatienten willkommen", „auch abends & samstags") als Reibungsabbau.

Zwei Dinge machen den Unterschied zu reinen KI-Baukästen:

• Jede Terminbuchung landet als Lead im integrierten CRM — die Terminbuchung ist die Conversion.
• Alles bleibt voll editierbar — Texte, Leistungen, Uhrzeiten, Farben und Bilder passt du anschließend im Steuerungspanel an. Der KI-Output ist ein Ausgangspunkt, kein fixiertes Endergebnis.

Live-Ergebnis: Die in dieser Anleitung gebaute Seite ist echt veröffentlicht — hier ist die fertige Zahnarzt-Landingpage live.

Kann eine Sektion einmal nicht gebaut werden, blockiert dich das nicht. Onepage zeigt direkt an der Stelle „Couldn't build this section" — inklusive Lösung: „Fix with AI", „Edit code" und „Show error code".

In unserem Beispiel scheiterte die Bewertungs-/Social-Proof-Sektion (ungültige DOM-Verschachtelung). Zwei Wege zur Lösung:

• Ein Klick auf „Fix with AI" — die KI repariert die Sektion selbst.
• Oder du kopierst den Fehlercode über „Show error code" in den KI-Chat und bittest um den Fix.

Die KI hat die Bewertungskarten auf saubere div/p-Struktur umgebaut — Optik und Animation identisch, Sektion kompiliert wieder fehlerfrei. Self-Healing, ohne selbst in den Code zu müssen.

Zum Anpassen klickst du einfach auf das Element, das du ändern willst — es öffnet sich ein kleines Modul, in dem du den Inhalt direkt bearbeitest. Bei einer Bewertung sind das z. B. Zitat, Name und Detail.

Kein Code, kein Umweg über ein Menü: Klick aufs Element → bearbeiten → fertig. So ersetzt du die KI-Platzhalter zügig durch echte Praxis-Daten.

Für das Aussehen einer Sektion klickst du auf das Stift-Icon der Sektion. Im Panel wechselst du auf den Hintergrund-Tab und findest dort Hintergrund und Akzentfarbe.

In diesem Beispiel haben wir die Akzentfarbe über den Farbwähler auf Gelb (#FFF705) gestellt — Sterne und Avatare übernehmen die Farbe sofort in der Live-Vorschau.

Projektweit: In den Design-Einstellungen des Projekts legst du zusätzlich globale Farben, Schriftarten sowie UI-Kit-Elemente wie Formulare und Buttons fest.

Alle Medien deines Projekts liegen zentral in der Bibliothek (Media Library). Über die Reiter SVG Bilder, PNG Bilder, Lottie und Dateien verwaltest du deine Assets getrennt nach Typ.

Per „+" lädst du neue Dateien hoch, mit „Ordner hinzufügen" hältst du größere Projekte sortiert. So tauschst du z. B. die KI-Platzhalterbilder der Zahnarztseite schnell gegen echte Praxisfotos.

Über das „…"-Menü einer Sektion (oder per Tastenkürzel) lassen sich Abschnitte frei nach oben/unten verschieben, duplizieren (Strg+D), kopieren/einfügen und löschen.

So bringst du die Seite in die Reihenfolge, die am besten konvertiert — mit dem Buchungswidget immer nur einen Klick entfernt.

Im „…"-Menü einer Sektion findest du die Option „In globalen Abschnitt umwandeln". Ein globaler Abschnitt wird einmal bearbeitet und überall automatisch aktualisiert.

Ideal für Elemente, die auf mehreren Seiten identisch sein sollen — etwa Header, Footer oder einen CTA-/Buchungs-Block. Das spart mehrfaches Pflegen und hält die ganze Website konsistent.

Eine Landingpage wird oft zur mehrseitigen Website. In der Seiten-Verwaltung erstellst du neue Seiten über „Seite erstellen", vergibst einen Seitennamen und die URL (z. B. /leistungen, /team, /kontakt).

Die neue Seite baust du anschließend wie die Startseite — per Vorlage oder per KI-Prompt.

In den Menü-/Navigationseinstellungen fügst du deine Seiten als Menüpunkte hinzu und baust per Verschachtelung ein Dropdown oder Mega-Menü.

Jeder Menüpunkt lässt sich einzeln gestalten: Titel, Untertitel, ein Bild/Icon sowie die Aktion (Link zu einer bestehenden Seite oder externen URL, optional „in neuer Registerkarte öffnen"). So entstehen strukturierte Mega-Menüs mit Vorschaubildern und einer hervorgehobenen Angebots-Spalte.

Ein starkes Detail für Einsteiger: Wenn die Vibe-Coding-KI eine Aufgabe nicht selbst ausführen kann — etwa Unterseiten anlegen oder das Navigationsmenü konfigurieren (das sind Builder-Funktionen der Seitenstruktur) — bricht sie nicht einfach ab.

Stattdessen sagt sie dir genau, wo im Builder du es findest (z. B. Seiten-Verwaltung, Menü-Einstellungen). Der Chat wird so zur eingebauten Hilfe und Suche: Bei Unklarheiten fragst du einfach direkt darin — und wirst zur richtigen Stelle geführt.

In den Projekt-Einstellungen → Integrationen aktivierst du per Schalter die gängigen Marketing- und Analyse-Tools:

• Google Tag, Facebook Pixel, TikTok Pixel, LinkedIn Insight Tag
• Hotjar, Google Maps, Google ReCaptcha
• Onepage Analytics

Unter Code fügst du eigenen Header- und Body-Code sowie eigene Styles ein; die Cookie-Banner-Einstellungen liegen ebenfalls in den Projekt-Einstellungen.

Unter Einstellungen → SEO steuerst du, wie die Seite in Suchmaschinen erscheint:

• Websitename: Der Firmenname erscheint zuerst im Suchergebnis (neben Favicon und URL).
• Seitentitel-Muster: z. B. {{page_title}} — fasst die Seite prägnant zusammen.
• Integrationen & Tracking: Google Search Console und Google Tag Manager verbinden.
• Informationsschema: strukturierte Daten mit Standard- oder eigenem Markup.
• Barrierefreiheit: Viewport-Skalierung (verhindert u. a. das Safari-Zoomen bei Formularfeldern).
• Sitemap & Robots.txt: werden automatisch erzeugt, nur bei Bedarf ändern.
• LLMs.txt: automatisch generieren oder anpassen — legt fest, auf welche Inhalte KI-Bots zugreifen dürfen.

Rechts siehst du eine Live-Vorschau des Suchergebnis-Snippets.

Zum Schluss klickst du auf „Veröffentlichen". Zwei Optionen:

• Onepage-Subdomain (z. B. deinprojekt.onepage.me): Die Veröffentlichung ist sofort live — ideal zum Testen.
• Eigene Domain verbinden: Es öffnet sich ein Dialog mit zwei Verbindungstypen — A-Einträge (Verwaltung beim Registrar, schnelle Einrichtung, kann bis zu 2 Stunden dauern) oder NS-Einträge (Verwaltung über Onepage). SSL-Zertifikat und DDoS-Schutz sind inklusive.

Damit ist deine per KI gebaute Landingpage live — inklusive Buchungswidget, CRM-Anbindung und Tracking.