Skip to main content
PBX Build ist Kameleoons KI-gestützter Experiment-Editor. Sie können damit 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. Sie können bis zu 10 Bilder in einem einzigen Prompt anhängen, um vollständigen visuellen Kontext bereitzustellen.
Ein Bild hinzufügen oder eine Skizze im Prompt-Bereich zeichnen
PBX erkennt automatisch, wie jedes Bild verwendet werden soll—keine manuelle Kennzeichnung erforderlich:
  • 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.

​
Spracheingabe verwenden

Diktieren Sie Ihren Prompt, anstatt ihn einzutippen. Klicken Sie auf das Mikrofonsymbol in der Prompt-Symbolleiste, sprechen Sie Ihren Prompt, und klicken Sie dann auf das Häkchen, um ihn in das Prompt-Feld zu transkribieren.
Die Prompt-Symbolleiste mit dem blau hervorgehobenen Mikrofonsymbol

​
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 oder zu externen Websites navigieren, wenn Ihr Prompt dies erfordert—beispielsweise um ein Designelement von einer anderen Seite zu referenzieren oder eine externe Website als Inspiration zu verwenden.
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.

​
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 oder zu externen Websites navigieren, wenn Ihr Prompt dies erfordert. Sie können ein Feature oder ein Designelement von einer anderen Seite referenzieren oder die KI auf eine externe Website als Inspiration hinweisen. Sie können dies direkt in Ihrem Prompt anfordern—zum Beispiel: „Repliziere das Suchfilter-Layout dieser Reisebuchungswebsite: www.example.com/search.”

​
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.

​
Eine Variation nach Figma kopieren

Sobald eine Variation fertig ist, können Sie sie als bearbeitbare Figma-Ebenen in die Zwischenablage kopieren und direkt in eine Figma-Datei einfügen, ohne das Design von Grund auf neu zu erstellen.
  1. Öffnen Sie auf der Karte Your version is ready das Drei-Punkte-Menü und klicken Sie auf Copy to Figma.
  2. Warten Sie, während PBX die Variation verpackt. Der Fortschritt wird für jeden Schritt angezeigt.
  3. Klicken Sie auf Copy to clipboard.
  4. Öffnen Sie Figma und fügen Sie mit ⌘ + V (macOS) oder Strg + V (Windows) ein.
Kopieren einer PBX-Variation nach Figma über das Drei-Punkte-Menü auf der Variationskarte
Der eingefügte Inhalt erscheint als native Figma-Ebenen.
Die kopierten Ebenen funktionieren am besten bei einfachen, weitgehend statischen Variationen—Variationen mit umfangreichen interaktiven Elementen lassen sich möglicherweise nicht sauber übertragen. PBX erfasst nur die von Ihnen erstellte Komponente, nicht die gesamte umgebende Seite.
Sie können diesen Ablauf auch über die Experimentkarte im Experiments-Dashboard starten.

​
Einen Prompt rückgängig machen

Die Ausgabe jedes Prompts enthält die Schaltfläche Rückgängig. Klicken Sie darauf, um Ihre Variation auf den Zustand zurückzusetzen, in dem sie sich befand, als dieser Prompt abgeschlossen wurde, und alle durch spätere Prompts vorgenommenen Änderungen zu verwerfen. Verwenden Sie diese Option, wenn ein Folge-Prompt die Variation in die falsche Richtung lenkt. Anstatt von vorne zu beginnen, klicken Sie bei dem Prompt, zu dem Sie zurückkehren möchten, auf Rückgängig und versuchen Sie von diesem Punkt aus einen anderen Ansatz.

​
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 auf den Code-Schalter im Header, um das Code-Panel zu öffnen. 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. Wenn Sie Ihre Änderungen speichern, generiert Kameleoon automatisch eine neue Version Ihrer Variante.
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.
Ansichten in PBX vergleichen und simulieren

​
Vorschau auf verschiedenen Geräten

Um zu sehen, wie Ihre Variante auf verschiedenen Bildschirmgrößen aussieht, klicken Sie auf die Mobil-, Tablet- oder Desktop-Symbole oben auf der Seite. Das Wechseln der Gerätevorschau hat keinen Einfluss auf den generierten Code. Klicken Sie auf Simulate, um das Experiment live auf Ihrer Website zu testen, bevor Sie es starten.

​
Teilen Sie Ihr Experiment

Ihr PBX-Experiment teilen
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.

​
FAQ

Nein, Sie können den grafischen Editor nicht für KI-generierte Varianten verwenden. Obwohl einige Grenzfälle davon profitieren könnten, handhabt PBX alle Szenarien, die der grafische Editor abdeckt. Um Konflikte zu vermeiden, deaktiviert Kameleoon das visuelle Tool für KI-generierte Experimente.
Ja, Sie können Änderungen über mehrere Seiten hinweg prompten. Navigieren Sie zu Ihren gewählten Seiten und wenden Sie Prompts direkt an. Kameleoon kombiniert den Code automatisch in einer einzigen Variation.Testen Sie jedoch die vollständige Erfahrung mit dem Simulationsmodus, um sicherzustellen, dass der Code auf verschiedenen Seiten nicht in Konflikt gerät.
Nachdem Sie eine Variation auf der ersten Produktseite erstellt haben, navigieren Sie zur nächsten Produktseite. Diese Aktion führt den KI-generierten Code erneut aus.Verwenden Sie alternativ den Simulationsmodus, um die Erfahrung auf allen relevanten Seiten zu testen und ein konsistentes Verhalten sicherzustellen.
Ja, Sie können ein Design oder Mockup verwenden. Klicken Sie auf das +-Symbol > Add an image, um Ihre Datei hochzuladen. Ein Mockup allein ist jedoch in der Regel unzureichend. Für beste Ergebnisse verwenden Sie Ihr Design zusammen mit klaren, detaillierten Anweisungen.Behandeln Sie PBX wie einen Entwickler: Geben Sie spezifische Details für die beste Ausgabe an.Beispiel für einen guten Prompt mit Mockup:
  • Fügen Sie Ihr Mockup oder Ihre Design-Datei bei.
  • Beschreiben Sie die zu ändernden Elemente.
  • Geben Sie Abmessungen, Farben und Abstände an.
  • Erklären Sie interaktive Verhaltensweisen.
  • Notieren Sie technische Anforderungen.
PBX übernimmt die Single-Page Application (SPA)-Einstellungen Ihres Projekts. Wenn Sie diese Einstellungen konfiguriert haben (siehe Ein Experiment auf einer Single-Page-App einrichten), verwendet PBX automatisch:
  • Ihre benutzerdefinierten Attribute.
  • Ihre Ausschlussregeln.
  • Alle anderen SPA-spezifischen Konfigurationen.
Nein. Sie müssen warten, bis PBX die Generierung einer Variante abgeschlossen hat, bevor Sie mit einer weiteren beginnen.
Dieses Problem tritt auf sicheren Seiten auf, z. B. in angemeldeten Bereichen, die das Laden innerhalb eines iframes blockieren. Der PBX-Editor verwendet ein iframe, um Webseiten sicher zu bearbeiten. Die Sicherheitseinstellungen Ihrer Website können den iframe-Inhalt blockieren, was zu einem weißen Bildschirm führt.So beheben Sie es: Bitten Sie Ihr Entwicklerteam, die „frame-busting”-Logik zu ändern. Der Code muss überprüfen, ob der Name des Frames kameleoon-pbx-preview ist. Wenn er übereinstimmt, sollte die Logik das Laden der Seite zulassen.Beispielcode:
PBX generiert sauberen, sicheren, responsiven und zugänglichen Code. Er erstellt oft robustere Lösungen als manuelles Codieren, insbesondere für moderne Websites und Single-Page Applications (SPAs). PBX folgt bewährten QA-Praktiken wie browserübergreifenden Tests und visuellen Überprüfungen.Der generierte Code respektiert auch Ihre Projektkonfigurationen:
  • PBX wendet SPA-Einstellungen und benutzerdefinierte Attribute automatisch an.
  • Er hält Ausschlussregeln ein.
Diese Überlegungen stellen sicher, dass der generierte Code reibungslos in Ihre Einrichtung integriert wird und sich an die Regeln für manuell codierte Experimente hält.