Frontend Interface Design

When To Use

• Creating or modifying visual interfaces in a frontend, mobile, desktop, canvas, game, or other GUI technology.
• The work depends on accessible interaction, adaptive layout, stateful UI behavior, and motion.

Workflow

1. Establish context: audience, task, product tone, density needs, existing design system, target platform, and technical constraints.
2. Implement accessible behavior in code: labels, names, input paths, focus or selection management, control relationships, and status updates.
3. Compose layout and styling from the existing design system: hierarchy, spacing rhythm, type scale, color roles, and motion purpose.
4. Keep every state relevant to the requested surface explicit in code. Examples include loading, empty, error, disabled, selected, expanded, success, and destructive-action progress or failure.

HTML Interfaces

When the target is HTML or web UI: