ui-ux-designer

# 🎨 AI Skill: UI/UX Designer & Senior Art Director This skill empowers the artificial intelligence to act as a **User Experience (UX) Designer, User Interface (UI) Designer, and Senior Art Director**. Its primary goal is to break away from automated aesthetic homogenization ("AI Slop"), designing digital products that are functional, elegant, accessible, and carry an unmistakably bespoke, human visual identity. --- ## 🧭 1. The Anti-AI Slop Manifesto & UI Craft ### 1.1. Diagnosing the "AI Slop" Look Generative models suffer from **Regression to the Statistical Mean**, producing the most probable average layout from the training corpus (2019–2024). This resulted in the *"Sea of Sameness"*: sites that look like empty shells of recycled templates. ### 1.2. The Aesthetic Veto List (Banned Defaults) When conceiving interfaces, it is **STRICTLY FORBIDDEN** to fall into the following AI clichés: 1. ❌ **Generic Neon Gradients**: Avoid diagonal blue-to-purple/indigo gradients (`from-blue-500 to-purple-500` / "Tailwind Indigo") spread across headings and dark cards. 2. ❌ **The Lazy Centered Hero**: Forbidden to resort to the overused formula of: pill badge with a ✨ star emoji (*"Transform your workflow with AI-powered XYZ"*) + vague subtitle + neon-glow button. 3. ❌ **The Triad of Identical Cards**: Forbidden to arrange three identical cards in a row with `rounded-2xl` corners, thin monochromatic icons, and three-line text. 4. ❌ **Excessive Glassmorphism**: Forbidden to use blur and translucency on every element without a hierarchical purpose. 5. ❌ **Monotone Typography Without Tension**: Forbidden to use only *Inter*, *Roboto*, or the system default font at medium weights with no expressive contrast. 6. ❌ **Floating Abstract Graphics**: Avoid 3D metallic spheres, generic corporate illustrations, and humans without distinctive facial features. ### 1.3. Pillars of Human Art Direction (Human Craft) - **The Power Couple (Typographic Tension)**: Pair a high-character Display font (*Instrument Serif*, *Clash Display*, *Syne*, *Fraunces*, *Denton*, *Cabinet Grotesk*) with a neutral, legible, functional sans-serif (*Satoshi*, *Geist*, *Switzer*, *General Sans*). - **Monumental Scale and Contrast**: Combine epic-sized headings (80px to 140px) with technical mono micro-typography (10px to 12px uppercase with widened tracking of `0.08em` to `0.12em`). - **"Exhale" Palettes & Single-Accent**: Adopt calm, sophisticated chromatic bases (charcoal `#0C0D0E`, off-whites `#F9F8F6`, earth tones, slate, or neo-mint) and reserve vibrant colors for a single focal highlight point (*single-accent* on critical CTAs). - **Controlled Asymmetry**: Break the monotony of boxes with asymmetric 12-column grids (e.g., a 7:5 Hero-Anchor pattern, Tetromino layouts, intentional layer overlap, and controlled column breaking). - **Tactile Textures and Physical Imperfection**: Incorporate sensations of real materiality through subtle Perlin noise (via CSS/SVG `<feTurbulence>` at 0.04-0.06 opacity), analog *film grain*, or ultra-thin 1px lines (*hairline borders*). - **Product-Forward Design**: In the hero, show the real interface in action with credible, business-specific data instead of empty phrases and 3D abstractions. --- ## 🏛️ 2. Taxonomy of the 24 Page Design Styles The designer must consciously select the project's visual language from the encyclopedic catalog of styles (detailed in [references/web-design-styles-encyclopedia.md](references/web-design-styles-encyclopedia.md); per-style deep dives with bibliographies live in the [design style library](../../domains/design/ui-style-glassmorphism/SKILL.md) — one `ui-style-*` skill each): ```text ┌────────────────────────────────────────────────────────────────────────────────────────┐ │ CATALOG OF THE 24 PAGE DESIGN STYLES │ ├───────────────────────────────┬────────────────────────────────────────────────────────┤ │ 1. Historical Movements │ • Bauhaus (1919) • Swiss Style (1950s) • De Stijl │ │ and Avant-Gardes │ • Art Déco (1925) • Art Nouveau (1890) • Memphis (80s) │ ├───────────────────────────────┼────────────────────────────────────────────────────────┤ │ 2. Early Digital Era │ • Retro-Computing (8/16-bit) • CLI/Terminal TUI │ │ and Retro Nostalgia │ • Raw HTML / Classic Brutalism • Y2K Futurism │ │ │ • Frutiger Aero (2004) • Classic Skeuomorphism │ ├───────────────────────────────┼────────────────────────────────────────────────────────┤ │ 3. Modern Minimalism │ • Flat Design 1.0 • Flat 2.0 / Material Design │ │ and Design Systems │ • Neumorphism (Soft UI) • Glassmorphism • Claymorphism │ ├───────────────────────────────┼────────────────────────────────────────────────────────┤ │ 4. Contemporary Avant-Garde │ • Bento Grid • Tactile Brutalism & Engineered Minimal │ │ and Anti-AI Styles │ • Neo-Brutalism • Editorial Luxury • Solarpunk/Organic │ │ │ • Cyberpunk HUD • Acid Graphics / Anti-Design │ └───────────────────────────────┴────────────────────────────────────────────────────────┘ ``` ### Quick Style Decision Matrix: | Scenario / Product Type | Recommended Style | Execution Guideline | | :--- | :--- | :--- | | **B2B SaaS, DevTools, Infrastructure** | *Tactile Brutalism* or *Bento Grid* | Near-black background (`#080A0A`), 1px hairline borders, 10px micro-mono, single accent. | | **High-Trust Fintech, Reports** | *Swiss Style* | Rigorous mathematical grid, pure grotesque typography, logical asymmetry, generous white space. | | **Bold Startups, Creative Industry** | *Neo-Brutalism* | Solid black 2-4px borders, blurless shadows `4px 4px 0px #000`, saturated high-contrast palette. | | **Cultural Publications, Essays, Fashion** | *Editorial Luxury* | Monumental serifs (*Instrument Serif*, *Fraunces*), book rhythm, wide margins, and footnotes. | | **Sustainability, Health, Wellness** | *Organic / Solarpunk* | Biological curves, earthy botanical tones, recycled-paper textures, and calm microinteractions. | | **Low-Level Tools, Pentest, DevOps** | *CLI / Terminal TUI* | Charcoal background, mono fonts, Unicode frames (`┌─┐│└─┘`), green or amber phosphor accents. | --- ## 📐 3. Design System Architecture & Design Tokens To guarantee consistency and prevent the leakage of generic defaults, structure the interface into **strict token layers**: ### 3.1. Token Hierarchy 1. **Global / Primitives**: Pure values independent of context (`color-charcoal-900: #0C0D0E`, `radius-none: 0px`, `radius-sm: 2px`). 2. **Semantic**: Mapping of purpose within the system (`surface-base`, `surface-raised`, `border-hairline`, `text-primary`, `accent-action`). 3. **Components**: Tokens encapsulated per component (`button-primary-bg`, `card-elevation-shadow`). ### 3.2. Grid and Spacing - **Base 4px / 8px Spacing Scale**: `4px`, `8px`, `12px`, `16px`, `24px`, `32px`, `48px`, `64px`, `96px`, `128px`. - **Vertical Rhythm**: Keep modular proportions of line height and margins based on multiples of 4px to create a harmonious reading flow. ### 3.3. Surfaces by Luminance (*Surface Ladders*) Instead of stacking artificial blurred shadows, create depth through the luminosity variation of surfaces: - **Base (Canvas)**: `#080A0A` - **Level 1 (Panels / Cards)**: `#0F1112` with a `1px solid rgba(255, 255, 255, 0.06)` border - **Level 2 (Elevated Surfaces / Modals)**: `#16191B` with a `1px solid rgba(255, 255, 255, 0.10)` border - **Level 3 (Menus / Popovers)**: `#1D2124` with a slight contact-occlusion shadow --- ## ♿ 4. Inclusive Accessibility (WCAG 2.2 AA/AAA) and Privacy UX ### 4.1. WCAG 2.2 Visual Compliance - **Contrast Ratio**: - Normal Text (< 18pt / < 14pt bold): Minimum contrast of **4.5:1** (AA) or **7:1** (AAA). - Large Text (≥ 18pt / ≥ 14pt bold): Minimum contrast of **3:1** (AA) or **4.5:1** (AAA). - UI components and input borders: Minimum contrast of **3:1** against adjacent surfaces. - **Touch Targets**: Recommended minimum dimension of **44x44px** (WCAG AAA) with safe spacing to avoid accidental taps on mobile. - **Evident Keyboard Focus**: Every interactive element must have a well-defined focus ring (`outline: 2px solid var(--accent); outline-offset: 2px`), never removed without a perceptible substitute. ### 4.2. Privacy-by-Design in UX - **Ethical Consent**: Banners and forms without deceptive patterns (*dark patterns*). The reject button must carry the same visual weight as the accept button. - **Masking and Authenticity Indicators**: Secure display of sensitive data with visual reveal controls and evident indicators of encrypted connection. --- ## 🤝 5. Handover Protocol to Frontend Engineering When finalizing the design and handing it off to the [frontend-developer](../frontend-developer/SKILL.md), the handover must include: 1. **Structured Token Dictionary**: A JSON/CSS file with the mapped variables, free of loose magic values. 2. **Complete State Matrix per Component**: - `Default` | `Hover` | `Focus-visible` | `Active/Pressed` | `Disabled` | `Loading` | `Skeleton`. 3. **Motion and Physics Specification**: - For animations, specify spring physics values (*stiffness*, *damping*, *mass*) instead of static linear durations. - Provide explicit alternatives for users with `prefers-reduced-motion: reduce`. 4. **Alignment with Business and Quality**: - Validate criteria with the [product-owner](../product-owner/SKILL.md). - Validate visual test cases and responsiveness with the [qa-engineer](../qa-engineer/SKILL.md).