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.

如果没有必要的背景信息，你无法出色完成任务，比如目标受众（关键）、预期使用场景（关键）、品牌调性（活泼 vs 专业 vs 古怪 vs 优雅），以及该领域的合适风格。

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

如果你没有找到确切的信息，必须从现有设计和功能中推断，那么你必须停止并{{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

/* 令人满足的按钮按压效果 */
.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);
}

/* 点击时的涟漪效果 */
/* 悬停时的平滑抬起效果 */
.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"
"此页面正在玩躲猫猫。（而且它赢了）"

"连接失败"
"看起来互联网去喝咖啡了。要重试吗？"

鼓励性空状态文案：

"暂无项目"
"你的画布已就绪。创造些精彩的作品吧。"

"暂无消息"
"收件箱清零！你今天表现超棒。"

趣味标签与提示框：

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

"帮助"
"救救我"（提示框文案）

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

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..."

让等待变得有趣：

轮换的趣味加载提示语
带有个性的进度条
长时间加载时的小游戏
等待时的趣味事实或提示
带有鼓励话语的倒计时

轮换的加载提示语：
- "正在唤醒服务器..."
- "教机器人跳舞..."
- "请教魔法8球..."
- "从无穷大倒着数..."

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 hook)

物理库：

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

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

绝对禁止：

为了愉悦设计延迟核心功能
强迫用户体验愉悦设计（需可跳过）
用愉悦设计掩盖糟糕的用户体验
过度设计（少即是多）
忽略可访问性（合理使用动画，提供替代方案）
让每个交互都带有愉悦设计（特殊时刻才应特别）
为了愉悦设计牺牲性能
不符合背景情境（审时度势）

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次后仍令人愉悦吗？
不会阻碍：用户可以选择退出或跳过吗？
性能良好：没有卡顿、没有变慢
符合情境：匹配品牌和背景
可访问：适配减少动效设置、支持屏幕阅读器

记住：愉悦设计是工具和体验的区别。增添个性，给用户积极的惊喜，创造值得分享的时刻。但始终要尊重可用性——愉悦设计应是增益，而非阻碍。