| name | interface-design |
| description | Design a polished interface from hierarchy, layout, typography, controls, states, responsive behavior, accessibility, and visual consistency. |
Interface Design
Use when a defined product flow needs detailed UI/UX design or an existing interface needs redesign.
Procedure
- Confirm user goal, flow, content, platform, design-system constraints, and target breakpoints.
- Establish hierarchy through structure and typography before decoration.
- Use controls and interaction patterns whose affordances match expected behavior.
- Design complete states: default, hover/focus, active, selected, disabled, loading, empty, validation, error, and success as applicable.
- Check touch targets, contrast, focus visibility, text scaling, responsive layout, and keyboard implications.
- Review consistency with surrounding product surfaces.
- Provide specs/assets and interaction notes needed by frontend engineering.
Quality gate
The interface must be understandable, operable, and complete across realistic states, not just visually attractive in a single screenshot.
