design-references
Design references
References come from Mobbin, as patterns shipped by many products, and the user picks them. The build then uses the project's own brand, copy and components. A single product's screen is never the target.
The searches need the Mobbin MCP server. If its tools are not in your tool list, ask the user to connect it, then continue.
1. Frame the searches
List the screens, flows and website sections the work needs, one intent per line ("checkout with saved cards", "onboarding that asks for permissions"), and the platform (web or ios). Confirm the list with the user when it is not obvious from the brief.
Done when every intent is one screen, one flow or one section.
2. Search Mobbin
Use the tool that matches the intent: search_screens for one screen, search_flows for a multi-step flow, search_sections for a website section. For each call:
- The query describes one screen or flow in plain words: the elements and how they relate. No negations, no style words, no list of keywords.
mode: "deep"for nuanced intents,limit6 to 10, and the sametask_intent,output_destinationandoutput_toolon every call of this task.- Look at the returned images; judge from what they show, not from the metadata.