delight

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.

寻找可为界面增添愉悦感、个性元素与惊喜打磨的机会，将功能性界面转变为令人愉悦的使用体验。

MANDATORY PREPARATION

必备准备工作

Context Gathering (Do This First)

背景信息收集（请先完成这一步）

You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality (playful vs professional vs quirky vs elegant), and what's appropriate for the domain.

Attempt to gather these from the current thread or codebase.

If you don't find exact information and have to infer from existing design and functionality, you MUST STOP and {{ask_instruction}} whether you got it right.
Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST {{ask_instruction}} clarifying questions first to complete your context.

Do NOT proceed until you have answers. Delight that's wrong for the context is worse than no delight at all.

若缺乏必要的背景信息，你无法出色完成工作，比如目标受众（关键）、预期使用场景（关键）、品牌个性（活泼/专业/古怪/优雅）以及领域适配性。

尝试从当前对话线程或代码库中收集这些信息。

若你无法找到确切信息，只能从现有设计和功能中推断，你必须停止并{{ask_instruction}}确认推断是否正确。
若你无法充分推断，或自信度为中等及以下，必须先{{ask_instruction}}提出澄清问题以完善背景信息。

在得到答案前请勿继续推进。不符合场景的愉悦体验比没有更糟糕。

Use frontend-design skill

使用frontend-design技能

Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.

运用frontend-design技能了解设计原则与反模式。在该技能执行完毕、你掌握所有注意事项前，请勿继续推进。

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.

识别可通过愉悦体验增强（而非干扰）使用感受的场景：

寻找天然的愉悦体验场景：
- 成功状态：已完成的操作（保存、发送、发布）
- 空状态：首次使用体验、引导流程
- 加载状态：可增添趣味性的等待时段
- 成就时刻：里程碑、连续使用记录、任务完成
- 交互操作：悬停状态、点击、拖拽
- 错误状态：缓解挫败感的场景
- 复活节彩蛋：为好奇用户准备的隐藏惊喜
理解场景背景：
- 品牌个性是什么？（活泼？专业？古怪？优雅？）
- 目标受众是谁？（技术达人？创意从业者？企业用户？）
- 情感场景是什么？（成就感？探索欲？挫败感？）
- 什么是适配的？（银行应用≠游戏应用）
定义愉悦体验策略：
- 精致简约型：精细化微交互（奢侈品牌适用）
- 活泼个性型：奇趣插画与文案（消费类应用适用）
- 贴心惊喜型：提前预判用户需求（生产力工具适用）
- 感官丰富型：舒适的音效、流畅的动画（创意工具适用）

若从代码库中无法明确以上任何一点，请{{ask_instruction}}

关键注意事项：愉悦体验应增强可用性，绝不能干扰核心功能。若用户关注愉悦体验超过完成目标，说明过度了。

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

愉悦体验时长应短暂（<1秒）
绝不为了愉悦体验延迟核心功能
让愉悦体验可跳过或保持低调
尊重用户的时间与任务专注度

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:

css

/* 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 ("Herding pixels..." "Teaching robots to dance...")
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)

按钮愉悦效果：

css

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

加载愉悦效果：

趣味性加载动画（不只是加载圈）
带个性的加载提示文案（"正在集结像素..." "教机器人跳舞..."）
带鼓励文案的进度提示
带微妙动画的骨架屏

成功动画：

对勾绘制动画
重大成就时的彩屑爆炸效果
柔和的缩放+淡入确认动画
舒适的音效（低调）

悬停惊喜：

悬停时动画的图标
颜色渐变或发光效果
带个性的提示框展示
光标变化（品牌化体验的自定义光标）

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.

趣味性错误提示：

"Error 404"
"此页面正在玩躲猫猫。（而且它赢了）"

"Connection failed"
"看起来互联网去喝咖啡休息了。要重试吗？"

鼓励性空状态文案：

"No projects"
"你的画布已就绪。创造些了不起的作品吧。"

"No messages"
"收件箱清零！今天你表现超棒。"

趣味性标签与提示框：

"Delete"
"送入虚空"（适用于活泼品牌）

"Help"
"救救我"（提示框文案）

重要提示：文案个性需匹配品牌。银行不必搞怪，但可以温暖。

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)

定制插画：

空状态插画（而非通用图标）
错误状态插画（友好的怪兽、古怪角色）
加载状态插画（动画角色）
成功状态插画（庆祝场景）

图标个性：

匹配品牌个性的定制图标集
动画图标（悬停/点击时的微妙动效）
插画风格图标（比通用图标更细致）
所有图标风格统一

背景效果：

微妙粒子效果
渐变网格背景
几何图案
视差深度
时段主题（白天vs夜晚）

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 that bounce when checked
Success state that celebrates valid input
Auto-grow textareas

拖拽愉悦效果：

拖拽时的抬起效果（阴影、缩放）
放置时的吸附动画
舒适的放置音效
撤销提示框（"放错位置了？[撤销]"）

切换开关：

带弹簧物理效果的平滑滑动
颜色过渡
移动端触觉反馈
可选音效

进度与成就：

带庆祝里程碑的连续使用计数器
100%完成时的进度条庆祝效果
带动画的徽章解锁
趣味性统计（"你状态火热！连续5天打卡"）

表单交互：

聚焦时动画的输入框
勾选时弹跳的复选框
验证通过时的成功状态庆祝
自动高度调整的文本域

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

探索奖励：

科乐美代码解锁特殊主题
隐藏快捷键（Cmd+K开启特殊功能）
标志或插画上的悬停揭示内容
图片上的趣味替代文本（也为屏幕阅读器用户准备！）
给开发者的控制台消息（"喜欢我们的作品？我们正在招聘！"）

季节性细节：

节日主题（微妙、有格调）
季节性色彩变化
基于天气的变体
基于时间的变化（夜晚深色、白天浅色）

场景化个性：

基于时段的不同文案
响应用户特定操作的内容
随机变体（不重复）
随使用深入逐步解锁

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 rotation:
- "Waking up the servers..."
- "Teaching robots to dance..."
- "Consulting the magic 8-ball..."
- "Counting backwards from infinity..."

让等待更有趣：

轮换的趣味加载提示
带个性的进度条
长加载时的迷你游戏
等待时的趣味事实或技巧
带鼓励文案的倒计时

Loading messages rotation:
- "Waking up the servers..."
- "Teaching robots to dance..."
- "Consulting the magic 8-ball..."
- "Counting backwards from infinity..."

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

成功庆祝：

重大里程碑的彩屑效果
完成操作的动画对勾
100%完成时的进度条庆祝
"成就解锁"风格的通知
个性化文案（"你发布了第10篇文章！"）

里程碑认可：

首次操作获得特殊待遇
连续使用记录追踪与庆祝
目标进度追踪
使用周年纪念庆祝

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)

动画库：

Framer Motion (React)
GSAP（通用型）
Lottie（After Effects动画导出）
Canvas confetti（派对特效）

音效库：

Howler.js（音频管理）
Use-sound（React钩子）

物理引擎库：

React Spring（弹簧物理）
Popmotion（动画原语）

重要提示：文件大小很重要。压缩图片、优化动画、懒加载愉悦体验功能。

绝对禁止：

为愉悦体验延迟核心功能
强迫用户经历愉悦体验（需可跳过）
用愉悦体验掩盖糟糕的UX
过度使用（少即是多）
忽略可访问性（合理使用动画，提供替代方案）
让每一次交互都带愉悦感（特殊时刻才应特别）
为愉悦体验牺牲性能
场景不适配（察言观色）

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.

测试愉悦体验是否真的令人愉悦：

用户反应：用户会微笑吗？会分享截图吗？
不恼人：使用100次后仍令人愉悦吗？
不阻碍：用户可以选择退出或跳过吗？
性能良好：无卡顿、无变慢
适配场景：匹配品牌与场景
可访问：适配减少动效设置、支持屏幕阅读器

记住：愉悦体验是工具与体验的区别所在。增添个性、给用户积极惊喜、创造值得分享的时刻。但始终尊重可用性——愉悦体验应增强，绝不阻碍。