delight

识别可加入愉悦感、个性和意外精致感的机会，将功能性界面转化为令人愉悦的体验。

必须完成的准备

用户通过 /delight 启动此工作流。此技能激活后，加载 $frontend-design——其中包含设计原则、反模式和 Context Gathering Protocol。继续之前，请遵循该协议——如果尚无设计背景，必须先加载 $setup。此外，还要了解：该领域适合什么风格（活泼还是专业、古怪还是优雅）。

---

评估增添愉悦感的机会

找出能提升体验（而非分散注意力）的愉悦时刻：

1. 寻找自然的愉悦时刻：

   • 成功状态：操作完成时（保存、发送、发布）
   • 空状态：首次使用体验、引导流程
   • 加载状态：等待期间可加入趣味体验
   • 成就：里程碑、连续记录、完成事项
   • 交互：悬停、点击、拖动时的状态
   • 错误：缓和令人沮丧的时刻
   • 彩蛋：留给好奇用户发现的隐藏内容

2. 了解背景：

   • 品牌个性是什么？（活泼？专业？古怪？优雅？）
   • 受众是谁？（精通技术？富有创意？企业用户？）
   • 情绪背景是什么？（成就感？探索感？挫败感？）
   • 什么才合适？（银行应用 ≠ 游戏应用）

3. 定义愉悦策略：

   • 含蓄精致：精心打磨的微交互（奢侈品牌）
   • 活泼个性：奇趣插画和文案（消费类应用）
   • 贴心惊喜：在用户开口前预见其需求（效率工具）
   • 丰富感官：令人舒心的音效、流畅的动画（创意工具）

如果无法从代码库中弄清上述任何一点，请直接询问用户，确认你无法推断的内容。

关键：愉悦感应提升易用性，绝不能造成阻碍。如果用户注意到愉悦设计胜过完成目标，那就做得过头了。

愉悦设计并不意味着可以随意卖萌。产品类别越严肃，愉悦设计就越应含蓄。

请查阅 ai slop detection 参考文档，避免愉悦设计流于千篇一律的潮流装饰，保持其独特性。 当愉悦感应来自升级默认样式、强调色边框、细腻的背景处理或出人意料的组件呈现时，请查阅 finishing touches。

愉悦设计原则

遵循以下指南：

愉悦感应是锦上添花，绝不应造成阻碍

• 愉悦时刻应当短暂（< 1 秒）
• 绝不能为了愉悦效果延迟核心功能
• 让愉悦效果可以跳过，或保持含蓄
• 尊重用户的时间和任务专注度

惊喜与探索

• 将令人愉悦的细节藏起来，留待用户发现
• 奖励探索和好奇心
• 不要对每个愉悦时刻都加以说明
• 让用户能够与他人分享自己的发现

符合情境

• 让愉悦设计契合情绪时刻（庆祝成功，体恤错误）
• 尊重用户当下的状态（发生严重错误时不要开玩笑）
• 符合品牌个性和受众预期
• 注重文化敏感性（不同文化对愉悦感的理解各不相同）

个性，而非噪音

• 通过愉悦设计强化所选个性，而不是与之冲突
• 优先在默认样式上进行低复杂度改进，而非另创全新的 UI 模式
• 空状态通常比核心任务界面更值得增加视觉亮点

随时间累积

• 愉悦设计应在反复使用后依然保持新鲜感
• 变化呈现方式（不要每次都使用相同动画）
• 随着持续使用逐步揭示更深层的内容
• 通过规律建立期待

愉悦设计技巧

通过以下方法增添个性与愉悦感：

强化默认设计

• 在设计全新组件之前，先优化现有的项目符号、链接、复选框、标题和卡片
• 添加细小的强调边框，以低成本、简洁地塑造个性
• 优先使用间距、细微的背景变化或克制的阴影，再考虑添加大量边框
• 装饰性背景应保持低对比度，确保内容仍是视觉焦点

微交互与动画

让按钮更有趣：

/* 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 套话）
• 通过鼓励性的提示语展示进度
• 使用带细微动画的骨架屏

成功动画：

• 绘制对勾的动画
• 为重要成就添加彩纸爆发效果
• 使用柔和的缩放和淡入淡出效果进行确认
• 加入令人愉悦的音效（保持轻柔）

悬停惊喜：

• 悬停时触发图标动画
• 颜色变化或发光效果
• 展现有个性的工具提示
• 光标变化（为品牌体验定制光标）

文案个性

俏皮的错误提示：

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

俏皮的标签与工具提示：

"Delete"
"Send to void" (for playful brand)

"Help"
"Rescue me" (tooltip)

重要：文案风格应符合品牌个性。银行不该太古灵精怪，但可以亲切温暖。

插画与视觉个性

定制插画：

• 空状态插画（而不是图库图标）
• 错误状态插画（友好的小怪物、古灵精怪的角色）
• 加载状态插画（动画角色）
• 成功状态插画（庆祝场景）

图标个性：

• 定制与品牌个性相符的图标集
• 动画图标（悬停或点击时轻微动效）
• 插画风格的图标（比通用图标更精细）
• 所有图标保持风格统一

背景效果：

• 细微的粒子效果
• 渐变网格背景
• 几何图案
• 视差纵深效果
• 分时段主题（早晨与夜晚）
• 背景装饰应保持低对比度；如果它与内容争抢注意力，就不再是令人愉悦的点缀

令人愉悦的交互

让拖放更有趣：

• 拖动时产生浮起效果（阴影、缩放）
• 放下时播放吸附动画
• 放置时播放令人愉悦的音效
• 显示撤销提示（“放错地方了？[撤销]”）

切换开关：

• 使用弹簧物理效果实现平滑滑动
• 颜色过渡
• 提供细微的视觉反馈、声音或适当情况下可选的浏览器支持振动
• 可选音效

进度与成就：

• 连胜计数器与里程碑庆祝效果
• 进度条在达到 100% 时“庆祝”
• 带动画的徽章解锁效果
• 俏皮的统计提示（“状态正旺！已连续 5 天”）

表单交互：

• 输入框聚焦时播放动画
• 勾选复选框时播放令人愉悦的缩放脉冲动画
• 输入有效内容后展示庆祝式成功状态
• 自动扩展的文本区域

音效设计

细微的音频提示（适当时使用）：

• 通知音效（有辨识度但不恼人）
• 成功音效（令人愉悦的“叮”声）
• 错误音效（体贴而非刺耳）
• 聊天/消息输入音效
• 环境背景音频（非常轻柔）

重要：

• 遵循系统声音设置
• 提供静音选项
• 音量保持轻柔（细微提示，而非警报）
• 不要每次交互都播放音效（听觉疲劳确实存在）

彩蛋与隐藏惊喜

探索奖励：

• 输入 Konami 代码解锁特别主题
• 隐藏键盘快捷键（Cmd+K 可使用特别功能）
• 将鼠标悬停在标志或插画上时显示惊喜
• 在图片的替代文本中加入笑话（屏幕阅读器用户也能听到！）
• 面向开发者的控制台消息（“喜欢你看到的吗？我们正在招聘！”）

季节性点缀：

• 节日主题（细致而得体）
• 季节性颜色变化
• 基于天气的变化
• 随时间变化（夜晚调暗，白天调亮）

贴合情境的个性：

• 根据一天中的时段显示不同提示语
• 针对特定用户操作作出回应
• 随机变换提示语（每次不要都相同）
• 随着持续使用逐步展现更多内容

加载与等待状态

让等待过程更有趣：

• 轮换显示有趣的加载消息
• 设计有个性的进度条
• 长时间加载时提供小游戏
• 等待时展示趣味知识或提示
• 倒计时并附上鼓励的话语

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 垃圾内容，一眼就能看出是机器生成的。请根据产品的实际功能编写具体的消息。

庆祝时刻

庆祝成功：

• 重大里程碑时放礼花
• 完成任务时显示动画对勾
• 进度达到 100% 时庆祝
• 显示“成就解锁”风格的通知
• 发送个性化消息（“你已发布第 10 篇文章！”）

认可里程碑：

• 首次执行操作时给予特别反馈
• 追踪并庆祝连续完成记录
• 展示目标的完成进度
• 庆祝周年纪念

实现模式

动画库：

• Framer Motion（React）
• GSAP（通用）
• Lottie（After Effects 动画）
• Canvas confetti（派对效果）

声音库：

• Howler.js（音频管理）
• Use-sound（React hook）

物理效果库：

• React Spring（弹簧物理效果）
• Popmotion（动画基础组件）

重要：文件大小很重要。请压缩图片、优化动画，并延迟加载提升愉悦感的功能。

切勿：

• 为了提升愉悦感而延迟核心功能
• 强迫用户体验趣味时刻（应允许跳过）
• 用趣味效果掩盖糟糕的用户体验
• 过度设计（少即是多）
• 忽视无障碍性（谨慎使用动画，并提供替代方案）
• 让每次交互都充满趣味（特殊时刻应当特别）
• 为了提升愉悦感而牺牲性能
• 忽视场景是否合适（注意分寸）
• 把提升愉悦感当成随意添加奇思妙想或偏离品牌风格装饰的许可
• 在间距、强调色或细微的表面变化更合适时，额外添加边框

验证愉悦体验的质量

测试这些设计是否真的能带来愉悦体验：

• 用户反应：用户会微笑吗？会分享截图吗？
• 不会惹人厌：重复 100 次后依然令人愉快吗？
• 不会造成阻碍：用户可以选择退出或跳过吗？
• 性能良好：没有卡顿，也不会变慢
• 恰当：符合品牌和场景
• 无障碍：支持减少动态效果设置和屏幕阅读器

请记住：愉悦体验能让工具与体验有所区别。为产品增添个性，带给用户惊喜，并创造值得分享的时刻。但始终要尊重易用性——愉悦体验应当锦上添花，而非妨碍使用。