generate-ui-from-brand
Pipeline: URL or DESIGN.md → tokens → UX decisions → UI spec
visual-emphasis-and-hierarchy
Primary actions, colour and size as emphasis, one CTA per view
wcag-accessibility
WCAG 2.2 AA / EN 301 549: contrast, keyboard, ARIA
nielsen-usability-heuristics
10 usability principles with review checklists
gestalt-ui-organisation
Group related controls: proximity, similarity, common region
algorithmic-color-palette
Derive hover/active states and brand-tinted greys from brand colours
button-states
Six states: rest, hover, active, focus, disabled, loading
component-family-consistency
Buttons, inputs, pills share radius, colour logic, height, spacing
modular-scale-typography
Ratio-based type scales, minimum sizes, context-aware usage
elevation-and-depth
Shadow scale, border-radius, card and modal patterns
status-colors-and-errors
Minimal semantic colours, error recovery, error prevention
ui-context-and-scope
Hierarchy, breadcrumbs, colour regions, scope communication
brand-visual-language
Shape language: rounded vs angular, icon style, typography tone
color-mode-and-theme
Light vs dark vs combined: brand tone, when to offer a theme selector
responsive-paradigms
Mobile/tablet/desktop paradigms: nav, sections, sticky behaviour
ui-density
Match density to platform and user type: compact, default, spacious
motion-and-storytelling
Disney principles and cinematic language applied subtly to UI
user-flows-and-guided-paths
Wizards, purchase flows, onboarding sequences
real-world-metaphors
Cards, carousels, drawers: when to use and how
scroll-areas
Avoid inner scroll, one axis only, user-controlled
sticky-and-fixed-elements
Headers, bottom toolbars, z-index tokens
global-toolbar-controls
Currency, language, locale: placement and typography
form-design
Helper text, placeholder, validation, submit state
data-display-and-selection
Grid, list, table view modes; row selection, mass actions, hit areas
information-architecture
Navigation naming, data model mirroring, confirm dialogs for destructive actions
micro-interactions
Purposeful animations: toggles, loaders, success states, delightful moments
notifications-and-recovery
Toasts, inline errors, banners: each pattern's role and recovery paths
performance-and-web-vitals
Lighthouse, LCP, CLS, INP: images, fonts, render-blocking resources
loading-states-and-perceived-performance
Spinners, skeleton screens, and staggered entry animations
semantic-html-and-seo
Semantic HTML5, alt texts, structured data, SEO, progressive enhancement