Mobbin MCP: prawdziwe przykłady designu dla agentów AI

Mobbin MCP to oficjalny zdalny serwer MCP Mobbina pod adresem https://api.mobbin.com/mcp. Pozwala agentowi programistycznemu przeszukiwać bibliotekę zrzutów ekranu z wydanych produktów na iOS i web za pomocą trzech narzędzi: search_screens, search_flows i search_sections. Dostęp wymaga logowania OAuth i płatnego planu Mobbina (Pro, Team lub Enterprise).

Poproś agenta o paywall, a dostaniesz ten sam ekran, który dostaje każdy: wyśrodkowaną kartę, trzy punkty z funkcjami i przycisk z gradientem. To statystyczna średnia wszystkich paywalli z danych treningowych. Zespoły, których paywalle podziwiasz, podjęły konkretne decyzje o przełączniku planów, osi czasu okresu próbnego i przycisku zamknięcia, a twój agent nie widzi żadnej z nich.

Ta strona jest dla programistów, którzy budują UI z agentem, i dla liderów technicznych, którzy chcą, żeby decyzje projektowe w ekranach zbudowanych przez agenta dało się powiązać z dowodami, a nie z gustem. Najpierw szczegółowo omawia oficjalny serwer Mobbina, potem alternatywy rozwiązujące ten sam problem.

Co daje ci ta strona o Mobbin MCP

Konfigurację oficjalnego serwera Mobbin MCP w Claude Code, Codeksie i Cursorze, z krokiem OAuth dla każdego narzędzia.
Trzy narzędzia, ich parametry i wzorce zapytań, które zwracają użyteczne wyniki.
Pięć gotowych promptów: rozpoznanie wzorców przed budową, badanie przepływów, audyt konkurencji, sekcje landing page’a i przejście od referencji do komponentów.
Pętlę weryfikacji, która sprawdza zbudowany ekran względem referencji bez czytania każdej linii kodu UI.
Mapę alternatyw: Refero MCP, serwery społeczności i robienie zrzutów żywych produktów przez serwer MCP przeglądarki.

Co Mobbin MCP daje agentowi?

Mobbin to wyselekcjonowana biblioteka zrzutów ekranu prawdziwych aplikacji, otagowanych wzorcem, przepływem i aplikacją. Serwer MCP udostępnia ją agentom przez Model Context Protocol. README zarchiwizowanego serwera społeczności opisywało bibliotekę jako „600k+ screens from 1,100+ apps” (pdcolandrea/mobbin-mcp, zarchiwizowany 2026-05-15; źródło wtórne, bo 2026-09-26 nie dało się odczytać z naszego środowiska strony MCP Mobbina). Serwer figuruje w Official MCP Registry (wpis w API rejestru) jako com.mobbin/mobbin (wersja 1.0.1, aktywna, opublikowana 2026-06-03), a Mobbin na 2026-09-26 nie publikuje dla niego liczby instalacji.


Endpoint	`https://api.mobbin.com/mcp` (zdalny, Streamable HTTP)
Uwierzytelnianie	OAuth. Przy pierwszym połączeniu otwiera się przeglądarka; nie ma klucza API do pilnowania
Wymagany plan	Pro, Team lub Enterprise. Darmowe konto nie może używać narzędzi
Limit żądań	`mobbin-mcp-cli` 0.2.0 ponawia odpowiedzi HTTP 429 według `Retry-After` z rosnącym opóźnieniem, więc przy równoległych wyszukiwaniach spodziewaj się ograniczania żądań
Platformy w narzędziach	Tylko `ios` i `web`
Zapis	Brak. Wszystkie trzy narzędzia to wyszukiwania tylko do odczytu

Serwer jest zdalny, więc nic nie działa na twojej maszynie. Ceną jest to, że dostęp zależy od subskrypcji Mobbina, a nie od repozytorium.

Jak podłączyć Mobbin MCP do Claude Code, Codeksa i Cursora?

Endpoint i krok OAuth są wszędzie takie same; różni się tylko polecenie.

Sprawdzone z Claude Code 2.1.283 (claude mcp --help):

claude mcp add --scope user --transport http mobbin https://api.mobbin.com/mcp
claude mcp login mobbin

--scope user udostępnia serwer we wszystkich projektach, co do biblioteki referencji pasuje lepiej niż konfiguracja per repozytorium. Żeby zamiast tego udostępnić go zespołowi, użyj --scope project, które zapisuje w .mcp.json taki wpis:

{
  "mcpServers": {
    "mobbin": {
      "type": "http",
      "url": "https://api.mobbin.com/mcp"
    }
  }
}

Każdy członek zespołu i tak loguje się własnym kontem Mobbina. W trakcie sesji serwer widać też w /mcp, z opcją Authenticate.

Sprawdzone z codex-cli 0.157.1 (codex mcp add --help, codex mcp login --help):

codex mcp add mobbin --url https://api.mobbin.com/mcp
codex mcp login mobbin

codex mcp add zapisuje globalny wpis w ~/.codex/config.toml:

[mcp_servers.mobbin]
url = "https://api.mobbin.com/mcp"

codex mcp login uruchamia logowanie OAuth w przeglądarce.

Wstaw wpis serwera zdalnego do .cursor/mcp.json (projekt) lub ~/.cursor/mcp.json (globalnie). To wpis z README oficjalnego serwera Mobbina; nie był testowany w samym Cursorze:

{
  "mcpServers": {
    "mobbin": {
      "url": "https://api.mobbin.com/mcp"
    }
  }
}

README Mobbina podaje, że przy pierwszym użyciu klient otwiera okno przeglądarki, w którym logujesz się do Mobbina i autoryzujesz dostęp przez OAuth. Dokumentacja MCP Cursora wymienia obsługę OAuth dla serwerów zdalnych (źródło wtórne: 2026-09-26 nie dało się odczytać cursor.com z naszego środowiska).

Żeby potwierdzić połączenie, wklej prompt, który wymusza wywołanie narzędzia:

Call the Mobbin search_screens tool with the query "onboarding screen with progress indicator", platform ios, limit 3. List the app name and mobbin_url for each result. Do not answer from memory.

Działający serwer zwraca prawdziwe nazwy aplikacji i linki mobbin_url. Ogólne porady bez linków oznaczają, że narzędzie nie zostało wywołane.

Jakie narzędzia udostępnia Mobbin MCP?

Serwer jest celowo mały: trzy wyszukiwania i żadnych operacji zapisu.

Narzędzie	Co przeszukuje	Główne parametry
`search_screens`	Pojedyncze ekrany UI	`query`, `platform` (wymagany: `ios` lub `web`), `limit` (1–30), `mode` (`deep` lub `standard`), `exclude_screen_ids`
`search_flows`	Wieloetapowe ścieżki, np. onboarding lub checkout	`query`, `platform` (wymagany: `ios` lub `web`), `limit` (1–10), `page`
`search_sections`	Sekcje stron www, np. cennik, hero, stopka	`query`, `limit` (1–30), `page`

Wszystkie trzy przyjmują image_format (webp lub jpg) oraz task_intent. Kształty parametrów powyżej są porównane z klientem społeczności mobbin-mcp-cli 0.2.0 (npm, opublikowany 2026-09-19), który opakowuje oficjalny serwer.

Szczegóły, które mają znaczenie w praktyce:

mode przyjmuje przy wyszukiwaniu ekranów deep lub standard (fast jest przestarzały, według mobbin-mcp-cli 0.2.0). Dokumentacji funkcji Mobbina nie dało się 2026-09-26 odczytać z naszego środowiska, więc ta strona nie opisuje, jak oba tryby układają wyniki. Puść to samo zapytanie w obu trybach i zostaw ten, którego wyniki bardziej ci odpowiadają.
search_sections nie ma parametru platformy: sekcje to pojęcie z webu.
Wyniki stronicowane mają pola page i has_next_page. Przy ekranach zamiast stronicować przekaż już widziane identyfikatory w exclude_screen_ids.

Co zawiera wynik wyszukiwania w Mobbinie

Każdy wynik łączy wbudowany podgląd obrazu w niskiej rozdzielczości z ustrukturyzowanymi metadanymi: aplikacją, platformą, obrazem w wysokiej rozdzielczości image_url i kanonicznym linkiem mobbin_url (według README mobbin-mcp-cli 0.2.0). Właśnie obraz jest tu najważniejszy. Agent nie czyta opisu paywalla, tylko patrzy na piksele i sam wyciąga decyzje o układzie. Dzięki mobbin_url agent może zacytować każdy użyty ekran, a ty możesz otworzyć referencję w Mobbinie i zobaczyć otaczający ją przepływ.

Jak pisać zapytania do Mobbina, które zwracają użyteczne wyniki?

Jakość zapytania decyduje, czy dostaniesz referencje, czy szum:

Opisuj jeden ekran albo jedną ścieżkę na zapytanie. „Checkout with payment method selection” działa. „Checkout and onboarding and settings” nie; wyszukaj trzy razy.
Nazywaj widoczne elementy i ich relacje. „Login screen with biometric authentication”, „checkout page with promo code field and Apple Pay button”.
Wpisz nazwę aplikacji, żeby się na niej skupić. „Duolingo onboarding” to najszybszy sposób na przestudiowanie podejścia jednego produktu.
Unikaj negacji i mglistych przymiotników. „Without ads”, „modern” czy „clean” nie pomagają w rankingu. Nie wpisuj platformy w treść zapytania; do tego służy platform.

Pętla pracy: rozpoznanie wzorców, budowa, weryfikacja względem referencji

Opłaca się pętla: plan, budowa, weryfikacja — z referencjami jako dowodem akceptacji. Pasuje do czteroetapowego potoku od designu do kodu jako materiał wejściowy do kierunku wizualnego.

Rozpoznanie wzorców przed jakimkolwiek kodem. Agent wyszukuje, studiuje zrzuty i zapisuje powtarzające się decyzje w pliku notatek, z mobbin_url przy każdej decyzji.

Before writing any code: search Mobbin screens for "paywall with annual and monthly plan toggle and free trial button", platform ios, mode deep, limit 6. Study the screenshots and write docs/design/paywall-notes.md with the recurring decisions: plan card layout, badge placement, trial timeline framing, close button, CTA copy. Give every decision the mobbin_url of at least two screens that show it. Then stop and wait for my review.

Przeglądaj notatki, nie piksele. Zatwierdzasz lub poprawiasz jednostronicową listę decyzji, z których każda ma linki. To jest ludzka akceptacja i zajmuje kilka minut.

Buduj z zatwierdzonych notatek. Zrzuty mogą teraz opuścić kontekst; do budowy potrzebne są tekstowe notatki.

Implement the paywall in src/components/Paywall.tsx following docs/design/paywall-notes.md exactly. Use our existing Button and Card components. When you finish, append a checklist to the notes file with one line per decision, marked done or deviated, and a reason for every deviation.

Zweryfikuj zbudowany ekran względem notatek. Wyrenderuj komponent przez serwer MCP przeglądarki lub Playwrighta, sprawdź każdą decyzję, a potem zachowaj sprawdzenie jako test.

Start the dev server, open the paywall route with the Playwright MCP server, and take a screenshot at 390x844. For each decision in docs/design/paywall-notes.md, state pass or fail with the evidence you see in the screenshot. Then write a Playwright test that asserts the structural decisions (annual plan selected by default, trial timeline visible, a single primary CTA, close button reachable by keyboard) and run it.

Co dowodzi jakości wyniku: plik decyzji (każdy wybór da się powiązać z co najmniej dwoma wydanymi produktami), lista pass/fail i test Playwrighta, który zostaje w CI. Przeglądasz jednostronicową listę decyzji i wynik testu zamiast kodu komponentu. Podpisaną akceptację wizualną opisuje strona akceptacja wizualna przed implementacją frontendu, a stronę przeglądarkową Playwright MCP czy Playwright CLI.

Więcej promptów do Mobbina: przepływy, konkurencja i landing page

Zbadaj kolejność kroków w przepływie

search_flows odpowiada na pytania o kolejność, na które pojedyncze ekrany nie odpowiedzą: ile kroków, w jakiej kolejności i gdzie pojawia się rejestracja albo prośby o uprawnienia.

Search Mobbin flows for "onboarding with personalization questions before account creation", platform ios, limit 3. For each flow, list the steps in order with the mobbin_url, and mark where signup happens. Then propose an onboarding order for our app that defers signup as late as these apps do, and flag any step our current onboarding in src/onboarding/ is missing.

Porównaj dwóch konkurentów na tym samym ekranie

Wyniki niosą nazwę aplikacji, więc agent może porównać, jak konkretne produkty rozwiązują ten sam problem.

Search Mobbin screens for "Airbnb search results with map" and then "Booking.com search results with map", platform web, limit 4 each. Compare them in a table: layout split, filter placement, card density, map interactions. Recommend which decisions our listings page should adopt, with the mobbin_url for each.

Złóż landing page z sekcji

Przy stronach marketingowych wyszukiwanie sekcji wygrywa z wyszukiwaniem ekranów: składasz stronę z mocnych sekcji.

Search Mobbin sections for "pricing section with three-tier comparison table and highlighted recommended plan", limit 5. Describe the structure of the three strongest examples with their mobbin_url. Then rebuild src/components/PricingSection.astro with that structure, using our real plans and copy from src/lib/pricing.ts.

Połącz Mobbina z rejestrem komponentów

Mobbin odpowiada na pytanie, co zbudować; rejestr komponentów, taki jak serwer MCP shadcn/ui, odpowiada, z czego to zbudować.

Search Mobbin screens for "web settings page with grouped sections and inline toggles", platform web, limit 4. Pick the clearest layout and explain why. Then use the shadcn MCP server to find matching components (Switch, Separator, Card) and implement the settings page with them, keeping the grouping and hierarchy of the reference.

Ile kontekstu zużywa Mobbin MCP?

Każdy wynik z ekranem wnosi do okna kontekstu agenta wbudowany podgląd obrazu. Podglądy mają niską rozdzielczość, a image_url w wysokiej rozdzielczości to tylko link w metadanych, więc nie trafia do kontekstu, dopóki agent go nie pobierze. Mimo to obrazy kosztują więcej niż tekst, a koszt wywołania rośnie z limit.

Nie mamy zmierzonej wartości dla tej strony. 2026-09-26 nasze środowisko nie mogło połączyć się z api.mobbin.com i nie ma płatnego konta Mobbina, więc pomiaru /context przed i po wywołaniu w Claude Code 2.1.283 nie dało się wykonać. Zrób go sam, zanim ustalisz domyślne ustawienia dla zespołu:

Proś o trzy do ośmiu ekranów w sesji programistycznej. To wystarczy, żeby zobaczyć wzorzec.
Używaj exclude_screen_ids, żeby dostawać nowe ekrany zamiast ponownie pobierać już widziane.
Rozpoznawaj wzorce wcześnie, potem skondensuj wnioski. Zapisz decyzje w pliku tekstowym i pozwól zrzutom opuścić kontekst.
Zmierz to. W Claude Code uruchom /context raz po podłączeniu serwera (definicje narzędzi) i drugi raz po jednym wywołaniu search_screens z limit 3 (koszt pojedynczego wywołania).

Ogólne techniki opisuje strona ograniczanie kosztu tokenów MCP.

Linki do obrazów wygasają. Linki image_url w wysokiej rozdzielczości przestają działać po 30 dniach (według README mobbin-mcp-cli). W notatkach i pull requestach cytuj mobbin_url, nigdy image_url.
Nie ma wartości dla Androida. platform przyjmuje tylko ios i web. Agent poproszony o wzorce z Androida nie ma wartości dla Androida do przekazania, więc może po cichu przeszukać iOS; sprawdź platform w wywołaniu narzędzia.
Nieoficjalny mobbin-mcp jest martwy. Serwer społeczności pdcolandrea/mobbin-mcp używał ciasteczek sesji z przeglądarki i został zarchiwizowany 2026-05-15; jego README każe przejść na oficjalny serwer. Usuń go, jeśli nadal siedzi w starej konfiguracji.
Referencje, nie szablony. Ekrany w Mobbinie to chroniony prawem autorskim interfejs prawdziwych produktów. Wyciągaj wzorzec; nie każ agentowi kopiować ekranu konkretnej aplikacji piksel w piksel.

Jakie alternatywy dostarczają agentom przykłady designu przez MCP?

Opcje dzielą się na trzy grupy: wyselekcjonowane biblioteki z oficjalnymi serwerami MCP, serwery społeczności przeszukujące publiczne galerie i samodzielne robienie zrzutów żywych produktów.

Refero MCP

Refero to druga wyselekcjonowana biblioteka zrzutów z oficjalnym serwerem MCP, pod adresem https://api.refero.design/mcp, z logowaniem OAuth. README podaje „150,000+ real app screens, and 6,000+ user flows” i zaznacza, że wyszukiwanie na żywo wymaga płatnego planu Refero. Refero publikuje też wtyczkę, która opakowuje serwer w proces pracy zaczynający się od rozpoznania wzorców; na 2026-09-26 repozytorium referodesign/refero_skill ma 286 gwiazdek na GitHubie.

W sesji Claude Code (polecenia z README Refero):

/plugin marketplace add referodesign/refero_skill
/plugin install refero@refero

codex plugin marketplace add referodesign/refero_skill
codex plugin add refero@refero

README Refero podaje, że wtyczka dla Cursora czeka na akceptację w marketplace. Do tego czasu dodaj https://api.refero.design/mcp jako serwer zdalny w .cursor/mcp.json, tak samo jak Mobbina powyżej.

	Mobbin MCP	Refero MCP
Zakres biblioteki	Ekrany iOS i web, przepływy, sekcje stron	Ekrany aplikacji i przepływy użytkownika (150 000+ / 6000+ według README)
Filtry wyszukiwania	Jawny `platform: ios` lub `web`; osobne wyszukiwanie sekcji	Nieopisane w README
Endpoint	`https://api.mobbin.com/mcp`	`https://api.refero.design/mcp`
Uwierzytelnianie i plan	OAuth; Pro, Team lub Enterprise	OAuth; płatny plan Refero
Gotowy proces pracy	Brak od Mobbina; społecznościowy `mobbin-mcp-cli` ma skill	Oficjalna wtyczka dla Claude Code i Codeksa

Różnica, którą da się sprawdzić, leży w narzędziach: Mobbin pozwala agentowi filtrować po platform: ios lub web i osobno przeszukiwać sekcje stron. Jeśli potrzebujesz któregoś z tych filtrów, zacznij od Mobbina. W przeciwnym razie puść te same trzy zapytania przez oba serwery i zostaw ten, którego wyniki akceptują twoi projektanci.

Serwery społeczności przeszukujące publiczne galerie

design-inspiration-mcp-server (MIT) nie ma bezpośredniego dostępu do żadnej biblioteki. Uruchamia wyszukiwania Google przez Serper API, zawężone do Dribbble, Behance, Awwwards, Mobbina i Pinteresta, i potrafi wyciągać tokeny designu (kolory, typografię, odstępy) z działających stron; wyciąganie tokenów wymaga też globalnie zainstalowanego CLI dembrandt (npm install -g dembrandt). Dostajesz szeroki zasięg za cenę klucza Serper, ale tylko to, co zaindeksował Google, a nie wyszukiwanie semantyczne po wyselekcjonowanej taksonomii. Instaluje się go z lokalnego builda, nie z npm.

Zrzuty żywych produktów przez serwer MCP przeglądarki

Opcja bez subskrypcji: skieruj serwer MCP do automatyzacji przeglądarki na produkty, które podziwiasz, i pozwól agentowi robić własne zrzuty. Sięga tam, gdzie nie sięga żadna biblioteka, np. do aplikacji konkurenta za logowaniem albo do wczorajszego redesignu. Tracisz selekcję: nie ma taksonomii, nie ma „dwudziestu paywalli fintechowych” w jednym zapytaniu, a agent traci czas na nawigację. Biblioteki używaj do badania wzorców, a przeglądarki do celowanego rozpoznania.

Serwery MCP do designu, które odpowiadają na inne pytanie

Serwer	Co dostarcza	Na jakie pytanie odpowiada
Figma MCP	Twoje własne pliki projektowe: warstwy, tokeny, zmienne	„Co wyspecyfikował nasz projektant?”
shadcn/ui MCP	Rejestr komponentów, dokumentacja, polecenia instalacji	„Z czego to zbudować?”
Mobbin lub Refero	Ekrany z wydanych produktów	„Jak dobre rozwiązanie wygląda gdzie indziej?”

Agent przygotowany do pracy z designem często łączy wszystkie trzy warstwy.

Kiedy Mobbin MCP się psuje

Narzędzia się łączą, ale każde wywołanie kończy się błędem autoryzacji. Mobbin MCP wymaga planu Pro, Team lub Enterprise (README mobbin-mcp-cli), więc błąd autoryzacji przy każdym wywołaniu zwykle oznacza, że zalogowane konto nie ma takiego planu. Przejdź na wyższy plan albo zaloguj się kontem, które ma plan: usuń zapisane poświadczenia (claude mcp logout mobbin w Claude Code; codex mcp logout mobbin w Codeksie) i zaloguj się ponownie.

Okno OAuth nigdy się nie kończy. Logowanie przekierowuje z powrotem na lokalny callback; jedną z możliwych przyczyn jest VPN lub restrykcyjny firewall, który może blokować to przekierowanie. Spróbuj wyłączyć VPN na czas pierwszego logowania albo użyj claude mcp login mobbin --no-browser lub codex mcp login mobbin --no-browser; oba wypisują adres autoryzacji, dzięki czemu kończysz logowanie i wklejasz z powrotem adres callbacku. Inne błędy połączenia opisuje strona problemy z połączeniem MCP.

Odpowiedzi HTTP 429. Agent puścił za dużo równoległych wyszukiwań. Odczekaj czas z Retry-After, a potem poproś agenta o wyszukiwania jedno po drugim.

Wyniki są nietrafione. Prawie zawsze winne jest zapytanie: kilka intencji naraz, negacje albo przymiotniki stylu. Przepisz je jako jeden konkretny opis wizualny, a przy ekranach spróbuj drugiej wartości mode.

Linki w notatkach przestają działać po miesiącu. Ktoś zacytował image_url. Zastąp go kanonicznym mobbin_url z wyniku.

Design agenta w ogóle nie przypomina referencji. Zrzuty opuściły kontekst, zanim zapisano decyzje. Powtórz krok 1 pętli pracy i każ w prompcie budującym korzystać z pliku notatek, a nie z „ekranów, które widziałeś”.

Co dalej z referencjami designu dla agentów

Akceptacja wizualna przed implementacją frontendu Zamień referencje w podpisany plik akceptacji wizualnej i sprawdź względem niego zbudowany ekran.

Figma i serwery MCP systemów projektowych Podłącz własne pliki projektowe, drugą połowę agenta pracującego z designem.

Najlepsze skille frontendowe Skille, które kształtują jakość designu i przeglądają wynik.

Playwright MCP czy Playwright CLI Zweryfikuj zbudowany ekran w prawdziwej przeglądarce i zachowaj sprawdzenie w CI.