一条好的 UI 动效 Prompt 长什么样
大多数 Prompt 死在动效描述上。拆解一条动效 Prompt 必备的五个部分——触发、属性、曲线、时长、reduced-motion 兜底——并给出改写前后对比。
约 7 分钟
真正起作用的五个部分
模型看不到你脑中的动画，但它能实现一份规格说明。资源库里的每条 Prompt 都由同样五个部分构成，你自己写的时候也应当如此。
- 触发——什么引发动画：hover、滚动位置、页面加载、进入视口。
- 属性——什么在变：能用 transform/opacity 就不用别的（GPU 友好）；width/height/top/left 仅在不得已时使用。
- 曲线——缓动：写明 cubic-bezier 数值、弹簧的刚度/阻尼，或 stagger 间隔。“流畅”不是曲线。
- 时长——带数字。200ms 是即时感，600ms 是从容感，1000ms 是坏掉了。
- 兜底——prefers-reduced-motion 下的表现（通常：直接呈现最终状态，无过渡）。
改写前后对比
差的写法：“让卡片 hover 的时候动效好看点。”模型会自己挑一个——通常是 scale(1.05) 加默认缓动——然后你来回改五遍。
好的写法：“卡片 hover 抬起：translateY(-6px)，250ms，cubic-bezier(0.22, 1, 0.36, 1)；阴影同时间从 0 8px 24px rgba(0,0,0,.15) 加深到 0 16px 40px rgba(0,0,0,.25)；按下时 120ms 内落回 translateY(-2px)。prefers-reduced-motion 下不做位移，仅保留阴影变化。”写起来一样费劲，上线只跑一轮。
去哪里抄现成范例
资源库的 Prompt 都按这个结构写，并且每条都验证过“仅凭 Prompt 能还原出实时预览”。学这个模式最快的办法就是读几条高分 Prompt。
✦Spring Physics Ball Drop（弹簧物理落球）完整的弹簧规格——刚度、阻尼、质量——全部写进 Prompt。✦Stagger Timeline Grid（交错时间线网格）Stagger 间隔的正确写法：每项延迟的计算写进 Prompt，而不是让模型猜。reduced-motion 那句不能省
对前庭功能敏感的用户来说，视差和弹跳真的会引起不适；可访问性审计也会因缺兜底而挂掉。Prompt 里的一句话两样都解决——而这恰恰是大多数人跳过的那句。
下次写 Prompt，用五个部分过一遍。缺哪个部分，模型就会即兴发挥——而为即兴买单的是你的评审轮次。