mobbin-ux について
mobbin-uxは、MobbinでUI/UXパターンを調査し、デザイン仕様を作成して、承認後に実装するワークフローです。既存の製品画面をブラウザー操作とスクリーンショットで調べたいデザイナーや開発者向けです。
主な機能
- 01コンポーネントとプラットフォーム別に検索
- 02スクリーンショットからパターンを抽出
- 03レイアウト、階層、操作を分析
- 04デザイン仕様を作成
- 05承認後に画面を実装
活用シーン
- 01モバイルのオンボーディングを調査
- 02他のアプリの受信トレイを参考にする
- 03ダッシュボードのレイアウトと操作を整理
MCP 対応
tabs_context_mcpでブラウザータブを取得または作成し、ブラウザー操作でMobbinにアクセスします。プロジェクト自体がMCPサーバーを提供するとは記載されていません。
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/mobbin-uxを入力して読み込まれたか確認します。
詳細
Mobbin UX リサーチ
Mobbin で UI/UX パターンを調査し、デザイン仕様を作成して、承認後に実装します。
ワークフロー
1. UI コンポーネントを明確にする
調査する UI の種類を尋ねます：
- 「inbox」、「dashboard」、「settings」、「onboarding」、「checkout」、「profile」など
- プラットフォーム：Web またはモバイル（iOS/Android）
2. Mobbin を検索する
ブラウザー自動化を使用します：
1. tabs_context_mcp → get/create tab
2. navigate → mobbin.com
3. Log in if needed (user handles auth)
4. navigate → mobbin.com/search/apps/{web|ios|android}?q={query}
5. screenshot → capture search results
6. Click 3-5 top results, screenshot key screens
検索のヒント：
- コンポーネント名：「inbox」、「notification」、「settings」
- 条件を追加：「inbox email」、「dashboard analytics」
3. デザインパターンを抽出する
スクリーンショットから、以下を特定します：
レイアウト： 列の構成、サイドバーの配置、コンテンツの整理方法
視覚的な階層： タイポグラフィ、色、余白、テーマ（ライト／ダーク）
インタラクション： ホバー状態、アクションボタン、進捗インジケーター
ナビゲーション： タブ、フィルタリング、表示の切り替え
4. デザイン仕様を作成する
/quick-view を使用して仕様を作成します：
## Design Patterns for [Component]
**Sources:** [App1], [App2], [App3] via Mobbin
### Layout
- [Pattern]: [Why it works]
### Visual Hierarchy
- [Pattern]: [Why it works]
### Interactions
- [Pattern]: [Why it works]
### Recommended Changes
1. [Specific change]
2. [Specific change]
5. 承認を得る
ユーザーに尋ねます：「これらのパターンを実装しますか？省略または変更したいものはありますか？」
6. 実装する
承認後、仕様に沿って UI を再構築します。
検索例
| UI の種類 | クエリ |
|---|---|
| メール受信トレイ | inbox email |
| タスクリスト | todo inbox |
| ダッシュボード | dashboard analytics |
| 設定 | settings preferences |
参考アプリ
- 受信トレイ： Superhuman、Spark、Twist
- タスク： Linear、Asana、Todoist
- ダッシュボード： Stripe、Notion、Figma
コメント
Markdown 対応