Skip to main content
PBX Build verwendet KI, um Ihnen zu helfen, Ideen schnell zu entwickeln und zu testen. Sie benötigen keine Programmierkenntnisse, um leistungsstarke Variationen zu erstellen—Sie müssen nur wissen, wie Sie Ihre Vision der KI vermitteln. Betrachten Sie die KI als einen versierten Mitarbeiter. Wenn Sie klare Anweisungen und Kontext liefern, kann die KI präzise Ergebnisse liefern. Verwenden Sie diesen Leitfaden, um die Prinzipien des effektiven Promptings zu lernen.

​
Was macht einen guten Prompt aus?

Um die besten Ergebnisse von der KI zu erzielen, konzentrieren Sie sich auf diese drei Kernprinzipien.

​
Kontext

Geben Sie Kontext zum Ziel Ihrer Änderung. Zu erklären, warum Sie eine bestimmte Idee testen möchten, hilft der KI, ihre Ausgabe an Ihre Ziele anzupassen.
  • Gut: „Change the color of the CTA to blue to improve visibility for the user.” ✅
  • Zu vage: „Make this CTA nicer.” ❌

​
Präzision

Seien Sie spezifisch in Bezug auf die Änderung, die Sie vornehmen möchten. Geben Sie eine genaue visuelle Beschreibung, einschließlich Details wie Größe, Farbe, Form, Position und Stil.
  • Gut: „Add a white delivery truck icon next to the free shipping text to improve the click-through rate. The icon’s height should match the text height.” ✅
  • Kein klares Ziel: „Change up the design.” ❌

​
Einfachheit

Verwenden Sie einfache, umsetzbare Terminologie. Konzentrieren Sie sich auf klare Anweisungen und bleiben Sie bei einer Anfrage pro Prompt. Verkomplizieren Sie den Prompt nicht mit technischem Fachjargon.
  • Gut: „Replace the white background with a top-to-bottom gradient from #2b5d50 to #dae995.” ✅
  • Zu viele Anweisungen: „Change the button color, add a promo image, and move the text.” ❌

​
Folgen Sie einer klaren Prompt-Struktur

Benutzer haben mit PBX Erfolg, wenn ihre Prompts einer klaren Struktur folgen. Verwenden Sie diese vier Schritte für komplexere Anfragen:
  1. Die Änderung definieren
    • Geben Sie genau an, welche Transformation Sie erreichen möchten.
  2. Visuelle und Layout-Änderungen spezifizieren
    • Beschreiben Sie die visuellen Änderungen für das Zielelement, Layout-Richtlinien und Designelemente. Sie können hier auch auf Mockups oder Design-Dateien verweisen.
  3. Das Verhalten erklären
    • Beschreiben Sie, wie das Zielelement auf Benutzeraktionen reagieren soll.
  4. Grenzen und Einschränkungen festlegen (optional)
    • Definieren Sie technische Einschränkungen, Responsive-Anforderungen und was nicht passieren soll.
Verwenden Sie ein LLM, um komplexe Prompts zu verfeinern, bevor Sie sie in Kameleoon verwenden. Sie können sogar die obige Prompt-Struktur als Vorlage bereitstellen, der das LLM folgen soll.

​
Beispiele in Aktion

Schauen Sie sich diese Beispiele an, um zu sehen, wie die Prompt-Struktur in der Praxis funktioniert.

​
Der „Hotels vergleichen”-Prompt

Dieses Beispiel bietet eine klare Struktur für eine komplexe Funktion:
„Build a ‘Compare hotels’ feature like the mockup. Add a ‘Compare properties’ toggle in the left sidebar to turn it on or off. When the toggle is on, show a ‘Compare’ checkbox on each property card in the bottom right. If at least one property is selected, show a sticky bottom tray with thumbnails, an ‘X/5 selected’ counter, and ‘Cancel’ and ‘Compare’ buttons. Clicking ‘Compare’ opens a simple modal showing the selected listing details. Limit selection to 5.”
Hotels vergleichen Prompt
Hotels vergleichen Modal

​
Funktioniert dieser Prompt?

Prompt: „Replace the ‘Show on map’ block with a movable floating ‘Map’ button. Users should be able to drag it anywhere on the page. Clicking it should open the map view.” Urteil: ✅ Ja. Es folgt der empfohlenen Prompt-Struktur und beschreibt die Transformation klar.
Auf Karte anzeigen Prompt
Prompt: „Show a 15% discount for returning loyal customers.” Urteil: ❌ Nein. Die KI hat derzeit Schwierigkeiten, neue Funktionalitäten zu erstellen, die dynamische Daten oder Backend-Logik beinhalten. Prompt: „Make the grid view the default view.” Urteil: ✅ Ja. Wenn die Rasteransicht bereits auf der Seite vorhanden ist, kann die KI den Standardzustand ändern.
Rasteransicht Prompt

​
Im Zweifelsfall…

Wenn Sie unsicher sind, wie Sie einen Prompt formulieren sollen, beachten Sie diese Tipps:
  • Denken Sie groß, bleiben Sie aber realistisch: Die KI kann keine neuen Backend-Funktionalitäten erstellen. Konzentrieren Sie sich auf UI- und UX-Änderungen.
  • Halten Sie es einfach: Einfache Änderungen benötigen keine komplexen Prompts.
  • Behandeln Sie die KI wie einen Teamkollegen: Schreiben Sie Prompts so klar, wie Sie einen Entwickler briefen würden.
Sie können auch die Funktion Draw a sketch verwenden, um den Bereich, den Sie aktualisieren möchten, visuell einzukreisen, die Funktion Import a file verwenden, um ein Mockup bereitzustellen, dem die KI folgen soll, Designs direkt aus Figma importieren oder eine externe Website als Inspiration referenzieren—zum Beispiel: „Repliziere das Filterlayout dieser Reisebuchungswebsite: www.example.com/search.”

​
FAQ

Sie können jede Variante erstellen, die Sie mit Front-End-Code verwalten. Kameleoon kann jedoch keinen Code für Prompts generieren, die Backend-Logik oder serverseitige Änderungen erfordern. Solche Fälle muss ein Entwickler bearbeiten, der mit Ihrem Backend-System vertraut ist.
PBX zeichnet sich bei Aufgaben wie den folgenden aus:
  • Text- oder Inhaltsänderungen, einschließlich Überschriften, CTAs und Haftungsausschlüssen.
  • Stil-Updates, wie Farben, Schriftarten und Layout-Anpassungen.
  • Banner und Inhaltseinfügungen.
  • Einfache interaktive Änderungen, einschließlich Button-Neupositionierung, Links und Modals.
Sie können PBX auch für mehrstufige Abläufe, Galerien oder benutzerdefinierte interaktive Elemente verwenden. Verwenden Sie für fortgeschrittene Fälle einen hybriden Ansatz. Lassen Sie zunächst PBX die anfängliche Implementierung generieren und verfeinern Sie sie dann manuell. Diese Methode kombiniert die Geschwindigkeit der Automatisierung mit der Präzision der benutzerdefinierten Entwicklung.
Unsere KI erkundet viele mögliche Wege, um Ihre Anfrage zu erfüllen, sodass sie kein festes Ergebnis produziert. Derselbe Prompt kann jedes Mal unterschiedliche Ausgaben liefern.Die Abweichungen der Ausgaben treten aufgrund von Folgendem auf:
  • Kontrollierte Zufälligkeit: Das Modell variiert seine Antworten, um Wiederholungen zu vermeiden und Kreativität zu fördern.
  • Prompt-Interpretation: Geringfügige Kontextunterschiede können das Modell dazu veranlassen, sich auf unterschiedliche Details zu konzentrieren.
  • Trainingsvielfalt: Das Modell stützt sich auf Muster aus verschiedenen Trainingsdatensätzen.
Um konsistentere Ergebnisse zu erhalten, fügen Sie Einschränkungen hinzu. Stellen Sie ein Mockup, eine Design-Datei bereit oder definieren Sie einen Master Prompt, der übergeordnete Regeln und Markenkontext für alle Ihre Generationen festlegt.
Ja, Sie können die Ausgabe mit Follow-up-Prompts verfeinern, aber behalten Sie den Prompt-Verlauf im Hinterkopf.Was PBX sich merkt:
  • Den Code, den es zuletzt generiert hat (als Kontext verwendet).
Was PBX sich nicht merkt:
  • Ihre vorherigen Prompt-Anweisungen.
  • Den vollständigen Gesprächsverlauf.
  • Mockups oder Skizzen, die in früheren Prompts hinzugefügt wurden.
Vage Follow-up-Prompts wie „Fix the issue with X and Y” können fehlschlagen, weil PBX der vollständige Kontext fehlt.Bewährte Praktiken für Follow-up-Prompts:
  • Weniger effektiv: „The arrow navigation doesn’t work.”
  • Effektiver: „In the new carousel, the arrow navigation does not work as expected. Fix it using the code generated from my previous prompt. The arrows should appear on the left and right and advance one image per click.”
Seien Sie spezifisch in Follow-up-Prompts:
  • Identifizieren Sie das zu reparierende Element oder die zu reparierende Funktion.
  • Beschreiben Sie das erwartete Verhalten.
  • Verweisen Sie explizit auf den generierten Code.
  • Fügen Sie relevante technische Details hinzu.
Ja, vorausgesetzt, das DOM der Seite enthält den HTML-Code für das durch Hover ausgelöste Element. Wenn JavaScript das Element nach der Hover-Interaktion dynamisch einfügt, erkennt oder ändert Kameleoons KI es möglicherweise nicht genau.Für beste Ergebnisse stellen Sie sicher, dass:
  • Das Hover-Element im anfänglichen HTML vorhanden ist, auch wenn es ausgeblendet ist.
  • Die Struktur stabil ist und nicht asynchron generiert wird.