bencium-controlled-ux-designer

Expert UI/UX design guidance aimed at producing unique, accessible, and thoughtfully designed interfaces, used when building web components, pages, or applications or when making visual decisions about colors, typography, and layout. Its defining trait is a strict design-decision protocol: it always asks before making any design decision and never implements colors, fonts, sizes, or layouts until explicitly instructed, presenting alternatives and trade-offs rather than a single correct solution. The accompanying guidelines are framed as practical guidance for once a decision has been approved.

The philosophy pushes interfaces to stand out from generic, machine-generated patterns. It advises against defaulting to a generic look (excessive bauhaus, liquid glass, or apple-like styling), against typical SaaS aesthetics, and against relying solely on solid colors, suggesting photography, patterns, and textures instead, and it draws inspiration from modern landing pages, Framer templates, leading brand studios, and historical movements used as inspiration rather than imitation. Core design principles include simplicity through reduction (every element must justify its existence), material honesty (affordance through color, spacing, and typography rather than shadows; cards via borders and background rather than depth), functional layering instead of skeuomorphic depth, obsessive attention to detail where clarity wins over decoration, a coherent design language, and the idea that the best technology becomes invisible.

In practice the skill specifies concrete standards: a base palette of four to five neutral shades plus one to three saturated accents; headline typefaces with personality and highly legible body/UI type, limited to two or three typefaces on a clear mathematical scale; purposeful, subtle, physics-informed animation around 100 to 300 milliseconds; and spacing built on a mathematical scale such as a 4px base stepping through 8, 16, 24, 32, and 48px. A design-decision checklist verifies purpose, hierarchy, consistency, accessibility to WCAG AA (contrast, touch targets, keyboard navigation), responsiveness across devices, uniqueness against generic patterns, and that approval was obtained before implementing. A companion DESIGN-SYSTEM-TEMPLATE.md provides the meta-framework distinguishing what is fixed, project-specific, and adaptable.