mobbin-ux

用途

Mobbin UX 是一个研究驱动的 UI/UX 改进技能，用于在 Mobbin 上研究 UI/UX 设计模式，生成设计规范，并在获得批准后实施改进。当用户明确要求进行设计模式研究时使用，例如“使用 Mobbin”“研究设计模式”“查找 UX 模式”。

该技能围绕 Mobbin 设计参考库展开，能够：

明确要研究的 UI 组件类型，如 inbox、dashboard、settings、onboarding、checkout、profile 等，并确定平台为 Web 或移动端（iOS/Android）。
通过浏览器自动化在 Mobbin 上搜索相关应用界面并截图。
从截图中提取设计模式，包括布局、视觉层级、交互和导航。
生成设计规范文档。
在用户批准后，按照规范重建 UI。

工作流程分为六步：

明确 UI 组件：询问要研究哪种类型的 UI，例如“inbox”“dashboard”“settings”“onboarding”“checkout”“profile”等，并确认平台是 Web 还是移动端（iOS/Android）。
搜索 Mobbin：使用浏览器自动化，依次执行：
- tabs_context_mcp → 获取/创建标签页
- navigate → 访问 mobbin.com
- 如需要则登录（由用户处理认证）
- navigate → mobbin.com/search/apps/{web|ios|android}?q={query}
- screenshot → 截取搜索结果
- 点击 3-5 个顶部结果，截图关键界面
搜索技巧：使用组件名称，如“inbox”“notification”“settings”；添加限定词，如“inbox email”“dashboard analytics”。
提取设计模式：从截图中识别：
- 布局：列结构、侧边栏位置、内容组织
- 视觉层级：排版、颜色、间距、主题（浅色/深色）
- 交互：悬停状态、操作按钮、进度指示器
- 导航：标签页、筛选、视图切换
生成设计规范：使用 /quick-view 创建规范，格式包含：
- 标题：Design Patterns for [Component]
- 来源：通过 Mobbin 的 [App1]、[App2]、[App3]
- 布局：模式及为何有效
- 视觉层级：模式及为何有效
- 交互：模式及为何有效
- 推荐更改：具体更改项
获取批准：询问用户“Should I implement these patterns? Any to skip or modify?”
实施：获得批准后，按照规范重建 UI。

适用于需要参考真实应用设计模式来改进 UI/UX 的场景，例如设计邮件收件箱、任务列表、仪表盘、设置页面等。示例搜索包括：