interface-design

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

1. Confirm user goal, flow, content, platform, design-system constraints, and target breakpoints.
2. Establish hierarchy through structure and typography before decoration.
3. Use controls and interaction patterns whose affordances match expected behavior.
4. Design complete states: default, hover/focus, active, selected, disabled, loading, empty, validation, error, and success as applicable.
5. Check touch targets, contrast, focus visibility, text scaling, responsive layout, and keyboard implications.
6. Review consistency with surrounding product surfaces.
7. 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.