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

强制准备步骤

Invoke /impeccable — 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 /impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant).

调用 /impeccable —— 它包含设计原则、反模式和上下文收集协议。在继续操作前遵循该协议：如果目前还没有设计上下文，你必须先运行 /impeccable teach。此外还要收集信息：对应领域适配的风格是怎样的（活泼/专业/奇趣/优雅）。

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 the user directly to clarify what you cannot infer.

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

愉悦效果时长要短（<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 (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)

按钮愉悦效果：

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

加载愉悦效果：

活泼的加载动画（不只是普通旋转加载图标）
有个性的加载文案（编写产品专属的文案，不要用通用的AI生成内容）
带有鼓励性文案的进度提示
带细腻动画的骨架屏

成功动画：

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

悬停惊喜：

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

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.

活泼的错误提示：

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

自定义插画：

空状态自定义插画（不要用通用库存图标）
错误状态插画（友好的怪兽、奇趣角色）
加载状态插画（动画角色）
成功状态插画（庆祝类内容）

图标个性：

匹配品牌个性的自定义图标集
带动画的图标（悬停/点击时的细腻动效）
插画风格图标（比通用图标更有细节）
所有图标风格统一

背景效果：

细腻的粒子效果
渐变网格背景
几何图案
视差深度效果
时段主题（日间/夜间模式）

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

拖拽愉悦效果：

拖拽时的上浮效果（阴影、缩放）
放下时的吸附动画
舒适的放置音效
撤销提示（「放错位置了？[撤销]」）

开关控件：

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

进度与成就：

连续打卡计数器搭配里程碑庆祝效果
进度条到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打开特殊功能）
悬停在Logo或插画上显示惊喜
图片替代文本的趣味内容（也照顾屏幕阅读器用户！）
给开发者的控制台消息（「喜欢我们的产品？我们正在招人！」）

季节性设计：

节日主题（低调、有品味）
季节性配色调整
基于天气的变化效果
时间适配变化（夜间深色模式、日间浅色模式）

上下文个性：

根据时段展示不同文案
对特定用户操作给出响应
随机化变化（不会每次都展示一样的内容）
用户持续使用时逐步解锁新内容

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.

让等待过程更有参与感：

轮换的有趣加载文案
有个性的进度条
长时间加载时的迷你游戏
等待时展示的趣味小知识或技巧
带鼓励文案的倒计时

加载文案示例——要编写和你的产品专属的文案，不要用通用的AI生成内容：
- "正在处理你最新的数值..."
- "正在同步你团队的变更..."
- "正在准备你的仪表盘..."
- "正在检查昨日以来的更新..."

警告：避免使用类似「Herding pixels」、「Teaching robots to dance」、「Consulting the magic 8-ball」、「Counting backwards from infinity」这类陈腐的加载文案，这些都是AI生成的烂大街内容，一眼就能看出来是机器写的。要编写和你的产品实际功能相关的文案。

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（动画原语）

重要提示：文件体积很重要。要压缩图片、优化动画、懒加载愉悦感相关功能。

绝对不要做这些事：

为了愉悦感延迟核心功能
强制用户体验愉悦环节（要支持跳过）
用愉悦感掩盖糟糕的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次后仍然觉得舒服吗？
不会造成阻碍：用户可以选择关闭或跳过吗？
性能达标：没有卡顿、没有减速
适配性达标：匹配品牌和上下文
无障碍达标：支持减动模式，适配屏幕阅读器

记住：愉悦感是工具和体验的区别所在。添加个性，给用户正面的惊喜，创造值得分享的时刻。但永远要尊重可用性——愉悦感应该是增强项，永远不能成为阻碍。