What this prompt does
This prompt designs a complete error and empty-state system for your product — the overlooked screens that quietly shape user trust and support load. You provide [product_name], [product_type], [framework], [brand_personality], [primary_action], [illustration_style], and [illustration_count], and it covers HTTP error pages, empty states, loading states, connection/offline states, partial-failure states, and design specifications including SVG illustrations and copy guidelines.
The structure works because these screens are usually an afterthought until support tickets pile up. The prompt is a checklist that forces coverage of every state — from a 404 with a search bar to a skeleton screen matching real content layout to an offline banner that queues actions. It ties tone to your [brand_personality] and the copy rule that an error should never blame the user, and it generates [illustration_count] SVGs in your [illustration_style]. Every state answers three questions: what happened, is it the user's fault, and what to do next.
When to use it
- You're shipping a web app and want error and empty states designed up front, not after support complaints.
- You need consistent HTTP error pages (401, 403, 404, 429, 500, 503) with helpful recovery paths.
- You want skeleton screens that match real content layout instead of generic spinners.
- You're handling offline and partial-failure states and need graceful degradation patterns.
- You need copy guidelines that set a consistent tone and never blame the user.
- You want
[illustration_count]SVG illustrations in a defined[illustration_style]for key states.
Example output
You get a categorized state system: HTTP error pages each with plain-language explanations and recovery actions (re-login that preserves the URL, retry countdowns, incident links); empty states for dashboards, lists, search, and filtered views with clear first-action CTAs; loading states using content-matched skeletons and optimistic UI; connection and offline states with queued actions and reconnect banners; partial-failure handling for individual widgets; and design specs — SVG code for [illustration_count] states, per-state copy tone, entrance animations, responsive behavior, and screen-reader announcements.
Pro tips
- Set
[brand_personality]carefully; it drives the copy tone across every state, from playful to strictly professional. - Use
[primary_action]so empty-state CTAs point users toward what the product is actually for. - Match
[illustration_style]to your real design language (minimal line art, full-color) so the SVGs fit. - Cap
[illustration_count]at the states that matter most; you rarely need a unique illustration for every screen. - Keep the rule that errors never blame the user — it's the single biggest trust lever in this whole system.
- Match
[framework]to your stack so the generated state components are reusable rather than throwaway.
