Universal Genius UI/UX Framework
A master design rulebook for creating premium, highly usable digital experiences across any platform (iOS, Android, Web, Desktop) and any industry. Built on the universal psychological principles of design to eradicate "boring" UI through strategic architecture, precise color theory, and physics-based interactions.
When to Apply
Reference these guidelines when:
- Designing screens for any platform (mobile apps, web dashboards, e-commerce sites).
- Establishing a brand new, cross-platform design system or visual language.
- Structuring complex data or user flows, regardless of the industry.
- Adapting layouts between large desktop displays and compact mobile viewports.
Rule Categories by Priority
| Priority | Category | Core Principle |
|---|---|---|
| 1 | Universal Usability | Ergonomics (touch/click) and accessibility dictate all base decisions. |
| 2 | Structural Architecture | Scannability and spatial grouping guide the user's focus seamlessly. |
| 3 | UX Psychology | Structure in grayscale first; prioritize logic before aesthetics. |
| 4 | Visual Depth & Texture | Eradicate flatness with subtle overlays, shadows, and overlaps. |
| 5 | Color Mastery | Contrast, legibility, and proportional usage over raw vibrance. |
| 6 | Fluid Interactions | Animations must mimic real-world physics and reward interactions. |
Quick Reference & Directives
responsive-architecture- Use Bento box grids for large screens; adapt to stacked, swipeable cards for mobile viewports.thumb-zone-ergonomics- Place primary CTAs and critical navigation within the bottom 30% of mobile screens.law-of-proximity- Group related elements tightly; use whitespace (not just lines) to separate unrelated sections.grayscale-first- Build all wireframes in gray to lock visual hierarchy before introducing brand colors.z-and-f-patterns- Align web elements for Z-pattern scanning (Hero sections) or F-pattern (data-heavy feeds).60-30-10-rule- 60% neutral background, 30% secondary interface (cards/nav), 10% primary accent color (strictly CTAs).tinted-darks- Never use pure#000000or#FFFFFF. Use tinted neutrals (slate, zinc, off-white) to reduce eye strain.overlapping-elements- Allow secondary elements (badges, floating FABs, tooltips) to physically overlap boundaries to create depth.physics-based-motion- Gestures (swipe, drag, pull-to-refresh) must scale down slightly and utilize spring physics on release.
How to Use This Skill
When processing UI/UX requests across any platform, follow this exact workflow:
- Context & Ergonomics: Determine the primary platform (Mobile Touch vs. Desktop Mouse). Ensure minimum 44x44px touch targets for mobile.
- Grayscale Wireframing (UX First): Output structural code using neutral placeholders. Apply the Law of Proximity and layout systems without color.
- Color & Contrast Injection: Replace grayscale placeholders adhering to the 60-30-10 rule. Verify a minimum 4.5:1 text contrast ratio.
- Texture & Depth: Elevate the UI by adding overlapping elements, subtle mesh gradients, or 1% noise overlays to prevent "flat" designs.
- Fluid Interactions: Add platform-appropriate motion (e.g., hover states for web, tap-highlights and swipe reveals for mobile).
Cross-Platform Implementation Guidelines
- Web (React/Next.js/Tailwind): - Layouts: Use
gridandflexutilities.- Interactions: Apply
transition-all duration-300 ease-in-outandhover:-translate-y-1. - Backgrounds: Use
bg-primary/20 blur-[100px]for mesh glows.
- Interactions: Apply
- Mobile (React Native/Flutter/SwiftUI):
- Layouts: Utilize safe area insets and scroll views.
- Interactions: Use native gesture handlers. Implement spring physics for modals and bottom sheets.
- Sizing: Hardcode minimum touch targets (
min-h-[44px] min-w-[44px]).
Actionable Execution: Do's and Don'ts
| Rule | Do | Don't |
|---|---|---|
| Color Base | Use tinted darks/lights (e.g., slate-900 or gray-50) | Use harsh #000000 or #FFFFFF |
| Mobile UX | Place primary actions in the bottom "thumb zone" | Hide critical CTAs at the top-left of mobile screens |
| Element Spacing | Use strict spacing multiples (e.g., 4pt/8pt grid) | Use arbitrary or inconsistent padding |
| Backgrounds | Layer a subtle noise texture or blurred mesh glow | Leave vast amounts of empty, flat hex color |
| Gestures | Provide instant visual feedback (scale/opacity) on touch | Have static elements that don't react to user input |
Pre-Delivery Checklist
- Wireframe passes the grayscale test (hierarchy and flow are clear without color).
- Pure black (
#000000) and pure white (#FFFFFF) are replaced with tinted alternatives. - The 60-30-10 color proportion rule is strictly maintained.
- Interface is ergonomically sound for the target platform (proper touch targets for mobile, hover states for web).
- A subtle mesh gradient, shadow depth, or noise texture is present to eliminate flatness.
- Draggable/swipeable/clickable elements utilize physics-based scaling and visual feedback.
- Accessibility standards are met (4.5:1 contrast, logical tab/focus order).