Your Design Doesn't Cover the Empty Cart — Specify Edge States in Claude Design Before Claude Code Starts Writing

Add three prompts before your Claude Design export to cover empty, error, and loading states — or Claude Code invents them during generation.

What you'll be able to do after this: generate a complete edge-state specification in Claude Design so Claude Code receives a real design for every component state, not just the happy path.

• Claude Design generates static states on request — empty, error, loading — that travel in the handoff bundle and give Claude Code a reference layout for each
• Claude Code uses whatever states are in the bundle; states that are missing get invented at generation time (a spinner guess, a raw error string, nothing at all for an empty list)
• State transitions and timing cannot be captured in a design export — add those to CLAUDE.md or a first-message context note separately

The failure mode is common: the design looks great, the bundle lands in Claude Code, and the generated components handle loading with a spinner guess, errors with a raw message string, and empty lists with nothing at all. The design did not cover those states, so the agent invented them.

Three-prompt pattern — run these before you export:

1. Empty states:

Show the [component] when there is no data yet — a new account with an empty list, no search results, and a profile with no activity.

Claude Design generates a placeholder layout with a clear call to action. That static frame goes in the handoff bundle.

2. Error conditions:

Show the [component] in three error states: network failure, permission denied, and validation error. Include the error message, a visual cue, and a recovery action for each.

This gives Claude Code an actual layout for error display rather than an invented stack trace or generic toast.

3. Loading states:

Show the loading state for [component] as a skeleton screen matching the data shape, not a full-page spinner.

A skeleton that mirrors the loaded layout prevents layout shift and gives the agent a concrete shape to generate code for.

Export after all three. The handoff bundle then includes full state coverage and Claude Code can reference each variant directly rather than pausing mid-session to ask you how an error should look.

The limit: design tools capture static states, not transitions. Animation duration, easing curves, and sequencing for loading-to-loaded or error-to-retry transitions cannot live in the export bundle — add them as a note in CLAUDE.md or in the first message of your Claude Code session.

Sources: Using Claude Design for prototypes and UX — Claude Academy · Anthropic overhauled Claude Design to fix the handoff — The New Stack · From Prompt to Pull Request — DEV Community