Mobbin MCP adds 100k+ UI screenshots to Claude Code

Setup Process

Users install Mobbin MCP by visiting mobbin.com/mcp, purchasing a paid plan at $15 per month billed quarterly or $10 per month equivalent yearly, selecting Claude Code as the tool, copying the provided command, pasting it into a new Claude session, and restarting Claude Code. Claude confirms addition of the Mobbin HTTP MCP server to the local config. The MCP exposes one tool named search_screens. Users query it with prompts such as "show me 10 fintech onboarding flows", "all the legal AI hero sections", or "provide me a list of five sites with awards worthy navbars".

hey what can we do with this MCP

Claude lists use cases including scouting references, component-level deep dives, pattern and trend research like "what's everyone doing in 2026", color story research, typography study, and critiques by uploading a current screen for 5-10 best-in-class references.

UI Mashups and Rebuilds

Claude searches Mobbin screenshots and rebuilds UIs from references. For a login screen, Claude fetches Uber's login and colorful alternatives including Zalando, Tinder, Go Club, and Roku. Users prompt a mashup:

can you mash up the Uber flow with the Zalando style

This produces Uber's three login methods (Apple, Facebook, Google) with Zalando's yellow buttons, though initial text and image placement require iteration.

For a racing UI inspired by Go Club, Claude generates code with OpenAI API images: orange-toned racetrack background, illustration-style race car foreground, and mouse-movement parallax.

let's move on from that design you mentioned that Go Club example do you see that there's like one image on the background and one image in the foreground i want to generate a UI just like that but making the background image with a similar style but orange toned look more like a racetrack and the foreground image look more like a race car again same style like this illustration style also please make sure that the mouse movement that on the mouse movement the foreground image kind of moves with the mouse like in the reference video

Iterations fix the logo via OpenAI (three options generated), revert header text to original font after failed image conversions (OpenAI struggles with exact font matching like curved 'Y'), and add buttons.

A hero section for axiom.com (legal AI) mashes Writer's centered hero, DocuSign's navbar and banner, and Copilot's header font. Iterations extract axiom.com colors, add the real logo, generate a lawyer image with circular motion lines via OpenAI, apply glowing gradient background, crop cleanly, and fade edges.

my client is axiom.com. they like the hero section from Writer the navbar and banner from Docyign and the header font from Copilot can we create a custom hero section for them

An award-worthy navbar rebuilds Open's spreading letter animation on load and menu open.

Trend Research and Critiques

Mobbin MCP generates moodboards for trends. A prompt reveals 2026 consumer banking onboarding:

what's everyone doing in 26 on consumer banking apps for onboarding

Results include Anplus, Chime, Tabby (goal quiz), Humanide (KYC with personality); dying patterns are step-by-step overlays, list forms, and empty heroes. Fintech for retirees yields moodboards by palette (pleat warm grounded analog), typography, composition, and tone.

Critiques compare a user screen to 5-10 best-in-class examples, noting improvements. The tool supports mobile/web searches, brand-specific inspiration, and iterative builds combining MCP with OpenAI API keys from platform.openai.com.