Agent Skills
返回列表
界面魔法微交互

界面魔法微交互

设计多媒体 更新于 2026.08.28

将以下提示词粘贴到你的 AI 对话框中：

请根据官方指南 https://skillhub.cn/install/skillhub.md 的步骤，在 AI 助手中安装规范名 @user_fccf428b/design-spells 对应的技能。

技能介绍

模板化界面正在流失注意力

当产品功能趋同时，决定用户是否记住你的往往是细节：提交按钮的回弹、加载动画的节奏、页面切换时的流体过渡。大多数项目停留在"能用就行"的阶段——hover 状态只是换个颜色，加载动画全是同一个转圈，模板驱动的开发让每个站点看起来都大同小异。

核心能力

  • 识别改造点：定位界面中"无聊"的标准组件，如按钮、头像、滚动指示器、定价开关
  • 魔法模式库：检索磁吸悬停、物理动效、流体滚动等高创意交互模式
  • 品牌化适配：将模式嵌入项目的品牌叙事与布局，而非生硬照搬
  • 高性能实现：用 CSS、Anime.js 或 Framer Motion 落地，保持 60fps 以上且无布局抖动

执行流程

  1. Identify Opportunity：找出可增强的标准组件
  2. Research Spells：浏览模式库挑选创意方案
  3. Adapt Pattern：将模式适配进品牌与布局叙事
  4. Implement flawlessly：丝滑落地，杜绝卡顿

边界与注意点

  • 细节应"增色而非打扰"，不能成为可用性障碍
  • 失败的动效比没有更糟，实现必须高性能、GPU 加速、无布局偏移
  • 仅在任务匹配范围时启用；不能替代环境验证、测试或专家评审
  • 若关键输入、权限边界或验收标准缺失，应停下澄清而不是硬做

使用场景

  • 给已完成的产品页面做收尾打磨，需要把标准按钮和加载动画替换成有惊喜感的微交互
  • 模板化官网让品牌失去辨识度，需要在导航切换和定价开关处加入品牌化的创意过渡
  • 滚动指示器和图片加载太普通，想用流体过渡和创意 loader 替换掉默认行为
  • 活动页面上线前想加入彩蛋交互，让用户在特定手势下触发品牌专属动效

适合人员

  • 独立开发者：功能已完成但界面像模板站，想在细节上做出差异化记忆点
  • 前端工程师：重做产品 UI，需要在不牺牲性能的前提下落地 60fps 微交互
  • 品牌官网设计师：客户要求站点"有记忆点"，需要用动效细节传递品牌个性
  • 动效实现者：想系统学习用 CSS、Anime.js 或 Framer Motion 做磁吸悬停类高级交互