🎨 Skill: UI/UX Pro (v1.2.0)
Executive Summary
The ui-ux-pro is the visionary architect of the user experience. In 2026, design is no longer just about aesthetics; it is about Impeccable Craftsmanship, Intentionality, and Human-Grade Production. This skill focuses on building high-end interfaces that eradicate "AI Slop" by choosing bold, distinctive directions and executing them with technical precision (OKLCH, Container Queries, Fluid Motion).
📋 Table of Contents
- Core Design Philosophies
- The "Do Not" List (Anti-Patterns)
- Anti-AI Slop Protocol
- Modern Layout Patterns
- Tactile Visual Styles (Optional)
- Design-to-Code Protocol
- Reference Library
🏛️ Core Design Philosophies
- Impeccable DNA: Adhere to the standards in
IMPECCABLE_DNA.md. Prioritize uniqueness over templates. - Intentional Tonality: Choose a bold extreme (e.g., Brutally Minimal, Editorial, Industrial) and stay consistent.
- AX-First Architecture: Ensure the UI is navigable by both humans and AI agents.
- Fluid Precision: Use
clamp()for spacing/type and natural easing for motion. - Resilient Craft: Design for the "Unideal" (long text, slow networks, RTL).
🚫 The "Do Not" List (Anti-Patterns)
| Anti-Pattern | Why it fails in 2026 | Modern Alternative |
|---|---|---|
| AI Slop Aesthetics | Generic purple gradients, glassmorphism-by-default. | Distinctive Brand Direction. |
| Inter/Roboto Default | Looks like a generic template/AI output. | High-Character Typography. |
| Identical Card Grids | Lazy layout shorthand; visually monotonous. | Asymmetric/Varied Spacing. |
| Emoji-Only UI | Lacks professional depth and scalability. | SVG Systems / Custom Icons. |
| Fixed Constraints | Breaks on non-standard viewports. | Container Queries & Flex. |
💎 Anti-AI Slop Protocol
Before shipping any UI, perform the Quality Audit:
- Typography: Is this font overused (Inter/Roboto)? If so, replace with a distinctive pairing.
- Color: Are we using the "AI Purple/Cyan" palette? If so, shift to a purposeful
oklch()palette. - Layout: Does it look like a generic dashboard? If so, introduce asymmetry or "Bolder" contrast.
- The Test: Would a human believe an AI made this immediately? If yes, REWORK.
💧 Tactile Visual Styles (Use Sparingly)
Styles like Glassmorphism and Neumorphism should be used only when they serve a clear Functional Purpose (e.g., depth in complex layering), never as decorative filler.
Glassmorphism v3
- Backdrop Blur: Use
backdrop-blur-xlfor depth, not just "vibes". - Edge Light: 1px semi-transparent borders to define structure.
Neumorphism v2
- Muted Tactility: Subtle, low-contrast "pressed" effects.
- Hybrid Style: Combining glass and neumorphism for maximum depth.
🤖 AI-Adaptive Interfaces
- Dynamic Themes: Adapting color and tone based on session sentiment.
- Component Swapping: Replacing UI elements based on user struggle signals.
📖 Reference Library
Detailed deep-dives into UI/UX Excellence:
- Impeccable DNA: High-fidelity design standards.
- Bento Grid Architecture: Modular layout design.
- Neumorphism v2: Modern tactile aesthetics.
- Glassmorphism v3: Smart functional depth.
- AI-Adaptive Layouts: The future of personalized UI.
*Updated: January 22, 2026 - 20:00*