Mobbin - Anything

Mobbin

Mobbin is a library of real screens from real apps, web and mobile. Pull screens straight into chat as a reference, and the agent will use them as visual guidance while it builds. You don’t need a Mobbin account. Search and references work out of the box.

Add a reference

In the chat composer, click the palette icon in the toolbar and choose Reference from Mobbin. A search modal opens. Type what you’re looking for (“onboarding”, “settings”, “checkout flow”) and hit Enter.

Web vs Mobile

Use the Web / Mobile toggle at the top of the modal to switch which library you’re searching.

• Web returns desktop and responsive web app screens. Use this when you’re building a web app.
• Mobile returns iOS and Android app screens in portrait. Use this when you’re building a mobile app, or when you want a mobile-first feel on a web project.

The agent reads the aspect ratio of what you send it, so portrait mobile screens nudge it toward a mobile layout and wide web screens nudge it toward desktop. Pick the toggle that matches what you’re actually building.

Adding screens

Two ways to add screens:

• Click a single result to drop it straight into chat.
• Tick the checkbox on multiple results, then click Add to chat in the bottom toolbar to add them all at once.

The screens appear as a single Mobbin chip in your composer. Click the chip to preview the thumbnails. Type your prompt around it and send.

How to prompt with it

The agent treats Mobbin screens like any other visual reference. The same prompting habits that work for Figma and pasted screenshots work here. ✅ Good

Build my dashboard using this layout as a reference: [Mobbin chip]
Match the card style and spacing. Use my brand colors instead of theirs.

Redesign the settings page to feel like these: [Mobbin chip]

❌ Less good

Make it look like this: [Mobbin chip]

The more you tell the agent what to take from the reference (layout, spacing, density, navigation pattern) and what to ignore (colors, copy, specific features), the closer the first pass lands.

Tips

• Mix and match. Add a few screens from different apps for one component and the agent will blend the patterns.
• Use Mobbin for shape, your own brand for style. Tell the agent to keep your colors, typography, and tone.
• Building a mobile app? Stay on the Mobile toggle. Mobile screens are portrait and the agent will lean into native patterns like bottom tabs, sheets, and large touch targets.
• Building a web app? Use Web for layout density and navigation patterns that fit a desktop browser.