How to Use the Mobbin MCP with AI (Full Tutorial)

Join TDP Community as a Founding Member NOW, Waitlist Open! ⭐ https://designproject.io/community/?u... Design to Code Workshop for Companies 🚀 Apply using this link → https://tally.so/r/WOPNPP?utm_source=... • More information on our workshops here → https://designproject.io/ai-design-sy... Pulling design inspo used to take hours. You open ten tabs. You search across Mobbin, Dribbble, every product you remember did this well. You screenshot everything. You go back and forth, trying to figure out the right search. And the moment the direction shifts, you start over. Now I just prompt the Mobbin MCP directly inside Claude Code. It pulls inspo based on the context of the product I'm working on, sends back examples with links I can click through, and gets me to a direction in one prompt. In this week's video, I walk through the full workflow. I install the Mobbin MCP, give it the page I want to redesign, and ask it to find inspo with linked examples. I evaluate five variants side by side, pick a direction, then build a lo-fi HTML wireframe right in the repo. The inspo step is not lost at all, the Mobbin MCP just pulls it forward so I can spend my time on the decisions that matter. What You'll Learn: • How to install the Mobbin MCP and connect it to Claude Code • How to write a prompt that gives the MCP the right product context (screenshot + page description + the specific design problem) • How to evaluate multiple inspo variants side by side and narrow to a direction • How to push back on the AI when it pulls weak suggestions or keeps showing you the same product • How to go from chosen direction to a lo-fi HTML wireframe inside your repo • Why the inspo phase still matters, even when AI is doing the searching Resources: • Mobbin: https://mobbin.com/ • Mobbin MCP: https://mobbin.com/mcp • Claude Code: https://www.claude.com/product/claude... Timestamps 0:00 Hours of inspo work, gone in one prompt 0:28 Why I'm not skipping the inspo step 0:56 Installing the Mobbin MCP in Claude Code 1:52 Prompting Mobbin with full project context 4:04 Mobbin's clarifying questions 6:09 Reviewing the first round of directions 9:09 Picking a direction: service menu grid 10:42 From inspo to wireframe If this is your first time using Claude Code, I'd recommend starting with my setup guide first so you can follow along:    • Claude Code + Cursor + GitHub: The New AI ...   Watch more like this: • I've Been a Claude Code Lover for a Year. Then I Tried Codex    • I've Been a Claude Code Lover for a Year. ...   • Don't Build a Design System from Scratch (Claude Code + Figma + ShadCn):    • Design Systems for Beginners (Claude Code ...   • Design Systems for Beginners (Claude Code + Figma)Figma    • Design Systems for Beginners (Claude Code ...   • I Used Claude Design on a Real Product Feature. My Honest Review:    • I Used Claude Design on a Real Product Fea...   • Is UI Design Dead?    • Is UI Design Dead?   • Stop using V0 and Lovable to prototype, use Claude Code instead:    • Stop using V0 and Lovable to prototype, us...   • I Built My Entire Design System in 4 Hours With AI. Full Tutorial (Claude + Cursor + Figma):    • I Built My Entire Design System in 4 Hours...   • Stop Wasting Dev Time on Frontend: Figma to Code in 8 Minutes:    • Stop Wasting Dev Time on Frontend: Figma t...   • Figma to Component Library in 2 days | Claude Code + Storybook Tutorial:    • How I Build a Component Library in 2 days ...   🔔 Subscribe for weekly insights about AI, design, and product here: @thedesignproject CONNECT WITH ME: 🌐 https://designproject.io/ 💼 LinkedIn: /diannealter About The Design Project: We help B2B SaaS product teams ship faster by combining AI tools with strategic design expertise. We've worked with 50+ teams (including companies acquired by Slack, Nvidia, and MrBeast) to cut product cycles in half using battle-tested AI workflows and design systems.