Превратите 300K+ библиотеку Mobbin в структурированное исследование пользовательского интерфейса. Дайте своему агенту цель исследования — он ищет Mobbin для экранов и потоков, визуально анализирует результаты и возвращает кластеры шаблонов, компоненты системы проектирования или конкурентные сравнения.

Работает с Claude Code, Cursor, Gemini CLI, Lovable и любым MCP-совместимым агентом.

Что он делает

Перевод абстрактных целей UX в конкретные поисковые запросы Mobbin

• Поиск по индивидуальным экранам и многоступенчатым потокам пользователей (вход на борт, оформление заказа и т.д.)
• Визуально анализирует возвращенные скриншоты (разметка, иерархия, компоненты, цвет)
• Кластерные выводы в повторяющиеся шаблоны пользовательского интерфейса со связанными ссылками
• автоматически получает исследовательские запросы от PRD и продуктовых брифов Поверхности системы атомного проектирования примитивные, когда спрашивают о компонентах
• Исследует целевой пользовательский интерфейс **компонент по компоненту ** - разлагает скриншот, PRD, файл Figma или существующий экран, находит лучшую ссылку в реальном мире на компонент и пишет краткое описание реализации для построения из Поддерживает три режима вывода: резюме исследований, конкурентное сравнение, журнал решений о продукте

##Установка

Mobbin MCP должен быть подключен первым.

Mobbin UI Research Skill

Turn Mobbin’s 300K+ screen library into structured UI research. Give your agent a research goal — it searches Mobbin for screens and flows, visually analyzes the results, and returns pattern clusters, design system components, or competitive comparisons.

Works with Claude Code, Cursor, Gemini CLI, Lovable, and any MCP-compatible agent.

What it does

• Translates abstract UX goals into concrete Mobbin search queries
• Searches both individual screens and multi-step user flows (onboarding, checkout, etc.)
• Visually analyzes returned screenshots (layout, hierarchy, components, color)
• Clusters findings into recurring UI patterns with linked references
• Derives research queries from PRDs and product briefs automatically
• Surfaces atomic design system primitives when asked about components
• Researches a target UI component by component — decomposes a screenshot, PRD, Figma file, or existing screen, finds the best real-world reference per component, and writes an implementation brief to build from
• Supports three output modes: research summary, competitive comparison, product decision log

Install

Requires Mobbin MCP to be connected first. Copy and Paste in Terminal to install skill

npx skills add https://github.com/ddruids/mobbin-skill

Usage

Once installed, the skill activates when you ask about UI research, screen patterns, or design system components:

"Research how fintech apps handle onboarding"
"Compare how crypto wallets display transaction confirmation"
"What are common components for a SaaS dashboard design system?"
"How do AI apps handle empty states on iOS?"
"Here's my PRD — research the key screens and flows"
"Here's a screenshot of the screen I'm building — research each component and pick the best reference so you can build it"

The skill automatically:

1. Resolves the target platform (iOS or web)
2. Picks the right tool mix — search_screens for specific screens, search_flows for multi-step journeys
3. Generates 3-7 concrete search queries (or derives them from your PRD)
4. Analyzes the returned screenshots and flow sequences
5. Synthesizes findings into structured output with Mobbin URLs

What’s inside