Zum Hauptinhalt springen
Sie können KI-gestützte Experimente in wenigen Minuten erstellen, indem Sie einen einfachen Prompt schreiben—keine Programmierung erforderlich. Für eine geführte Tour durch die Prompt-Based Experimentation in Kameleoon klicken Sie hier.

Auf den Erstellungsfluss zugreifen

  1. Gehen Sie in der Kameleoon-App zu Experiences > A/B Test > New experiment.
  2. Wenn Sie den Starter- oder Trial-Plan verwenden, öffnet sich die promptbasierte Oberfläche automatisch.
  3. Wenn Sie den Enterprise-Plan verwenden, erscheint ein Pop-up. Wählen Sie By Prompt.
Sie können den grafischen Editor nicht verwenden, um eine von PBX generierte Variante zu bearbeiten. Weitere Informationen finden Sie in den FAQ.
  1. Geben Sie die erforderlichen Informationen ein und klicken Sie auf Create.
Wenn Sie PBX ohne installiertes Kameleoon-Skript verwenden, siehe die PBX-FAQ für Anleitungen.

Ihr Experiment konfigurieren

1. Definieren Sie Ihren Prompt

Beschreiben Sie im Prompt-Feld die Änderung, die Sie vornehmen möchten, in natürlicher Sprache. Sie können den Prompt-Bereich durch Klicken und Ziehen der Ecke vergrößern. Beispiele:
  • „Update the product listing grid to display 2 products per row instead of 4.”
  • „Change the default sorting option to ‘Price, low to high’.”
Durch die Analyse Ihrer Website und vorhandener visueller Ressourcen erkennt und kartiert Kameleoon automatisch Ihre Markenidentität, einschließlich Ihres Tonfalls, Ihrer Schriftarten, Bilder und Farbpalette.

Bilder und Designs verwenden

Um visuellen Kontext bereitzustellen oder bestimmte Assets hinzuzufügen (wie Banner oder Pop-ups), klicken Sie auf + > Add an image oder fügen Sie ein Bild aus Ihrer Zwischenablage ein.
Wenn Sie ein Bild hochladen oder einfügen und einen Prompt absenden, fragt PBX, wie es verwendet werden soll:
  • Asset: PBX fügt die Bilddatei direkt in die Variation ein.
  • Mockup: PBX verwendet das Bild als Referenz, um das Design mit Code neu zu erstellen.
Um ein hochgeladenes Bild in der Vorschau anzuzeigen, klicken Sie im Prompt-Bereich darauf. Sie können auch auf Copy reference klicken, um den Bildlink zu kopieren. Sie können auch Figma-Designs direkt importieren. Weitere Informationen finden Sie unter Designs aus Figma importieren.
Details zu Prompt-Einschränkungen finden Sie in den PBX-FAQ.

Elemente auswählen

Helfen Sie der KI, zu erkennen, welche Elemente geändert werden sollen, auf folgende Arten:
  • Textbeschreibung: Beschreiben Sie das Element in Ihrem Prompt (z. B. „Move the product grid below the banner”).
  • Auswahlbox: Klicken Sie auf + > Draw sketch und umreißen Sie das Zielelement auf der Seite. Verwenden Sie die Toolbox zum Zeichnen, Löschen oder Entfernen Ihrer Auswahl.
PBX kann auch zu anderen Seiten Ihrer Website navigieren, wenn Ihr Prompt dies erfordert—beispielsweise um ein Designelement von einer anderen Seite zu referenzieren.
Sie können bei Verwendung des Zeichenwerkzeugs nicht scrollen oder außerhalb Ihrer aktuellen Ansicht zeichnen. Verwenden Sie Textbeschreibungen für Elemente, die sich weiter unten auf der Seite befinden.

AI Settings konfigurieren

Passen Sie an, wie die KI Varianten generiert und mit Ihrer Website interagiert. Klicken Sie auf das +-Symbol und wählen Sie AI Settings. Wählen Sie in der Seitenleiste Projects das Projekt aus, das Sie bearbeiten möchten. Das AI Settings-Menü enthält zwei Tabs:
  • Master Prompt: Definieren Sie übergeordnete Anweisungen und Kontext für die KI. Weitere Informationen finden Sie im Artikel Master Prompts.
  • Technical Settings: Konfigurieren Sie technische Einstellungen für Ihr Projekt. Sie können die folgenden Optionen anpassen:
    • Website adapts automatically to different screen sizes: Aktivieren Sie diese Option für responsive Websites. Deaktivieren Sie sie, wenn Ihre mobile Version eine separate URL verwendet oder bei der Größenänderung nicht aktualisiert wird.
    • Enable support for dynamic websites (SPA, PWA…): Aktivieren Sie diese Option, um virtuelle URL-Änderungen zu erkennen und sicherzustellen, dass URL-Targeting und Datenerfassung korrekt funktionieren.
    • Custom attribute: Legen Sie ein benutzerdefiniertes Attribut fest, damit Kameleoon jede virtuelle URL-Änderung verfolgen, URL-Targeting aktivieren und Daten wie die Anzahl der Seitenaufrufe erfassen kann.
    • Avoid dynamic IDs selectors: Geben Sie zu vermeidende Selektoren an.
Klicken Sie auf Save, um Ihre Änderungen zu behalten, oder klicken Sie auf Back to the editor, um zur Editor-Oberfläche zurückzukehren und alle Änderungen zu verwerfen.

Optimierungsideen generieren

Um Vorschläge für Ihre Seite zu erhalten:
  1. Geben Sie einen Prompt wie „Suggest ideas to optimize this page.” ein.
  2. Überprüfen Sie die Liste umsetzbarer Verbesserungen, die von der KI generiert wurden.
  3. Klicken Sie auf Regenerate für neue Ideen oder Cancel, um einen anderen Prompt zu verwenden.
Informationen dazu, warum derselbe Prompt zu unterschiedlichen Ergebnissen bei der Regeneration führen kann, finden Sie in diesem PBX-FAQ-Eintrag.

Varianten parallel erstellen

Erstellen Sie mehrere Varianten gleichzeitig. Während eine Variante generiert wird, können Sie sofort eine weitere starten. Ein Lade-Symbol zeigt den Fortschritt an, und Kameleoon benachrichtigt Sie, wenn jede Variante bereit ist.

2. KI-Workflow

Wenn Sie einen Prompt absenden, arbeitet PBX die Änderung in Echtzeit durch. Jede Aktion der KI erscheint, sobald sie stattfindet, zusammen mit ihrer Begründung in klarer Sprache, sodass Sie bei jedem Schritt verfolgen können, was PBX tut.

Echtzeit-Tracking und Begründung

Während PBX Ihre Variation generiert, sehen Sie jeden Schritt, den es unternimmt, und die Logik dahinter. PBX hebt Elemente auf der Seite hervor, während es Ihren Prompt verarbeitet, und zeigt Ihnen genau, was die KI anvisiert.

KI-Navigation

PBX kann zu anderen Seiten Ihrer Website navigieren, wenn Ihr Prompt dies erfordert—beispielsweise um ein Feature oder ein Designelement von einer anderen Seite zu referenzieren. Sie können dies direkt in Ihrem Prompt anfordern.

Interaktionswerkzeuge

An wichtigen Punkten im Generierungsprozess hält PBX an und zeigt eines der folgenden Interaktionswerkzeuge an, bevor es fortfährt:
  • Validierung hervorgehobener Elemente: PBX hebt das Element hervor, das es ändern möchte. Bestätigen Sie die Auswahl oder leiten Sie PBX zu einem anderen Element um.
  • Options-Auswahl: PBX präsentiert zwei oder mehr Designoptionen zur Auswahl. Wählen Sie die Option, die Ihrer Absicht am besten entspricht.
  • Bestätigung: PBX fasst die Aktion zusammen, die es durchführen möchte, und bittet Sie um Bestätigung, bevor es diese ausführt.
Diese Sehen-Verstehen-Steuern-Schleife erkennt Fehlentwicklungen frühzeitig und reduziert Nacharbeit und erfolglose Generierungen.

Zwischen Variationen wählen

Nach der Generierung präsentiert PBX mehrere Variationsoptionen zum Vergleich. Wählen Sie diejenige, die Ihrer Absicht am besten entspricht, und klicken Sie auf Version anwenden. Wenn keine der Optionen passt, fahren Sie mit dem Prompten fort, um das Ergebnis zu verfeinern oder weitere Details anzugeben.
Eine generierte Variation auswählen
Die KI kann auch klärende Fragen stellen (z. B. zu Bildpräferenzen oder Inhaltstypen), um sicherzustellen, dass das Ergebnis dem entspricht, was Sie im Sinn hatten.

Aus Skizzen erstellen

Entwerfen Sie Komponenten wie Pop-ups oder Overlays, indem Sie sie direkt auf die Seite zeichnen:
  1. Klicken Sie auf + > Draw sketch.
  2. Zeichnen Sie Ihr Design.
  3. Fordern Sie die KI auf, es zu erstellen (z. B. „Build the popup based on my sketch”).
Befolgen Sie bewährte Praktiken für das Schreiben von Prompts, um die besten Ergebnisse zu erzielen.

3. Den generierten Code überprüfen und anpassen

Klicken Sie oben rechts auf das Code-Symbol oder klicken Sie im Generierungspanel auf die Code-Symbole [CSS] oder JS. Klicken Sie auf CSS oder JS, um den relevanten Code anzuzeigen und zu bearbeiten. Klicken Sie auf Edit code, um Änderungen vorzunehmen.
Wenn Sie mehrmals prompten und mehrere Versionen für eine bestimmte Variante generieren, können Sie über das Dropdown-Menü oben links im Code-Panel zwischen diesen Varianten wechseln. Sobald die KI Inhalte für Ihr Experiment generiert hat, können Sie ihre Ausgabe verfeinern, indem Sie den zugrunde liegenden Code bearbeiten.
Um eine Variante mit Prompts statt mit Code zu verfeinern, siehe die FAQ.

4. Vergleichen und simulieren

Verwenden Sie die Kopfzeilen-Schaltflächen, um zwischen Ansichten zu wechseln:
  • Website display: Vorschau des Erscheinungsbilds der Variante.
  • Code: Sehen Sie die technische Implementierung.
  • Compare: Vergleichen Sie verschiedene Variationen nebeneinander.
Klicken Sie auf Simulate, um das Experiment live auf Ihrer Website zu testen, bevor Sie es starten.

Teilen Sie Ihr Experiment

Klicken Sie auf das Teilen-Symbol oben rechts, um:
  • Copy link: Einen direkten Link zum Experiment zu teilen.
  • Share on LinkedIn: Ihr Experiment direkt in Ihrem Feed zu posten.

Das Experiment finalisieren

Sobald Ihre Variation abgeschlossen ist:
  1. Klicken Sie auf Finalize.
  2. Legen Sie Ihre Ziele, Ihre Zielgruppenausrichtung und Ihre Traffic-Verteilung fest.
  3. Starten Sie Ihr Experiment.
Sie sind nun bereit, schneller zu experimentieren als je zuvor, ohne Code und ohne Verzögerung.