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.

How to use this prompt

  1. 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. 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. 3

    Run it, then refine. Ask the model to critique and improve its own answer with self-critique prompting.

Techniques in this prompt

Role-Based

Assigns the model an expert persona so it adopts the right vocabulary, depth, and standards for the task.

Learn this technique
Structured Output

Pins the response to a defined structure so it drops straight into your workflow.

Learn this technique
Step-by-Step

Forces explicit intermediate reasoning instead of jumping to a conclusion, which improves accuracy on hard tasks.

Learn this technique

Recommended models

claudegpt-4ogemini

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