design-references

Installation
SKILL.md

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, limit 6 to 10, and the same task_intent, output_destination and output_tool on every call of this task.
  • Look at the returned images; judge from what they show, not from the metadata.
Installs
10
Repository
anis-dr/skills
GitHub Stars
4
First Seen
Sep 26, 2026