design_ui_uxlisted

# design_ui_ux UI/UX design is about making software that people can use without frustration. This skill covers design principles, common patterns, and how to make design decisions when building interfaces in code. ## Design Before You Build When asked to build a UI component without a design spec, propose the design first: - What information needs to appear? - What actions does the user need to take? - What's the primary goal of this screen/component? - What's the expected user's mental model? A 5-minute design sketch prevents 2 hours of implementation that needs to be redone. ## Core Design Principles ### 1. Hierarchy — Lead the Eye Every screen has one most-important thing. Use visual hierarchy (size, weight, color, whitespace) to make it obvious what to look at first. ``` Most important: Large, high contrast, visually prominent Supporting: Medium size, secondary color Tertiary: Small, muted color, de-emphasized Actions: Distinct from content — buttons/links vs text ``` If everything is emphasized, nothing is. Audit your UI: can you point to the single most important element on each screen? ### 2. Progressive Disclosure Show only what's needed for the current task. Additional detail appears on demand. - Default views should show the 80% case. - Advanced options should be collapsible, behind a toggle, or in a secondary panel. - Don't overwhelm first-time users with edge case controls. **Example:** A form with 20 optional fields. Show 5 esse