About mobbin-ux
mobbin-ux is a workflow for researching UI/UX patterns on Mobbin, producing a design spec, and implementing it after approval. It is aimed at designers and developers who want to study existing product interfaces through browser automation and screenshots.
Key features
- 01Search interfaces by component and platform
- 02Extract patterns from screenshots
- 03Analyze layout, hierarchy, and interactions
- 04Generate a design spec
- 05Implement after approval
Use cases
- 01Research a mobile onboarding flow
- 02Reference inbox designs from other apps
- 03Map dashboard layout and interactions
MCP support
The workflow uses tabs_context_mcp to get or create a browser tab and browser automation to visit Mobbin; the README does not say that the project itself provides an MCP server.
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/mobbin-uxin Claude Code to confirm it loaded.
Details
From the project READMEMobbin UX Research
Research UI/UX patterns on Mobbin, generate a design spec, then implement after approval.
Workflow
1. Clarify the UI component
Ask what type of UI to research:
- "inbox", "dashboard", "settings", "onboarding", "checkout", "profile", etc.
- Platform: web or mobile (iOS/Android)
2. Search 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"
3. Extract design patterns
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
Create spec with /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. Get approval
Ask user: "Should I implement these patterns? Any to skip or modify?"
6. Implement
After approval, rebuild UI following the spec.
Example searches
| UI Type | Query |
|---|---|
| Email inbox | inbox email |
| Task list | todo inbox |
| Dashboard | dashboard analytics |
| Settings | settings preferences |
Reference apps
- Inbox: Superhuman, Spark, Twist
- Tasks: Linear, Asana, Todoist
- Dashboards: Stripe, Notion, Figma