Mobbin의 300K + 스크린 라이브러리를 구조화 UI 연구로 전환하십시오. 당신의 에이전트에게 연구 목표를 부여 — 그것은 화면과 흐름에 대한 Mobbin을 검색, 시각적으로 결과를 분석하고, 패턴 클러스터를 반환, 설계 시스템 구성 요소, 또는 경쟁력있는 비교.

Claude Code, Cursor, Gemini CLI, Lovable 및 MCP 호환 에이전트와 함께 작동합니다.

무엇 그것

• 콘크리트 Mobbin 검색 쿼리로 요약 UX 목표를 번역
• **개인 화면 모두 검색 ** 및 ** 다중 단계 사용자 흐름 ** (오판, 체크 아웃 등)
• 즉시 스크린 샷을 분석 (레이아웃, hierarchy, 구성 요소, 색상)
• Clusters는 연결된 참조로 UI 패턴을 반복하는 것으로 나타났습니다.
• PRD 및 제품 간섭의 연구 쿼리
• 부품에 대해 물었을 때 표면 원자 디자인 시스템 primitives
• 타겟 UI ** 구성 요소에 의한 구성 요소 ** - 스크린 샷, PRD, Figma 파일, 또는 기존 스크린을 분해하고 구성 요소 당 최고의 실시간 참조를 찾아서 구현을 간단히 작성합니다.
• 3개의 출력 모드 지원: 연구 요약, 경쟁 비교, 제품 결정 기록

설치

Mobbin MCP를 먼저 연결해야 합니다.

Mobbin UI Research Skill

Turn Mobbin’s 300K+ screen library into structured UI research. Give your agent a research goal — it searches Mobbin for screens and flows, visually analyzes the results, and returns pattern clusters, design system components, or competitive comparisons.

Works with Claude Code, Cursor, Gemini CLI, Lovable, and any MCP-compatible agent.

What it does

• Translates abstract UX goals into concrete Mobbin search queries
• Searches both individual screens and multi-step user flows (onboarding, checkout, etc.)
• Visually analyzes returned screenshots (layout, hierarchy, components, color)
• Clusters findings into recurring UI patterns with linked references
• Derives research queries from PRDs and product briefs automatically
• Surfaces atomic design system primitives when asked about components
• Researches a target UI component by component — decomposes a screenshot, PRD, Figma file, or existing screen, finds the best real-world reference per component, and writes an implementation brief to build from
• Supports three output modes: research summary, competitive comparison, product decision log

Install

Requires Mobbin MCP to be connected first. Copy and Paste in Terminal to install skill

npx skills add https://github.com/ddruids/mobbin-skill

Usage

Once installed, the skill activates when you ask about UI research, screen patterns, or design system components:

"Research how fintech apps handle onboarding"
"Compare how crypto wallets display transaction confirmation"
"What are common components for a SaaS dashboard design system?"
"How do AI apps handle empty states on iOS?"
"Here's my PRD — research the key screens and flows"
"Here's a screenshot of the screen I'm building — research each component and pick the best reference so you can build it"

The skill automatically:

1. Resolves the target platform (iOS or web)
2. Picks the right tool mix — search_screens for specific screens, search_flows for multi-step journeys
3. Generates 3-7 concrete search queries (or derives them from your PRD)
4. Analyzes the returned screenshots and flow sequences
5. Synthesizes findings into structured output with Mobbin URLs

What’s inside