mcpField
M
mobbin-ux

mobbin-ux

github.com/rohunvora设计与 UI2055 次安装42 周前更新
代码仓库

关于 mobbin-ux

mobbin-ux 是一套围绕 Mobbin UI/UX 研究、设计规范和实现的工作流，适用于需要参考现有产品界面的设计与开发人员。它通过浏览器自动化检索并分析界面截图，在获得批准后再进入实现。

主要功能

  1. 01按组件和平台搜索界面
  2. 02通过截图提取设计模式
  3. 03分析布局、层级与交互
  4. 04生成设计规范
  5. 05批准后再实现界面

适用场景

  1. 01研究移动端入门流程
  2. 02参考其他产品设计收件箱
  3. 03梳理仪表盘的布局与交互

MCP 相关

工作流使用 tabs_context_mcp 获取或创建浏览器标签页，并通过浏览器自动化访问 Mobbin；README 未说明其自身提供 MCP 服务。

安装

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

$npx skills add https://github.com/rohunvora/cool-claude-skills --skill mobbin-ux

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

详细介绍

Mobbin UX 研究

在 Mobbin 上研究 UI/UX 模式，生成设计规范，并在获得批准后实施。

工作流

1. 明确 UI 组件

询问要研究哪种 UI：

  • “收件箱”“仪表盘”“设置”“引导流程”“结账”“个人资料”等
  • 平台：Web 或移动端（iOS/Android）
2. 搜索 Mobbin

使用浏览器自动化：

1. tabs_context_mcp → get/create tab
2. navigate → mobbin.com
3. Log in if needed (user handles auth)
4. navigate → mobbin.com/search/apps/{web|ios|android}?q={query}
5. screenshot → capture search results
6. Click 3-5 top results, screenshot key screens

搜索提示：

  • 组件名称：“收件箱”“通知”“设置”
  • 添加限定词：“电子邮件收件箱”“分析仪表盘”
3. 提取设计模式

从截图中识别：

布局： 列结构、侧边栏位置、内容组织方式

视觉层级： 字体、颜色、间距、主题（浅色/深色）

交互： 悬停状态、操作按钮、进度指示器

导航： 标签页、筛选、视图切换

4. 生成设计规范

使用 /quick-view 创建规范：

## Design Patterns for [Component]

**Sources:** [App1], [App2], [App3] via Mobbin

### Layout
- [Pattern]: [Why it works]

### Visual Hierarchy
- [Pattern]: [Why it works]

### Interactions
- [Pattern]: [Why it works]

### Recommended Changes
1. [Specific change]
2. [Specific change]
5. 获得批准

询问用户：“我应该实施这些模式吗？有哪些需要跳过或修改？”

6. 实施

获得批准后，按照规范重建 UI。

搜索示例

UI 类型查询
电子邮件收件箱inbox email
任务列表todo inbox
仪表盘dashboard analytics
设置settings preferences

参考应用

  • 收件箱： Superhuman、Spark、Twist
  • 任务： Linear、Asana、Todoist
  • 仪表盘： Stripe、Notion、Figma

评论

支持 Markdown