The short version
- A website prompt needs page purpose, hierarchy and responsive behavior. Use these screen briefs to generate a direction, then replace placeholder content and test real interactions.
- 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 website prompt needs page purpose, hierarchy and responsive behavior. Use these screen briefs to generate a direction, then replace placeholder content and test real interactions.
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 public library website
Design a public library website 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 freelance portfolio
Design a freelance portfolio 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 small museum site
Design a small museum site 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 SaaS documentation home
Design a SaaS documentation home 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. A recipe collection
Design a recipe collection 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 community events site
Design a community events site 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 clinic appointment page
Design a clinic appointment 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?
8. A job board
Design a job board 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. A nonprofit impact page
Design a nonprofit impact 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?
10. A subscription account area
Design a subscription account area 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 public library website
Design a public library website 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 freelance portfolio
Design a freelance portfolio 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 small museum site
Design a small museum site 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 SaaS documentation home
Design a SaaS documentation home 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. A recipe collection
Design a recipe collection 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 community events site
Design a community events site 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 clinic appointment page
Design a clinic appointment 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.
18. A job board
Design a job board 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. A nonprofit impact page
Design a nonprofit impact 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.
20. A subscription account area
Design a subscription account area 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 public library website
Design a public library website 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 freelance portfolio
Design a freelance portfolio 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 small museum site
Design a small museum site 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 SaaS documentation home
Design a SaaS documentation home 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. A recipe collection
Design a recipe collection 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 community events site
Design a community events site 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 clinic appointment page
Design a clinic appointment 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.
28. A job board
Design a job board 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. A nonprofit impact page
Design a nonprofit impact 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.
30. A subscription account area
Design a subscription account area 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
Continue with a related guide
Put it into practice
Your next step
Have a question or a correction?
Contact Thrive
