Claude Code Finally Makes Good UI (Here's the Trick)

🎁 Try Mobbin for free and get –20% on Pro plan — http://mobbin.com/chyrkov

👉 Try Claude Code — https://claude.ai/referral/-bAJSj_e7g
💌 Join my newsletter: https://sergeichyrkov.com/newsletter
🎙️ Want to learn more? Book 1:1 session: https://sergeichyrkov.com/learn
AI-generated designs often look generic: purple gradients, emojis instead of icons, centered layouts. In this video, I show how to fix that by connecting Mobbin’s library of real app and website designs to Claude and Cursor through MCP, so your AI works from real references instead of inventing everything from scratch.

You’ll learn three practical workflows:
- Research before you build. Use the Mobbin MCP to analyze similar products, find the screens you need, and understand user flows, with a crypto wallet app as the example.
- Redesign a generic website. See a side-by-side comparison of a plain AI-generated SaaS site (version 1) and a redesign based on real examples from Mobbin (version 2), covering the home, about, pricing, and login pages.
- Restyle animated designs. Use Mobbin for style inspiration and apply it to an animated presentation built with Claude and Remotion.

I also walk through how to set up the Mobbin MCP connector in Claude, Cursor, and Grok Bot, and explain how to use references as inspiration without copying anyone’s work.

Key takeaway: AI doesn’t always need more freedom. Sometimes it needs better references.

👉 Try Claude Code — https://claude.ai/referral/-bAJSj_e7g
💌 Join my newsletter: https://sergeichyrkov.com/newsletter
🎙️ Want to learn more? Book 1:1 session: https://sergeichyrkov.com/learn

______________________________
Check out my links ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — https://twitter.com/sergeichyrkov
▸ Instagram — https://instagram.com/chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — https://linkedin.com/in/sergeichyrkov
______________________________
Useful stuff:
👉 Get -20% on Mobbin Pro plan — http://mobbin.com/chyrkov
👉 Build websites in minutes with Framer — https://framer.link/chyrkov
👉 Best music for your videos (get 30 days for free) — https://www.epidemicsound.com/referral/am81qn
______________________________
📝 Chapters:
0:00 — Introduction
1:21 — What Mobbin is and why it beats Pinterest
3:49 — Connecting Mobbin MCP to Claude, Cursor, and Grok Bot
5:30 — Example 1: Researching screens and flows for a crypto wallet app
6:24 - Results
7:18 — Example 2: Generating a generic SaaS website without references
8:36 — Redesigning the SaaS site with Mobbin: version 1 vs version 2
11:49 - Comparing both version (Before and After connecting Mobbin)
15:44 — Example 3: Restyling an animated Remotion presentation
17:10 — Results
18:19 — Key takeaway: AI needs better references, not more freedom

______________________________
😍 Monetarily Supporting The Channel:
If you like what I do and wish to support the channel monetarily, you can donate me with some coffee here: https://www.buymeacoffee.com/sergeichyrkov
This is appreciated and helps the channel, but please don't feel that it is necessary to enjoy my content.
______________________________
📃 Disclaimer:
Some of the links in my video descriptions are affiliate links, which means at no extra cost to you, I will make a small commission if you click them and make a qualifying purchase.

______________________________
#mobbin #ai #claude #cursor #webdesign #claudecode