让AI生成”有灵魂”的UI动效！interaction-design这个Skill绝了

做过 UI 的都知道，一个按钮点下去没反应有多难受——不是因为功能坏了，而是缺少那一点点”手感”。微交互（Microinteraction）就是解决这个问题的。好的微交互让人感觉产品是活的，差的微交互让人觉得你在和一个死机对话。

这个 Skill 解决什么问题

interaction-design 是一个专门教 AI 生成精美交互动效的 Skill。无论你是用 Framer Motion 写 React，还是纯 CSS 写网页，它都能让 AI 帮你生成：

• 按钮悬停/点击时的微妙缩放反馈
• 加载状态的骨架屏（Skeleton Screen）
• 开关 Toggle 的弹性滑动
• 页面切换时的淡入淡出
• 点击按钮时的 Ripple 水波纹
• 滑动卡片左右滑出

简单说——让你的界面从”能用”升级到”想摸”。

核心设计原则

这个 Skill 特别强调四个原则：反馈（Feedback）——告诉用户操作发生了；定向（Orientation）——让用户知道东西从哪来到哪去；聚焦（Focus）——把注意力引到重要变化上；连贯（Continuity）——切换时保持上下文不丢失。

Timing 节奏也很讲究：100-150ms 用于微反馈（悬停、点击）；200-300ms 用于小过渡（开关、下拉）；300-500ms 用于中等过渡（弹窗、页面）；500ms+ 用于复杂编排动画。记住这个节奏感，做出来的动效就不会显得急躁或拖沓。

代码示例：Framer Motion 按钮

实际用起来超级简单。给 AI 一个任务描述，它就能给你完整代码：

import { motion } from "framer-motion";

export function InteractiveButton({ children, onClick }) {
  return (
    <motion.button
      onClick={onClick}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 400, damping: 17 }}
      className="px-4 py-2 bg-blue-600 text-white rounded-lg"
    >
      {children}
    </motion.button>
  );
}

悬停放大 1.02 倍，点击缩小 0.98 倍，弹簧物理弹性——用户会明显感受到”这个按钮有回应”。

无障碍不能忘

动效再好看，也要照顾到对 motion 敏感的用户。这个 Skill 特别提醒要用 prefers-reduced-motion 检测：对有前庭功能障碍的用户，自动降级为静态版本。好的设计不能只是好看，还要对所有人友好。

适合谁用

• 前端开发者：想让 AI 帮你写带动效的组件
• AI Builder：用 Cursor / Claude Code / Windsurf 等工具时，让 AI 生成更精致的 UI
• UX 设计师：快速验证交互想法，用代码直接出原型

支持几乎所有主流 AI 编程工具：Claude Code、Codex CLI、Gemini CLI、Cursor、Windsurf、Cline……装上就能用。

总结

interaction-design 解决的是一个很具体但又很普遍的问题：AI 生成的前端代码往往”能用但没灵魂”。有了这个 Skill，AI 就能帮你生成带 proper timing、spring physics、accessibility 支持的完整动效代码。不是花架子，是真正能用到生产项目的实用 Skill。

GitHub：https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/interaction-design

GitHub: https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/interaction-design