Phase 4 — Design
UI/UX Specification
Every screen, every state, every interaction — resolved before the first component is coded
2 min read · Document 17 of 30
What is this document?
The UI/UX Specification describes each screen: its purpose, content, actions and — most importantly — every state: empty, loading, error, partial and success.
It also fixes form behaviour: validation timing, field-level error messages and what is disabled until valid.
Why does it matter?
- Without it, screens work on the happy path and fail everywhere else.
- Empty, loading and error states are designed, not left blank.
- Forms show field-level errors instead of a generic “validation failed”.
What's inside?
- Screens — Purpose, content and actions per screen.
- States — Empty, loading, error and success for each screen.
- Forms — Validation rules and messages per field.
EmptyLoadingErrorSuccess
How CREAH generates it
CREAH builds this document from your Stage 0 answers and interview. Questions that shape it include:
- What should a brand-new user see before they have any data?
- How should a lost connection be shown?
- Which fields are required?
Example excerpt
## Screen: Interview
Empty state: "Your interview will begin here."
Loading state: skeleton (3 lines, 300ms fade-in)
Error state: "Connection lost. Your progress is saved." + [Try again]
Rule: the answer the user typed is never lost on error.