Describe your product and get a complete library of error states, empty states, and edge case UI patterns with copy, illustrations, and recovery actions.
Paste into any LLM. Use the output to design consistent error and empty state patterns across your entire product.
You are a UX writer and designer who specializes in the moments where things go wrong - turning error states into opportunities and empty states into onboarding moments.
Product type: [SAAS/E-COMMERCE/MOBILE APP/CONTENT PLATFORM]
Brand voice: [PROFESSIONAL/FRIENDLY/WITTY/MINIMAL]
Key user flows: [LIST 3-5 MAIN FLOWS IN YOUR PRODUCT]
Current problem: [GENERIC ERRORS/NO EMPTY STATES/INCONSISTENT PATTERNS/USER CONFUSION]
Design a complete error and empty state system:
**1. Empty State Templates**
First-use empty state (no data yet):
- Illustration style and mood
- Headline: encourage action ("No projects yet")
- Description: explain value of creating first item
- Primary CTA: "Create your first [item]"
- Secondary option: "Import from [source]" or "Use a template"
- Sample data toggle: "Explore with sample data"
Search with no results:
- Headline: "No results for '[query]'"
- Suggestions: check spelling, broaden filters, try different terms
- Show popular items or categories
- Clear filters CTA
Filtered with no results:
- Show which filters eliminated all results
- Quick remove individual filters
- "Show all [items] instead" CTA
Inbox/notifications empty:
- Positive framing: "You're all caught up!"
- Light illustration
- No CTA needed (or link to settings)
**2. Error State Templates**
400 Bad Request:
- Headline: "Something doesn't look right"
- Description: what specifically was invalid
- Recovery: fix and retry, or contact support
401/403 Unauthorized:
- Headline: "You don't have access to this"
- Description: who can grant access
- Recovery: request access button, go back
404 Not Found:
- Headline: "This page doesn't exist"
- Description: it may have been moved or deleted
- Recovery: go home, search, recent pages
500 Server Error:
- Headline: "Something went wrong on our end"
- Description: we're looking into it
- Recovery: refresh, try again later, status page link
Network/offline:
- Headline: "You're offline"
- Description: check your connection
- Recovery: auto-retry when connection returns, show cached content
Timeout:
- Headline: "This is taking longer than expected"
- Description: try again or simplify the request
- Recovery: retry button, reduce scope suggestion
**3. Inline Error Patterns**
- Form field error: red border, error icon, specific message below
- Toast error: position, duration, dismiss, retry action
- Banner error: top of page, persistent until resolved
- Modal error: blocking action completion
- Inline retry: retry button next to the failed element
**4. Loading and Partial Failure**
- Section failed to load (rest of page works)
- Image failed to load (broken image replacement)
- Third-party integration error
- Partial data loaded (show what you have, indicate what's missing)
- Background task failed (notification approach)
**5. Permission and Paywall States**
- Feature locked (upgrade to access)
- Usage limit reached (what to do next)
- Trial expired (urgency without panic)
- Pending approval (waiting for admin)
- Maintenance mode (when back, what to do meanwhile)
**6. Copy Guidelines**
- Never blame the user ("Invalid input" becomes "Please enter a valid email")
- Be specific about what went wrong
- Always provide a next step
- Use plain language (no error codes unless also human text)
- Match brand voice even in errors
- Character limits for each text element
**7. Visual Design Standards**
- Illustration style guide for states
- Icon set for different state types
- Color usage (warning vs error vs info vs success)
- Animation for state transitions
- Consistent layout across all states (illustration, heading, text, CTA)
Provide exact copy for each state. Copy should be specific, helpful, and never make the user feel stupid.