Skip to content

mobbin.md

Latest commit

 

History

History
330 lines (247 loc) · 12.9 KB

mobbin.md

File metadata and controls

330 lines (247 loc) · 12.9 KB
Raw
name mobbin-design
description Research-First design methodology using Mobbin MCP. Use when creating new screens, flows, or interfaces—especially when the user asks to design, build, or create UI. Guides systematic research with Mobbin tools (search_screens, search_flows, search_apps, get_screen_detail, get_flow_detail, get_design_guidance), pattern extraction from real products, and quality craft. Prevents generic "AI slop" designs by grounding every decision in research and professional-grade execution.

Don't guess—know. Study real products, learn from the best, then design with confidence.

But remember: References are just ingredients. Your product needs its own flavor. Use Mobbin for a rock-solid foundation (80%), then breathe soul into it (20%)—the distinctive choices that make your design memorable.

Mindset: Research isn't copying the average. It's finding what the TOP 10% do that others don't. Generic findings ("offer discount", "show social proof") are table stakes—hunt for specific tactics with exact copy, exact numbers, exact conditions.

Always ask: "If I showed this to 10 users tomorrow, what would they remember?"

Before You Start: Discovery

Never design blind. Ask these questions first:

1. WHAT are we building?
   → Screen type, Platform (iOS/Android/Web), Scope

2. WHO is this for?
   → Audience, Technical level

3. WHAT should users accomplish?
   → Primary action, Success metric

4. WHAT feeling should it evoke?
   → Tone, Energy

5. WHAT JOB is the user hiring this page to do?
   → "Help me decide" (pricing, comparison)
   → "Convince me to trust you" (fintech, healthcare)
   → "Get me started without friction" (onboarding, signup)
   → "Show me what to do next" (empty state, dashboard)

6. WHAT objections might they have?
   → "Is it worth the price?" / "Is it legit?" / "Will it work for me?"

7. WHAT should they remember tomorrow?
   → The hook, the differentiator, the "aha"

8. ANY constraints?
   → Brand guidelines, Technical requirements, Inspirations

Output a Design Brief:

"I'm designing a [WHAT] for [WHO] that helps them [GOAL] and should feel [TONE]. The user's job: [JOB]. Main objection: [OBJECTION]. They should remember: [HOOK]. Constraints: [CONSTRAINTS]."

The Workflow

┌─────────────────────────────────────────────────────────────────┐
│  0. DISCOVER → Design Brief                                     │
│                              ↓                                  │
│  1. RESEARCH                                                    │
│     Use Mobbin tools: broad → narrow → leader                   │
│     Try different angles until patterns emerge                  │
│     → Raw material: dozens of references                        │
│                              ↓                                  │
│  2. ANALYZE                                                     │
│     Extract and structure what you found                        │
│     Compare approaches, identify patterns                       │
│     → Synthesis: documented patterns + decisions                │
│                              ↓                                  │
│  3. DESIGN                                                      │
│     Apply craft: typography, color, spacing, copy               │
│     Define soul: what makes THIS product unique                 │
│     → Blueprint: design system + unique identity                │
│                              ↓                                  │
│  4. IMPLEMENT                                                   │
│     Build the actual interface                                  │
│     Validate against references and quality gates               │
│     → Ship-ready design                                         │
└─────────────────────────────────────────────────────────────────┘

Phase 1: Research

Goal: Gather raw material using Mobbin MCP tools.

Tool Selection

Situation Tool
Starting new — need best practices get_design_guidance
Find apps in a category search_apps
Standalone screen (404, error, splash) search_screens
Screen within a journey search_screens + search_flows
Understanding a complete journey search_flows → then get_flow_detail
Deep analysis of a specific screen get_screen_detail
Similar approaches to a screen get_screen_detail + include_similar: true
Visual reference needed take_screenshot or get_screen_detail with image_size
Cross-platform comparison Run same search on ios, android, web

Search Strategy: Experiment

Don't settle on the first query. Try multiple angles:

Type Example Purpose
Broad "onboarding" See overall landscape
Specific "pricing toggle annual monthly" Exact UI patterns
Company "Spotify", "Duolingo" Best-in-class examples
Style "dark mode dashboard" Visual direction
Component "bottom sheet", "toggle" Individual elements
Platform Same query on ios / android / web Cross-platform patterns

Search Loop:

1. Start BROAD → see what exists
2. Notice interesting patterns → go SPECIFIC
3. Find a great app → search that COMPANY with search_apps
4. Try different ELEMENTS → "plan comparison", "feature table"
5. Go CROSS-PLATFORM → designing for iOS? check web too
6. Repeat until you've seen 50+ results

Deep Dive: get_screen_detail (Required)

Search results contain brief info only. You MUST call get_screen_detail for 5-10 best results to get full analysis:

  • Full structured metadata (UX patterns, UI elements, labels)
  • include_similar: true — returns similar screens from other apps
  • image_size: use "none" (default) for text, "thumbnail" or "full" for visuals

Example workflow:

1. search_screens("pricing page", platform="web")  → scan results
2. Pick 8 most interesting screens
3. get_screen_detail(url_1, include_similar=true)   → deep analysis
4. get_screen_detail(url_2)                         → compare approaches
5. Repeat for remaining screens

Three Lenses (Use All)

Lens A: Structure — What do they all do?

  • Layout, components, information hierarchy
  • Common solutions to common problems

Lens B: Visual Craft — How does it LOOK and FEEL?

  1. Typography — Fonts, sizes, weights, special treatments
  2. Color — Warm or cool? How many colors? Accent?
  3. Spacing — Tight or airy? Rhythm?
  4. Details — Shadows, borders, radii, gradients
  5. Icons — Style? Stroke width? Custom or library?

Lens C: Conversion & Soul — What makes this one WORK?

  1. What's the HOOK in the first 3 seconds?
  2. How do they handle OBJECTIONS?
  3. Where's the TRUST (social proof, guarantees)?
  4. What's UNIQUE that I haven't seen in others?
  5. What would a user REMEMBER tomorrow?

Research Completion Check

  • Tried 5+ different query variations
  • Reviewed 50+ screens or flows
  • Called get_screen_detail for 5-10 best screens
  • Found 5+ clever tactics worth adapting
  • Each finding has EXACT details, not generic descriptions
  • Can answer: "What do most products do?" and "What do the best ones do differently?"

Phase 2: Analyze

Goal: Structure your research. Extract patterns. Make decisions.

Steal List (Required — minimum 5 items)

Source What Why It Works How I'll Use It
[App] [Specific detail] [Reason] [Application]

Be specific, not vague:

  • ❌ "Linear — clean design" (not actionable)
  • ✅ "Linear — 13px/20px body, -0.01em tracking, 48px section gaps, #5E6AD2 accent"

STOP: If this table has fewer than 5 rows, go back to research.

Pattern Table

Compare 3-5 best references:

Aspect Ref A Ref B Ref C Pattern
Background ? ? ? ?
Cards ? ? ? ?
CTA style ? ? ? ?

Phase 3: Design

Goal: Achieve professional quality with craft.

Typography

Scale, pairing, letter-spacing — see references/typography.md

Critical: Letter-spacing on ALL CAPS (0.06-0.1em), small text (0.01-0.02em), and large headings (negative tracking).

Color

Palette structure, neutrals, dark mode — see references/color.md

⛔ NO INDIGO unless explicitly requested. Choose brand-appropriate colors from research.

Spacing

Base unit: 4px or 8px. Everything multiplies from this. Proximity = relationship.

Motion

Micro-interactions, timing, easing — see references/motion.md

Icons

One style per product. See references/icons.md

Avoiding AI Slop

See references/anti-ai-slop.md

Quick checklist:

  • ❌ No default indigo
  • ❌ No blob/wave backgrounds
  • ❌ No hero→features→pricing→FAQ template without justification
  • ❌ No "Get Started" generic CTAs
  • ✅ Brand-appropriate colors from research
  • ✅ Intentional font pairing
  • ✅ At least one memorable element
  • ✅ Social proof with specifics

The Soul

~80% proven patterns + ~20% unique choices.

  • One bold visual choice
  • Voice and personality in copy
  • Micro-interaction that surprises
  • One detail users will remember

Test: "If someone screenshots this, would they know it's from THIS product?"

Phase 4: Implement

Build Checklist

  • Semantic HTML structure
  • CSS custom properties for all tokens
  • Responsive breakpoints (320px, 768px, 1200px)
  • Hover/focus states for all interactive elements
  • Accessible contrast ratios
  • Smooth transitions (0.2s ease for most)

See references/craft-details.md for implementation details.

Quality Gate

Category Check
Functional Primary action obvious? Error states? Works on mobile?
Visual Squint test? Spacing rhythm? Typography intentional?
Persuasion Hook in 3 sec? Trust signals? Objections addressed?
Polish No orphans? Icons aligned? Buttons consistent? Something memorable?
Anti-slop No default indigo? No generic template? Specific copy?

Mobbin MCP Tools Reference

Discovery Tools

search_apps — Find apps by name or keyword

  • query: app name or keyword (e.g. "Spotify", "finance")
  • platform: "ios" | "android" | "web"

search_screens — Find screens by UI pattern

  • query: screen type or pattern (e.g. "onboarding", "paywall", "empty state")
  • platform: "ios" | "android" | "web"

search_flows — Find user flows by keyword

  • query: flow type (e.g. "checkout", "sign up", "cancellation")
  • platform: "ios" | "android" | "web"

Deep-Dive Tools

get_app_screens — All screens for an app, grouped by category

  • appSlug: from search results (e.g. "spotify-music-and-podcasts")
  • platform: "ios" | "android" | "web"

get_app_flows — All flows for an app with step counts

  • appSlug: from search results
  • platform: "ios" | "android" | "web"

get_screen_detail — Deep analysis of a specific screen

  • url: Mobbin screen URL
  • image_size: "none" (default) | "thumbnail" | "full"
  • include_similar: true/false

get_flow_detail — Step-by-step journey analysis

  • url: Mobbin flow URL

AI-Powered

get_design_guidance — Pattern analysis across multiple searches

  • queries: array of search terms (1-5)
  • question: what to analyze
  • platform: "ios" | "android" | "web"
  • Returns: must_do, consider, avoid, examples

Visual

take_screenshot — Capture any Mobbin page as PNG

  • url: Mobbin URL

Reference Files

Guide What's Inside
typography.md Scale, pairing, letter-spacing, line-height, responsive type
color.md Palette structure, neutrals, dark theme, tokens, the indigo rule
motion.md Micro-interactions, timing, easing, reduced motion
icons.md Sizing, optical corrections, accessibility, libraries
craft-details.md Focus states, forms, images, touch, performance
anti-ai-slop.md What makes designs look generic and how to avoid it
example-workflow.md Full walkthrough: fintech onboarding design

Don't guess. Research with Mobbin. Craft with intention. Infuse it with soul.