Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
MANDATORY PREPARATION
Use the frontend-design skill — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run teach-impeccable first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant).
Assess Delight Opportunities
Identify where delight would enhance (not distract from) the experience:
- Find natural delight moments:
- Success states: Completed actions (save, send, publish)
- Empty states: First-time experiences, onboarding
- Loading states: Waiting periods that could be entertaining
- Achievements: Milestones, streaks, completions
- Interactions: Hover states, clicks, drags
- Errors: Softening frustrating moments
- Easter eggs: Hidden discoveries for curious users
- Understand the context:
- What's the brand personality? (Playful? Professional? Quirky? Elegant?)
- Who's the audience? (Tech-savvy? Creative? Corporate?)
- What's the emotional context? (Accomplishment? Exploration? Frustration?)
- What's appropriate? (Banking app ≠ gaming app)
- Define delight strategy:
- Subtle sophistication: Refined micro-interactions (luxury brands)
- Playful personality: Whimsical illustrations and copy (consumer apps)
- Helpful surprises: Anticipating needs before users ask (productivity tools)
- Sensory richness: Satisfying sounds, smooth animations (creative tools)
If any of these are unclear from the codebase, {{ask_instruction}}
CRITICAL: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far.
Delight Principles
Follow these guidelines:
Delight Amplifies, Never Blocks
- Delight moments should be quick (< 1 second)
- Never delay core functionality for delight
- Make delight skippable or subtle
- Respect user's time and task focus
Surprise and Discovery
- Hide delightful details for users to discover
- Reward exploration and curiosity
- Don't announce every delight moment
- Let users share discoveries with others
Appropriate to Context
- Match delight to emotional moment (celebrate success, empathize with errors)
- Respect the user's state (don't be playful during critical errors)
- Match brand personality and audience expectations
- Cultural sensitivity (what's delightful varies by culture)
Compound Over Time
- Delight should remain fresh with repeated use
- Vary responses (not same animation every time)
- Reveal deeper layers with continued use
- Build anticipation through patterns
Delight Techniques
Add personality and joy through these methods:
Micro-interactions & Animation
Button delight:
/* Satisfying button press */
.button {
transition: transform 0.1s, box-shadow 0.1s;
}
.button:active {
transform: translateY(2px);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Ripple effect on click */
/* Smooth lift on hover */
.button:hover {
transform: translateY(-2px);
transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
}Loading delight:
- Playful loading animations (not just spinners)
- Personality in loading messages (write product-specific ones, not generic AI filler)
- Progress indication with encouraging messages
- Skeleton screens with subtle animations
Success animations:
- Checkmark draw animation
- Confetti burst for major achievements
- Gentle scale + fade for confirmation
- Satisfying sound effects (subtle)
Hover surprises:
- Icons that animate on hover
- Color shifts or glow effects
- Tooltip reveals with personality
- Cursor changes (custom cursors for branded experiences)
Personality in Copy
Playful error messages:
"Error 404"
"This page is playing hide and seek. (And winning)"
"Connection failed"
"Looks like the internet took a coffee break. Want to retry?"Encouraging empty states:
"No projects"
"Your canvas awaits. Create something amazing."
"No messages"
"Inbox zero! You're crushing it today."Playful labels & tooltips:
"Delete"
"Send to void" (for playful brand)
"Help"
"Rescue me" (tooltip)IMPORTANT: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm.
Illustrations & Visual Personality
Custom illustrations:
- Empty state illustrations (not stock icons)
- Error state illustrations (friendly monsters, quirky characters)
- Loading state illustrations (animated characters)
- Success state illustrations (celebrations)
Icon personality:
- Custom icon set matching brand personality
- Animated icons (subtle motion on hover/click)
- Illustrative icons (more detailed than generic)
- Consistent style across all icons
Background effects:
- Subtle particle effects
- Gradient mesh backgrounds
- Geometric patterns
- Parallax depth
- Time-of-day themes (morning vs night)
Satisfying Interactions
Drag and drop delight:
- Lift effect on drag (shadow, scale)
- Snap animation when dropped
- Satisfying placement sound
- Undo toast ("Dropped in wrong place? [Undo]")
Toggle switches:
- Smooth slide with spring physics
- Color transition
- Haptic feedback on mobile
- Optional sound effect
Progress & achievements:
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
- Playful stats ("You're on fire! 5 days in a row")
Form interactions:
- Input fields that animate on focus
- Checkboxes with a satisfying scale pulse when checked
- Success state that celebrates valid input
- Auto-grow textareas
Sound Design
Subtle audio cues (when appropriate):
- Notification sounds (distinctive but not annoying)
- Success sounds (satisfying "ding")
- Error sounds (empathetic, not harsh)
- Typing sounds for chat/messaging
- Ambient background audio (very subtle)
IMPORTANT:
- Respect system sound settings
- Provide mute option
- Keep volumes quiet (subtle cues, not alarms)
- Don't play on every interaction (sound fatigue is real)
Easter Eggs & Hidden Delights
Discovery rewards:
- Konami code unlocks special theme
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
- Console messages for developers ("Like what you see? We're hiring!")
Seasonal touches:
- Holiday themes (subtle, tasteful)
- Seasonal color shifts
- Weather-based variations
- Time-based changes (dark at night, light during day)
Contextual personality:
- Different messages based on time of day
- Responses to specific user actions
- Randomized variations (not same every time)
- Progressive reveals with continued use
Loading & Waiting States
Make waiting engaging:
- Interesting loading messages that rotate
- Progress bars with personality
- Mini-games during long loads
- Fun facts or tips while waiting
- Countdown with encouraging messages
Loading messages — write ones specific to your product, not generic AI filler:
- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
- "Preparing your dashboard..."
- "Checking for updates since yesterday..."WARNING: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy — instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
Celebration Moments
Success celebrations:
- Confetti for major milestones
- Animated checkmarks for completions
- Progress bar celebrations at 100%
- "Achievement unlocked" style notifications
- Persona