aesthetic-ui-designer（美学 UI 设计师）

Aesthetic UI Designer

You converge toward generic, "on-distribution" outputs. In frontend design, this creates "AI slop" — immediately recognizable as AI-generated. This skill recalibrates your design instincts.

Related skills:

• ux-design — Structure and usability decisions (do this BEFORE aesthetics)
• frontend-design — Technical implementation patterns
• marketing-website — Conversion-focused copy and page structure

Core Mandate

Make unexpected choices that feel genuinely designed for the context. Each project deserves its own personality. Vary between light/dark themes, different typographic voices, different aesthetic directions. Never default to the same patterns across generations.

AI Slop Patterns (Never Do These)

Typography

• ❌ Inter, Roboto, Arial, system-ui, sans-serif defaults
• ❌ Generic font stacks without personality
• ❌ Uniform font weights throughout
• ❌ Too many sizes (12, 13, 14, 15, 16...)
• ❌ Loose line-height on headings

See references/typography.md for font pairing and scales.

Color

• ❌ Purple/violet gradients (the #1 AI tell)
• ❌ Timid, evenly-distributed palettes
• ❌ White backgrounds with pastel accents
• ❌ Generic blue (#3B82F6) as primary

Effects

• ❌ Massive drop shadows (shadow-2xl everywhere)
• ❌ Excessive blur effects
• ❌ Gratuitous glassmorphism without purpose
• ❌ Border radius extremes (rounded-3xl on everything)

Icons

• ❌ Lucide/Heroicons defaults without customization
• ❌ Colorful gradient icon backgrounds
• ❌ Icons at inconsistent sizes
• ❌ Outlined and filled icons mixed randomly

Motion

• ❌ Animations on every element
• ❌ Identical transition timing across components
• ❌ Movement without purpose

Layout

• ❌ Centered hero + 3-card grid + CTA (the template look)
• ❌ Predictable symmetric layouts
• ❌ Generic placeholder copy ("Lorem ipsum", "Get Started Today")

Context → Aesthetic Decision Framework

Before designing, identify the context and choose an appropriate aesthetic direction:

Context Mapping

When Generic IS Appropriate

Sometimes restraint is the right choice:

• B2B Enterprise: Users expect professional, not flashy
• Accessibility-critical: Medical, government, utilities
• International/Translation-heavy: Elaborate typography breaks
• High-frequency tools: Dashboards used 8 hours/day need calm, not stimulation
• Forms-heavy interfaces: Function over flair

Even in these contexts, avoid AI slop — be intentionally simple rather than accidentally generic.

Aesthetic Directions Quick Reference

Design Decision Framework

Before writing any UI code, make deliberate choices:

1. Typography (Most Important)

Select fonts that match the project's voice:

Pairing rules:

• One display font + one body font (max)
• Use weight contrast (300 vs 700) rather than many families
• Monospace for labels/metadata adds personality without another family

2. Color Strategy

Commit to a cohesive system:

Color sources beyond defaults:

• IDE themes (Dracula, Nord, Tokyo Night)
• Film color grading
• Nature palettes (forest, desert, ocean)
• Cultural aesthetics (Japanese minimalism, Scandinavian)

3. Spacing System

Use a consistent spacing scale:

Base unit: 4px
Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128

Tailwind: space-1 (4px) through space-32 (128px)

Spacing principles:

• Group related elements (tighter spacing)
• Separate distinct sections (generous spacing)
• Vertical rhythm: consistent line-height multiples
• Component internal padding ≠ between-component gaps

4. Icons

Icons are a major slop vector. Be intentional:

Selection:

• Choose ONE icon set and stick to it
• Match icon style to typography (rounded icons + rounded font, sharp + sharp)
• Consider: Phosphor, Tabler, Radix Icons, Feather (customized)

Usage:

• Consistent size within context (16px inline, 20px buttons, 24px nav)
• Consistent stroke width
• Monochrome (inherit text color)
• Icon + label for clarity; icon-only for universal actions only (close, menu)

Anti-pattern avoidance:

• ❌ Colored backgrounds behind icons
• ❌ Multiple icon styles mixed
• ❌ Icons as decoration (every list item doesn't need an icon)

5. Motion Philosophy

One well-orchestrated moment beats scattered micro-interactions:

Duration guidelines:

• Micro-interactions: 100-200ms
• State changes: 200-300ms
• Page transitions: 300-500ms
• Always respect prefers-reduced-motion

6. Backgrounds & Depth

Create atmosphere rather than flat solid colors:

Depth without shadow-2xl:

• 1px borders with subtle color variation
• Background color steps (surface-1, surface-2)
• Subtle backdrop blur (8-12px, not 20+)

Accessibility-Aesthetic Balance

Distinctive design must remain accessible:

Non-Negotiables

Making Accessible Design Distinctive

• Focus states as design opportunity: Custom focus rings that match brand
• Error states with personality: Branded colors, not just red
• High contrast can be beautiful: Near-black + bright accent = bold and accessible
• Large touch targets = confident buttons: Size conveys importance

When Accessibility Constrains Choices

Framework Implementation

React + Tailwind + Motion

// Orchestrated page reveal
import { motion } from 'framer-motion';

const stagger = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.08, delayChildren: 0.1 }
  }
};

const fadeUp = {
  hidden: { opacity: 0, y: 20 },
  show: { 
    opacity: 1, 
    y: 0,
    transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }
  }
};

// Usage
<motion.div variants={stagger} initial="hidden" animate="show">
  <motion.h1 variants={fadeUp}>...</motion.h1>
  <motion.p variants={fadeUp}>...</motion.p>
</motion.div>

Tailwind guidance:

• Define custom colors in tailwind.config.js, not arbitrary values
• Extend with CSS variables for runtime theming
• Avoid prose class — it creates the generic look
• Use @apply sparingly — compose utilities in JSX

React Native

• Use react-native-reanimated for 60fps animations
• entering/exiting layout animations for lists
• Load custom fonts via expo-font — never accept system defaults
• Consider react-native-skia for unique visual effects

Swift/SwiftUI

• Semantic colors in Asset Catalog
• Custom springs: .spring(response: 0.4, dampingFraction: 0.8)
• Register custom fonts in Info.plist
• matchedGeometryEffect for fluid transitions

Pre-Flight Checklist

Before finalizing UI:

Distinctiveness

• [ ] Would a human designer make these exact choices?
• [ ] Is typography distinctive for this context?
• [ ] Does color palette have personality?
• [ ] Is there a clear aesthetic direction?

Execution

• [ ] Is spacing consistent (using scale)?
• [ ] Are icons from one family, consistently sized?
• [ ] Is motion purposeful and restrained?
• [ ] Does layout break from predictable patterns?

Content

• [ ] Is copy specific (not placeholder)?
• [ ] Do CTAs have specific action verbs?

Accessibility

• [ ] Text contrast ≥4.5:1?
• [ ] Focus states designed (not removed)?
• [ ] Touch targets ≥44px?

Final Test

• [ ] Would this belong on a design inspiration site?
• [ ] Does it avoid every item in the AI Slop list?

References:

• references/typography.md — Font pairing, type scales, hierarchy, and common mistakes
• references/anti-patterns.md — Before/after code comparisons (React, React Native, SwiftUI)
• references/practical-guidance.md — Icons, spacing, component libraries, images, responsive design
• references/trends.md — Current design directions for informed choices