Comunidad Repeat · Librería · 76 sitios
Dónde busco antes de abrir Figma
Una web hecha con IA parece hecha con IA cuando no hay nada detrás. Esto es lo que hay detrás: de dónde saco las referencias, los assets, las animaciones y los componentes —con el criterio de cuándo usar cada sitio y cuándo no.
Producto real y patrones UX/UI
12Flujos de usuario completos y pantallas en producción. Antes de entrar, ten escrito qué problema intentas resolver: si no, sales con un moodboard bonito y ninguna decisión tomada.
El rey para ver flujos reales de las mejores apps móviles y webs, pantalla a pantalla.
Cuándo no: Para buscar estética. Si entras a mirar qué bonito, sales con la misma app que todos.
Galería centrada en flujos e interfaces de productos SaaS, IA y B2B.
Flujos de usuario de productos reales en vídeo: tiempos, transiciones y qué pasa cuando algo falla.
Inspiración 100% SaaS: landings, flujos de registro y dashboards de productos modernos.
Capturas detalladas de interfaz de las aplicaciones en la nube más populares.
Catálogo visual limpio de arquitecturas de pantalla en apps móviles y web.
Gran histórico de patrones y flujos UI para interfaces móviles.
Casos de estudio de UX en formato cómic interactivo, con principios de psicología del comportamiento.
Auditorías largas de productos grandes con el razonamiento explicado. Entrenamiento de criterio, no inspiración visual.
Buscador por componente: escribes «pricing table» o «empty state» y ves cómo lo resuelven decenas de webs buenas.
Galería enfocada en capturas de la App Store de iOS.
Colores, tipografía, espaciado y componentes extraídos de las mejores webs del mundo.
Diseño web de vanguardia y portfolios
11Tendencias tipográficas, layouts rompedores y diseño editorial. Sube el listón visual —vigilando que la web siga sirviendo a un usuario que viene a hacer algo.
El top absoluto del diseño web interactivo: aquí se ve el techo de lo que se puede hacer.
Cuándo no: En un producto con usuarios que vienen a hacer algo. Casi nada de esto sobrevive a un test de usabilidad.
Landing pages filtrables por temática. Útil para estructura: qué secciones, en qué orden y dónde va la prueba social.
Páginas web impecables con estilo minimalista y tipografía cuidada.
Archivo clásico de layouts corporativos y de producto digital.
Inspiración de interfaces web oscuras.
Los portfolios de diseñadores en las principales empresas tecnológicas.
Colección de diseños inspiradores para cualquier proyecto.
Las mejores secciones hero de webs de todo el mundo.
Páginas web con estilo novedoso y sorprendente.
Catálogo de webs muy bien acabadas que sirven de inspiración.
Los premios de diseño web: hacia dónde va la técnica, e ideas de transición y scroll.
Cuándo no: Cuando el cliente necesita vender. Muchas están premiadas por el gremio, no por su conversión.
Componentes y layouts
15Bloques de construcción aislados y secciones concretas —muchos con código listo para pegárselo a la IA como referencia de partida en vez de dejar que se lo invente.
Biblioteca masiva de elementos UI en HTML y CSS/Tailwind, listos para copiar y pegar.
Los mejores diseños de layouts con la estructura de rejilla estilo «Bento Grid».
Monográfico dedicado a recopilar los pies de página mejor diseñados de la red.
Referencia para menús de navegación, cabeceras y barras laterales.
Layouts y rejillas limpias para plantear la base de cualquier interfaz.
Componentes con código React/Tailwind listo, pensado para enseñárselo a la IA.
Secciones de UI y assets listos para clonar directamente en Figma.
Repositorio premium de componentes, guías y recursos interactivos para Webflow y Figma.
Componentes, animaciones e interacciones como inspiración para crear producto.
Webs hechas con IA: te descargas el prompt y los assets para ver cómo se hicieron.
Componentes e ideas novedosas para tus diseños.
Código de componentes originales para tus proyectos.
Importa componentes, animaciones y efectos a tus proyectos.
Ajusta efectos y copia el código o el prompt para tus proyectos.
Otra librería con componentes listos para copiar.
Sistemas de diseño de referencia
11Cuando dudes de cómo debe comportarse un componente, la respuesta ya está escrita. Estos sistemas llevan años resolviendo los casos raros que se te van a olvidar: el estado deshabilitado, el foco de teclado, el texto que se desborda.
El sistema más documentado del mundo. Su doc de estados, elevación, jerarquía y movimiento es la escuela de todo diseñador. (Material 2 en m2.material.io.)
La biblia para producto complejo y B2B: arquitectura de información y accesibilidad de nivel senior.
El manual del ecosistema Apple: patrones de interacción nativos, gestos y diseño centrado en el usuario.
El sistema tras Jira y Trello. Ejemplo de cómo documentar personalidad de marca, voz, tono y flujos de UX.
La referencia para e-commerce. Su enfoque en UX writing y estados vacíos es oro.
El coloso empresarial: miles de componentes, layouts densos de datos y escalabilidad masiva.
El lenguaje de Windows y Office: luz, profundidad, movimiento y materiales interactivos.
Un componente y cómo lo resuelve cada design system del mundo, uno al lado del otro. ¿Es un modal, un drawer o un popover?
Explora y salta entre los componentes de todos estos grandes sistemas desde un solo lugar.
Lo que no puede faltar en cada elemento: formularios, botones, tablas, páginas. El antídoto contra diseñar solo el caso ideal.
El estándar para trabajar tokens de verdad en Figma y exportarlos a código.
Animación, motion y microinteracciones
15Donde una web deja de parecer una plantilla —y donde más fácil es pasarse. La animación que no responde a una acción del usuario suele ser decoración, y la decoración se paga en tiempo de carga.
Detalles pequeños de productos reales que producen ese «qué bien hecho está esto». El mejor sitio para robar microinteracciones.
Un zoom a las elecciones de diseño, microcopys y estados de componentes perfectamente pulidos.
Microinteracciones memorables capturadas de interfaces web modernas.
Micro-animaciones aisladas para comprender el dinamismo visual.
Catálogo de animaciones fluidas, transiciones de menús y comportamiento visual de apps.
Bucles de vídeo y gifs de movimientos de pantalla limpios y fluidos.
La librería de animación estándar para web hoy. Su doc te da el vocabulario (spring, easing, stagger) para pedírselo a la IA.
Animación interactiva de verdad: el objeto tiene estados y reacciona. Ideal para un empty state con personalidad, y pesa poquísimo.
Animaciones ligeras listas para meter en producto: loadings, éxitos y estados vacíos.
Cuándo no: Las gratuitas más descargadas se reconocen a un kilómetro. Si la has visto en otra app, no la uses.
Librería JS/React: animaciones de texto, 3D, backgrounds animados.
Componentes animados en React/Next con el código a la vista, listos para enseñárselos a la IA.
Animar sin curva de aprendizaje: pegas tus frames de Figma y sacas la transición en cinco minutos.
Vídeos de lanzamientos de producto con animaciones muy pulidas.
Animaciones web para dar un salto de calidad a tus proyectos.
Efectos WebGL sin escribir shaders: fondos que reaccionan al cursor, distorsiones, gradientes vivos.
Assets
8Lo que más delata a una web hecha con IA no es el layout: son los assets. Iconos de tres estilos, fotos de banco genéricas, logos mal recortados. Prepararlos antes del primer prompt es la mitad del trabajo.
Fotografía libre de buena calidad. Filtra por orientación y color para que la paleta no pelee con tu interfaz.
Cuándo no: Las diez primeras de cada búsqueda están en medio internet. Baja tres pantallas antes de elegir.
La alternativa a Unsplash, y con vídeo. Cuando una búsqueda no da nada en uno, suele darlo en el otro.
Buscador que agrega más de cien librerías de iconos. Cualquier icono en segundos, con su familia.
Cuándo no: Para picotear de varias familias. Elige una y quédate en ella; mezclar grosores es el error de icono más visible.
Familia de iconos coherente y abierta, ya integrada en casi todas las herramientas de IA que generan interfaz.
Logos, colores y tipografías oficiales de marcas reales, en vez de recortar un PNG de Google.
3D para web sin saber 3D. Un objeto que reacciona al cursor levanta una landing entera.
Cuándo no: Vigila el peso. Un 3D mal exportado se come el rendimiento móvil y ahí sí pierdes conversión.
Imagen generada cuando ninguna foto encaja: texturas, fondos y dirección de arte abstracta.
Cuándo no: Para personas y para manos. Se nota, y cuando se nota se lleva la credibilidad de toda la página.
Sube la resolución de una imagen y le reconstruye detalle. Salva assets antiguos que no dan la talla en pantallas grandes.
Psicología, principios y ética
4Marcos teóricos y éticos para diseñar interfaces que respeten al usuario y justifiquen tus decisiones.
Colección de los principios de diseño de productos e instituciones de todo el mundo (Apple, Google, Gobierno de UK…).
Índice interactivo de los sesgos cognitivos del cerebro humano: cómo procesamos la información.
Guía para diseñar productos éticos que prioricen el bienestar del usuario y eviten patrones oscuros.
Los principios de psicología del comportamiento aplicados a UX, en formato cómic interactivo.
Las herramientas no son el criterio.
Esta lista la tiene cualquiera en veinte minutos. Lo que no se copia es saber qué buscar, qué descartar y por qué. Eso es lo que separa una web que parece hecha con IA de una que no, y es lo que enseño en la comunidad.
Ver la comunidad →Selección del Toolkit de la Comunidad Repeat. Internet se mueve: si encuentras un enlace roto o un sitio que debería estar aquí, escríbeme y lo actualizo.