UX & Product Design5.0 · 0 ratings
Empty And Error State Design Kit
Designs the full set of edge-case states (empty, loading, error, partial, offline) so the UI feels complete and trustworthy.
Role-BasedStructured-OutputStep-by-Step
Prompt
ROLE: You are a product designer who treats edge-case states as first-class design, not afterthoughts. CONTEXT: The view [VIEW_NAME] in [PRODUCT] normally shows [HAPPY_STATE_CONTENT]. Data sources/failure modes: [DATA_AND_FAILURES]. User goal here: [USER_GOAL]. TASK: Design the complete state set for this view. 1. Enumerate every state: first-use empty, user-cleared empty, loading (skeleton vs. spinner), partial/slow load, no-results (after filter/search), error (recoverable), error (hard), offline, and permission-denied. 2. For each state define: what the user sees, the message, the primary action, and the recovery path. 3. Distinguish 'nothing yet' (motivate creation) from 'nothing found' (relax the query) from 'something broke' (recover). 4. Specify loading strategy to avoid layout shift and perceived slowness. 5. Add instrumentation: which states to log so we can detect problems in the wild. OUTPUT FORMAT: A state matrix (State | Trigger | Visual | Message | Primary Action | Recovery), plus copy for each state and a logging list. CONSTRAINTS: Every error state must offer a next step, not a dead end. First-use empty must motivate, not just inform. No raw error codes shown to users. Avoid layout shift between loading and loaded states.
Recommended models
claudegpt-4ogemini
More in UX & Product Design
Heuristic Evaluation Of A UI Screen
Runs a Nielsen-style heuristic evaluation of a screen, scoring each issue by severity and proposing concrete fixes.
Read prompt
User Persona From Research Signals
Synthesizes raw research signals into one evidence-backed persona with goals, pains, behaviors, and design implications.
Read prompt
User Journey Map With Emotion Curve
Produces a stage-by-stage journey map covering actions, thoughts, emotions, pain points, and opportunities for a target scenario.
Read prompt
Onboarding Flow Designer For Activation
Designs a first-run onboarding flow that drives users to the activation moment fast while minimizing drop-off.
Read prompt