findscripter 何时使用
适合在以下情况启用本技能：
- 给一个已经做完的功能做收尾打磨，主动增加"wow"惊喜感。
- 想用更巧妙的交互替换千篇一律的网页默认行为（如磁吸悬停、创意加载器、出人意料的过渡）。
- 想加入"彩蛋"或带个性的设计选择，让产品和竞品拉开差距。
- 想摆脱模板化、套壳式的通用开发，建立高级、有辨识度的品牌气质。
不该用的边界：
- 核心功能尚未跑通时——先保证可用，再谈惊喜。
- 当前任务以性能、可访问性、表单转化为第一优先级，微交互可能成为可用性障碍时。
- 细节会分散用户对主任务的注意力，而非锦上添花时。
- 输出不能替代环境内的实测、测试或专家评审；缺少必要输入、权限、安全边界或验收标准时，先停下来确认。
步骤
- 定位机会点：盯住界面里"无聊/标准"的部分——一个普通的提交按钮、头像、滚动指示器、价格切换开关等。
- 调研灵感：浏览优秀微交互合集（参考 Design Spells，https://www.designspells.com/），找高创意模式，如"磁吸悬停""基于物理的交互""流体滚动惊喜"。
- 适配模式：把交互无缝改造到当前项目的品牌与布局上，用它强化 App 的核心叙事，而不是生硬照搬。
- 高质量落地：用 CSS、Anime.js 或 Framer Motion 实现该微交互，确保丝滑流畅（60fps+）、GPU 加速、不产生布局抖动（layout shift）。
指令
- 默认就要做：构建现代、有创意、视觉惊艳的 UI/UX，不要用大众化、套路化的写法。在标准组件里主动寻找每一处可注入"magic"的机会。
- 取悦而非干扰：细节必须是对体验的加法，不能成为可用性障碍，要让人觉得"贵"且打磨精细。
- 执行质量是底线：一个卡顿或坏掉的"spell"比没有更糟。务必保证高性能、GPU 加速、绝不引发布局位移。
示例
把一个普通的"提交"按钮，改造成悬停时轻微磁吸跟随光标、点击时有弹性回弹的反馈：
- 用
transform（translate/scale）而非改top/left/width，保证走 GPU 合成、不触发重排。 - 配
will-change: transform与缓动曲线，控制时长在 150–300ms，保持丝滑。 - Framer Motion 可用
whileHover/whileTap配spring过渡实现回弹手感；Anime.js 可用其缓动与时间线编排连续动效。 - 全程盯住 60fps+，确认无 layout shift（可用 DevTools 性能面板核验）。
注意事项
- 优先动
transform和opacity，避免触发回流/重排的属性，杜绝 CLS。 - 尊重用户偏好：为
prefers-reduced-motion提供降级方案。 - 适度克制：一个页面塞满彩蛋会显得廉价，精挑高价值触点。
- 上线前在真实设备/低端机上验证帧率，别只在高配机上自测。
互见
- 与前端动效、页面性能优化（CLS/帧率）、设计系统/组件库相关技能配合使用。
- 落地前的可用性与可访问性评审，建议结合无障碍（a11y）相关技能。
采编自 sickn33/antigravity-awesome-skills（MIT）。