Mobbinの300K+画面ライブラリを構造化したUI研究に変えます。 エージェントにリサーチの目標を与える — 画面やフローのモビンを検索し、結果を視覚的に分析し、パターンクラスター、設計システムコンポーネント、または競争比較を返します。

Claudeコード、Cursor、Gemini CLI、Lovable、およびMCP互換のエージェントで動作します。

それが何をするか

• 抽象的なUX目標を具体的なMobbin検索クエリに変換
• [individual Screens*] と [multi-step user flows (onboarding, checkout など) の両方を検索します。
• 返されたスクリーンショットを視覚的に分析(レイアウト、階層、コンポーネント、色)
• クラスターは、リンクされた参照でUIパターンを再帰化することを見つけます
• PRDおよびプロダクト報告書からのDerivesの研究の質問は自動的に
• 部品について尋ねられたとき表面原子の設計システム プリミティブ
• 対象となる UI ** コンポーネントによってコンポーネント ** — スクリーンショット、PRD、Figma ファイル、または既存の画面を分解し、コンポーネントごとの最高のリアルタイムリファレンスを見つけ、実装の簡略化からビルドする
• 3つの出力モードを支えて下さい:調査の要約、競争の比較、プロダクト決定のログ

インストール

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