All screen guides Star on GitHub
Screen guide
Onboarding & empty state design
The job: Get the user to their first win with minimal steps — never a dead end.
Structure
Few steps with visible progress, one decision per step, a strong ‘what's next.’ Empty states are onboarding in disguise — always offer the next action.
Hierarchy
The current step and its single action dominate; progress is visible but quiet.
Mobile
One step per screen, a big primary, progress at top.
Signature patterns
- Stepper / progress
- One question per screen
- Empty state (icon + title + description + action)
- Celebration motion on completion
- Contextual tips
- Skip/defer where fair
Avoid
- asking everything up front
- empty screens with no next action
- no sense of progress
- shaming empty states
- forcing setup before any value
Build it with StyleSeed
This is the screen-typehalf of design judgment — cross it with your app’s domain and you get the actual decisions. StyleSeed bakes both into 74 rules your AI reads automatically; for a onboarding / empty state, reach for the spring motion seed.
Make your AI design a onboarding / empty state right
Open-source design engine for Claude Code, Codex & Cursor. MIT.