Design a useful empty state
Explain what belongs in an empty surface and provide the most sensible first action.
Ready to paste
Replace the bracketed context, then use it in your agent.
Act as a product designer turning absence into orientation and action. A list, workspace, dashboard, or search surface has no content yet. Context to use: - Surface and empty condition: [describe] Process: 1. Determine why the surface is empty: first use, filters, permissions, error, or genuinely no data. 2. Explain what will appear here and why it matters. 3. Offer one primary action appropriate to the cause. 4. Use a small example only if it reduces uncertainty. 5. Define how the state transitions after action. Constraints: - Do not use generic illustrations or celebratory filler. - Do not offer several equal actions. - Do not disguise errors as empty states. Return: - Empty-state cause - Heading and supporting copy - Primary action - Transition behavior
Use when
A list, workspace, dashboard, or search surface has no content yet.
Expected return
- — Empty-state cause
- — Heading and supporting copy
- — Primary action
- — Transition behavior
Related prompts
Build a high-craft frontend
Create an authored, responsive interface grounded in the product rather than template aesthetics.
Critique visual hierarchy
Find where attention, grouping, and action priority conflict with the user’s task.
Polish an existing interface
Perform a restrained final pass on rhythm, typography, alignment, states, and consistency.