UX Designer

Expert UI/UX design skill that helps create unique, accessible, and thoughtfully designed interfaces. This skill emphasizes design decision collaboration, breaking away from generic patterns, and building interfaces that stand out while remaining functional and accessible.

Core Philosophy

CRITICAL: Design Decision Protocol

ALWAYS ASK

before making any design decisions (colors, fonts, sizes, layouts)

Never implement design changes until explicitly instructed

The guidelines below are practical guidance for when design decisions are approved

Present alternatives and trade-offs, not single "correct" solutions

Foundational Design Principles

Stand Out From Generic Patterns

Avoid Generic Training Dataset Patterns:

Don't default to "Claude style" designs (excessive bauhaus, liquid glass, apple-like)

Don't use generic SaaS aesthetics that look machine-generated

Don't rely only on solid colors - suggest photography, patterns, textures

Think beyond typical patterns - you can step off the written path

Draw Inspiration From:

Modern landing pages (Perplexity, Comet Browser, Dia Browser)

Framer templates and their innovative approaches

Leading brand design studios

Historical design movements (Bauhaus, Otl Aicher, Braun) - but as inspiration, not imitation

Beautiful background animations (CSS, SVG) - slow, looping, subtle

Visual Interest Strategies:

Unique color pairs that aren't typical

Animation effects that feel fresh

Background patterns that add depth without distraction

Typography combinations that create contrast

Visual assets that tell a story

Core Design Philosophy

Simplicity Through Reduction

Identify the essential purpose and eliminate distractions

Begin with complexity, then deliberately remove until reaching the simplest effective solution

Every element must justify its existence

Material Honesty

Digital materials have unique properties - embrace them

Buttons should communicate affordance through color, spacing, and typography (not shadows)

Cards use borders and background differentiation (not depth effects)

Animations follow real-world physics principles adapted to digital responsiveness

Examples:

Clickable: Use distinct colors, hover state changes, cursor feedback

Containers: Use subtle borders (1px), background color shifts, or generous padding

Hierarchy: Use scale, weight, and spacing rather than elevation

Functional Layering (Not Visual Depth)

Create hierarchy through typography scale, color contrast, and spatial relationships

Layer information conceptually (primary → secondary → tertiary)

Reject skeuomorphic shadows/gradients that imitate physical depth

Embrace functional depth: modals over content, dropdowns over UI

Obsessive Detail

Consider every pixel, interaction, and transition

Excellence emerges from hundreds of small, intentional decisions

Balance: Details should serve simplicity, not complexity

When detail conflicts with clarity, clarity wins

Coherent Design Language

Every element should visually communicate its function

Elements should feel part of a unified system

Nothing should feel arbitrary

Invisibility of Technology

The best technology disappears

Users should focus on content and goals, not on understanding the interface

What This Means in Practice

Color Usage:

Base palette: 4-5 neutral shades (backgrounds, borders, text)

Accent palette: 1-3 bold colors (CTAs, status, emphasis)

Neutrals are slightly desaturated, warm or cool based on brand intent

Accents are saturated enough to create clear contrast

Typography:

Headlines: Emotional, attention-grabbing (personality over pure legibility)

Body/UI: Functional, highly legible (clarity over expression)

2-3 typefaces maximum

Clear mathematical scale (e.g., 1.25x between sizes)

Animation:

Purposeful: Guides attention, establishes relationships, provides feedback

Subtle: Felt rather than seen (100-300ms for most interactions)

Physics-informed: Natural easing, appropriate mass/momentum

Spacing:

Generous negative space creates clarity and breathing room

Mathematical relationships (e.g., 4px base, 8/16/24/32/48px scale)

Consistent application creates visual rhythm

Design Decision Checklist

Before presenting any design, verify:

Purpose

Does every element serve a clear function?

Hierarchy

Is visual importance aligned with content importance?

Consistency

Do similar elements look and behave similarly?

Accessibility

Does it meet WCAG AA standards? (contrast, touch targets, keyboard nav)

Responsiveness

Does it work on mobile, tablet, desktop?

Uniqueness

Does this break from generic SaaS patterns?

Approval

Have I asked before implementing colors, fonts, sizes, layouts?

Design System Framework:

For understanding what's fixed (universal rules), project-specific (brand personality), and adaptable (context-dependent) in your design system, see DESIGN-SYSTEM-TEMPLATE.md (meta-framework, project templates, decision trees).

Visual Design Standards

Color & Contrast

Color System Architecture:

Every interface needs two color roles:

Base/Neutral Palette (4-5 colors):

Backgrounds (lightest)

Surface colors (cards, inputs)

Borders and dividers

Text (darkest)

Use slightly desaturated, warm or cool greys based on brand

Accent Palette (1-3 colors):

Primary action (CTA buttons)

Status indicators (success, warning, error, info)

Focus/hover states

Use saturated colors for clear contrast against neutrals

Palette Structure Example:

Neutrals: slate-50, slate-100, slate-300, slate-700, slate-900

Accents: teal-500 (primary), amber-500 (warning), red-500 (error)

Color Application Rules:

Backgrounds

Lightest neutral (slate-50 or white)

Text

Darkest neutral for primary text (slate-900), mid-tone for secondary (slate-600)

Buttons (primary)

Accent color with white text

Buttons (secondary)

Neutral with border and dark text

Status indicators

Specific accent (green=success, red=error, amber=warning, blue=info)

Interactive states

:

Hover: Darken by 10-15% or shift hue slightly

Focus: Use ring/outline in accent color

Disabled: Reduce opacity to 40-50% and remove hover effects

Color Relationships:

Choose warm or cool intentionally based on brand:

Warm greys

(beige/brown undertones): Organic, approachable, trustworthy

Cool greys

(blue undertones): Modern, tech-forward, professional

Accent colors should have clear contrast with both:

Light backgrounds (for buttons on white)

Dark text (if used as backgrounds for white text)

Intentional Color Usage:

Every color must serve a purpose (hierarchy, function, status, or action)

Avoid decorative colors that don't communicate meaning

Maintain consistency: same color = same meaning throughout

Accessibility:

Ensure sufficient contrast for color-blind users

Follow WCAG 2.1 AA: minimum 4.5:1 for normal text, 3:1 for large text

Don't rely on color alone to convey information (add icons or labels)

Unique Color Strategy:

To stand out from generic patterns:

Avoid default SaaS blue (#3B82F6) unless it fits your brand

Consider unexpected neutrals: warm greys, soft off-whites, deep charcoals

Pair neutrals with distinctive accents: terracotta + charcoal, sage + navy, coral + slate

Test combinations against "does this look AI-generated?" filter

Typography Excellence

Typography Philosophy:

Typography is a primary design element that conveys personality and hierarchy.

Functional vs Emotional Typography:

Headlines/Display

Prioritize emotion, personality, attention (legibility secondary)

Body Text

Prioritize legibility, reading comfort, accessibility

UI/Labels

Prioritize clarity, scannability, consistency

Font Selection:

Use 2-3 typefaces maximum

Limit to 3 weights per typeface (e.g., Regular 400, Medium 500, Bold 700)

Prefer variable fonts for fine-tuned control and performance

Font Version Usage:

Display version

Headlines and hero text only

Text version

Paragraphs and long-form content

Caption/Micro

Small UI labels (1-2 lines, non-critical info)

Recommended Sources:

Google Fonts for web (free, well-optimized, reliable)

System fonts for performance-critical apps (-apple-system, BlinkMacSystemFont, Segoe UI)

Choose fonts that serve your brand's purpose (not "trending" lists)

Typographic Scale:

Use mathematical relationships for size hierarchy:

Ratio

Major third (1.25x) for moderate contrast, Perfect fourth (1.333x) for dramatic

Base size

16px (1rem) for body text

Example scale (1.25x)

:

xs: 0.64rem (10px)

sm: 0.8rem (13px)

base: 1rem (16px)

lg: 1.25rem (20px)

xl: 1.563rem (25px)

2xl: 1.953rem (31px)

3xl: 2.441rem (39px)

4xl: 3.052rem (49px)

5xl: 3.815rem (61px)

Typographic Hierarchy:

Create clear visual distinction between levels

Headlines, subheadings, body, captions should each have distinct size/weight

Use combination of size, weight, and color for hierarchy

Spacing & Readability:

Line height

1.5x font size for body text (e.g., 16px text = 24px line-height)

Line length

45-75 characters optimal for readability (60-70 ideal)

Paragraph spacing

1-1.5em between paragraphs

Letter spacing (tracking)

:

Larger text (headlines): Slightly tighter (-0.02em to -0.05em)

Normal text (body): Default (0)

Small text (captions): Slightly looser (+0.01em to +0.03em)

General rule: As size increases, reduce tracking; as size decreases, increase tracking

Font Pairing Logic:

When using multiple typefaces, create contrast through:

Category contrast

Serif + Sans-serif (classic, clear distinction)

Weight contrast

Light + Bold (dynamic, energetic)

Personality contrast

Geometric + Humanist (modern + warm)

Examples:

Serif headlines + Sans body (editorial, trustworthy)

Display headlines + System body (distinctive + efficient)

Bold sans headlines + Light sans body (modern, clean)

UI Typography:

Specific guidance for interface elements:

Button text

Semi-Bold (600), 14-16px, consistent casing (all-caps OR title case)

Form labels

Regular (400), 14px, positioned above input

Form input text

Regular (400), 16px minimum (prevents iOS zoom on focus)

Placeholder text

Light (300) or desaturated color, same size as input

Error messages

Regular (400), 12-14px, color-coded (red-ish)

Responsive Typography:

Scale type sizes across breakpoints:

// Example with Tailwind

<

h1

className

=

"

text-3xl md:text-4xl lg:text-5xl

"

>

Responsive Headline

</

h1

>

// Or with CSS clamp (fluid)

h1

{

font

-

size

:

clamp

(

2rem

,

5vw

,

4rem

)

;

}

Reduce sizes on mobile (20-30% smaller than desktop)

Reduce hierarchy levels on small screens (fewer distinct sizes)

Layout & Spatial Design

Compositional Balance:

Every screen should feel balanced

Pay attention to visual weight and negative space

Use generous negative space to focus attention

Add sufficient margins and paddings for professional, spacious look

Grid Discipline:

Maintain consistent underlying grid system

Create sense of order while allowing meaningful exceptions

Use grid/flex wrappers with

gap

for spacing

Prioritize wrappers over direct margins/padding on children

Spatial Relationships:

Group related elements through proximity, alignment, and shared attributes

Use size, color, and spacing to highlight important elements

Guide user focus through visual hierarchy

Attention Guidance:

Design interfaces that guide user attention effectively

Avoid cluttered interfaces where elements compete

Create clear paths through the content

Interaction Design

Motion & Animation

Purposeful Animation:

Every animation must serve a functional purpose:

Orient users

Smooth transitions during navigation changes

Establish relationships

Show how elements connect (expand from source, slide between states)

Provide feedback

Confirm interactions (button press, form submission)

Guide attention

Direct focus to important changes (new messages, errors)

Animation & Gestalt Principles:

Motion should reinforce visual relationships:

Proximity

Elements near each other move together (grouped cards animating)

Similarity

Similar elements animate similarly (all buttons have same hover timing)

Continuity

Movement follows natural paths (smooth curves, not jumpy angles)

Figure-ground

Important elements animate while backgrounds stay stable

Natural Physics:

Animations should feel organic, not mechanical:

Easing

Use ease-out for entrances (fast start, slow end)

Easing

Use ease-in for exits (slow start, fast end)

Easing

Use ease-in-out for transitions (smooth both ends)

Avoid linear easing (feels robotic) except for continuous loops

Apply appropriate mass/momentum (lightweight UI vs weighty modals)

Subtle Restraint:

Animations should be felt rather than seen

Don't delay user actions unnecessarily (keep under 300ms for interactive feedback)

Never block critical actions with decorative animations

Respect

prefers-reduced-motion

media query

Timing Guidelines:

Micro-interactions

(button press, checkbox toggle): 100-150ms

State changes

(expanding accordion, tab switch): 200-300ms

Page transitions

(route changes, modal open/close): 300-500ms

Attention-directing

(notification appearance, error highlight): 200-400ms

Physics Profiles:

Define consistent durations for element types:

Lightweight

(icons, small UI): 150ms

Standard

(cards, panels): 300ms

Weighty

(modals, page transitions): 500ms

Performance Optimization:

Animate

transform

and

opacity

only (GPU-accelerated, smooth 60fps)

Avoid animating

width

,

height

,

top

,

left

,

margin

(causes reflow/repaint)

Use

will-change

sparingly for complex animations (pre-allocates GPU resources)

Test on low-end devices (60fps on powerful hardware ≠ 60fps on mobile)

Implementation:

Use

framer-motion

sparingly and purposefully

Prefer CSS animations over JavaScript when possible (better performance)

Use CSS transitions for simple hover/focus states

Implement

@media (prefers-reduced-motion: reduce)

to disable/reduce animations

Example:

// Simple hover transition

<

button

className

=

"

transition-colors duration-200 ease-out

bg-blue-600 hover:bg-blue-700

"

>

Click me

</

button

>

// Framer Motion for complex interaction

<

motion.div

initial

=

{

opacity

:

0

,

y

:

20

}

animate

=

{

opacity

:

1

,

y

:

0

}

exit

=

{

opacity

:

0

,

y

:

-

20

}

transition

=

{

duration

:

0.3

,

ease

:

"easeOut"

}

>

Content

</

motion.div

>

Motion Specification:

For detailed motion specs, see MOTION-SPEC.md (easing curves, duration tables, state-specific animations, implementation patterns).

User Experience Patterns

Core UX Principles:

Direct Manipulation

Users interact directly with content, not through abstract controls

Examples:

Drag & drop to reorder items (not up/down buttons)

Inline editing (click to edit, not separate form)

Sliders for ranges (not numeric input with +/-)

Pinch/zoom gestures on mobile (not +/- buttons)

Immediate Feedback

Every interaction provides instantaneous visual feedback (within 100ms)

Types of feedback:

Visual

Button pressed state, hover effects, color changes

Haptic

Vibration on mobile (submit, error, success)

Audio

Subtle sounds for critical actions (optional, user-controlled)

Loading

Skeleton screens, spinners for >300ms operations

Success

Checkmarks, green highlights, toast notifications

Error

Red highlights, inline error messages, shake animations

Consistent Behavior

Similar-looking elements behave similarly

Examples:

Visual consistency

All primary buttons have same colors, sizes, hover states

Behavioral consistency

All modals close via X button, ESC key, and outside click

Interaction consistency

All drag targets have same hover state and drop feedback

Pattern consistency

All forms validate on blur and submit

Forgiveness

Make errors difficult, but recovery easy

Prevention strategies

:

Disable invalid actions (grey out unavailable buttons)

Validate inputs inline (before submission)

Confirm destructive actions (delete, overwrite)

Auto-save in background (drafts, progress)

Recovery strategies

:

Undo/redo for all state changes

Soft deletes (trash/archive before permanent delete)

Clear error messages with actionable fixes

Preserve user input on errors (don't clear forms)

Progressive Disclosure

Reveal details as needed rather than overwhelming users

Levels of disclosure:

Summary

Show essential info by default (card title, price, rating)

Details

Expand to show more info (description, specs, reviews)

Advanced

Hide complex options behind "Advanced settings" toggle

Examples:

Accordion: Start collapsed, expand on click

Search filters: Show 3-5 common filters, hide rest behind "More filters"

Settings: Basic settings visible, advanced behind "Show advanced"

Modern UX Patterns:

Conversational Interfaces

Prioritize natural language interaction where appropriate:

Four types:

Pure chat

Full conversation (AI assistants, support bots)

Command palette

Text-based shortcuts (Cmd+K, search everywhere)

Smart search

Natural language queries (search "meetings next week" vs filtering)

Form alternatives

Conversational data collection ("What's your name?" vs form fields)

When to use:

Complex searches with multiple variables

Task guidance (wizards, onboarding)

Contextual help

Quick actions (command palette)

When NOT to use:

Simple forms (just use inputs)

Precise control interfaces (design tools, dashboards)

High-frequency repetitive tasks

Adaptive Layouts

Respond to user context automatically:

Time-based

Dark mode at night, light during day

Device-based

Simplified UI on mobile, full features on desktop

Connection-based

Reduce images/video on slow connections
Usage-based: Prioritize frequent actions, hide rarely-used features Examples: Auto dark/light mode based on time or system preference Simplified mobile navigation (hamburger menu) vs full desktop nav Collapsed sidebar on small screens, expanded on large Minimal, Flat Design Current aesthetic preference: No drop shadows (except subtle ones for modals/dropdowns) No gradients for depth (use for accents/backgrounds if desired) No glass morphism effects Focus on typography, color, and spacing to create hierarchy Functional depth: Layers of content (modals, sheets) use positioning, not visual depth Navigation: Clear structure with intuitive navigation menus Implement breadcrumbs for deep hierarchies (more than 2 levels) Use standard UI patterns to reduce learning curve (hamburger menu, tab bars) Ensure predictable behavior (back button works, links look clickable) Maintain navigation context (highlight current page, preserve scroll position) Styling Implementation Component Library & Tools Component Library: Strongly prefer shadcn components (v4, pre-installed in @/components/ui ) Import individually: import { Button } from "@/components/ui/button"; Use over plain HTML elements (

bencium-controlled-ux-designer

安装