mcpField
M
motion-reference

motion-reference

github.com/60fps-design设计与 UI179 次安装3 周前更新
代码仓库

关于 motion-reference

motion-reference 是面向 iOS 交互设计者的技能,借助 60fps 库中的动效分析和 SwiftUI 复现作为参考。它指导搜索、评估结果,并提供独立代码示例。

主要功能

  1. 01用自然语言描述搜索片段
  2. 02查看动效分析和计时信息
  3. 03获取独立的 SwiftUI 代码
  4. 04匹配接近时查找相关片段
  5. 05根据实际契合度评估结果

适用场景

  1. 01设计动效时参考真实 iOS 交互
  2. 02检查交互的计时和缓动
  3. 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 复现。用它来参考,不要凭空编造时序。这个库中的数值均来自已发布的应用。

按以下顺序使用工具

  1. 60fps_search_shots。使用自然语言描述,不要只输入关键词。“用于结账的弹性底部面板”就可以。“面板”则不行。只有用户提到某个应用时,才设置 app 或 filters。
  2. 60fps_get_motion_breakdown。它会提供起始状态、过渡过程、结束状态,以及时序和缓动信息。根据这些信息进行设计。
  3. 60fps_get_motion_code。它会返回一个独立的 SwiftUI 文件。**请将完整代码放在 swift 代码块中展示给用户。**这是交付内容,不是引用资料。
  4. 如果第一个结果接近但不合适,请使用 60fps_get_related_shots。

如实解读结果

搜索会根据匹配程度对整个库进行排序,因此无论问题相差多远,都会返回结果。total 较大表示搜索的片段数量多,不代表匹配结果多。逐一判断每个结果是否合适;如果没有合适的结果,请如实说明。

不适用的情况

该库仅适用于 iOS,且只涉及动效。

不要将它用于 Android、Material、Flutter、React Native 或 Web。不要将它用于图标设计、配色方案、徽标或品牌设计。也不要将它用于性能或帧率分析——虽然名称相同,但除此之外毫无关联。在这些情况下,它仍会返回 iOS 片段,但这些片段并不适用。请直接回答。

使用代码

每个文件都是独立的。将其粘贴到 Xcode 中即可运行。

按照设计初衷,代码不包含原应用中的文字、颜色、品牌元素或素材。请根据用户的设计系统重新设置样式。值得保留的是动效。

评论

支持 Markdown