Mark each state as defined or missing
For one component or screen, mark whether loading, empty, success, warning, disabled, and error states are defined.
UI STATE COVERAGE SCORE
State Craft
Enter which of the six standard UI states are defined for a component or screen and get a state-coverage completeness score plus a list of missing states.
- Uses your inputs in a transparent calculation
- Instant result with practical next steps
- No signup required
Planning guidance only. Validate important decisions with customer evidence and your delivery team.
YOUR INPUTS
Build your result
Complete every field. The result updates only when you choose Calculate.
How it works
We calculate a state-coverage score
Your score is the share of the six standard states that are defined, out of 100.
Get the specific states to design next
Missing states are listed by name so design and engineering have a precise, shared checklist instead of guessing which states still need work.
Continue learning: How to align MVP design states with acceptance criteria · How to design empty states for a new MVP
Frequently asked questions
Does State Craft generate the actual UI states for my component?
No. State Craft computes a completeness score entirely from the yes/no answers you give for one component. It does not generate visual designs and does not run a real AI/LLM generation step — it is a coverage checklist, not a design tool.
How is State Craft different from the Empty State Copy Writer or Empty-State Requirement Planner?
Those two tools focus specifically on empty states — writing empty-state copy and checking empty-state coverage across screens. State Craft covers the full standard UI-state set for one component: loading, empty, success, warning, disabled, and error. Use the empty-state tools when empty states are your specific concern; use State Craft when you want full state coverage for a component, not just its empty state.
How is this different from Edge Case UX?
Edge Case UX checks scenario-level coverage for a whole screen or workflow — no data, failed requests, denied permissions, offline, invalid input. State Craft checks the visual UI-state set for one specific component — loading, empty, success, warning, disabled, error. They overlap on empty and loading, but State Craft is about the component's visual states and Edge Case UX is about the screen's handled scenarios.
Do all six states apply to every component?
Most interactive or data-driven components benefit from all six, but a purely static component (a logo, a footer) may not need most of them. Use judgment — the score is most useful for components that load data, accept input, or can be disabled.
What should I do with a low coverage score?
Treat each missing state as a small, scoped design task before development — even a one-line placeholder for warning or disabled states prevents an inconsistent-looking component later.
How We Compare
| Feature | MVPHub | Figma | Storybook |
|---|---|---|---|
| Full 6-state coverage score for one component | Included | Not included | Not included |
| Named list of missing states | Included | Not included | Not included |
| Design and prototype component states visually | Not included | Included | Limited |
| Live, interactive component development environment | Not included | Not included | Included |
Figma is where each state actually gets designed, and Storybook is where built components get developed and previewed state by state. State Craft runs earlier — a quick checklist confirming which of the six standard states a component needs before anyone opens either of those tools.
Related tools
Embed this tool
Add this tool to your site with the canonical iframe below. It remains hosted and maintained by MVPHub.