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

Poproś agenta AI o zbudowanie paywalla, a dostaniesz ten sam ekran, który dostaje każdy deweloper: wyśrodkowana karta, trzy punkty z funkcjami, przycisk z gradientem. To nie jest do końca złe. To po prostu statystyczna średnia wszystkich paywalli z danych treningowych — i konwertuje jak średnia. Tymczasem zespoły Duolingo, Headspace i Quizleta spędziły lata na testach A/B tego, gdzie dokładnie umieścić przełącznik planów, jak przedstawić oś czasu darmowego okresu próbnego i jak powinien wyglądać przycisk zamknięcia. Ta wiedza istnieje. Twój agent po prostu jej nie widzi.

Serwer Mobbin MCP to zmienia. Łączy twojego agenta AI z biblioteką Mobbina: ponad 620 000 ekranów i 130 000 przepływów użytkownika uchwyconych z wydanych produktów na iOS i web. Zamiast halucynować “typowy” ekran onboardingu, agent wyszukuje prawdziwe, ogląda faktyczne zrzuty ekranu i buduje na podstawie dowodów. Ten artykuł omawia szczegółowo oficjalny Mobbin MCP, a następnie przegląda inne serwery MCP rozwiązujące ten sam problem: dostęp agentów do przykładów designu.

Czego się nauczysz

• Konfiguracja oficjalnego serwera Mobbin MCP w Cursorze, Claude Code i Codexie
• Przegląd trzech narzędzi serwera i wzorce zapytań, które naprawdę zwracają dobre wyniki
• Gotowe prompty do researchu przed budowaniem, audytów wzorców u konkurencji i badania przepływów UX
• Mapa alternatyw — Refero MCP, community’jne serwery design inspiration i podejście DIY z przeglądarką — i kiedy każda z nich pasuje

Czym jest Mobbin MCP

Mobbin od 2018 roku jest biblioteką referencyjną dla projektantów produktów: ręcznie wyselekcjonowane zrzuty ekranu prawdziwych aplikacji, otagowane wzorcem, przepływem i kategorią aplikacji, używane przez ponad dwa miliony projektantów. Serwer MCP, uruchomiony w 2026 roku, udostępnia tę bibliotekę agentom AI przez Model Context Protocol.

Praktyczne fakty:

Endpoint	https://api.mobbin.com/mcp (zdalny, Streamable HTTP)
Uwierzytelnianie	OAuth — przy pierwszym połączeniu otwiera się okno przeglądarki; nie ma klucza API do zarządzania
Wymagany plan	Dowolny płatny plan Mobbina (Pro, Team, Enterprise). Darmowe konta nie mogą się połączyć
Limit żądań	60 żądań na 60 sekund na użytkownika
Przeszukiwalne platformy	iOS i web (Android istnieje na stronie Mobbina, ale nie jest jeszcze wartością parametru platform w narzędziach MCP)
Wspierani klienci	Claude Code, Claude Desktop/Web, Cursor, Codex, ChatGPT, v0, Lovable, Devin, Replit, Antigravity i każdy klient ze wsparciem Streamable HTTP + OAuth

Ponieważ to serwer zdalny, nie ma nic do zainstalowania ani utrzymywania. Kompromis: podąża za twoim kontem Mobbina — dostęp do MCP jest funkcją płatnych planów, egzekwowaną na warstwie OAuth.

Notatka

W klientach implementujących specyfikację MCP Apps (ChatGPT, Claude Desktop i Web, aplikacja Codex) wyniki wyszukiwania renderują się dodatkowo jako interaktywna galeria wizualna wewnątrz rozmowy. W klientach terminalowych, takich jak Claude Code, galeria się nie renderuje — ale agent i tak otrzymuje zrzuty ekranu i metadane, a to one liczą się w pracy nad kodem.

Konfiguracja

Cursor

Otwórz Settings > Tools & MCPs i dodaj serwer:

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

Kliknij Connect przy wpisie Mobbin. Otworzy się okno przeglądarki — zaloguj się kontem Mobbina, aby autoryzować. Dokumentacja Mobbina publikuje też jednoklikowy deeplink cursor://, jeśli wolisz nie edytować konfiguracji.

Claude Code

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

Następnie uruchom /mcp, wybierz mobbin i Authenticate. Przeglądarka otworzy się do logowania OAuth. Flaga --scope user udostępnia serwer w każdym projekcie, co dla biblioteki referencyjnej pasuje lepiej niż konfiguracja per repozytorium.

Codex

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

Podkomenda login uruchamia przepływ OAuth. Odpowiednik w ~/.codex/config.toml:

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

Aby zweryfikować, zadaj agentowi pytanie wymuszające wywołanie narzędzia: “Search Mobbin for iOS onboarding screens with progress indicators and show me what you find.” Jeśli połączenie działa, dostaniesz nazwy prawdziwych aplikacji, a nie ogólne porady.

Trzy narzędzia

Serwer jest celowo mały — trzy narzędzia wyszukiwania, zero operacji zapisu:

Narzędzie	Co przeszukuje	Kluczowe parametry
search_screens	Pojedyncze ekrany UI	query, platform (ios/web), limit (1—30, domyślnie 20), mode (deep/standard)
search_flows	Wielokrokowe ścieżki użytkownika (onboarding, checkout)	query, platform, limit (1—10, domyślnie 5), page
search_sections	Sekcje stron internetowych (pricing, hero, stopka)	query, limit (1—30), page

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

• mode: "deep" (domyślny dla ekranów) uruchamia pipeline oparty na AI, który interpretuje intencję zapytania i ocenia trafność wyników. mode: "standard" to szybsze wyszukiwanie dosłowne. Deep jest zauważalnie lepszy dla niuansowych zapytań w stylu “empty state that converts the user to creating their first project”; standard wystarcza dla “login screen”.
• Przepływy zwracają równomiernie rozmieszczone podglądy wzdłuż całej ścieżki plus podglądy per ekran, więc agent widzi progresję, a nie tylko pierwszy ekran.
• search_sections nie ma parametru platform — sekcje to koncepcja czysto webowa (hero, tabela cenowa, stopka).
• Obrazy przychodzą inline domyślnie jako WebP; opcja image_format: "jpg" istnieje dla klientów, które nie renderują WebP.

Jak wyglądają wyniki

Każdy wynik łączy zrzut ekranu inline ze strukturalnymi metadanymi. Prawdziwa odpowiedź search_screens na zapytanie “paywall with annual and monthly plan toggle and free trial button” zwraca wpisy takie jak:

{
  "id": "1c14274b-c9e0-4c46-bdb5-018567fa5f49",
  "image_url": "https://mobbin.com/api/mcp/short/GMkMMbMT",
  "mobbin_url": "https://mobbin.com/screens/1c14274b-...",
  "app_name": "Quizlet",
  "platform": "ios"
}

— wraz z faktycznym zrzutem paywalla Quizleta: badge “Best Value” na planie rocznym, oś czasu triala (“Today: get instant access / 1 June: trial reminder / 4 June: trial ends”), pojedyncze żółte CTA. mobbin_url to kanoniczny link, więc agent może zacytować każdy ekran, do którego się odwołuje, a ty możesz otworzyć go w Mobbinie i obejrzeć otaczający przepływ.

Ten obraz inline to sedno sprawy. Agent nie czyta tekstowego opisu paywalla Quizleta — patrzy na piksele i sam wyciąga decyzje projektowe.

Pisanie zapytań, które działają

Opisy narzędzi Mobbina kodują konkretne wskazówki, a ich przestrzeganie to różnica między wynikami klasy referencyjnej a szumem:

Opisuj jeden ekran lub jedną ścieżkę na zapytanie. “Checkout with payment method selection” działa. “Checkout and onboarding and settings” nie — szukaj osobno.

Bądź konkretnie wizualny. Nazwij elementy UI i ich relacje: “login screen with biometric authentication”, “checkout page with promo code field and Apple Pay button”. Szczegóły pomagają pipeline’owi deep search.

Podaj nazwę aplikacji, aby zawęzić wyniki. “Duolingo onboarding” ogranicza wyniki do Duolingo. To najszybszy sposób na przestudiowanie podejścia jednego produktu.

Unikaj tego, co nie działa: negacji (“without ads”), mglistych słów stylistycznych (“modern”, “clean”) i luźnych list słów kluczowych. Platformę trzymaj poza treścią zapytania — od tego jest parametr platform.

Workflow

Research przed budowaniem

Wzorzec o najwyższej dźwigni: każ agentowi obejrzeć istniejące rozwiązania zanim napisze linijkę kodu UI. To przenosi na początek decyzje projektowe, które zwykle doszywa się po pierwszym brzydkim szkicu.

Wskazówka

Gotowy prompt do budowania research-first:

“Before writing any code: search Mobbin for iOS paywall screens with annual/monthly plan toggles and free trials (limit 6). Study the screenshots and write down the recurring decisions — plan card layout, badge placement, trial timeline framing, CTA copy. Then implement our paywall in src/components/Paywall.tsx following those conventions, and list which reference screens informed each decision with their Mobbin URLs.”

Badanie UX na poziomie przepływów

search_flows odpowiada na pytania o sekwencję, na które zrzuty ekranu nie odpowiedzą: ile kroków, w jakiej kolejności, gdzie siedzą prompty o uprawnienia.

Wskazówka

Gotowy prompt do researchu przepływów:

“Search Mobbin flows for ‘onboarding with personalization questions before account creation’ on iOS, limit 3. For each flow, map the step sequence and note where signup actually happens. Then propose an onboarding order for our app that defers signup as late as these apps do.”

Audyty wzorców u konkurencji

Ponieważ wyniki niosą app_name, agent może porównać odpowiedzi konkretnych produktów na ten sam problem.

Wskazówka

Gotowy prompt do audytu wzorców:

“Search Mobbin screens for ‘Airbnb search results with map’ and ‘Booking.com search results with map’ on web. Compare the two side by side: layout split, filter placement, card density, map interaction affordances. Summarize which decisions we should adopt for our listings page and why.”

Strony landingowe z search_sections

Dla stron marketingowych wyszukiwanie na poziomie sekcji bije wyszukiwanie ekranów: składasz stronę z najlepszych w swojej klasie sekcji.

Wskazówka

Gotowy prompt do strony landingowej:

“Search Mobbin sections for ‘pricing section with three-tier comparison table and highlighted recommended plan’, limit 5. Study the structure of the strongest examples, then rebuild our pricing section in src/components/PricingSection.astro following that structure with our real plans and copy.”

Łączenie z MCP shadcn/ui

Mobbin odpowiada na pytanie co zbudować; rejestr komponentów — z czego to zbudować. Razem domykają pętlę: referencyjny zrzut ekranu na wejściu, produkcyjny komponent na wyjściu.

Wskazówka

Gotowy prompt od referencji do komponentu:

“Search Mobbin for web settings pages with grouped sections and inline toggles (limit 4). Pick the clearest layout. Then use the shadcn MCP server to find the matching components — Switch, Separator, Card — and implement the settings page with them, keeping the grouping and hierarchy from the reference.”

Zarządzanie kosztem kontekstu

Każdy ekran w wynikach to obraz w oknie kontekstowym twojego agenta, a obrazy są drogie. Domyślny limit 20 ekranów potrafi w jednym wywołaniu zjeść znaczący kawałek sesji. Praktyczne wartości domyślne:

• Proś o 3—8 ekranów w sesjach kodowania. To wystarczający sygnał, by wyciągnąć wzorzec; więcej zamawiaj tylko przy szerokich audytach.
• Używaj exclude_screen_ids, aby stronicować poza ekrany już obejrzane, zamiast pobierać je ponownie.
• Rób research wcześnie w sesji, wyciągnij decyzje do tekstu (plik z notatkami projektowymi albo plan) i pozwól zrzutom wypaść z kontekstu. Do budowania potrzebujesz wydestylowanych konwencji, nie pikseli.

Limit 60 żądań na minutę jest hojny przy pracy interaktywnej; szybciej trafisz na limity kontekstu niż na niego. Szersza strategia tokenów: Redukcja kosztu tokenów MCP.

Uwaga

Ekrany Mobbina to chronione prawem autorskim UI prawdziwych produktów, udostępniane jako referencje. Studiowanie wzorców i konwencji to zamierzone użycie. Polecenie agentowi sklonowania ekranu konkretnej aplikacji piksel w piksel to prawnie i etycznie inna sprawa — wyciągaj wzorzec, nie tożsamość.

Podobne rozwiązania: przykłady designu przez MCP

Mobbin nie był pierwszy z tym pomysłem i nie jest sam. Pole dzieli się na trzy poziomy: kuratorowane biblioteki z oficjalnymi serwerami MCP, community’jne serwery scrapujące lub proxujące wyszukiwarki galerii, oraz podejście DIY — samodzielne zrzuty ekranu działających produktów.

Refero MCP — bezpośredni konkurent

Refero to druga kuratorowana biblioteka zrzutów ekranu z oficjalnym serwerem MCP i porównanie jest wyrównane:

	Mobbin MCP	Refero MCP
Biblioteka	620 000+ ekranów, 130 000+ przepływów	135 000+ ekranów, 10 000+ przepływów
Platformy	iOS + web	Web + iOS (biblioteka web-first)
Endpoint	https://api.mobbin.com/mcp	https://api.refero.design/mcp
Uwierzytelnianie	Tylko OAuth	Token Bearer lub OAuth
Plan	Dowolny płatny plan	Refero Pro
Limit użycia	Limit 60 żądań/min	8 000 wywołań narzędzi MCP miesięcznie
Narzędzia	3 (ekrany, przepływy, sekcje)	4 (wyszukiwanie + szczegóły dla ekranów i przepływów)
Ekstra	Interaktywna galeria w klientach MCP Apps	Oficjalny skill dla agentów (refero_skill) opakowujący MCP w workflow research-first

Uczciwa ocena: biblioteka Mobbina jest kilkukrotnie większa, a pokrycie mobile głębsze; katalog Refero skłania się ku dobrze zaprojektowanym produktom webowym (rejony Linear, Stripe, Notion), a opublikowany skill daje agentom bardziej wyrazistą procedurę researchu od ręki. Jeśli pracujesz nad web-first SaaS, oceń oba; jeśli liczą się wzorce mobilne, wygrywa głębia Mobbina. Miesięczny limit wywołań Refero to też realne ograniczenie przy intensywnej pracy agentów, podczas gdy Mobbin limituje tylko per minuta.

Serwery community: proxy wyszukiwarek i scrapery

Zanim powstały oficjalne serwery, społeczność zbudowała własny dostęp — i te projekty dobrze uczą, od czego nie należy się uzależniać:

• design-inspiration-mcp-server (community, MIT) nie sięga do żadnej biblioteki bezpośrednio. Wykonuje wyszukiwania Google przez Serper API z filtrami site: dla Dribbble, Behance, Awwwards, Mobbina i Pinteresta, a dodatkowo umie wyciągać tokeny projektowe (kolory, typografię, odstępy) z działających stron. Dostajesz szerokość wielu galerii za darmowy klucz Serper — ale dostajesz to, co zindeksował Google, a nie semantyczne wyszukiwanie po kuratorowanej taksonomii.
• Scrapery galerii istnieją dla Godly, Land-booka, SiteInspire i podobnych kolekcji, wystawiając narzędzia browse_* per galeria. Ten sam kompromis, większa kruchość.
• Nieoficjalny mobbin-mcp (pdcolandrea/mobbin-mcp) to opowieść ku przestrodze. Odtworzył przez inżynierię wsteczną prywatne API Mobbina, wymagał wyciągania ciasteczek sesji z przeglądarki i wystawiał dziesięć narzędzi — więcej, niż oficjalny serwer daje dzisiaj. Został zarchiwizowany w maju 2026, gdy pojawił się oficjalny serwer, z rekomendacją samego autora, by się przenieść. Serwery community zbudowane na prywatnych API mają dokładnie taki cykl życia.

Serwery community mają sens, gdy potrzebujesz galerii, których oficjalne serwery nie pokrywają (koncepty z Dribbble, art direction klasy Awwwards) i tolerujesz awarie. Dla workflow produkcyjnych trwalszym fundamentem jest semantyczne wyszukiwanie oficjalnych serwerów po licencjonowanych bibliotekach.

Podejście DIY: zrzuty ekranu działających produktów

Alternatywa bez subskrypcji: skieruj serwer MCP do automatyzacji przeglądarki (Playwright MCP lub podobny) na produkty, które podziwiasz, i pozwól agentowi robić własne zrzuty. To działa i sięga tam, gdzie żadna biblioteka nie sięga — aplikacja konkurenta za loginem, wczorajszy redesign, narzędzia wewnętrzne.

Tracisz kurację: brak taksonomii, brak “43 fintechowych paywalli” w jednym zapytaniu, brak wersji historycznych, a czas agenta spala się na nawigację zamiast na analizę. Pragmatyczny podział: biblioteka MCP do researchu wzorców (“jak udane aplikacje robią X”), przeglądarka do celowanego rekonesansu (“co dokładnie robi konkurent Y”).

Pokrewne, ale rozwiązujące inny problem

Kilka projektowych serwerów MCP wymienia się jednym tchem z Mobbinem, choć odpowiadają na inne pytania — warto je rozróżnić, żeby wybrać właściwe narzędzie:

Serwer	Co faktycznie daje	Na jakie pytanie odpowiada
Figma MCP	Twoje własne pliki projektowe: warstwy, tokeny, zmienne	”Co zaprojektował nasz designer?“
shadcn/ui MCP	Rejestr komponentów, dokumentacja, polecenia instalacji	”Z czego mam to zbudować?“
21st.dev MCP	10 000+ community’jnych komponentów React/Tailwind, generowanie AI	”Daj mi gotowy komponent”
Magic Patterns MCP	Generowanie designów AI w narzędziu Magic Patterns	”Wygeneruj mi nowy design”

Kompletny setup agenta zdolnego do designu często łączy trzy warstwy: bibliotekę referencyjną (Mobbin lub Refero) dla jak wygląda dobre, twój design system (Figma MCP) dla jak wygląda twój produkt i źródło komponentów (shadcn/ui MCP) dla jak wygląda kod.

MCP a REST API Mobbina

Mobbin ma też REST API (https://api.mobbin.com, uwierzytelnianie tokenem Bearer, endpointy jak /v1/screens/search) — ale jest ono ograniczone do planów Team i Enterprise, podczas gdy MCP działa na Pro. Dla workflow agentowych MCP i tak jest właściwym interfejsem: OAuth zamiast zarządzania kluczami, obrazy inline zamiast list URL-i i opisy narzędzi, które agent może przeczytać. Po REST API sięgaj tylko wtedy, gdy budujesz własną integrację produktową, a nie wyposażasz agenta.

Kiedy coś się psuje

Narzędzia łączą się, ale każde wywołanie kończy się błędem autoryzacji. Jesteś na darmowym planie Mobbina. Dostęp do MCP wymaga Pro, Team lub Enterprise — handshake OAuth się udaje, ale wywołania narzędzi są zablokowane.

Okno OAuth nigdy się nie domyka. Przepływ musi przekierować z powrotem na lokalny port. Typowi winowajcy to VPN-y i restrykcyjne firewalle blokujące callbacki na localhost; odłącz VPN na czas pierwszego uwierzytelnienia.

Odpowiedzi HTTP 429. Trafiasz w limit 60 żądań na 60 sekund. Odpowiedź zawiera nagłówek Retry-After; typową przyczyną są agenty odpalające wiele równoległych wyszukiwań (fan-outy w workflow). Zserializuj wyszukiwania albo zmniejsz fan-out.

Interaktywna galeria renderuje się jako zepsuty UI. Znany problem po stronie klienta w Claude Code wewnątrz aplikacji desktopowej Claude i w Claude Cowork. Czysto kosmetyczny — agent nadal otrzymuje obrazy i metadane. Oceniaj po tym, co agent robi, a nie po galerii.

Wyniki są nietrafione. Prawie zawsze problem zapytania: kilka intencji naraz, negacje albo przymiotniki stylistyczne. Przepisz na jeden konkretny opis wizualny i przełącz na mode: "deep", jeśli używasz standard.

Potrzebujesz wzorców z Androida. Parametr platform w MCP przyjmuje obecnie tylko ios i web. Treści androidowe istnieją na stronie Mobbina — przeglądaj je ręcznie, aż MCP nadgoni.

Co dalej

Figma i design system MCP Podłącz własne pliki projektowe -- druga połowa agenta zdolnego do designu.

shadcn/ui MCP Zamień znalezione wzorce w produkcyjne komponenty.

Redukcja kosztu tokenów MCP Nie pozwól serwerom MCP ciężkim od obrazów zjadać okna kontekstowego.

Browser Automation MCP Alternatywa DIY -- rób zrzuty działających produktów samodzielnie.