Die Kurzfassung
- Ein UI-Prompt ist hilfreicher, wenn er Nutzeraufgabe, Bildschirmzustand und Anforderungen an Barrierefreiheit beschreibt. Diese Beispiele zeigen Layoutideen und keine gemessenen Conversion-Erfolge.
- Generierte Oberflächen sind Entwürfe. Teste sie mit echten Inhalten, Tastatureingaben, kleinen Bildschirmen und den Menschen, die sie nutzen sollen. Eine ansprechende Gestaltung belegt noch keine gute Bedienbarkeit.
Ein UI-Prompt ist hilfreicher, wenn er Nutzeraufgabe, Bildschirmzustand und Anforderungen an Barrierefreiheit beschreibt. Diese Beispiele zeigen Layoutideen und keine gemessenen Conversion-Erfolge.
Generierte Oberflächen sind Entwürfe. Teste sie mit echten Inhalten, Tastatureingaben, kleinen Bildschirmen und den Menschen, die sie nutzen sollen. Eine ansprechende Gestaltung belegt noch keine gute Bedienbarkeit.
So nutzt du diese Sammlung
Wähle die Aufgabe, die deiner Arbeit am nächsten kommt. Kopiere den Prompt und ersetze die allgemeine Szene oder den Code-Kontext durch deine eigenen Angaben. Behalte die Vorgaben bei, mit denen du das Ergebnis prüfen kannst. Ändere jeweils eine Variable, damit du erkennst, was besser geworden ist.
Der Ansatz folgt dem Figma-First-Draft-Leitfaden: Gib konkreten Kontext an und prüfe die Ausgabe, statt einen überzeugend formulierten ersten Entwurf ungeprüft zu übernehmen.
Prompts zum Beschreiben der Aufgabe
Benenne beim Beschreiben der Aufgabe die Nutzer und die Entscheidung, die der Bildschirm unterstützen soll.
1. Ein Anmeldeablauf für eine Lern-App
Design a signup flow for a learning app for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?
2. Eine Suchergebnis-Seite für Stellenangebote
Design a search results screen for jobs for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?
3. Ein Einstellungsbereich für Benachrichtigungen
Design a settings panel for notifications for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?
4. Eine Bestellübersicht im Checkout
Design a checkout review page for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?
5. Ein leerer Zustand für gespeicherte Einträge
Design an empty state for saved items for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?
6. Ein Dashboard für eine Redaktion
Design a dashboard for an editor for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?
7. Ein Buchungskalender
Design a booking calendar for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?
8. Ein mobiles Navigationsmenü
Design a mobile navigation menu for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?
9. Ein Fehlerzustand bei einer Zahlung
Design an error state for payment for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?
10. Eine Oberfläche zur Profilvervollständigung
Design a profile completion screen for a person who needs to finish one task quickly. State the audience and task you are assuming. Then show the user goal, entry point, essential action and success state in a low-fidelity flow. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Kann eine neue Person die nächste Handlung erkennen, ohne einen Tooltip zu lesen?
Prompts zur Gestaltung des Hauptbildschirms
Benenne beim Gestalten des Hauptbildschirms die Nutzer und die Entscheidung, die der Bildschirm unterstützen soll.
11. Ein Anmeldeablauf für eine Lern-App
Design a signup flow for a learning app for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.
12. Eine Suchergebnis-Seite für Stellenangebote
Design a search results screen for jobs for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.
13. Ein Einstellungsbereich für Benachrichtigungen
Design a settings panel for notifications for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.
14. Eine Bestellübersicht im Checkout
Design a checkout review page for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.
15. Ein leerer Zustand für gespeicherte Einträge
Design an empty state for saved items for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.
16. Ein Dashboard für eine Redaktion
Design a dashboard for an editor for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.
17. Ein Buchungskalender
Design a booking calendar for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.
18. Ein mobiles Navigationsmenü
Design a mobile navigation menu for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.
19. Ein Fehlerzustand bei einer Zahlung
Design an error state for payment for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.
20. Eine Oberfläche zur Profilvervollständigung
Design a profile completion screen for a person who needs to finish one task quickly. State the audience and task you are assuming. Then use a clear hierarchy, realistic content lengths and one prominent primary action. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe das Layout auf Desktop-Bildschirmen und bei einer mobilen Breite von 360 Pixeln.
Prompts für fehlende Daten
Benenne beim Planen fehlender Daten die Nutzer und die Entscheidung, die der Bildschirm unterstützen soll.
21. Ein Anmeldeablauf für eine Lern-App
Design a signup flow for a learning app for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe, ob die Person den Vorgang fortsetzen kann, ohne bereits eingegebene Angaben zu verlieren.
22. Eine Suchergebnis-Seite für Stellenangebote
Design a search results screen for jobs for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe, ob die Person den Vorgang fortsetzen kann, ohne bereits eingegebene Angaben zu verlieren.
23. Ein Einstellungsbereich für Benachrichtigungen
Design a settings panel for notifications for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe, ob die Person den Vorgang fortsetzen kann, ohne bereits eingegebene Angaben zu verlieren.
24. Eine Bestellübersicht im Checkout
Design a checkout review page for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe, ob die Person den Vorgang fortsetzen kann, ohne bereits eingegebene Angaben zu verlieren.
25. Ein leerer Zustand für gespeicherte Einträge
Design an empty state for saved items for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe, ob die Person den Vorgang fortsetzen kann, ohne bereits eingegebene Angaben zu verlieren.
26. Ein Dashboard für eine Redaktion
Design a dashboard for an editor for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe, ob die Person den Vorgang fortsetzen kann, ohne bereits eingegebene Angaben zu verlieren.
27. Ein Buchungskalender
Design a booking calendar for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe, ob die Person den Vorgang fortsetzen kann, ohne bereits eingegebene Angaben zu verlieren.
28. Ein mobiles Navigationsmenü
Design a mobile navigation menu for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe, ob die Person den Vorgang fortsetzen kann, ohne bereits eingegebene Angaben zu verlieren.
29. Ein Fehlerzustand bei einer Zahlung
Design an error state for payment for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe, ob die Person den Vorgang fortsetzen kann, ohne bereits eingegebene Angaben zu verlieren.
30. Eine Oberfläche zur Profilvervollständigung
Design a profile completion screen for a person who needs to finish one task quickly. State the audience and task you are assuming. Then include empty, loading and error states with recovery actions. Use realistic labels and content lengths, with no invented metrics or testimonials. Describe the information hierarchy, mobile adaptation and next action. Explain one tradeoff and how you would check it with users.Prüfung: Prüfe, ob die Person den Vorgang fortsetzen kann, ohne bereits eingegebene Angaben zu verlieren.
Was du vor der Verwendung des Ergebnisses prüfen solltest
Generierte Oberflächen sind Entwürfe. Teste sie mit echten Inhalten, Tastatureingaben, kleinen Bildschirmen und den Menschen, die sie nutzen sollen. Eine ansprechende Gestaltung belegt noch keine gute Bedienbarkeit.
Wenn die Ausgabe die Aufgabe verfehlt, kürze den Prompt und ergänze die fehlende Angabe oder Vorgabe. Halte fest, welche Version du verwendet hast, damit sich das fertige Material oder die Code-Änderung reproduzieren lässt.
Weiterführende Informationen
Hast du eine Frage oder Korrektur?
Thrive kontaktieren
