Curso
Herramientas

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

12

Flujos 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.

Diseño web de vanguardia y portfolios

11

Tendencias 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.

Componentes y layouts

15

Bloques 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.

Sistemas de diseño de referencia

11

Cuando 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.

Material Design 3m3.material.io ↗

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.)

IBM Carbonibm.com/design/language ↗

La biblia para producto complejo y B2B: arquitectura de información y accesibilidad de nivel senior.

Apple Human Interfacedeveloper.apple.com ↗

El manual del ecosistema Apple: patrones de interacción nativos, gestos y diseño centrado en el usuario.

Atlassian Designatlassian.design ↗

El sistema tras Jira y Trello. Ejemplo de cómo documentar personalidad de marca, voz, tono y flujos de UX.

Shopify Polarispolaris.shopify.com ↗

La referencia para e-commerce. Su enfoque en UX writing y estados vacíos es oro.

Salesforce Lightninglightningdesignsystem.com ↗

El coloso empresarial: miles de componentes, layouts densos de datos y escalabilidad masiva.

Microsoft Fluentmicrosoft.com/design/fluent ↗

El lenguaje de Windows y Office: luz, profundidad, movimiento y materiales interactivos.

The Component Gallerycomponent.gallery ↗

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?

Design Systems Surfdesignsystems.surf ↗

Explora y salta entre los componentes de todos estos grandes sistemas desde un solo lugar.

Checklist Designchecklist.design ↗

Lo que no puede faltar en cada elemento: formularios, botones, tablas, páginas. El antídoto contra diseñar solo el caso ideal.

Tokens Studiotokens.studio ↗

El estándar para trabajar tokens de verdad en Figma y exportarlos a código.

Animación, motion y microinteracciones

15

Donde 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.

Design Spellsdesignspells.com ↗

Detalles pequeños de productos reales que producen ese «qué bien hecho está esto». El mejor sitio para robar microinteracciones.

Detail Designdetail.design ↗

Un zoom a las elecciones de diseño, microcopys y estados de componentes perfectamente pulidos.

Details Matterdetailsmatter.framer.website ↗

Microinteracciones memorables capturadas de interfaces web modernas.

UIbitsuibits.co ↗

Micro-animaciones aisladas para comprender el dinamismo visual.

Dramsdrams.framer.website ↗

Catálogo de animaciones fluidas, transiciones de menús y comportamiento visual de apps.

60fps60fps.design ↗

Bucles de vídeo y gifs de movimientos de pantalla limpios y fluidos.

Motionmotion.dev ↗

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.

Riverive.app ↗

Animación interactiva de verdad: el objeto tiene estados y reacciona. Ideal para un empty state con personalidad, y pesa poquísimo.

LottieFileslottiefiles.com ↗

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.

Reactbitsreactbits.dev ↗

Librería JS/React: animaciones de texto, 3D, backgrounds animados.

Aceternity UIui.aceternity.com ↗

Componentes animados en React/Next con el código a la vista, listos para enseñárselos a la IA.

Jitterjitter.video ↗

Animar sin curva de aprendizaje: pegas tus frames de Figma y sacas la transición en cinco minutos.

Flowjamflowjam.com ↗

Vídeos de lanzamientos de producto con animaciones muy pulidas.

Animmasterlibanimmasterlib.dev ↗

Animaciones web para dar un salto de calidad a tus proyectos.

Unicorn Studiounicorn.studio ↗

Efectos WebGL sin escribir shaders: fondos que reaccionan al cursor, distorsiones, gradientes vivos.

Assets

8

Lo 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.

Psicología, principios y ética

4

Marcos teóricos y éticos para diseñar interfaces que respeten al usuario y justifiquen tus decisiones.

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.