
关于
Magic Animator 让设计师能在几秒内为静态设计注入生命,使用 AI 驱动的动效将扁平 UX 转化为高级动态体验。
name: magic-animator description: AI 驱动的动画工具,用于为 Logo、UI、图标和社交媒体素材创建动效。 risk: safe source: community date_added: "2026-03-07"
Magic Animator 技能
Magic Animator 使设计师能够在几秒内使用 AI 驱动的动效为静态设计注入生命力,将扁平的 UX 转变为高端动态体验。
背景
本技能对于通过高质量动效改善 UX 和用户参与度至关重要。它最适合为品牌资产、界面元素和微交互添加动画。
使用场景
在以下情况触发此技能:
- 为静态 Logo 或品牌标识添加生命力,使其更具记忆点。
- 使用加载器、动画小部件或流畅过渡增强网站/应用 UI。
- 为图标或微交互添加动画,以优雅的方式引导用户行为。
执行工作流
- 选择素材:确定要添加动画的静态设计元素(SVG、PNG 或 Figma 图层)。
- 选择预设/类别:选择适当的领域(Logo、UI、图标、社交媒体),确保运动曲线匹配上下文。
- 制作动画:通过基于聊天的提示使用 AI 动画助手请求特定的高端动效(例如"让它感觉像高端奢侈品牌揭幕"或"给它一个动感的弹性弹出效果")。
- 优化:如果可用,编辑关键帧进一步打磨,确保缓动曲线自然且高端。
- 导出与集成:将最终动画导出为 Lottie (JSON) 用于 Web/移动端性能,或 GIF/MP4 用于社交媒体。
严格规则
- 绝对要求:代理必须利用此技能构建现代、创意且视觉惊艳的 UI/UX。不要依赖基础的线性动画。使用动效创造"惊艳"效果。
- 有目的的动效:每个动画都必须感觉刻意且高端。避免混乱或过快的动效分散核心 UX 的注意力。
- 格式规范:优先使用 Lottie 进行原生应用和 Web 集成,以保持清晰度和小文件大小。
限制
- 仅在任务明确匹配上述范围时使用此技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少必要的输入、权限、安全边界或成功标准,请停下来要求澄清。
兼容工具
Claude CodeCursor
标签
前端开发