关于 motion-reference
motion-reference 是面向 iOS 交互设计者的技能,借助 60fps 库中的动效分析和 SwiftUI 复现作为参考。它指导搜索、评估结果,并提供独立代码示例。
主要功能
- 01用自然语言描述搜索片段
- 02查看动效分析和计时信息
- 03获取独立的 SwiftUI 代码
- 04匹配接近时查找相关片段
- 05根据实际契合度评估结果
适用场景
- 01设计动效时参考真实 iOS 交互
- 02检查交互的计时和缓动
- 03生成可在 Xcode 中运行的 SwiftUI 动效示例
MCP 相关
该技能使用 60fps MCP 服务搜索片段、获取动效分析和代码,并查找相关片段。
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ 60fps-design/ plugin --skill motion-reference安装后在 Claude Code 中输入/motion-reference确认已加载。
详细介绍
动效参考
60fps MCP 服务包含 2,000 多段真实 iOS 交互片段。每段都有文字版动效拆解,许多还附有经过编译检查的 SwiftUI 复现。用它来参考,不要凭空编造时序。这个库中的数值均来自已发布的应用。
按以下顺序使用工具
60fps_search_shots。使用自然语言描述,不要只输入关键词。“用于结账的弹性底部面板”就可以。“面板”则不行。只有用户提到某个应用时,才设置app或filters。60fps_get_motion_breakdown。它会提供起始状态、过渡过程、结束状态,以及时序和缓动信息。根据这些信息进行设计。60fps_get_motion_code。它会返回一个独立的 SwiftUI 文件。**请将完整代码放在 swift 代码块中展示给用户。**这是交付内容,不是引用资料。- 如果第一个结果接近但不合适,请使用
60fps_get_related_shots。
如实解读结果
搜索会根据匹配程度对整个库进行排序,因此无论问题相差多远,都会返回结果。total 较大表示搜索的片段数量多,不代表匹配结果多。逐一判断每个结果是否合适;如果没有合适的结果,请如实说明。
不适用的情况
该库仅适用于 iOS,且只涉及动效。
不要将它用于 Android、Material、Flutter、React Native 或 Web。不要将它用于图标设计、配色方案、徽标或品牌设计。也不要将它用于性能或帧率分析——虽然名称相同,但除此之外毫无关联。在这些情况下,它仍会返回 iOS 片段,但这些片段并不适用。请直接回答。
使用代码
每个文件都是独立的。将其粘贴到 Xcode 中即可运行。
按照设计初衷,代码不包含原应用中的文字、颜色、品牌元素或素材。请根据用户的设计系统重新设置样式。值得保留的是动效。
评论
支持 Markdown