mobbin-ux

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mobbin UX Research

Mobbin UX 研究

Research UI/UX patterns on Mobbin, generate a design spec, then implement after approval.

在Mobbin上研究UI/UX模式，生成设计规范文档，待审批通过后进行落地实现。

Workflow

工作流程

1. Clarify the UI component

1. 明确UI组件类型

Ask what type of UI to research:

"inbox", "dashboard", "settings", "onboarding", "checkout", "profile", etc.
Platform: web or mobile (iOS/Android)

询问用户需要研究的UI类型：

如“收件箱”、“仪表盘”、“设置页”、“新手引导”、“结账流程”、“个人主页”等
平台：网页端或移动端（iOS/Android）

2. Search Mobbin

2. 在Mobbin上搜索

Use browser automation:

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

Search tips:

Component names: "inbox", "notification", "settings"
Add qualifiers: "inbox email", "dashboard analytics"

使用浏览器自动化完成以下操作：

1. tabs_context_mcp → 获取/创建标签页
2. navigate → mobbin.com
3. 如需登录，由用户完成授权操作
4. navigate → mobbin.com/search/apps/{web|ios|android}?q={query}
5. screenshot → 捕获搜索结果
6. 点击3-5个顶部搜索结果，截取关键界面截图

搜索技巧：

组件名称：“inbox”、“notification”、“settings”（保留英文术语）
添加限定词：“inbox email”、“dashboard analytics”

3. Extract design patterns

3. 提炼设计模式

From screenshots, identify:

Layout: Column structure, sidebar placement, content organization

Visual hierarchy: Typography, colors, spacing, theme (light/dark)

Interactions: Hover states, action buttons, progress indicators

Navigation: Tabs, filtering, view switching

从截图中识别以下内容：

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

视觉层级： 排版、色彩、间距、主题（亮色/暗色）

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

导航设计： 标签页、筛选功能、视图切换

4. Generate design spec

4. 生成设计规范文档

Create spec with

/quick-view

markdown

undefined

使用

/quick-view

创建规范文档：

markdown

undefined

Design Patterns for [Component]

[组件名称] 设计模式

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

参考来源： [应用1]、[应用2]、[应用3]（来自Mobbin）

Layout

布局

[Pattern]: [Why it works]

[模式细节]：[设计优势]

Visual Hierarchy

视觉层级

[Pattern]: [Why it works]

[模式细节]：[设计优势]

Interactions

交互逻辑

[Pattern]: [Why it works]

[模式细节]：[设计优势]

Recommended Changes

5. Get approval

5. 获取审批

Ask user: "Should I implement these patterns? Any to skip or modify?"

询问用户：“是否需要我落地实现这些设计模式？有没有需要跳过或调整的内容？”

6. Implement

6. 落地实现

After approval, rebuild UI following the spec.

获得审批后，按照规范文档重新构建UI。

Example searches

搜索示例

UI Type	Query
Email inbox	`inbox email`
Task list	`todo inbox`
Dashboard	`dashboard analytics`
Settings	`settings preferences`

UI类型	搜索关键词
邮件收件箱	`inbox email`
任务列表	`todo inbox`
数据仪表盘	`dashboard analytics`
设置偏好页	`settings preferences`

Reference apps

参考应用

Inbox: Superhuman, Spark, Twist
Tasks: Linear, Asana, Todoist
Dashboards: Stripe, Notion, Figma

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