Claude Code Finally Makes Good UI (Here's the Trick)
Sergei ChyrkovSergei ChyrkovKey takeaways
Mobbin-connected Claude can produce less-generic UI by grounding designs in real apps, websites, screens, and flows. In the examples, this yields a more structured, playful SaaS redesign and a cleaner animated presentation; the designs are adapted as inspiration, not copied.
Mobbin’s real-product references support both pre-build research into screens and user flows and redesigns grounded in comparable examples. The SaaS redesign adds clearer calls to action, richer page sections, and more distinctive styling, while the presentation restyle retains its animations and shifts to a minimal, straight-line visual style.
Video Flow
- 0100:00
Real product references as a preview
Mobbin’s library of real apps and websites serves as a source of design inspiration for three workflows: researching a new product, improving a generic website, and restyling an animated presentation. The approach uses real references to guide design choices rather than asking an AI to invent every detail.
- 0201:18
Browse real apps, websites, and flows
Mobbin offers curated website examples and individual sections, plus app screenshots, flows, and specific screens such as account deletion or checkout. These real working products provide more grounded references than imaginary layouts or static inspiration images.
- 0303:48
Connect Mobbin through MCP
Mobbin’s MCP connector lets an agent access external tools and references. Claude and Cursor can be connected by installing and authorizing Mobbin from their connector or marketplace settings; Mobbin can also be connected in Grok Bot, including through an existing Cursor connection.
- 0405:28
Research screens and flows for a crypto wallet
For the proposed Coinlio crypto wallet, Claude uses Mobbin MCP to research real products and return recommended screens, flows, best practices, and an MVP structure. The recommendations include onboarding, security, core tabs, home, activity, swaps, discovery, market, and transaction flows, with real apps as supporting examples.
- 0507:14
Generate a SaaS site without references
Claude first builds a social-media marketing SaaS website with home, about, pricing, and login pages from a short prompt, without design references or Mobbin connected. The result has familiar generic-AI traits, including purple-pink gradients, emoji in place of icons, and a centered layout.
- 0608:34
Redesign the SaaS site from Mobbin references
Claude uses Mobbin MCP to research colorful, playful SaaS examples, plan updates, and create a second website version while treating the references as inspiration rather than material to copy. The redesign adds clearer calls to action and richer home, about, pricing, and login pages; the side-by-side comparison contrasts its more distinctive structure and style with the generic first version.
- 0715:46
Restyle an animated presentation
A course presentation initially looks colorful but too generic for the creator’s taste. Claude Code uses a minimal black-and-white Mobbin reference with straight lines and subtle effects to restyle the presentation while keeping it unique; the updated version retains its animations and transitions, and the creator prefers its cleaner, stronger look.
- 0818:17
Give AI better references
Design work improves when an agent can use real products, screens, and user flows as a foundation, then adapt those patterns to the project. The approach applies to new apps, website redesigns, and existing products without copying the source designs.
Tools & Resources
Library of real app and website designs used as inspiration and research references.
- 01Library of real app and website designs used as inspiration and research references.00:00
- 02Library of real app and website designs used as inspiration and research references.01:18
- 03Library of real app and website designs used as inspiration and research references.03:48
- 04Library of real app and website designs used as inspiration and research references.05:45
- 05Library of real app and website designs used as inspiration and research references.08:46
- 06Library of real app and website designs used as inspiration and research references.16:27
AI assistant used with Mobbin references to research and create UI.
- 01AI assistant used with Mobbin references to research and create UI.00:04
- 02AI assistant used with Mobbin references to research and create UI.04:36
- 03AI assistant used with Mobbin references to research and create UI.05:33
- 04AI assistant used with Mobbin references to research and create UI.07:19
- 05AI assistant used with Mobbin references to research and create UI.08:34
AI coding environment used with Mobbin references.
Framework used for the animated presentation example.
Alternative technology named for creating animated designs.
- 01Alternative technology named for creating animated designs.00:44
Connect Mobbin from Grok’s connected-app settings.
- 01Connect Mobbin from Grok’s connected-app settings.05:05
Restyles the animated presentation using a supplied visual reference while preserving its animations.
- 01Restyles the animated presentation using a supplied visual reference while preserving its animations.16:03