---
id: sm-delight
name: "delight"
url: https://skills.yangsir.net/skill/sm-delight
author: pbakaus
domain: design
tags: ["user-delight", "emotional-design", "microinteractions", "ux-design", "product-experience"]
install_count: 80200
rating: 4.70 (1676 reviews)
github: https://github.com/pbakaus/impeccable
---

# delight

> 此技能旨在通过精妙的设计语言，为AI工具的用户创造愉悦和惊喜的体验，注重细节和情感连接，从而提升用户满意度和忠诚度。

**Stats**: 80,200 installs · 4.7/5 (1676 reviews)

## Before / After 对比

### 用户体验惊喜设计与实现

## Readme

# delight

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, STOP and call the AskUserQuestion tool to clarify.

**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

- Personalized messages ("You published your 10th article!")

**Milestone recognition**:

- First-time actions get special treatment

- Streak tracking and celebration

- Progress toward goals

- Anniversary celebrations

## Implementation Patterns

**Animation libraries**:

- Framer Motion (React)

- GSAP (universal)

- Lottie (After Effects animations)

- Canvas confetti (party effects)

**Sound libraries**:

- Howler.js (audio management)

- Use-sound (React hook)

**Physics libraries**:

- React Spring (spring physics)

- Popmotion (animation primitives)

**IMPORTANT**: File size matters. Compress images, optimize animations, lazy load delight features.

**NEVER**:

- Delay core functionality for delight

- Force users through delightful moments (make skippable)

- Use delight to hide poor UX

- Overdo it (less is more)

- Ignore accessibility (animate responsibly, provide alternatives)

- Make every interaction delightful (special moments should be special)

- Sacrifice performance for delight

- Be inappropriate for context (read the room)

## Verify Delight Quality

Test that delight actually delights:

- **User reactions**: Do users smile? Share screenshots?

- **Doesn't annoy**: Still pleasant after 100th time?

- **Doesn't block**: Can users opt out or skip?

- **Performant**: No jank, no slowdown

- **Appropriate**: Matches brand and context

- **Accessible**: Works with reduced motion, screen readers

Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct.
Weekly Installs17.6KRepository[pbakaus/impeccable](https://github.com/pbakaus/impeccable)GitHub Stars10.2KFirst Seen14 days agoSecurity Audits[Gen Agent Trust HubPass](/pbakaus/impeccable/delight/security/agent-trust-hub)[SocketPass](/pbakaus/impeccable/delight/security/socket)[SnykPass](/pbakaus/impeccable/delight/security/snyk)Installed oncodex17.3Kopencode17.2Kgithub-copilot17.2Kgemini-cli17.2Kcursor17.2Kamp17.2K

---
*Source: https://skills.yangsir.net/skill/sm-delight*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-delight/markdown*