pixel-process-ug UI/UX Pro Max
Overview
A comprehensive UI/UX design intelligence system that combines visual design expertise with engineering rigor. This skill provides opinionated, production-ready guidance covering style selection, color palettes, typography, UX heuristics, data visualization, and multi-stack implementation. Every recommendation is filtered through a strict priority hierarchy that ensures accessibility and performance are never sacrificed for aesthetics.
Phase 1: Requirements Gathering
- Identify the product type and target audience
- Determine platform(s) (web, mobile, desktop)
- Assess existing brand guidelines or design system
- Define accessibility requirements
- Set performance budgets
STOP — Confirm requirements with user before making design recommendations.
Priority Hierarchy (Non-Negotiable Order)
Do NOT skip or reorder these priorities. Accessibility always comes first.
- Accessibility — WCAG 2.1 AA minimum, AAA preferred
- Contrast ratio: 4.5:1 for normal text, 3:1 for large text
- Keyboard navigation: all interactive elements focusable, visible focus ring
- ARIA labels on all non-text controls
- Screen reader announcements for dynamic content
- Reduced motion: respect
prefers-reduced-motion
- Touch Targets — 44x44px minimum (Apple HIG / WCAG 2.5.5)
- Spacing between targets: minimum 8px
- Clickable area may exceed visual bounds via padding
- Performance
- Images: WebP with AVIF fallback, lazy loading below fold
- CLS < 0.1, LCP < 2.5s, FID < 100ms
- Font loading:
font-display: swap, preload critical fonts - Bundle: code-split routes, tree-shake unused components
- Style — Applied only after 1-3 are satisfied
- Layout — Composition and spacing applied last
Phase 2: Style Selection
STOP — Present style recommendation with rationale before proceeding to implementation.
Style Selection Decision Table
| Context | Recommended Styles | Why |
|---|---|---|
| SaaS Dashboard | Minimalism, Swiss, Material 3 | Clean, data-focused, professional |
| Portfolio | Brutalism, Maximalism, Glassmorphism | Expressive, memorable |
| E-commerce | Clean, Material 3, Swiss | Trust, clarity, conversion |
| Mobile App | Material 3, Neumorphism, Minimalism | Native feel, thumb-friendly |
| Landing Page | Glassmorphism, Neo-Brutalism, Japandi | Visual impact, hero focus |
| Enterprise/B2B | Swiss Design, Minimalism | Authority, information density |
| Creative Agency | Maximalism, Brutalism, Cyberpunk | Uniqueness, portfolio showcase |
| Health/Wellness | Japandi, Minimalism | Calming, trustworthy |
| Finance | Swiss, Material 3 | Conservative, professional |
| Kids/Family | Claymorphism, Maximalism | Playful, engaging |
Style Reference (Key Categories)
Glass and Transparency:
- Glassmorphism:
backdrop-filter: blur(10px), semi-transparent backgrounds, subtle border - Frosted Glass: heavier blur (20px+), lower opacity, works on busy backgrounds
- Acrylic (Fluent Design): noise texture overlay + blur
Minimal and Clean:
- Minimalism: maximum whitespace, single accent color, limited element count
- Swiss Design: grid-based, Helvetica/Grotesk, asymmetric balance
- Japandi: warm neutrals, organic shapes, hidden complexity
Bold and Expressive:
- Brutalism: raw, exposed structure, system fonts, harsh borders, no border-radius
- Neo-Brutalism: brutalism + bright accent colors + drop shadows
- Maximalism: layered textures, mixed fonts, dense information
Depth and Dimension:
- Neumorphism: soft inner/outer shadows on same-color backgrounds
- Material Design 3: elevation tokens, tonal surfaces, dynamic color
- Claymorphism: inflated 3D look, pastel colors, inner shadows
Dark and Moody:
- Dark Mode: OLED-safe (#000 backgrounds), muted primaries, reduced brightness
- Cyberpunk: neon on dark, glitch effects, monospace accents
- Noir: high contrast, grayscale with single accent
Phase 3: Color and Typography
STOP — Present palette and font pairing for approval before building components.
Color Palette Selection Rules
| Palette Category | Product Types | Characteristics |
|---|---|---|
| SaaS/B2B (24 palettes) | Dashboards, admin tools | Professional blues, teals, slates |
| E-commerce (20 palettes) | Shops, marketplaces | Warm, trust-building ambers, greens |
| Health/Wellness (18 palettes) | Health apps, meditation | Calming greens, soft blues, lavender |
| Finance (15 palettes) | Banking, trading | Deep blues, golds, conservative neutrals |
| Creative (22 palettes) | Portfolios, agencies | Bold, saturated, unexpected combos |
| Social (16 palettes) | Communities, social apps | Vibrant, energetic, gradient-friendly |
| Education (14 palettes) | Learning, courses | Friendly, approachable, moderate saturation |
| Enterprise (12 palettes) | Corporate tools | Muted, authoritative, high-contrast |
| Kids/Family (10 palettes) | Children's apps | Bright primaries, rounded, playful |
| Luxury (10 palettes) | Premium brands | Black, gold, minimal, high whitespace |
Color Token Rules
- Primary: brand identity color, used for CTAs and key actions
- Secondary: complementary, used for secondary actions and accents
- Neutral: gray scale for text, borders, backgrounds (minimum 9 shades)
- Semantic: success (#22C55E), warning (#F59E0B), error (#EF4444), info (#3B82F6)
- Always define as semantic tokens:
--color-action-primary, not--color-blue-500
Dark Mode Palette Rules
| Rule | Implementation |
|---|---|
| Do NOT invert colors | Remap to dark-appropriate equivalents |
| Reduce saturation 10-20% | Prevent eye strain on dark backgrounds |
| Elevation = lighter surface | Not shadow-based like light mode |
| Text hierarchy | #E2E8F0 (primary), #94A3B8 (secondary), #64748B (tertiary) |
Font Pairings (Top 10)
| Pairing | Best For |
|---|---|
| Inter + Source Serif 4 | SaaS, dashboards |
| Geist + Geist Mono | Developer tools, technical |
| DM Sans + DM Serif Display | Marketing, editorial |
| Plus Jakarta Sans + Lora | Modern professional |
| Outfit + Newsreader | Creative agencies |
| Manrope + Bitter | Enterprise applications |
| Space Grotesk + Space Mono | Tech startups |
| Satoshi + Erode | Premium/luxury |
| General Sans + Gambetta | Editorial/publishing |
| Cabinet Grotesk + Zodiak | Bold branding |
Typography Scale (Default)
--text-xs: 0.75rem / 1rem
--text-sm: 0.875rem / 1.25rem
--text-base: 1rem / 1.5rem
--text-lg: 1.125rem / 1.75rem
--text-xl: 1.25rem / 1.75rem
--text-2xl: 1.5rem / 2rem
--text-3xl: 1.875rem / 2.25rem
--text-4xl: 2.25rem / 2.5rem
Phase 4: UX Guidelines Application
Navigation Rules
- Primary navigation: maximum 7 items (Miller's Law)
- Current location always indicated (breadcrumb or active state)
- Back button must always work as expected
- Search available on every page for content-heavy apps
Form Rules
- Labels above inputs, never placeholder-only
- Inline validation on blur, not on keystroke
- Error messages: specific, actionable, adjacent to field
- Auto-focus first field on page load
- Submit button disabled until form valid (with explanation)
- Progress indicator for multi-step forms
Feedback Rules
- Loading states for any action > 300ms
- Skeleton screens over spinners for content loading
- Toast notifications: auto-dismiss success (3s), persist errors
- Tap feedback: 80-150ms response time
- Optimistic UI for low-risk actions
Content Layout Rules
- F-pattern for text-heavy pages
- Z-pattern for landing pages
- Above-the-fold: value proposition + primary CTA
- One primary CTA per viewport
Mobile Rules
- Bottom navigation for primary actions (thumb zone)
- Pull-to-refresh for feed content
- Swipe gestures with visual affordance
Phase 5: Implementation
Chart Type Selection Decision Table
| Data Relationship | Chart Types |
|---|---|
| Comparison | Bar, Grouped Bar, Lollipop, Dot Plot |
| Trend over Time | Line, Area, Sparkline, Step |
| Part-to-Whole | Pie (max 5 slices), Donut, Treemap, Stacked Bar |
| Distribution | Histogram, Box Plot, Violin, Density |
| Correlation | Scatter, Bubble, Heatmap |
| Flow/Process | Sankey, Funnel, Waterfall |
| Geographic | Choropleth, Dot Map, Cartogram |
| Hierarchical | Sunburst, Icicle |
Supported Stacks
| Stack | Key Patterns |
|---|---|
| React | JSX components, hooks, CSS Modules / Tailwind |
| Next.js | App Router, Server Components, Image optimization |
| Vue | Composition API, <script setup>, Pinia |
| Svelte | Reactive declarations, transitions, SvelteKit |
| SwiftUI | Declarative views, ViewModifiers, @State/@Binding |
| React Native | Flexbox, Platform.select, SafeAreaView |
| Flutter | Widgets, Material/Cupertino, MediaQuery |
| Tailwind CSS | Utility-first, @apply sparingly, design tokens via config |
| shadcn/ui | Radix primitives, Tailwind variants, cn() utility |
| HTML/CSS | Semantic HTML5, CSS Grid/Flexbox, custom properties |
Design Token Architecture
master.tokens.json -> Primitive values (colors, spacing, fonts)
semantic.tokens.json -> Mapped meanings (action-primary, surface-elevated)
component.tokens.json -> Component-specific (button-padding, card-radius)
overrides/
brand-a.tokens.json -> Brand-specific overrides
dark.tokens.json -> Dark mode overrides
- Master tokens are read-only defaults
- Overrides are shallow-merged at runtime
- Component tokens reference semantic tokens only
- Never reference primitive tokens in components
Quick Wins Checklist
- No emoji as icons — use Lucide React or Heroicons
- Tap feedback delay: 80-150ms
- Semantic color tokens (not raw hex values)
- 8dp spacing rhythm (4, 8, 12, 16, 24, 32, 48, 64)
-
prefers-color-schememedia query for dark mode -
prefers-reduced-motionfor animations -
:focus-visibleinstead of:focusfor keyboard-only focus - Image aspect ratios set to prevent CLS
- Font preloading for above-the-fold text
-
loading="lazy"on below-fold images
Anti-Patterns / Common Mistakes
| Anti-Pattern | Why It Is Wrong | What to Do Instead |
|---|---|---|
opacity for disabled text |
Kills readability | Use distinct disabled color token |
| Fixed pixel breakpoints only | Ignores component context | Use container queries for components |
| Hamburger menus on desktop | Hides primary navigation | Visible nav bar on desktop |
| Carousel for critical content | Most users see only first slide | Use static layout or accordion |
| Infinite scroll without URL persistence | Cannot share or return to position | Persist scroll position in URL |
| Modal on modal | Confusing, accessibility nightmare | Redesign to avoid nested modals |
| Auto-playing media | Annoying, accessibility violation | Require user interaction to play |
| Color as only differentiator | Color-blind users excluded | Add shape/pattern/text labels |
| Placeholder-only labels | Disappear on input, accessibility issue | Use visible labels above inputs |
| Raw hex values in components | Impossible to theme | Use semantic design tokens |
Integration Points
| Skill | Integration |
|---|---|
ui-design-system |
Token architecture and component library |
canvas-design |
Data visualization and charts |
mobile-design |
Mobile-specific design patterns |
ux-researcher-designer |
User research informs design decisions |
artifacts-builder |
Standalone prototypes and demos |
senior-frontend |
Implementation of UI components |
accessibility |
WCAG compliance validation |
Skill Type
FLEXIBLE — Follow the priority hierarchy (accessibility > touch > performance > style > layout). Style recommendations adapt to context. Accessibility and performance rules are strongly recommended and should not be deprioritized.