For the makers shipping with v0, Lovable, Bolt & Cursor
AI writes the happy path.
It forgets the other 40%.
Paste an AI-generated React component. Get back the empty, loading, error, success-toast, and validation states the generator skipped — designed with taste, delivered as code.
Paste a component to get started
Or try a sample above. You'll get designed empty, loading, error, success-toast, and validation states back — as code, with a live preview.
The five states teams skip
Not every state fits every component — the engine marks the ones that don’t apply and designs the ones that do.
Empty
Lazy default: A blank div, or “0” shown as if it were real data.
Designed target: An onboarding moment: what this is, and the first action to take.
Loading
Lazy default: A bare centered spinner that tells the user nothing.
Designed target: A layout-matched skeleton so nothing jumps when data lands.
Error
Lazy default: A blunt “Error!” — and a dead end.
Designed target: What happened, why in human terms, what to do, and a retry.
Success toast
Lazy default: A silent submit — the user never learns it worked.
Designed target: A confirming toast: copy, placement, duration, dismissal.
Validation
Lazy default: A raw browser popup, or nothing at all.
Designed target: Inline, per-field, human messages with clear affected fields.
The valuable asset is the engine — detect missing states, generate designed ones. The web app is the first thin wrapper on it.
Get the next states as they ship
No-permission, offline, pagination-end, over-limit — plus a Cursor plugin. Leave your email and hear when it grows.