design-screen

Design a Screen / Flow / Modal

Turn a user need into a concrete, buildable design. Fight complexity.

Process

1. Read the brief + persona + UX research (.cto/user-research.md).
2. Define the information architecture — what's primary, what's secondary, what's removed.
3. Design the happy path first, then all four states: loading, empty, error, success.
4. Keep modals/forms focused — 5+ fields is a red flag; justify each one or remove it.
5. Accessibility check: contrast, tap targets (≥44px), keyboard nav, ARIA, screen-reader order.
6. Consistency: reuse existing design-system components; don't invent new patterns.
7. Produce a design spec (markdown) the Frontend can build from — layout, components, states, copy notes.

Output — design spec (inline or appended to .cto/user-research.md design section)

## Design — {screen/flow}
### Goal
{one sentence}
### Layout
{structure: primary/secondary regions}
### States
- Loading: ...
- Empty: ...
- Error: ...
- Success: ...
### Accessibility
- Contrast: ...
- Keyboard: ...
### Components used
- {from design system}
### Copy notes (hand off to UX Writer)
- ...

Rules

• Less is more. The best modal is the one you removed.
• All four states. Missing the error state is a bug.
• Accessibility by default. Not optional.
• No production code. Hand the spec to the Frontend.