UI State Coverage Planner
Generate a complete state matrix for an AI-built interface so loading, empty, error, stale, permission, and partial outcomes are designed before coding.
Vibe coders whose AI-generated interfaces handle the happy path but need resilient behavior for real data and failures.
You are a product interface engineer who specializes in complete UI state coverage and resilient user feedback.
Inputs:
1. Feature, users, and primary tasks: {{feature_context}}
2. Data sources, actions, and asynchronous operations: {{data_and_actions}}
3. Roles, permissions, and business rules: {{access_rules}}
4. Current happy-path design or code: {{current_design}}
5. Platform, accessibility, tone, and technical constraints: {{constraints}}
Do the following:
1. Trace each user task through initial, loading, populated, empty, filtered-empty, stale, offline, validation-error, system-error, partial-success, success, and permission-limited conditions where relevant.
2. Identify concurrent and transitional states such as optimistic updates, retries, cancellation, duplicate action, background refresh, stale response, and navigation during an operation.
3. Define what the interface shows, announces, enables, disables, preserves, and offers as recovery for every state, using specific user-facing language.
4. Specify skeleton, progress, focus, live-region, keyboard, reduced-motion, responsive, and data-retention behavior without using disabled controls as the only explanation.
5. Produce a state matrix, transition notes, component requirements, copy library, acceptance criteria, and automated plus manual test cases. Remove states that are impossible in the supplied architecture and explain why.How to use
- Describe actions and data sources precisely.
- Include role and business-rule constraints.
- Provide any existing happy-path design.
- Turn the matrix into acceptance tests before coding.
Example input
Feature: Team invitation page in a project app. Actions: load members, invite by email, resend, revoke, change role, and search. Rules: admins can manage members; the last owner cannot be demoted; invitations expire after seven days. Current design: member table and Invite button only. Constraints: mobile responsive, WCAG 2.2 AA, API supports partial failure for bulk invitations.
Example output
The matrix covers first load, populated and truly empty teams, no search results, expired invitations, duplicate emails, last-owner protection, permission loss, stale member data, offline mode, and partial bulk invitation success. It specifies preserved form input, row-level retry, effective status labels, focus after dialogs, live announcements, and mobile action menus. Tests include simultaneous role changes and an admin losing permission during the session.
Customization tips
- — Distinguish no data from no search results.
- — Preserve user input after recoverable errors.
- — Include stale and concurrent-update states.
- — Write recovery actions instead of vague error messages.
Tags
FAQ
What is this prompt for?
How should I customize it?
Are there any limitations?
How is it different from a basic prompt?
Related Prompts
All Vibe Coding prompts →Pre-Launch App Audit Checklist Generator
Generates a tailored pre-launch checklist for an AI-built app, covering commonly overlooked issues like broken links, missing meta tags, and unhandled empty states.
Authentication Flow Implementation Planner
Plan sign-up, sign-in, recovery, session, and authorization behavior for an AI-built app before authentication code is generated.
AI Coding Context Pack Builder
Create a compact, reliable context pack that helps an AI coding assistant understand an existing app before making changes.
Related Skills
API Integration Scaffold Generator
Generates a working code scaffold — auth, request wrapper, error handling, and rate-limit retry logic — for integrating any REST API.
Empty State and Error Experience Designer
Design empty, error, loading, permission, offline, and recovery states with clear guidance, useful actions, accessibility, and product consistency.
Related Articles
What is vibe coding, and where does it break?
Vibe coding can help users prototype quickly with natural language, but it breaks when requirements, security, data model, testing, and maintainability are ignored.
How do I use AI tools like Lovable or Cursor to build an app?
AI app builders work best when users provide a scoped feature request, data model, user flow, UI constraints, acceptance criteria, and test cases.