The short version
- A UI prompt is more useful when it describes a user task, screen state and accessibility constraints. These examples show layout directions, not measured conversion gains.
- Generated screens are starting points. Test them with actual content, keyboard input, small screens and the people who need to use them. Do not treat visual polish as proof of usability.
A UI prompt is more useful when it describes a user task, screen state and accessibility constraints. These examples show layout directions, not measured conversion gains.
Generated screens are starting points. Test them with actual content, keyboard input, small screens and the people who need to use them. Do not treat visual polish as proof of usability.
How to use this collection
Pick the task closest to your work. Copy the prompt, replace the generic scene or code context with your own facts, and keep the constraints that help you judge the result. Change one variable at a time so you can tell what improved.
The approach follows the Figma First Draft guide: provide concrete context and inspect the output rather than assuming a polished first pass is correct.
Map the task prompts
For map the task, name the user and the decision the screen needs to support.
1. A signup flow for a learning app
Copy prompt
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.Review: Can a new user name the next action without reading a tooltip?
2. A search results screen for jobs
Copy prompt
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.Review: Can a new user name the next action without reading a tooltip?
3. A settings panel for notifications
Copy prompt
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.Review: Can a new user name the next action without reading a tooltip?
4. A checkout review page
Copy prompt
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.Review: Can a new user name the next action without reading a tooltip?
5. An empty state for saved items
Copy prompt
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.Review: Can a new user name the next action without reading a tooltip?
6. A dashboard for an editor
Copy prompt
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.Review: Can a new user name the next action without reading a tooltip?
7. A booking calendar
Copy prompt
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.Review: Can a new user name the next action without reading a tooltip?
8. A mobile navigation menu
Copy prompt
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.Review: Can a new user name the next action without reading a tooltip?
9. An error state for payment
Copy prompt
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.Review: Can a new user name the next action without reading a tooltip?
10. A profile completion screen
Copy prompt
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.Review: Can a new user name the next action without reading a tooltip?
Design the core screen prompts
For design the core screen, name the user and the decision the screen needs to support.
11. A signup flow for a learning app
Copy prompt
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.Review: Check layout at desktop and 360-pixel mobile widths.
12. A search results screen for jobs
Copy prompt
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.Review: Check layout at desktop and 360-pixel mobile widths.
13. A settings panel for notifications
Copy prompt
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.Review: Check layout at desktop and 360-pixel mobile widths.
14. A checkout review page
Copy prompt
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.Review: Check layout at desktop and 360-pixel mobile widths.
15. An empty state for saved items
Copy prompt
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.Review: Check layout at desktop and 360-pixel mobile widths.
16. A dashboard for an editor
Copy prompt
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.Review: Check layout at desktop and 360-pixel mobile widths.
17. A booking calendar
Copy prompt
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.Review: Check layout at desktop and 360-pixel mobile widths.
18. A mobile navigation menu
Copy prompt
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.Review: Check layout at desktop and 360-pixel mobile widths.
19. An error state for payment
Copy prompt
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.Review: Check layout at desktop and 360-pixel mobile widths.
20. A profile completion screen
Copy prompt
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.Review: Check layout at desktop and 360-pixel mobile widths.
Handle missing data prompts
For handle missing data, name the user and the decision the screen needs to support.
21. A signup flow for a learning app
Copy prompt
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.Review: Check whether the user can recover without losing entered work.
22. A search results screen for jobs
Copy prompt
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.Review: Check whether the user can recover without losing entered work.
23. A settings panel for notifications
Copy prompt
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.Review: Check whether the user can recover without losing entered work.
24. A checkout review page
Copy prompt
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.Review: Check whether the user can recover without losing entered work.
25. An empty state for saved items
Copy prompt
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.Review: Check whether the user can recover without losing entered work.
26. A dashboard for an editor
Copy prompt
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.Review: Check whether the user can recover without losing entered work.
27. A booking calendar
Copy prompt
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.Review: Check whether the user can recover without losing entered work.
28. A mobile navigation menu
Copy prompt
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.Review: Check whether the user can recover without losing entered work.
29. An error state for payment
Copy prompt
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.Review: Check whether the user can recover without losing entered work.
30. A profile completion screen
Copy prompt
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.Review: Check whether the user can recover without losing entered work.
What to check before you use the result
Generated screens are starting points. Test them with actual content, keyboard input, small screens and the people who need to use them. Do not treat visual polish as proof of usability.
If the output misses the task, shorten the prompt and specify the missing fact or constraint. Keep a record of the version you used so the final asset or code change can be reproduced.
Further reading
Have a question or a correction?
Contact Thrive
