Sitios de referencia para desarrollo y diseño: el arsenal completo

Cuando construimos producto, casi nunca partimos de cero. Estudiamos cómo lo resolvieron los mejores: cómo arma Stripe su checkout, cómo ordena Linear un dashboard, cómo onboardea una app de banca a un usuario nuevo. Tener a la mano las galerías correctas cambia por completo la fase de exploración, y según lo que tengas enfrente (una app móvil, un dashboard SaaS, un sitio de marca o un componente que necesitas codear hoy), unas te van a servir mejor que otras.

Esta es la selección que uso y recomiendo, organizada por para qué sirve cada una. Al final incluyo una tabla comparativa para que elijas rápido.

Apps móviles

Si trabajas en producto móvil, aquí está el oro: capturas reales de apps en producción, organizadas por flujo y por patrón.

  • Mobbin. El estándar. Más de 400.000 capturas organizadas por patrones, flujos y elementos de interfaz. El plan gratuito es limitado, lo bueno está en el de pago.
  • Screenlane. Pantallas y colecciones de UI (apps móviles, web apps y marketing pages). Su fuerza está en agrupar por patrón concreto: pricing, onboarding, filtros, timelines.
  • Pttrns. Una de las galerías clásicas de patrones de UI móvil. Veterana y muy completa.
  • UXArchive. Colección extensa de tendencias de UX móvil sacadas de las apps más populares. Buena para navegación, interacción y microcopy.
  • Appshots. Su diferencial es que trabaja con video en lugar de capturas estáticas. Esto importa para entender micro-interacciones, transiciones y el timing de un onboarding o un checkout. Hay cosas que una captura no te cuenta: dónde se pausa el usuario, qué se anima y cómo responde la interfaz.

Web apps y SaaS

Para dashboards, paneles de administración y producto SaaS, estas cubren mejor ese terreno.

  • Refero. Excelente para research de interfaces web. Más de 30.000 pantallas organizadas en tres categorías (páginas de aplicación, patrones UX y elementos UI), con un buscador potente: puedes escribir "Notion" o "Airbnb login" y te trae las capturas al instante. Ideal para benchmarking en un design review.
  • SaaS Landing Page. Específica para interfaces y landings de productos SaaS. Si tu proyecto es B2B, te ahorra mucho ruido.
  • Collect UI. No es la más bonita, pero tiene más de 14.000 diseños categorizados. De las de cantidad sobre presentación: buen último recurso.

Sitios web y landing pages

Cuando el entregable es un sitio de marca o una landing, aquí está la inspiración.

  • Site Inspire. Filtra por estilo (minimalista, retro, colorido, blanco y negro) y por rubro (hoteles, agencias, e-commerce, música). Con cada web que te interese te sugiere otras similares.
  • Land-book. Directorio limpio y muy bien organizado de sitios bien diseñados. Búsqueda cómoda para encontrar dirección estética rápido.
  • Lapa Ninja. La referencia para landing pages, con más de 7.300 ejemplos actualizados.
  • Godly. Inspiración web de gama alta, muy curada. Para cuando buscas el detalle fino y el motion ambicioso.
  • Awwwards. El organismo que premia lo mejor del diseño web innovador. Para empujar límites.
  • Siiimple (minimalismo bien ejecutado) y Brutalist Websites (para romper con el diseño seguro) cuando necesitas una dirección estética muy específica.

Desarrollo: componentes para copiar y pegar

Aquí cruzamos de la inspiración a la implementación. Estos no solo te enseñan cómo se ve algo: te dan el código.

  • Landingfolio. Más de 800 componentes de landing listos para copiar y pegar en Tailwind, Webflow y Figma. Inspiración y código en el mismo lugar, perfecto para acelerar una landing.
  • Tailwind UI (de pago) y galerías como Awesome Tailwind CSS en GitHub para componentes y plantillas con tu stack de utilidades.
  • CodePen. Para snippets de frontend, animaciones y experimentos. Buscas el patrón, ves el código en vivo, lo adaptas.

Flujos de usuario (el journey completo, no la pantalla suelta)

  • Page Flows. Librería enorme de flujos dinámicos en video (no capturas estáticas) de las mejores empresas web y móviles. Insustituible para entender el journey real de onboarding, checkout o cancelación.
  • Nicely Done. Cada recurso está contextualizado dentro de un flujo y un producto concreto, así lo evalúas en su uso real. Excelente para estudiar empty states, modales de confirmación o sistemas de notificaciones.

Para el mercado latinoamericano

  • Capturando.la. Un recurso único: se centra en apps de Latinoamérica, con más de 4.500 capturas y 150 flujos. Si diseñas para este mercado (clientes en México y la región), ver cómo lo resuelven productos locales vale más que mirar siempre referencias de Silicon Valley.

Galerías y herramientas con IA

  • InspoAI. Galería con búsqueda en lenguaje natural, moodboards y escáneres de marca. Describes lo que buscas en una frase en lugar de navegar a mano.
  • Relume. Genera sitemaps y wireframes completos a partir de un prompt de texto. Útil en las primeras fases: en lugar de empezar de cero, generas una estructura base e iteras sobre ella.

Tabla comparativa

Sitio Enfoque principal Tipo Modelo Link
Mobbin Patrones y flujos de apps Móvil + Web Freemium mobbin.com
Refero Research de UI/UX, búsqueda potente Web + iOS Freemium refero.design
Screenlane Pantallas por patrón Móvil + Web Freemium screenlane.com
Pttrns Patrones de UI móvil Móvil Freemium pttrns.com
UXArchive Tendencias de UX móvil Móvil Gratis uxarchive.com
Appshots Micro-interacciones en video Móvil Freemium appshots.design
SaaS Landing Page Landings e interfaces SaaS Web/SaaS Gratis saaslandingpage.com
Collect UI Volumen de diseños categorizados Web/UI Gratis collectui.com
Site Inspire Sitios por estilo y rubro Web Freemium siteinspire.com
Land-book Directorio de sitios curados Web Freemium land-book.com
Lapa Ninja Landing pages Web Gratis lapa.ninja
Godly Inspiración web premium Web Gratis godly.website
Awwwards Diseño web innovador premiado Web Freemium awwwards.com
Landingfolio Componentes copy+paste (Tailwind/Webflow) Desarrollo Freemium landingfolio.com
CodePen Snippets de frontend en vivo Desarrollo Freemium codepen.io
Page Flows Flujos de usuario en video Móvil + Web Pago pageflows.com
Nicely Done Flujos contextualizados Móvil + Web Freemium nicelydone.club
Capturando.la Apps de Latinoamérica Móvil + Web Gratis capturando.la
InspoAI Búsqueda con IA + moodboards Móvil + Web Freemium inspoai.io
Relume Wireframes y sitemaps con IA Web Freemium relume.io

Cómo combinarlas según el proyecto

Ninguna galería lo cubre todo. La estrategia que funciona es combinar dos o tres según el tipo de producto:

  • Producto móvil: Mobbin + Screenlane (y Appshots para entender el motion).
  • Dashboards y web apps: Refero + SaaS Landing Page.
  • Sitios de marca para clientes: Site Inspire + Land-book + Awwwards.
  • De la inspiración al código: Landingfolio + CodePen.
  • Para el mercado local: Capturando.la, siempre.

La diferencia entre un diseño que se siente genérico y uno que se siente intencional rara vez está en la inspiración que encontraste, sino en cuánto la estudiaste antes de empezar a construir. Estas galerías no son para copiar: son para entender por qué las mejores decisiones de diseño y desarrollo funcionan, y traer ese criterio a tu propio producto.

Victor Yoalli

This is me.