interaction-design

输入需求后，输出含点击动效、图标切换动画、错误状态抖动的完整可运行代码。

解决什么问题

AI 写的 UI 通常静如死水。interaction-design 专门补上这个缺口——不是随便加个 transition，而是识别每个交互节点该用什么动效、用什么缓动曲线、持续多久。

覆盖的交互状态

• 触发态：hover、focus、active、click 波纹
• 反馈态：错误抖动、成功弹跳、警告脉冲、加载旋转
• 过渡态：页面进入序列、元素出现、内容切换
• 骨架屏：shimmer 扫光加载效果

动效原则

优先 CSS，能不用 JS 就不用。React 项目推荐 Motion 库。每个动效都有意义——错误用抖动，成功用弹跳，不是随便挑一个「看起来酷」的效果。

示例提示词

为登录页添加密码可见性切换，带动效和错误状态抖动