Mobbin MCP 서버

1,100개 이상의 앱에서 제공하는 60만 개 이상의 스크린을 보유한 디자인 영감 플랫폼인 Mobbin에 연결하는 비공식 MCP 서버입니다. Claude에서 직접 앱을 검색하고, 스크린샷을 둘러보고, 사용자 흐름을 탐색하며, 저장된 컬렉션에 액세스하세요.

Mobbin은 공개 API를 제공하지 않습니다. 이 서버는 내부 엔드포인트를 리버스 엔지니어링하여 구축되었습니다.

도구

특정 앱 탐색하기

mobbin_search_screens와 mobbin_search_flows는 Mobbin을 전역적으로 인덱싱하므로 app_id 필터를 허용하지 않습니다(업스트림 API는 앱별 필터를 무시합니다). "Notion의 온보딩 보여줘"와 같은 쿼리의 경우 2단계 경로를 사용하세요: mobbin_quick_search로 앱의 id를 찾은 다음, 해당 app_id로 mobbin_get_app_screens 또는 mobbin_get_app_flows를 호출하세요. 상세 도구는 Mobbin의 SSR된 앱 상세 페이지에서 읽어오므로 해당 앱에 대해 Mobbin이 가진 모든 정보를 반환합니다.

마이그레이션: mobbin_get_filters

인자 없는 형태는 제거되었습니다. 한 번의 응답으로 전체 분류를 가져오는 것이 MCP 도구별 결과 토큰 제한을 초과하여 에이전트가 임시 파일에서 결과를 다시 읽어야 했기 때문입니다. kind를 전달하여 응답 범위를 하나의 패싯으로 제한하세요:

mobbin_get_filters({ kind: "patterns" })                               // newline list of names
mobbin_get_filters({ kind: "patterns", include_definitions: true })    // bullets with descriptions
mobbin_get_filters({ kind: "patterns", include_counts: true })         // bullets with content counts

Related MCP server: figma-mcp-server

설정

사전 요구 사항

• Node.js 18+

• Mobbin 계정 (무료 또는 유료)

1. 인증

옵션 A: CLI 명령 (권장)

npx -y mobbin-mcp@latest auth

브라우저에서 세션 쿠키를 복사하는 과정을 안내합니다:

1. mobbin.com을 열고 로그인합니다.

2. 브라우저 콘솔을 엽니다 (Cmd+Option+J).

3. copy(document.cookie)를 실행하여 쿠키를 클립보드에 복사합니다.

4. CLI 프롬프트에 붙여넣습니다.

세션은 ~/.mobbin-mcp/auth.json에 저장되며 자동으로 새로 고쳐집니다.

copy(document.cookie)는 무엇을 하나요? 현재 사이트(mobbin.com)에 대한 브라우저 쿠키를 클립보드로 복사합니다. 여기에는 MCP 서버가 사용자를 대신하여 API 요청을 수행하는 데 필요한 Supabase 세션 토큰이 포함됩니다. 쿠키는 로컬 머신의 ~/.mobbin-mcp/auth.json에 저장되며 Mobbin API 외의 다른 곳으로는 전송되지 않습니다.

옵션 B: 환경 변수 (수동)

1. Chrome에서 mobbin.com을 열고 로그인합니다.

2. 개발자 도구(Cmd+Option+I) → Application 탭 → Cookies → https://mobbin.com으로 이동합니다.

3. sb-ujasntkfphywizsdaapi-auth-token.0 및 sb-ujasntkfphywizsdaapi-auth-token.1이라는 이름의 쿠키를 찾습니다.

4. 각 쿠키의 전체 값을 복사합니다.

5. 하나의 문자열로 결합합니다:

sb-ujasntkfphywizsdaapi-auth-token.0=<value0>; sb-ujasntkfphywizsdaapi-auth-token.1=<value1>

6. MOBBIN_AUTH_COOKIE를 해당 값으로 설정합니다 (아래 2단계 참조).

2. Claude Code에 추가

claude mcp add mobbin -- npx -y mobbin-mcp

CLI 인증 명령(옵션 A)을 사용했다면 추가 설정이 필요 없습니다. 서버가 ~/.mobbin-mcp/auth.json에서 자동으로 읽어옵니다.

환경 변수(옵션 B)를 사용하는 경우 추가할 때 전달하세요:

claude mcp add mobbin -e MOBBIN_AUTH_COOKIE="sb-ujasntkfphywizsdaapi-auth-token.0=...; sb-ujasntkfphywizsdaapi-auth-token.1=..." -- npx -y mobbin-mcp

대안: Claude Desktop

Claude Desktop 설정(~/Library/Application Support/Claude/claude_desktop_config.json)에 추가하세요:

{
  "mcpServers": {
    "mobbin": {
      "command": "npx",
      "args": ["-y", "mobbin-mcp"]
    }
  }
}

예시 프롬프트

• "음식 배달 앱을 위한 결제 흐름을 디자인 중이야 — DoorDash나 Uber Eats 같은 상위 앱들은 어떻게 처리하는지 보여줘"

• "Duolingo 온보딩 흐름을 불러와서 각 스크린의 디자인 결정 사항을 설명해줘"

• "바텀 시트를 사용하는 로그인 스크린을 찾아서 색상 팔레트를 추출해줘 — 인증 리디자인을 위한 영감이 필요해"

• "핀테크 앱들이 설정 화면을 어떻게 처리하는지 비교해줘 — Robinhood, Cash App, Venmo의 예시를 보여줘"

• "여행 앱에서 카드 기반 레이아웃을 사용하는 스크린을 검색하고, 가장 좋은 것을 자세히 보여줘"

• "현재 iOS에서 유행하는 UI 패턴은 뭐야? 상위 스크린들을 보여줘"

작동 원리

Mobbin은 Supabase 기반의 Next.js 앱입니다. 이 서버는 인증을 위해 세션 쿠키를 사용하여 Mobbin의 내부 API 경로(/api/content/search-apps, /api/content/search-screens 등)를 호출합니다. 토큰은 만료되기 전에 Supabase의 /auth/v1/token 엔드포인트를 통해 자동으로 새로 고쳐지며, CLI 인증 방식을 사용할 경우 ~/.mobbin-mcp/auth.json에 다시 저장됩니다.

스크린 이미지는 Mobbin의 Bytescale CDN을 통해 제공됩니다. mobbin_get_screen_detail 도구는 검색 결과의 Supabase 스토리지 URL을 자동으로 CDN URL로 변환하고, 이미지를 가져와 모델이 보고 분석할 수 있는 base64 콘텐츠로 반환합니다. 선택적인 색상 추출은 sharp를 사용하여 스크린샷에서 주요 16진수 색상을 반환합니다.

프로젝트 구조

src/
  index.ts              # MCP server entry point, CLI routing, and tool registration
  constants.ts          # API URLs, keys, and config
  types.ts              # TypeScript interfaces for all Mobbin data models
  cli/
    auth.ts             # Interactive CLI authentication flow
  services/
    auth.ts             # Token parsing, expiry checks, and auto-refresh
    api-client.ts       # HTTP client for all Mobbin API endpoints
  utils/
    auth-store.ts       # Persistent session storage (~/.mobbin-mcp/auth.json)
    formatting.ts       # Markdown formatters for tool responses

라이선스

ISC