205
empty state
The first time there is nothing, the screen explains why and what to do. A blank table is not a design.
What is empty state?
An empty state is the designed view when a list or search has no rows: reason, and one action. It is different from a loading state and from an error. A new account, a filter that matches nothing, and a failed load are three different empties.
Why does empty state matter when vibe coding?
Models render an empty array as an empty `<table>` or a zero. The user thinks the product is broken. Name the three states.
How do you do empty state?
For every list: loading, empty, error, and data. Empty has one sentence and one button. Search-empty is not the same as never-created.
How do you ask a model for empty state?
Design the empty state for (list). If there is no data yet, explain that and offer (one action). If a filter matches nothing, say that instead. Do not show a blank table. Do not confuse empty with loading or error.
What goes wrong with empty state?
A cheerful illustration and no action. The user still cannot proceed. One next step.