Índice de inspiración de diseño
Un mapa de recuperación: "Necesito inspiración para X, así que ve a la fuente Y". Es un índice de galerías y registros públicos, no una autoridad de diseño; una vez que tengas referencias, construye con el skill ui y verifica el resultado con anti-slop. Los detalles por sitio (acceso, formato, filtros, consejos de recuperación) están en references/galleries.md.
Nada de esto es obligatorio. Cada fuente es un sitio web público; los dos que tienen servidores MCP (Mobbin, Refero) son opcionales y solo vale la pena conectarlos si los usas con frecuencia.
Cuando necesites X, ve a Y
| Necesitas | Ve a | Notas |
|---|---|---|
| Un sitio web completo para admirar (entrada amplia de gusto) | collected.li (aleatorio), siteofsites.co (filtrable), unmatchedstyle.com (editorial), recent.design (diario) | collected muestra 8 sitios aleatorios; siteofsites filtra por plataforma; unmatchedstyle tiene artículos de tendencias |
| Un héroe o diseño de página completa | landing.love (movimiento), craftwork.design/inspiration/websites (amplio) | landing.love graba video de página completa |
| Una landing page en movimiento | landing.love | filtra por las colecciones GSAP, WebGL o ThreeJS |
| Un sitio de marketing SaaS o un tipo de página SaaS | saaspo.com | filtra por tipo de página (precios, características) e industria |
| Una página de precios | saaspo.com (tipo de página) y cta.gallery (el bloque CTA) | |
| Una barra de navegación, encabezado o mega menú | navbar.gallery | filtra por fijo, mega menú, barra lateral, pantalla completa |
| Un llamado a la acción, bloque de registro o boletín | cta.gallery | filtra por industria y por botón, formulario, boletín, modal |
| Una idea de movimiento o microinteracción | 60fps.design (el movimiento), designspells.com (la idea y por qué) | designspells explica un detalle encantador, móvil y escritorio |
| Un detalle encantador, huevo de pascua o toque "mágico" | designspells.com | etiquetas: huevo de pascua, confeti, transición, 404 |
| UI de producto real: tipos de página, flujos, patrones UX (web) | refero.design | filtra por tipo de página, flujo, patrón, elemento o fuente; tiene un servidor MCP opcional |
| Imágenes OG, capturas de App Store, iconos de app | recent.design | pestañas dedicadas que pocos otros tienen |
| Un logotipo, identidad de marca o cambio de marca | rebrand.gallery | la única fuente de branding aquí |
| Cómo construir o nombrar un componente de UI | component.gallery | referencia cruzada con alias de nombre (Acordeón = Collapse = Disclosure) |
| Código de componente para insertar (React) | shadcn/ui, mapcn (mapas) | empieza con lo que ya usa el proyecto |
| Bloques de aplicación preconstruidos (formularios, autenticación, barras laterales, tablas) | blocks.so | gratis, copiar y pegar |
| Bloques de marketing y landing preconstruidos | tailark.com (curado), shadcnblocks.com (grande, freemium), shadcnspace.com | freemium |
| Un widget compuesto complejo (Gantt, Kanban, editor, tabla) | kibo-ui.com | gratis, registro CLI de shadcn |
| Código de componente animado o microinteracción | smoothui.dev, ui-layouts.com | basado en Motion o GSAP |
| Generación de temas para shadcn | shadcnstudio.com | nivel comunitario gratuito |
| Un aspecto retro o pixel art | 8bitcn.com | reestilo de shadcn, nicho por diseño |
| Componentes accesibles en React Aria (no Radix) | intentui.com | no se mezcla bien con shadcn basado en Radix |
| Un icono o SVG | lucide.dev (predeterminado), react-icons, reicon.dev, hugeicons.com | Lucide es el predeterminado de shadcn, estilo trazo; react-icons agrupa muchos conjuntos incluyendo logotipos de marca; Reicon tiene contorno y relleno; Hugeicons es grande y freemium |
| Flujos y pantallas de aplicación móvil | Mobbin | requiere inicio de sesión; usa su servidor MCP si lo tienes, si no, el sitio |
| El sistema de diseño de una marca famosa por escrito | el repo awesome-design-md (github.com/VoltAgent/awesome-design-md) | lee dos o tres antes de definir un lenguaje de diseño |
| Un principio UX nombrado para un hallazgo de revisión | lawsofux.com | cita la ley por nombre: Fitts, Hick, Jakob, Peak-End |
| Búsqueda de componentes o variantes de UI generadas | 21st.dev | busca antes de escribir UI novedosa a mano |
Las bibliotecas de componentes gratuitas que tienen su propio registro vale la pena verificarlas antes de escribir un bloque a mano. Adapta cualquier cosa que importes a los tokens y reglas de accesibilidad del proyecto.
Ingenieros de diseño para estudiar
Personas de alta señal cuyos sitios y trabajo de código abierto vale la pena estudiar y seguir.
| Persona | Sitio | Conocido por |
|---|---|---|
| Emil Kowalski | emilkowal.ski | Sonner, Vaul; artesanía en animación web |
| shadcn | shadcn.com | shadcn/ui; componentes copiables y registros |
| Paco Coursey | paco.me | cmdk, next-themes; UI minimalista centrada en teclado |
| Rauno Freiberg | rauno.me | invariantes de interfaz y el por qué detrás del pulido |
| Raphael Salaja | raphaelsalaja.com | portafolio rico en movimiento, artesanía de interacción lúdica |
| Gavin Nelson | nelson.co | diseño de producto e iconos |
| floguo | floguo.com | microinteracciones expresivas, personalidad |
| Syed Subhan | syedsubhan.in | microtransiciones; creó Amicro (amicro.vercel.app), una colección de patrones de microtransición reutilizables |
Mobbin y Refero: servidores MCP opcionales
Ambos requieren inicio de sesión y se consultan mejor a través de un servidor MCP si tienes uno conectado. Mobbin expone búsqueda de pantallas, flujos y secciones; el servidor de Refero está en https://api.refero.design/mcp (docs: https://doc.refero.design/mcp/getting-started) y devuelve pantallas de producto reales. Si no tienes ninguno, navega por los sitios a mano. No hagas scraping.
Hoja de acceso rápido
Verifica antes de confiar; los sitios cambian.
- Abiertos y gratuitos, sin inicio de sesión: landing.love, navbar.gallery, cta.gallery, 60fps.design, collected.li, siteofsites.co, unmatchedstyle.com, recent.design, designspells.com, lucide.dev, reicon.dev, component.gallery, saaspo.com.
- Freemium (navega gratis, paga por activos o la biblioteca completa): craftwork.design, rebrand.gallery, hugeicons.com, refero.design.
- Inicio de sesión o MCP: Mobbin, refero.design.
Varios de estos (saaspo.com, component.gallery, landing.love, designspells.com) bloquean las recuperaciones automatizadas con un 403 o 429 pero se abren bien en un navegador normal. godly.website ahora redirige a recent.design. Para extraer de un sitio bloqueado mediante programación, maneja un navegador real (por ejemplo con un MCP de Playwright, si está instalado) en lugar de una recuperación HTTP simple.
Cómo extender este índice
Agrega una nueva galería a references/galleries.md con los mismos campos (nombre, URL, categoría, mejor para, acceso, formato, consejo de recuperación), luego agrega una fila de enrutamiento a la tabla de arriba.