Mis fuentes de inspiración en diseño UI: 6 sitios de referencia
De Mobbin a Checklist Design, comparto los 6 sitios de referencia de diseño que más uso en mi día a día como diseñador de producto
Cuando haces desarrollo independiente o diseño de producto, lo más difícil no es escribir código, sino no saber cómo debería verse la interfaz.
Abres Figma, te quedas mirando el lienzo en blanco y lo único que piensas es "¿cómo lo hacían en esa otra app?" — seguro que te ha pasado.
En lugar de imaginar desde cero, es mejor ver directamente cómo lo hacen los productos reales. A continuación te presento los 6 sitios de referencia de diseño que más uso en mi día a día. Cubren todas las dimensiones: desde móvil hasta web, desde capturas de pantalla hasta flujos de usuario, desde listas de verificación de diseño hasta creación de sitios con IA.
Mobbin es, sin duda, el sitio de referencia de diseño que más utilizo.
Su valor principal es desglosar la UI de productos reales en una biblioteca de patrones de diseño con búsqueda. Puedes explorar desde cuatro dimensiones: por categoría de app (IA, salud, restaurantes, etc.), por patrones de pantalla (Dashboard, filtros y ordenamiento, notificaciones, etc.), por elementos de UI (Text Field, Bottom Sheet, Tab Bar, etc.) y por flujos de usuario (Onboarding, inicio de sesión, pagos, etc.).
Cubre las plataformas iOS y Web. La versión web además permite filtrar por estilo: Dark, Minimal, Colorful, Motion, entre otros, lo cual es muy útil para encontrar inspiración para landing pages.
Ideal para: Cuando diseñas una funcionalidad y quieres ver "cómo lo hacen los demás", por ejemplo "¿cómo suele verse una página de suscripción?" o "¿cómo se diseña un flujo de Onboarding?".
Gratis vs. de pago: Los usuarios gratuitos pueden explorar las 4 apps/sitios web más recientes. La versión Pro desbloquea todo el contenido.
Si Mobbin cubre productos a nivel global, UI Notes es la enciclopedia del diseño de productos del mercado chino.
396 apps, 152,592 capturas de pantalla — la cantidad de datos habla por sí sola. Además, solo incluye "diseños en producción", sin borradores conceptuales. Cada captura que ves es una interfaz que realmente fue publicada.
Las apps recopiladas son las que se usan a diario en China: Doubao, DeepSeek, Kouzi, Hongguo Duanju, Yuanbao, TapTap… Se pueden filtrar por empresa (ByteDance, Tencent, Alibaba, etc.) e industria. Cada app incluye el número de versión y la fecha de actualización, lo que permite observar la evolución del producto.
Ideal para: Si trabajas en productos para el mercado chino y quieres ver capturas completas de la competencia y las tendencias de diseño.
Gratis vs. de pago: La navegación básica es gratuita. La membresía desbloquea más funcionalidades.
Este sitio tiene un enfoque completamente diferente: no te muestra diseños de otros, sino que te indica qué debes tener en cuenta al diseñar algo.
56 listas organizadas en cinco categorías:
- Website (13): Página de Login, Billing, Blog Post, carrito de compras, FAQ, etc.
- Components (24): Button, Modal, Input Field, Toast, Carousel, etc.
- Flows (13): Agregar al carrito, cancelar suscripción, restablecer contraseña, eliminar cuenta, etc.
- Topics (3): Diseño responsivo, UX writing, modo oscuro
- Brand (3): Logo, Typography, Tone of Voice
Cada lista contiene un checklist de mejores prácticas, como "la página de Login debe tener un botón para mostrar/ocultar la contraseña" o "los Modals deben poder cerrarse con ESC". También incluye un plugin de Figma que permite marcar las verificaciones directamente en la herramienta de diseño.
Ideal para: Revisión posterior al diseño, o para establecer estándares al comenzar a trabajar en un componente. Especialmente útil para principiantes que quieren desarrollar conciencia sobre normas de diseño.
Gratis vs. de pago: Completamente gratis.
Mientras otros sitios te muestran capturas individuales, Page Flows te muestra flujos de usuario completos.
Su esencia son las grabaciones de pantalla: puedes ver el proceso completo de un usuario real, desde que abre la app hasta que completa una acción, con anotaciones paso a paso. Por ejemplo, "cómo guía Airbnb al usuario durante la búsqueda" o "cómo es el Onboarding de Dropbox".
Cubre cuatro plataformas: iOS, Android, Web y Emails, y lo usan más de 100,000 diseñadores. Permite filtrar por categoría, industria y patrones de UX.
Ideal para: Cuando diseñas flujos de usuario (Onboarding, registro, pagos, etc.) y quieres ver cómo lo hacen los productos líderes.
Gratis vs. de pago: Prueba gratuita de 3 días, después $8.25/mes (pago anual) o $13/mes (pago trimestral).
Refero es un descubrimiento reciente que me encantó. Sus dimensiones de clasificación son las más detalladas de todos los sitios.
Seis dimensiones completas:
- Page Types (45 tipos): Dashboard, Landing, Paywall, 404, Blog, Profile, etc.
- Flows (44 tipos): Registro, inicio de sesión, suscripción, agregar al carrito, chat, edición, eliminar cuenta, etc.
- UX Patterns (87 tipos): Testimonials, Filter & Sorting, Dark Mode, Shopping, etc.
- UI Elements (69 tipos): Modal, Cards, Table, Tabs, Skeleton, Chart, etc.
- Sites (por industria): AI Tool, SaaS, Finance, Education, Food, etc.
- Fonts: Filtra por tipografía para ver productos que usan una fuente específica
Incluye productos de referencia como Stripe, Calendly, n8n, Shopify y Coinbase.
Lo que más me sorprendió es que ofrece una integración MCP: permite que los agentes de IA accedan directamente a la biblioteca de diseño de Refero, para que al crear sitios con IA se tomen como referencia diseños de productos reales, en lugar de generar interfaces con "aspecto genérico de IA".
Ideal para: Investigación de diseño de productos web, especialmente productos SaaS.
Gratis vs. de pago: Prueba gratuita de 7 días, después suscripción de pago.
El último sitio es un poco diferente: Lovable es en sí una herramienta de creación de sitios web con IA, pero su página Discover es una excelente fuente de inspiración de diseño.
Todas las aplicaciones que se muestran aquí fueron creadas mediante conversaciones con IA, lo que te permite apreciar de forma directa "hasta dónde puede llegar la creación de sitios con IA actualmente". Desde CRM, marketing de eventos y reproductores de música hasta bibliotecas de iconos, la variedad es amplia.
Cada aplicación tiene datos de favoritos (Iconstack 1221 favorites, Attendflow 813 favorites), lo que permite ver el nivel de aceptación de la comunidad. Se puede navegar por categorías como Featured, Builders, Personal, Marketing, Company, entre otras.
Ideal para: Ver los resultados reales de la creación de sitios con IA, o buscar inspiración para prototipos rápidos. También es útil para mostrar casos de ejemplo al convencer a tu equipo de probar la creación de sitios con IA.
Gratis vs. de pago: Navegación gratuita. Lovable ofrece créditos gratuitos para crear sitios; las funciones avanzadas son de pago.
Resumen comparativo
| Sitio | Enfoque | Volumen de contenido | Gratis/de pago | Caso de uso ideal |
|---|---|---|---|---|
| Mobbin | Patrones de diseño móvil + web | Enorme cantidad de apps y capturas | Freemium | Buscar patrones de diseño de una funcionalidad |
| UI Notes | Capturas de UI de productos chinos | 396 apps / 150K+ capturas | Freemium | Análisis de competencia en el mercado chino |
| Checklist Design | Listas de mejores prácticas de diseño | 56 listas | Completamente gratis | Revisión de diseño y establecimiento de estándares |
| Page Flows | Grabaciones de flujos de usuario | iOS/Android/Web/Email | De pago (desde $8.25/mes) | Diseño de flujos de usuario |
| Refero | Investigación de diseño web multidimensional | 45+ tipos de página / 87+ patrones UX | Freemium | Investigación de diseño de productos SaaS |
| Lovable Discover | Exhibición de apps construidas con IA | Contribuciones de la comunidad | Navegación gratuita | Ver resultados de creación de sitios con IA |
Estos 6 sitios cubren prácticamente todas mis necesidades de referencia en el diseño de productos. Guárdalos en favoritos y, la próxima vez que te quedes mirando un lienzo en blanco, ábrelos primero.