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
#2b5d50to#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:- Die Änderung definieren
- Geben Sie genau an, welche Transformation Sie erreichen möchten.
- 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.
- Das Verhalten erklären
- Beschreiben Sie, wie das Zielelement auf Benutzeraktionen reagieren soll.
- Grenzen und Einschränkungen festlegen (optional)
- Definieren Sie technische Einschränkungen, Responsive-Anforderungen und was nicht passieren 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.”
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.
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, oder Designs direkt aus Figma importieren.