devotionn Design Screen
Use when
Creating a new product screen or materially restructuring an existing one.
Procedure
- Inspect product domain, route purpose, existing navigation, data contracts, framework, theme, and component library.
- Identify the primary user task and the information hierarchy required to complete it.
- Choose a visual direction consistent with the product rather than defaulting to generic AI-dashboard aesthetics.
- Reuse existing primitives first; define missing component contracts before scattering one-off markup.
- Implement semantic structure and responsive layout.
- Cover loading, empty, error, partial-data, permission-restricted, and success states where the screen can encounter them.
- Verify keyboard navigation, focus, semantics, contrast, target size, reduced motion, and responsive behavior.
- Render at representative desktop and mobile widths when tooling permits.
- Run deterministic gates, then perform a separate design critique.
Failure conditions
Do not sacrifice existing product behavior for visual simplification. Do not claim responsive or visual correctness from source inspection alone when a runnable surface is available.