mobbin

Mobbin UI references

Overview

Mobbin is a library of real screens, user flows and website sections from shipped iOS, Android and web products. This skill tells the agent how to search it through the official Mobbin MCP server (https://api.mobbin.com/mcp) and how to cite what it finds, so design and UI code decisions are based on what real products ship instead of on memory. It is adapted from the search and best-practices skills in mobbin/skills, which also ships a full redesign-screen workflow.

When to Use

• The user asks for examples of a screen, component, flow or website section ("show me paywalls from meditation apps", "how do banking apps do onboarding?").
• The user is designing or building UI and wants it grounded in real products.
• Not for building a whole product or cloning an app in one go; scope it to one screen, flow or section at a time.
• Not for generating images or editing design files; use a design-tool skill for that.

Prerequisites

• The Mobbin MCP server connected to the agent (remote, Streamable HTTP, OAuth):

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

Other clients: add {"mcpServers": {"mobbin": {"url": "https://api.mobbin.com/mcp"}}} to their MCP config.

• A Mobbin account on a Pro, Team or Enterprise plan. On first use the client opens a browser to sign in.
• Network access to api.mobbin.com. Search queries are sent to Mobbin.

How It Works

1. Pick the tool

platform is ios or web. There is no Android filter, so an Android target searches ios; say the references are iOS when citing them.

2. Write the query

• One screen, flow or section per query, starting with its type ("paywall", "signup screen").
• At most three constraints (a state, a step, a visible part or a visual trait such as dark mode). The domain ("banking app") and an app name ("Revolut") don't count as constraints.
• Every constraint comes from the user's request. Don't add parts you expect the target to have.
• Plain phrases beat keyword lists. Leave out the user's own copy, brand and words like "best" or "examples of".
• On search_screens, use mode: standard for a query with no constraints and mode: deep for one to three.

3. Pull more or recover

• More results for a query that works: search_screens with the same query and every seen id in exclude_screen_ids; search_sections and search_flows with the next page while has_next_page is true.
• Weak results: change the query (drop or reword a constraint), don't just raise limit.
• A named app doesn't appear: retry with its exact spelling, then the other platform. Never describe it from memory.
• Images don't open: call again with image_format: jpg.
• The tool refuses the call: stop and tell the user (often a plan or connection issue); don't retry.

4. Verify and cite

Open each image before citing it. Cite each reference with its app_name or site_name and its mobbin_url, and say what decision it shows. Check app_name even when the query named an app, since not every result is from that app.

Examples

User request: Find onboarding paywalls from meditation apps that offer a free trial.
Call: search_screens({ query: "meditation app paywall with a free trial button", platform: "ios", mode: "deep" })
Expected result (illustrative): a short list of paywall screens, each with the app name, a one-line note on how it presents the trial, and its mobbin_url.

User request: Compare how AI tools design their pricing sections.
Call: search_sections({ query: "AI tool pricing section" })
Expected result (illustrative): pricing sections from several AI product sites, grouped by layout (plan cards, comparison table, usage slider), each linked to Mobbin.

Limitations

• Requires a paid Mobbin plan (Pro, Team or Enterprise) and the Mobbin MCP server; without them the tools are unavailable.
• No Android filter; Android requests return iOS references.
• Search returns references, not code or design files. The agent still has to adapt them to the user's own design system.
• A short or empty result means few close matches for that query, not that Mobbin has none.

Safety and side effects

Read-only for search. Queries are sent to Mobbin's servers under the user's account. The Mobbin MCP server also has collection tools that write to the user's Mobbin account (e.g. saving screens to a collection); only call them when the user asks. Authentication is OAuth in the browser, so no tokens belong in prompts or files.

Sources and related skills

• Upstream skills and Mobbin MCP config (MIT): https://github.com/mobbin/skills (search, best-practices, redesign-screen, plain-writing)
• Docs: https://docs.mobbin.com/mcp/introduction
• Related here: product-design, design-md