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.
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.
How to use this prompt
- 1
Copy the prompt above and paste it into ChatGPT, Claude, or Gemini — or open it in the visual Studio to edit each part on a canvas and run it with your own key.
- 2
Replace any bracketed placeholders with your specifics. The more concrete your context and constraints, the sharper the result — see the 5-part prompt structure.
- 3
Run it, then refine. Ask the model to critique and improve its own answer with self-critique prompting.
Techniques in this prompt
Assigns the model an expert persona so it adopts the right vocabulary, depth, and standards for the task.
Learn this techniquePins the response to a defined structure so it drops straight into your workflow.
Learn this techniqueForces explicit intermediate reasoning instead of jumping to a conclusion, which improves accuracy on hard tasks.
Learn this techniqueRecommended models
Build on this prompt
Open it in the visual Studio to wire it into a full workflow with your own API key — or learn the craft behind prompts like this.
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.
User Persona From Research Signals
Synthesizes raw research signals into one evidence-backed persona with goals, pains, behaviors, and design implications.
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.
Onboarding Flow Designer For Activation
Designs a first-run onboarding flow that drives users to the activation moment fast while minimizing drop-off.