frontend-design

Distinctive UI design requires pre-implementation planning with clear design direction, deliberate choices in typography and color theming, intentional motion and layout decisions, and accessibility considerations. This Skill guides you through establishing a memorable visual language and design criteria before building components or layouts.

Accessible typography and color involve selecting distinct typeface choices, establishing cohesive color themes, and ensuring sufficient contrast and readability. This Skill addresses both framework-agnostic implementation and accessible visual details to create interfaces that work for all users.

Thoughtful layout planning balances negative space, deliberate motion, and visual hierarchy to guide user attention. This Skill covers layout construction and motion decisions that work across frameworks while maintaining a consistent, distinctive visual direction.

Yes, this Skill provides framework-agnostic design planning. The principles of design tokens, typography, color theming, and visual language apply across any UI framework or technology stack, from React to Vue to vanilla HTML.

Generic AI aesthetics lack purposeful visual direction and rely on default styling. Distinctive design establishes specific constraints, memorable visual elements, deliberate typography and color choices, and a cohesive language that makes interfaces memorable and intentional.

This Skill is designed for pre-implementation planning, before building components or writing code. It establishes vision, tone, design tokens, and visual criteria that guide all downstream UI construction and layout decisions.