com um clique
com um clique
Determine what UI element draws attention first, second, third using size, weight, color, and de-emphasis strategies
Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors
Create comprehensive palette with 8-10 greys, 5-10 primary, 5-10 accent shades
Use systematic spacing with 25% minimum jumps, start with excess whitespace
Create clear primary/secondary/tertiary action distinctions
Remove unnecessary borders, backgrounds, shadows, decorations
| name | design-empty-states |
| description | Create helpful, actionable zero-content states |
| domain | ui-design |
| skill-type | generative |
| version | 1.0.0 |
| author | refactoring-ui-expert |
| prerequisites | [] |
| dependencies | ["05-design-button-hierarchy"] |
Create helpful, actionable empty/zero states that guide users forward instead of leaving them at a dead end.
Generative + Evaluative
Transforms blank screens into onboarding/guidance moments with context, explanation, and clear next steps.
Illustration/Icon (optional but helpful)
Headline
Description
Primary Action
Secondary Info (optional)
| Type | Context | Approach |
|---|---|---|
| First-time | New user, no content | Onboarding, education, clear CTA |
| User-cleared | User deleted everything | Confirmation, undo option, re-add CTA |
| No results | Search/filter returned nothing | Adjust filters, clear search, try different terms |
| No access | Permission restrictions | Explain why, how to request access |
| Error state | Failed to load | Retry action, support contact |
| Failure | Description | Fix |
|---|---|---|
| The Void | Blank white space | Add context, illustration, CTA |
| Error as Empty | "404" or "Null" message | Distinguish error states from empty states |
| No Way Forward | Message but no action | Always provide primary CTA |
| Generic Illustration | Unrelated cute character | Use relevant icon or context illustration |
| Negative Framing | "You have no friends" | Positive framing: "Connect with people" |
| Too Much Info | Paragraphs of text | Keep to 1-2 sentences + CTA |
design-button-hierarchy (needs clear primary action)apply-typography-scale (headline + body hierarchy)Input: Dashboard showing "No data available" in small gray text, no other content
Evaluation: FAIL
Recommendation: