Turn Claude Code Into a Design Genius — Mobbin MCP
- Video: Kyle Skelly (66K views, May 28, 2026)
- Topic: Using Mobbin MCP with Claude Code to generate production-quality UI
The Problem
Ask Claude Code for a landing page and you get:
Inter for the headline, Inter for the body, a purple-to-violet gradient on a white background, three cards in a row with rounded corners and a soft shadow, and a hero button that says “Get Started.”
Generic. It has no design memory.
The Solution — Mobbin MCP
Mobbin is a database of 1M+ real app screenshots from top apps (iOS, Android, web). Their MCP server lets Claude Code query real UI examples as design reference.
Setup
claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcpOr in Hermes Agent config (~/.hermes/config.yaml):
mcp_servers:
mobbin:
url: https://api.mobbin.com/mcpThen when building a UI, Claude can call Mobbin to find real-world patterns — login screens, onboarding flows, pricing tables — and remix them instead of hallucinating generic layouts.
What It Changes
| Before (no MCP) | After (with Mobbin MCP) |
|---|---|
| Generic Inter font | Real app typography patterns |
| Purple gradient hero | Actual UI patterns from top apps |
| 3 cards with soft shadow | Informed layout decisions |
| ”Get Started” button | Copy patterns that convert |