# Design Spells Microinteractions

> 当为已完成功能做最后打磨、想把"功能性/平庸"界面提升为"有惊喜感/高级感"时使用；做法是定位界面中无聊的标准组件，借鉴优秀微交互模式并适配品牌后用 CSS/Anime.js/Framer Motion 实现 60fps+ 的精致交互细节；不适用于核心功能尚未跑通、性能/可访问性优先、或微交互会妨碍可用性的场景。触发词：微交互、悬停动效、彩蛋。

- Skill: `findscripter/design-spells-microinteractions` (Agent Skill)
- Install (CLI): `npx skillmds@latest add findscripter/design-spells-microinteractions`
- Raw SKILL.md: https://api.skillmd.com/api/skills/findscripter/design-spells-microinteractions/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: findscripter (https://skillmd.com/u/findscripter)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/findscripter/design-spells-microinteractions

---

## 何时使用

适合在以下情况启用本技能：

- 给一个已经做完的功能做收尾打磨，主动增加"wow"惊喜感。
- 想用更巧妙的交互替换千篇一律的网页默认行为（如磁吸悬停、创意加载器、出人意料的过渡）。
- 想加入"彩蛋"或带个性的设计选择，让产品和竞品拉开差距。
- 想摆脱模板化、套壳式的通用开发，建立高级、有辨识度的品牌气质。

不该用的边界：

- 核心功能尚未跑通时——先保证可用，再谈惊喜。
- 当前任务以性能、可访问性、表单转化为第一优先级，微交互可能成为可用性障碍时。
- 细节会分散用户对主任务的注意力，而非锦上添花时。
- 输出不能替代环境内的实测、测试或专家评审；缺少必要输入、权限、安全边界或验收标准时，先停下来确认。

## 步骤

1. 定位机会点：盯住界面里"无聊/标准"的部分——一个普通的提交按钮、头像、滚动指示器、价格切换开关等。
2. 调研灵感：浏览优秀微交互合集（参考 Design Spells，https://www.designspells.com/），找高创意模式，如"磁吸悬停""基于物理的交互""流体滚动惊喜"。
3. 适配模式：把交互无缝改造到当前项目的品牌与布局上，用它强化 App 的核心叙事，而不是生硬照搬。
4. 高质量落地：用 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）。