Back to Details

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

强制准备

Users start this workflow with 
/delight
. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant).
用户通过 
/delight
开始此工作流。启用此 Skill 后，加载 
$frontend-design
——其中包含设计原则、反模式以及 Context Gathering Protocol。继续操作前请遵循该协议；如果尚无设计上下文，则必须先加载 
$setup
。此外还需收集：适合当前领域的设计方向（俏皮、专业、古怪或优雅）。

Assess Delight Opportunities

评估愉悦感机会

Identify where delight would enhance (not distract from) the experience:
  1. 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
  2. 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)
  3. 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 is not a license for random whimsy. The quieter the product category, the more subtle the delight should be.
Consult the ai slop detection reference so delight stays distinctive instead of sliding into generic trend decoration. Consult the finishing touches when delight should come from upgraded defaults, accent borders, subtle background treatments, or unexpected component presentation.
确定在哪里加入愉悦感能够增强体验（而不是干扰体验）：
  1. 寻找自然的愉悦时刻：
    • 成功状态：已完成操作（保存、发送、发布）
    • 空状态：首次体验、引导流程
    • 加载状态：可以变得有趣的等待时段
    • 成就：里程碑、连续打卡、完成度
    • 交互：悬停状态、点击、拖拽
    • 错误：缓和令人沮丧的时刻
    • 彩蛋：供好奇用户发现的隐藏内容
  2. 理解上下文：
    • 品牌个性是什么？（俏皮？专业？古怪？优雅？）
    • 目标用户是谁？（懂技术？富有创意？企业用户？）
    • 情绪背景是什么？（成就感？探索？挫败感？）
    • 什么方式合适？（银行应用 ≠ 游戏应用）
  3. 定义愉悦感策略：
    • 精妙的层次感：考究的微交互（奢侈品牌）
    • 俏皮的个性：奇趣插画与文案（消费级应用）
    • 有用的惊喜：在用户提出需求前预判需求（生产力工具）
    • 感官丰富度：令人满意的音效、流畅的动画（创意工具）
如果这些内容无法从代码库中推断出来，请直接向用户询问你无法推断的部分。
关键原则：愉悦感应增强可用性，绝不能遮蔽可用性。如果用户注意到的愉悦感比完成目标本身还多，那就做过头了。
愉悦感并不意味着可以随意加入奇思怪想。产品类别越严肃，愉悦感就越应当克制。
查阅 ai slop detection 参考资料，确保愉悦感保持鲜明独特，而不是滑向通用的潮流装饰。 当愉悦感应来自升级后的默认样式、强调边框、细微背景处理或出人意料的组件呈现时，查阅 finishing touches。

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)
  • 让愉悦感契合当时的情绪（庆祝成功、共情错误）
  • 尊重用户当前的状态（关键错误发生时不要显得俏皮）
  • 契合品牌个性和用户预期
  • 保持文化敏感性（不同文化对愉悦感的理解不同）

Personality, Not Noise

展现个性，而非制造噪音

  • Use delight to reinforce the chosen personality, not fight it
  • Prefer low-complexity enhancements to the defaults before inventing entirely new UI patterns
  • Empty states often deserve more visual flair than core task screens
  • 用愉悦感强化既定个性，而不是与其对抗
  • 在引入全新的 UI 模式之前，优先对默认样式进行低复杂度增强
  • 空状态通常比核心任务屏幕更值得投入视觉表现

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:
通过以下方式增添个性和愉悦感：

Supercharge the Defaults

强化默认体验

  • Upgrade existing bullets, links, checkboxes, headings, and cards before inventing brand new components
  • Add small accent borders to create identity cheaply and cleanly
  • Prefer spacing, subtle background shifts, or restrained shadows before adding lots of borders
  • Keep decorative backgrounds low-contrast so content remains dominant
  • 在发明全新的品牌组件之前，先升级现有的列表项、链接、复选框、标题和卡片
  • 添加小型强调边框，以低成本且干净的方式创造辨识度
  • 优先使用间距、细微背景变化或克制的阴影，而不是添加大量边框
  • 保持装饰性背景低对比度，让内容仍占主导

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
/* 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 */
}
加载愉悦感：
  • 俏皮的加载动画（不只是旋转图标）
  • 在加载文案中体现个性（编写与产品相关的内容，而非泛化的 AI 填充文字）
  • 进度提示搭配鼓励性文案
  • 带细微动画的骨架屏
成功动画：
  • 对勾绘制动画
  • 重大成就时爆发彩纸
  • 确认时轻柔缩放和淡出
  • 令人满意的音效（细微）
悬停惊喜：
  • 悬停时带动画的图标
  • 颜色变化或发光效果
  • 带个性的 Tooltip 揭示
  • 光标变化（品牌化体验中使用自定义光标）

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"
"This page is playing hide and seek. (And winning)"

"Connection failed"
"Looks like the internet took a coffee break. Want to retry?"
鼓励性的空状态：
"No projects"
"Your canvas awaits. Create something amazing."

"No messages"
"Inbox zero! You're crushing it today."
俏皮的标签与 Tooltip：
"Delete"
"Send to void" (for playful brand)

"Help"
"Rescue me" (tooltip)
重要：文案个性应与品牌一致。银行不应古灵精怪，但可以温暖亲和。

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)
  • Keep background decoration low-contrast; if it competes with content, it's no longer delight
定制插画：
  • 空状态插画（不是素材图标）
  • 错误状态插画（友好的小怪兽、古怪角色）
  • 加载状态插画（动画角色）
  • 成功状态插画（庆祝场景）
图标个性：
  • 与品牌个性匹配的自定义图标集
  • 动画图标（悬停或点击时进行细微运动）
  • 插画式图标（比通用图标更细致）
  • 所有图标保持统一风格
背景效果：
  • 细微粒子效果
  • 渐变网格背景
  • 几何图案
  • 视差深度
  • 随时段变化的主题（早晨与夜晚）
  • 保持背景装饰低对比度；如果它与内容争夺注意力，就不再是愉悦感

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
  • Subtle visual feedback, sound, or optional browser-supported vibration where appropriate
  • 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
拖放愉悦感：
  • 拖动时抬升效果（阴影、缩放）
  • 放下时吸附动画
  • 令人满意的放置音效
  • 撤销 Toast（“放错位置了？[撤销]”）
开关：
  • 带弹簧物理效果的平滑滑动
  • 颜色过渡
  • 细微的视觉反馈、音效，或在适用时提供浏览器支持的振动反馈
  • 可选音效
进度与成就：
  • 带庆祝里程碑的连续打卡计数器
  • 在 100% 时“庆祝”的进度条
  • 带解锁动画的徽章
  • 俏皮数据（“你太火了！已连续 5 天”）
表单交互：
  • 获得焦点时带动画的输入框
  • 选中复选框时产生令人满意的缩放脉冲
  • 通过成功状态庆祝有效输入
  • 自动增高的 Textarea

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
发现奖励：
  • Konami code 解锁特殊主题
  • 隐藏键盘快捷键（Cmd+K 用于特殊功能）
  • 悬停 Logo 或插画时显示内容
  • 图片 Alt 文本笑话（屏幕阅读器用户也能看到！）
  • 面向开发者的控制台消息（“喜欢所见？我们正在招聘！”）
季节性细节：
  • 节日主题（细微、有品位）
  • 季节性色彩变化
  • 根据天气变化
  • 根据时间变化（夜间为深色，白天为浅色）
上下文个性：
  • 根据一天中的时段显示不同消息
  • 针对特定用户操作给出响应
  • 随机变化（不要每次都相同）
  • 随持续使用逐步揭示更多内容

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.
让等待过程引人入胜：
  • 轮换的有趣加载消息
  • 带有个性的进度条
  • 长时间加载时的小游戏
  • 等待时展示有趣的事实或提示
  • 搭配鼓励性文案的倒计时
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..."
警告：避免使用“正在驱赶像素”“教机器人跳舞”“咨询神奇 8 号球”“从无限倒数”这类陈词滥调的加载消息。这些属于 AI-slop 文案——一眼就能看出是机器生成的。请编写与产品实际功能紧密相关的内容。

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)
  • Treat delight as permission for random whimsy or off-brand decoration
  • Add extra borders when spacing, accent color, or a subtle surface change would work better
动画库：
  • Framer Motion（React）
  • GSAP（通用）
  • Lottie（After Effects 动画）
  • Canvas 彩纸（派对效果）
声音库：
  • 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 次后仍然令人愉悦吗？
  • 不会造成阻碍：用户可以退出或跳过吗？
  • 性能良好：没有卡顿，也没有性能下降
  • 契合场景：符合品牌和上下文
  • 无障碍：支持减少动态效果，并兼容屏幕阅读器
记住，愉悦感是工具与体验之间的差别。增添个性，给用户带来积极惊喜，创造值得分享的片刻。但始终尊重可用性——愉悦感应当增强体验，绝不能阻碍体验。