delight

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Context: this sub-skill is one lens of the broader

ui-craft

skill. If the

ui-craft

skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Add delight to the UI at

$ARGUMENTS

. Load the

ui-craft

skill.

Delight is specificity, not decoration. The goal is one or two moments a user would screenshot — not confetti, not bounce, not emoji.

Candidates, ordered by safety (start at the top):

Copy specificity — confirmation toasts name the thing ("3 members invited — Alex, Sam, Jordan", not "Invites sent"). Empty states with wit but no cringe ("Nothing here yet — add your first project" > "Oops! Looks like it's empty 😅").
Hover choreography — multi-property hover (transform + color + shadow) that moves together on one shared duration/easing. One card, not every card.
State transitions — optimistic UI + tiny success micro-animation (checkmark stroke draw, count-up on a number, subtle scale-and-settle on the updated row).
One signature detail — custom list markers tied to the domain, asymmetric column offset on a single section, scroll-linked progress that tracks something real (reading progress, form completion).

Never add:

Bounce easing (
```
cubic-bezier(0.68, -0.55, 0.27, 1.55)
```
) — flagged in anti-slop.
Confetti on mundane actions (file saved, field updated).
Emoji spam or "🎉 SUCCESS!" in ALL CAPS.
Idle float/bob/shimmer on elements that aren't waiting for anything.

Knob gating (MOTION_INTENSITY):

```
≤ 3
```
→ copy-only delight. No animated delight. Candidate 1 only.
```
4-7
```
→ copy + hover + state transitions (candidates 1-3).
```
8+
```
→ all four, including the signature detail.

References to read:

references/motion.md

(Decision Ladder + interaction rules),

references/copy.md

(microcopy voice),

../examples/animation-storyboard.md

(if multi-stage).

Output: edit code directly. Print the Review Format table. Flag every candidate you chose not to add and why.

Next step:

/finalize

— delight is the last additive pass; gate it before shipping (rung 3).

背景说明： 此子技能是更广泛的

ui-craft

技能的一个细分方向。如果同时安装了

ui-craft

技能，请先阅读其SKILL.md中的探索（Discovery）、反冗余（Anti-Slop）和工艺测试（Craft Test）部分，再应用以下具体方案。

为

$ARGUMENTS

指向的UI添加愉悦感。加载

ui-craft

技能。

愉悦感在于精准，而非装饰。 目标是打造一到两处用户会想要截图分享的瞬间——而非特效纸屑、弹跳效果或表情符号。

推荐方案（按安全性排序，优先从顶部开始）：

文案精准化 —— 确认提示框明确说明对象（例如「已邀请3位成员：Alex、Sam、Jordan」，而非「邀请已发送」）。空状态文案风趣但不尴尬（例如「这里还没有内容——添加你的第一个项目吧」优于「哎呀！这里看起来是空的 😅」）。
悬停动态编排 —— 多属性联动的悬停效果（变换+颜色+阴影），在统一的时长/缓动函数下同步变化。仅为单个卡片添加，而非所有卡片。
状态过渡效果 —— 乐观UI设计搭配微小的成功微动画（对勾描边绘制、数字递增、更新行的细微缩放并归位效果）。
一个标志性细节 —— 与业务领域绑定的自定义列表标记、单个区块的不对称列偏移、与实际进度关联的滚动联动进度条（阅读进度、表单完成进度）。

绝对禁止添加：

弹跳缓动效果 (
```
cubic-bezier(0.68, -0.55, 0.27, 1.55)
```
) —— 属于反冗余规则中的禁用项。
日常操作（文件保存、字段更新）时的特效纸屑。
大量表情符号或全大写的「🎉 SUCCESS!」提示。
无等待状态元素的空闲浮动/晃动/闪烁效果。

动效强度控制（MOTION_INTENSITY）：

```
≤ 3
```
→ 仅使用文案类愉悦感优化，不添加动画类效果。仅采用方案1。
```
4-7
```
→ 文案+悬停+状态过渡效果（方案1-3）。
```
8+
```
→ 全部四种方案，包括标志性细节。

参考文档：

references/motion.md

（决策阶梯+交互规则）、

references/copy.md

（微文案风格）、

../examples/animation-storyboard.md

（若涉及多阶段动画）。

输出要求： 直接编辑代码。输出评审格式表格。标注所有未选用的方案及原因。

下一步：

/finalize

—— 愉悦感优化是最后一步增量调整；上线前需进行审核（第3级）。