mcpField
S
search

search

github.com/mobbin设计与 UI53587 次安装4 天前更新
代码仓库

关于 search

这是一个指导 Agent 搜索 Mobbin 设计参考的技能,涵盖应用界面、营销网站分区和用户流程。它说明如何撰写查询、选择工具与模式、继续获取结果,以及处理匹配不足或缺失的情况。

主要功能

  1. 01按目标类型选择工具
  2. 02控制查询约束并撰写关键词
  3. 03选择界面搜索模式
  4. 04按页面或 ID 获取更多结果
  5. 05处理缺失结果和图片错误

适用场景

  1. 01查找特定应用界面参考
  2. 02搜索营销网站的某个分区
  3. 03定位用户流程或其中一步
  4. 04改进匹配不足的搜索

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/mobbin/skills --skill search

安装后在 Claude Code 中输入/search确认已加载。

详细介绍

搜索 Mobbin

请先阅读最佳实践。 如果本次对话中尚未阅读 Mobbin best-practices 技能,请在搜索前调用该技能,因为其中说明了何时应该执行搜索,以及何时应由其他技能执行搜索。

调用方技能可能会设置自己的搜索规则,例如每个问题要搜索多少次,或使用哪种模式。如果这些规则与本文不同,以调用方技能的规则为准。

搜索的工作方式

  • 搜索匹配的是含义,而不是关键词。 使用普通短语(“带免费试用的付费墙”)比列出关键词(“付费墙、试用、订阅、定价”)效果更好。
  • 仅当任务需要时才在查询中写明应用名称。 在查询中添加应用名称会将结果限定为该应用。但并非每条结果都来自该应用,因此引用前请检查 app_name 和 site_name。
  • 查询也会根据其中提到的语言筛选屏幕和流程(“日语银行应用”)。仅当任务需要时才指定语言。
  • 结果不理想时,请修改查询。 删除或改写限制条件,或使用用户自己的表述。不要添加用户未提出的内容。提高 limit 或原样重新发送查询,只会返回相同的匹配结果。若要获取有效查询的更多结果,请参阅再次搜索。

选择工具

目标工具
应用中的屏幕或组件使用带 platform 参数的 search_screens
营销网站的某个部分(主视觉、定价、功能网格、页脚)使用不接受 platform 参数的 search_sections
用户旅程,或其在旅程中的位置很重要的单个屏幕(注册流程中的验证邮箱步骤)使用带 platform 参数的 search_flows。对于单个屏幕,请从流程的屏幕中选择。只有部分屏幕带有预览;引用其他屏幕前,请打开其 image_url

platform 为 ios 或 web,也是唯一可设置的筛选条件。这些工具不支持 Android,因此 Android 目标请搜索 ios。引用时请说明这些参考来自 iOS。

编写查询

每条查询对应一个屏幕、流程或版块。 先写类型,也就是目标。只写类型也是不错的查询。

每条查询都必须遵守以下限制:

  • 最多三个约束。 每种状态、步骤、可见部分或视觉特征(dark mode、bottom sheet)都算一个约束:“包含套餐卡片和免费试用按钮的付费墙”有两个约束。类型(“付费墙”“注册屏幕”)、领域(“冥想应用”“银行应用”)和应用名称(“Calm”“Revolut”)不算约束,因此“包含套餐卡片的 Calm 付费墙”只有一个约束。如果请求包含超过三个约束,就保留最重要的三个,然后查看结果,确认是否包含其余内容。不要把其余内容挪到针对同一目标的第二条查询中:每条查询都会找到只包含部分内容的屏幕。
  • 每个约束都必须来自请求或问题。 不要添加你认为目标应该包含的部分,例如个人资料页上的头像或付费墙上的套餐卡片。这会把结果缩窄到符合你猜测的屏幕。

规则:

  • 在目标所属的层级上搜索。 如果目标是屏幕,就搜索整个屏幕(“没有交易记录的费用跟踪器主页”),而不是其中的一张卡片。如果目标是组件,就搜索它所在的屏幕。
  • 如果任务是从多个选项中做选择,就写出该部分,而不是其中一个选项。 结果需要展示不止一种解决方式:“包含套餐卡片和免费试用按钮的付费墙”,而不是“包含年度切换开关的付费墙”。不要用“或”连接选项,也不要在查询中加入修复方案(“包含添加提示”“占位条”)。如果任务是查找那个确切内容,就写出它(“带有文字标签的银行应用搜索标签页”)。
  • 每项只写一次。 “空状态”“尚无交易记录”和“尚未添加任何内容”说的是同一种状态。用最简短的说法。
不要这样写应该这样写
“包含头像、关注者数量和帖子网格的社交应用用户个人资料”(如果用户只是问“帮我找一些社交应用的个人资料屏幕”,这些内容都是用户没要求的)“社交应用用户个人资料屏幕”
“试用按钮藏在长表格下方的付费墙”(查询中包含了问题本身)“包含免费试用按钮的付费墙”
“处于空状态、尚无交易记录且提示添加首笔支出的费用跟踪器主页概览”(同一状态说了两次,还指定了修复方案)“没有交易记录的费用跟踪器主页”
“暂无数据、包含占位条或空圆环的支出图表卡片”(目标是整个屏幕中的一张卡片,还用“或”连接了两个选项)“没有交易记录的支出概览”
“ios 注册屏幕”(在查询中加入了平台)“注册屏幕”,使用 platform ios
“Acme 的简洁现代发票列表”(主观形容词和用户的产品)“发票列表”
“引导流程、付费墙和设置”(一条查询包含多种屏幕类型)每种屏幕类型各调用一次
“邀请队友屏幕”(目标是一个流程,而非单个屏幕)在 search_flows 中搜索“工作区设置期间邀请队友”
“包含主视觉、套餐和常见问题的定价页面”(一条查询包含多个版块)每个版块各调用一次

不要写入用户提供的文案、数据和品牌,也不要加入“示例”或“最佳”等指令。只有当请求或问题提到这些视觉特征时,才使用 Mobbin 的标签:dark mode、bottom sheet、modal、full-screen、card-based。

如果一次检索返回了任务领域以外的产品,就用该领域的名词重新搜索(“冥想应用付费墙”),而不是引用这些产品。如果确实引用了其他领域的产品,就说明这里只参考了它的结构。

选择模式

mode 仅适用于 search_screens。请根据你编写的查询选择模式:

查询mode
没有约束(“社交应用用户个人资料页面”“Calm 付费墙”)standard
一到三个约束(“提供终身选项和折扣的付费墙”)deep

deep 会剔除评分较低的匹配项,因此返回的结果可能少于 limit。结果较少意味着相近匹配项不多,并不代表 Mobbin 上没有。发送第二次请求,或修改查询,然后再说缺少结果。

第二次请求

如果一次请求没有涵盖你需要的内容,请使用该工具获取更多结果,并再次发送相同查询。这样会返回新结果,而不是将首次结果重新排序。修改查询后,即使添加了排除条件,也会视为新搜索。

  • search_screens:使用相同的查询和 mode,并将已看到的所有 ID 放入 exclude_screen_ids,最多 100 个。
  • search_sections 和 search_flows:请求下一页 page,并剔除已看到的结果。当 has_next_page 为 false 时,表示没有下一页,请改用其他查询。

搜索结果不理想时

按以下方式处理每种情况。如果仍然失败,请用一行说明,放在报告搜索失败的调用技能中;如果没有调用技能,则在回复中说明。

没有找到指定产品,也就是说,所有结果的 app_name 或 site_name 中都没有该产品:

  1. 如果查询中的产品名称拼写与产品本身不同,请使用产品自身的拼写重新搜索。
  2. 对于没有名称筛选器的 sections,如果 has_next_page 为 true,请请求下一页。该网站可能会将相关结果排在第一页之后。
  3. 对于 screens 和 flows,如果任务不限定平台,请尝试另一个 platform,因为 Mobbin 上的某个产品可能只有 iOS 或 Web 版本。引用结果时注明其平台。如果任务限定平台(例如,iOS 改版用不上 Web 界面),请跳过此步骤。

如果仍然找不到,请继续进行类别搜索。不要凭记忆描述该产品,也不要用其他产品的界面代替。用户分享的该产品截图仍可作为参考。

图片无法打开。 预览格式为 webp,并非所有主机都能打开。将 image_format 设为 jpg 后再次调用。如果仍然无法打开,请勿引用该次调用的任何内容,因为无法查看的界面不能作为参考。

工具拒绝调用。 不要重试,也不要修改查询,因为每次调用都会被拒绝。停止搜索并说明情况。输入错误(例如参数无效)则不同:修正输入后再次调用。

评论

支持 Markdown