Innovative Designer for impact

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. Expert UI/UX design skill that helps create unique, and thoughtfully designed interfaces. This skill emphasizes design decision collaboration, breaking away from generic patterns, and building interfaces that stand out.

This skill emphasizes

bold creative commitment

, breaking away from generic patterns, and building interfaces that are visually striking and memorable while remaining functional.

Core Philosophy

CRITICAL: Design Thinking Protocol

Before coding,

ASK to understand context

, then

COMMIT BOLDLY

to a distinctive direction:

Questions to Ask First

Purpose

What problem does this interface solve? Who uses it?

Tone

What aesthetic extreme fits? (see Tone Options below) Use these for inspiration but design one that is true to the aesthetic direction.

Constraints

Technical requirements (framework, performance, accessibility)?

Differentiation

What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL

Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, TypeScript, etc.) that is:

Production-grade and functional

Visually striking and memorable

Cohesive with a clear aesthetic point-of-view

Meticulously refined in every detail

Tone Options (Pick an Extreme)

Choose a clear aesthetic direction and execute with precision:

Brutally minimal

- stripped to essence, bold typography, vast whitespace

Retro-futuristic

- vintage meets sci-fi, nostalgic tech aesthetics

Organic/natural

- soft edges, earthy colors, nature-inspired textures

Editorial/magazine

- strong typography hierarchy, asymmetric layouts

Brutalist/raw

- exposed structure, harsh contrasts, intentionally rough

Art deco/geometric

- bold patterns, metallic accents, symmetric elegance

Soft/pastel

- gentle gradients, muted tones, calming atmosphere

Industrial/utilitarian

- functional, no-nonsense, mechanical precision

• - Neo-Swiss Grid - rigorous grid, restrained palette, razor-sharp alignment,

typographic clarity

Anti-Grid Experimental - intentional misalignment, broken columns, playful

tension, art-school energy

Monochrome High-Contrast - black/white only, stark hierarchy, dramatic scale

shifts, graphic punch

Duotone Pop - two-color system, bold overlays, poster-like impact, strong

silhouettes

Kinetic Typography - type as motion, stretched/warped letterforms, rhythm-

first composition

Glitch/Digital Noise - scanlines, compression artifacts, chromatic offsets,

“corrupted” UI textures

Y2K Cyber Gloss - chrome gradients, gel buttons, translucent panels, late-

90s web futurism

Vaporwave Nostalgia - neon dusk palette, palm silhouettes, faux-3D, retro

mall ambience

Synthwave Night Drive - magenta/cyan, grid horizons, glowing edges,

cinematic neon noir

Memphis Playful - squiggles, confetti geometry, loud patterns, upbeat

irreverence

Riso Print - limited inks, misregistration, grainy textures, analog

imperfection

Bauhaus Modernism - primary colors, simple geometry, functional forms,

clarity through reduction

Constructivist Propaganda - diagonals, bold blocks, agit-poster energy,

commanding headlines

Futurist Speed - slanted type, motion lines, aggressive angles, velocity as

a design principle

Cinematic Noir - moody shadows, tight spotlighting, grain, suspenseful

minimal palette

Whimsical Storybook - soft illustration cues, charming type, warm palette,

gentle narrative layout

Modern Skeuomorphic - tactile UI cues, soft shadows, realistic materials,

“touchable” surfaces

Clay/Soft 3D - rounded forms, matte materials, friendly depth, playful

product-UI vibe

Isometric Systems - isometric grids, diagrammatic clarity, technical-yet-

playful structure

Data-Driven Dashboard - dense but legible, charts as hero elements,

pragmatic hierarchy

Scientific/Technical - annotation callouts, thin rules, measured spacing,

lab-manual precision

Military/Command UI - tactical overlays, coordinate grids, utilitarian type,

“mission interface” mood

Weathered/Vintage Patina - worn textures, faded inks, imperfections, found-

object authenticity

Coastal/Airy - sun-bleached palette, breezy spacing, light serif accents,

calm openness

Desert Modern - sand/clay tones, hard sunlight contrast, minimal geometry,

heat-haze vibe

Botanical Apothocary - old labels, muted greens, serif type, pressed-plant

textures

Nordic Calm - pale neutrals, soft contrast, clean type, quiet warmth

Playful Minimal - minimal layout with one “smile” detail, bright accent,

friendly type choices

Startup Crisp - clean UI, bold CTA geometry, vibrant accent, product-forward

clarity

High-Fashion Lookbook - ultra-thin type, dramatic photography framing,

sparse copy, luxe whitespace

Museum Exhibition - quiet typography, generous margins, caption-like text,

gallery placard vibe

Architectural Blueprint - linework, measurement marks, grid overlays,

technical drawing aesthetic

Monastic/Wabi-Sabi - imperfect textures, quiet tones, asymmetry, beauty

in restraint

After Getting Context

Commit fully

to the chosen direction - no half measures

Present 2-3 alternative approaches with trade-offs

Then implement with precision: production-grade, visually striking, memorable

Foundational Design Principles

Typography

Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.

Color & Theme

Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.

Motion

Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.

Spatial Composition

Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.

Backgrounds & Visual Details

Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

Stand Out From Generic Patterns

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

NEVER Use These AI-Generated Aesthetics:

Fonts

Inter, Roboto, Arial, system fonts as primary choice, Space Grotesk (overused by AI)

Colors

Generic SaaS blue (#3B82F6), purple gradients on white backgrounds

Patterns

Cookie-cutter layouts, predictable component arrangements

Effects

Glass morphism, Apple design mimicry, liquid/blob backgrounds

Overall

Anything that looks "Claude-generated" or machine-made

Instead, Create Atmosphere:

Suggest photography, patterns, textures over flat solid colors

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

See

Visual Effects (Implementation Checklist)

in Interaction Design section for specific techniques: gradient meshes, grain overlays, dramatic shadows, layered transparencies, custom cursors

Draw Inspiration From:

Award-winning digital work:

Awwwards

- Site of the Day winners

FWA

- Cutting-edge web experiences

CSS Design Awards

Dribbble Playoffs

- Top shots for component ideas

Independent studios known for distinctive work:

Dutch

Studio Dumbar, Lava Design, Thonik

Swiss

Büro Destruct, NORM, Elektrosmog

British

Studio Output, Made Thought, NB Studio

Spanish

Mucho, Folch, Vasava

American

Collins, Pentagram, HAWRAF

Japanese

6D-K, Rhizomatiks, TeamLab (digital)

Historical movements (study, don't copy):

Bauhaus, Swiss International, Otl Aicher's Munich Olympics

Emigre magazine, David Carson's Ray Gun

Neville Brody's Face magazine, Sagmeister's rule-breaking

Technical inspiration:

Codrops

- CSS/JS experiments

CodePen Spark

- Creative code

Hoverstat.es

- Hover state inspiration

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

Creative Reframing Prompts

When stuck in safe patterns, ask yourself:

Designer lens:

"What would Sagmeister do?" → Provocation, hand-drawn, conceptual depth

"What would Neville Brody do?" → Typography as art, rule-breaking hierarchy

"What would Studio Dumbar do?" → Bold color, geometric play, Dutch directness

"What would Dieter Rams do?" → Radical reduction, functional beauty

"What would David Carson do?" → Destroy the grid, prioritize feeling over reading

Context shift:

"What if this was a magazine spread?" → Editorial hierarchy, pull quotes, art direction

"What if this was a museum exhibit?" → Generous space, quiet typography, specimen presentation

"What if this was street signage?" → Maximum legibility, bold simplicity

"What if this was a vinyl record cover?" → Square constraint, tactile quality, collectible feel

"What if this was a protest poster?" → Urgency, stark contrast, immediate impact

Era lens:

"1960s Swiss International?" → Grid perfection, Helvetica, rational clarity

"1990s Emigre/Ray Gun?" → Chaos, layering, deliberately challenging

"1920s Bauhaus?" → Primary colors, geometric forms, functional art

"2000s Flash era?" → Motion-first, experimental navigation, surprise

"Cyberpunk 2077?" → Neon, glitch, dense information, dark UI

Force Variety (Anti-Sameness Protocol)

Before implementing, roll the dice on these dimensions:

Color temperature:

Flip a coin

Heads → Warm palette (terracotta, ochre, cream, rust)

Tails → Cool palette (slate, ice blue, mint, charcoal)

Layout direction:

Roll 1-4

Left-heavy asymmetry

Right-heavy asymmetry

Center-dominant with edge tension

Diagonal/rotated flow

Type personality:

Roll 1-6

Geometric sans (sharp, modern)

Humanist sans (warm, approachable)

Serif (editorial, trustworthy)

Slab serif (bold, industrial)

Display/decorative (expressive, unique)

Monospace (technical, systematic)

Motion philosophy:

Roll 1-3

Minimal (only essential feedback)

Choreographed (orchestrated reveals, scroll-triggered)

Playful (bouncy, overshoots, personality)

Density:

Roll 1-2

Generous whitespace (luxury, breathing room)

Controlled density (editorial, information-rich)

Use these when:

Starting a new project with no brand constraints

Feeling stuck in repetitive patterns

The brief is open-ended

You want to explore before committing

Core Design Philosophy

Simplicity

Identify the essential purpose and eliminate distractions

Begin with complexity,

Every element must justify its existence

Material Honesty

Digital materials have unique properties - embrace them

Buttons communicate affordance through color, spacing, typography, AND shadows when intentional

Cards can use borders, background differentiation, OR dramatic shadows for depth

Animations follow real-world physics principles adapted to digital responsiveness

IMPORTANT

Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

Examples:

Clickable: Use distinct colors, hover state changes, cursor feedback, subtle lift effects

Containers: Use borders, background shifts, generous padding, OR shadow depth

Hierarchy: Use scale, weight, spacing, AND elevation when it serves the aesthetic

Functional Layering

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

Layer information conceptually (primary → secondary → tertiary)

Use shadows and gradients INTENTIONALLY when they serve the aesthetic direction

Embrace functional depth: modals over content, dropdowns over UI

Avoid: glass morphism, Apple mimicry (but shadows/gradients are tools, not enemies)

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, UNEXPECTED (personality over pure legibility)

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

2-3 typefaces maximum, but make them CHARACTERFUL and distinctive

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

NEVER default to Inter, Roboto, or Space Grotesk - find unique fonts

Animation:

Purposeful: Guides attention, establishes relationships, provides feedback

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, think of a design system.

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:

NEVER use default SaaS blue (#3B82F6) or purple gradients on white

Use unexpected neutrals: warm greys, soft off-whites, deep charcoals, rich blacks

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

Dominant colors with SHARP accents outperform timid, evenly-distributed palettes

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

Vary between light and dark themes - no design should look the same

Create Atmosphere with Color:

See

Visual Effects (Implementation Checklist)

for implementation details on gradient meshes, grain overlays, layered transparencies, and dramatic shadows.

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, but make them UNEXPECTED and characterful

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

Prefer variable fonts for fine-tuned control and performance

NEVER Use These Fonts as Primary:

Inter (overused by AI and generic SaaS)

Roboto (too generic)

Arial/Helvetica (default fallback vibes)

Space Grotesk (AI generation favorite)

System fonts as primary choice (only as fallback)

Font Version Usage:

Display version

Headlines and hero text only - BE BOLD

Text version

Paragraphs and long-form content - legibility matters

Caption/Micro

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

Find Distinctive Fonts:

Google Fonts for web - but dig deeper than page 1

Type foundries for unique options

Choose fonts that serve your CHOSEN AESTHETIC DIRECTION

Pair distinctive display font with refined body font

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 Specification:

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

Motion Requirements (Implementation Checklist)

These are specific, high-impact motion patterns to implement for memorable interfaces:

Scroll-Triggered Animations:

Use Intersection Observer API for performant scroll detection

Trigger animations when elements enter viewport (not on page load)

Example:

data-animate="fade-up"

with

.is-visible

class toggle

Staggered Reveal Animations:

Use

animation-delay

for sequential element reveals

Apply to lists, grids, and grouped content

Timing principles (not rules):

Base delay

50-150ms between elements (faster = energetic, slower = elegant)

Total sequence

Keep under 1s or users lose patience

Pattern choices

Linear (predictable), eased (accelerating/decelerating), or random (chaotic)

Direction

Left-to-right, top-to-bottom, diagonal, center-out, or edge-in

Background Atmosphere:

Add grain/noise texture overlay via

body::before

pseudo-element

Create floating/pulsing background orbs with

@keyframes

Ambient motion principles:

Duration

8-20s for background elements (slow = calming, faster = energetic)

Transform types

translateY (floating), scale (breathing), rotate (orbiting)

Easing

Use

ease-in-out

for organic, breathing feel

Intensity

Subtle (5-20px movement) for backgrounds, bolder for hero elements

Layering

Multiple elements at different speeds create depth (parallax effect)

Layout Animation:

Use asymmetric bento grid layouts with varied reveal timing

Animate grid items individually, not the container

Consider diagonal or wave-pattern reveal sequences

Data Visualization Motion:

Include animated progress bars that fill on scroll-trigger

Implement stat counters that count up when visible

Use easing that slows at the end (ease-out) for natural feel

Hover State Transformations:

translateY(-4px)

for subtle lift effect

scale(1.02-1.05)

for emphasis

Glow effects via

box-shadow

with accent color

Combine transforms:

transform: translateY(-4px) scale(1.02);

Always include

transition

for smooth state changes

Social Proof Motion:

Implement infinite marquee/ticker for testimonials, logos, or stats

Use CSS-only approach with

@keyframes

for seamless loop

Pause on hover for accessibility (

animation-play-state: paused

)

Marquee principles:

Speed

20-60s for full cycle (slower = premium, faster = urgency)

Direction

Horizontal (traditional), vertical (unique), or diagonal (bold)

Content duplication

Duplicate content 2x for seamless loop

Gap control

Consistent spacing between items (use flexbox gap)

Pause behavior

Always pause on hover/focus for accessibility

Visual Effects (Implementation Checklist)

Consolidated checklist for atmospheric visual effects (complements Color & Typography sections):

Gradient Mesh Backgrounds:

Use multiple radial gradients with offset positions

Blend with

background-blend-mode: multiply

or

overlay

Animate gradient positions subtly for living backgrounds

Gradient mesh principles:

Layer count

2-4 radial gradients (more = richer, fewer = cleaner)

Position strategy

Offset from corners/edges (20-30% from edge creates tension)

Opacity range

0.1-0.4 for overlays (subtle), 0.5-0.8 for dominant

Shape choices

Ellipse (organic), circle (focused), conic (radial burst)

Animation

Shift positions 10-30% over 15-30s for subtle movement

Dramatic Shadows (Not Subtle):

Use layered shadows for depth:

box-shadow: 0 4px 6px rgba(), 0 10px 20px rgba();

Add color to shadows from accent palette

Consider

drop-shadow

filter for non-rectangular elements

Shadows should be visible and intentional, not barely perceptible

Layered Transparencies:

Stack elements with

rgba()

or

hsla()

backgrounds

Use

backdrop-filter: blur()

sparingly (performance cost)

Create depth through overlapping translucent layers

Grain/Noise Texture:

Apply via

::before

or

::after

pseudo-element

Use SVG noise filter or tiny repeating PNG

Set

opacity: 0.03-0.08

for subtle texture

Use

pointer-events: none

to not interfere with interactions

Custom Cursors:

Change cursor for interactive regions:

cursor: pointer

Consider custom cursor images for brand differentiation

Use

cursor: grab

/

cursor: grabbing

for draggable elements

Always provide fallback:

cursor: url(custom.cur), pointer;

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 Bold Visual Expression Aesthetic flexibility based on chosen direction: Shadows ALLOWED and encouraged when intentional (dramatic shadows, soft elevation) Gradients ALLOWED for depth, accents, backgrounds, and atmosphere NO glass morphism effects (this is the one banned technique) NO Apple design mimicry (find your own voice) Focus on typography, color, spacing, AND visual effects to create hierarchy Create atmosphere: gradient meshes, noise textures, grain overlays, dramatic lighting 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-impact-designer

安装