Los 100 mejores sitios de diseño para entrenar el criterio estético
100 sitios de inspiración de diseño organizados en 9 escenarios de trabajo — premios y festivales, motion design, render 3D, imagen cinematográfica, UI, webs, interacción front-end, tipografía y color, y recopilación de referencias. De cada uno se explica qué hay dentro y cuándo conviene entrar.
- Autor
- Eian (X @EianLu)
- Número de sitios
- 100
- Capítulos
- 9
- Tema
- Diseño / estética / fuentes de inspiración
- Para quién
- Quien hace vídeo, UI, front-end o 3D
- Actualización
- 2026-11-15
Mapa de preguntas
0/100 leídasContenido9 capítulos · 100 preguntas
- 69. Codrops
- 70. CodePen Spark
- 71. La biblioteca oficial de demos de GSAP
- 72. Ejemplos oficiales de Three.js
- 73. Shadertoy
- 74. The Book of Shaders
- 75. Bruno Simon
- 76. Lusion
- 77. Active Theory
- 78. Framer Gallery
- 79. Ejemplos oficiales de Motion
- 80. React Bits
- 81. coss ui
- 82. Josh W. Comeau
- 83. Rauno Freiberg
- 84. Emil Kowalski
Prefacio
Cuando llevas tiempo haciendo vídeo, diseñando interfaces o escribiendo front-end, casi siempre acabas con la misma sensación: con un nivel técnico parecido, lo que marca la diferencia al final es el criterio estético.
Hoy la IA te escribe código, hace animaciones y genera imágenes, pero si el resultado queda bien o no, y si sirve para entregar, sigue dependiendo de ti. Solo cuando has visto muchas cosas buenas puedes decir «aquí el interletraje está demasiado apretado» o «esa transición es demasiado brusca», y pedirle a la IA que lo corrija o ajustarlo tú mismo sin perder el rumbo.
Esta lista sale de los marcadores privados de Eian después de una limpieza a fondo: 100 sitios de diseño que de verdad abre, divididos en 9 categorías según las situaciones del día a día. De cada sitio se explica en una o dos frases qué hay dentro y cuándo conviene visitarlo; los que exigen suscripción de pago llevan la marca (de pago) y el resto se puede usar gratis. Todas las direcciones se comprobaron una por una, y los sitios que cambiaron de nombre, como Godly —ese que todo el mundo guardaba hace años—, aparecen con su dirección más reciente.
Respuestas rápidas
- Empieza por meterte en la cabeza lo mejor del sector: Awwwards, D&AD, Annecy y Tokyo TDC definen tu techo de lo que consideras «bueno».
- Para motion y vídeo, ve primero suficientes piezas buenas y luego aprende el software; las webs de estudios como BUCK o ManvsMachine enseñan ritmo mejor que cualquier tutorial.
- En 3D no te encierres a ajustar materiales: entra en ArtStation y 80 Level a ver los wireframes, la iluminación y los desgloses de producción de otros.
- Lo «cinematográfico» no es un adjetivo, es iluminación, distancia focal y etalonaje: ShotDeck, FILMGRAB y StillsLab te ponen los fotogramas directamente delante.
- Antes de dibujar pantallas, mira productos reales ya publicados y no te quedes en maquetas conceptuales; Mobbin, Refero y la HIG de Apple son referencias que sí se pueden llevar a producción.
- Si no entiendes un efecto de front-end, pulsa F12: Codrops, GSAP, Three.js y Shadertoy suelen dejar el código fuente en la propia página.
- Tipografía y color son lo básico: Typewolf, Fontshare y Radix Colors te salvan de la mayor parte del «mal gusto».
- Guardarlo todo en favoritos y no volver a abrirlo no sirve de nada: mira un solo sitio 15 minutos al día y, al terminar, oblígate a decir en una frase qué tiene de bueno.
Fuente: este artículo se basa en «Los 100 mejores sitios de diseño para elevar el criterio estético», publicado por Eian en X (@EianLu, 13-11-2026). Los derechos pertenecen al autor original y prevalece el enlace a la publicación original.
1. Concursos y premios: mira primero cómo es la gama alta
Cuando acabas de entrar en el sector o se te atasca un proyecto, lo más directo es mirar los trabajos premiados de ese año. Mete primero en la cabeza el estándar más alto de la industria y, al volver sobre tu propio borrador, verás los fallos de un vistazo.
1. El reto de render 3D de Pwnisher#
🔗 https://www.youtube.com/@pwnisher
El concurso global de render 3D que organiza el youtuber Clinton Jones (conocido como Pwnisher). El formato es muy visual: entrega una base en blanco con una trayectoria de cámara y una acción de personaje fijas, miles de participantes de todo el mundo la interpretan a su manera y al final se monta una única pieza larga. En 2026 ya va por la decimotercera edición. Como la base es idéntica para todos, se ve clarísimo quién ilumina mejor y quién tiene ideas más locas.
2. Awwwards#
El premio inevitable si haces webs y front-end. Cada día elige «la mejor web del día»; el jurado puntúa diseño, usabilidad, creatividad y contenido, y a final de año hay gran premio anual. Va muy bien echarle cinco minutos cada mañana antes de empezar, para ver qué novedades ha sacado el diseño web últimamente.
3. CSS Design Awards#
🔗 https://www.cssdesignawards.com/
Otro gran premio web a la altura de Awwwards; también propone un sitio destacado cada día y puntúa UI, UX e innovación. El gusto de su jurado no coincide del todo con el de Awwwards y los sitios elegidos rara vez se repiten, así que conviene alternar los dos.
4. The FWA#
Un premio veterano de diseño digital que arrancó en 2000 y que también actualiza un proyecto ganador cada día. Frente a la maquetación comercial más convencional, FWA prefiere piezas técnicas que juegan con la interacción, WebGL y el sonido.
5. The Motion Awards#
El premio específico de motion design que organiza el propio Motionographer. Se premian por separado cabeceras, publicidad, branding y documentales, y en los últimos años se añadió una categoría de IA. Lo mejor es que la página de ganadores incrusta las piezas finales, sin tener que salir a buscarlas; la cabecera de «Shōgun», por ejemplo, está ahí, y en una tarde te ves lo mejor del motion de todo un año.
6. Apple Design Awards#
🔗 https://developer.apple.com/design/awards/
El premio que Apple entrega cada año en su conferencia de desarrolladores WWDC. Las apps y juegos que entran en la lista son prácticamente de manual en estética de la casa, sensación de interacción y aprovechamiento del hardware. Apple además escribe un comentario para cada aplicación premiada explicando por qué la eligió, algo muy recomendable para quien trabaja en móvil.
7. D&AD#
El gran premio británico de diseño y publicidad. Como el trofeo tiene forma de lápiz, en el sector se le llama «el premio del lápiz amarillo». Su nivel máximo, el «lápiz negro», es extremadamente exigente: algunos años prefiere dejarlo desierto antes que entregarlo, y lo que gana son casos que acaban en los libros de historia del diseño. Quien trabaje en marca, publicidad o gráfica debería revisar su archivo de años anteriores.
8. The One Show & ADC#
Dos grandes premios que organiza el The One Club estadounidense. The One Show valora más la idea creativa detrás de la pieza publicitaria, mientras que el ADC (Art Directors Club de Nueva York, fundado en 1921) pone el foco en la expresión visual, la tipografía y el detalle de oficio.
9. Runway AI Film Festival#
El festival de imagen con IA que organiza Runway, la herramienta de vídeo con IA; en 2026 va por su cuarta edición y tiene proyecciones presenciales en Nueva York, Los Ángeles y Tokio. Además de cortos, hay categorías de diseño, nuevos medios, moda y publicidad. En la Screening Room de su web puedes ver las piezas premiadas de otras ediciones; si quieres saber dónde está hoy el techo del vídeo con IA, este es el sitio más directo.
10. Tokyo TDC#
🔗 https://tokyotypedirectorsclub.org/
El premio anual del Tokyo Type Directors Club. Aunque el nombre lleve «tipografía», en realidad marca la tendencia de todo el diseño visual asiático. El jurado tiene un ojo muy exigente y los carteles, libros y piezas de motion premiados suelen ser muy experimentales; cuando te canses de las piezas comerciales correctitas, aquí se te limpia la vista.
11. Festival Internacional de Animación de Annecy#
🔗 https://www.annecyfestival.com/
El festival de animación francés fundado en 1960, el Olimpo para quien hace animación. Además de largometrajes y cortos independientes, tiene una sección dedicada al encargo comercial (publicidad, videoclips, cabeceras) donde se ve lo mejor del mundo en estilo artístico y narrativa en movimiento.
12. Ciclope Festival#
🔗 https://www.ciclopefestival.com/
Un festival de cine publicitario que reparte premios por especialidad. La mayoría de premios miran la creatividad global; este desmonta la pieza y premia por separado dirección, fotografía, etalonaje, montaje, animación 3D, efectos visuales y música. Si haces vídeo y quieres estudiar solo «el color» o «el ritmo del montaje», este es el festival adecuado.
2. Motion design y vídeo
En motion y vídeo, encerrarse a ver tutoriales de software te mete en los parámetros. Ve primero suficientes piezas buenas, entiende qué es un buen ritmo y una buena transición, y luego busca el tutorial del cómo; es mucho más eficiente.
13. Motionographer#
Un clásico del sector del motion design con casi veinte años. El ojo de sus editores es implacable: no publican relleno y, cuando actualizan, casi siempre son piezas que merecen verse fotograma a fotograma, muchas veces acompañadas de notas de producción escritas por el propio estudio.
14. STASH#
Una videoteca online a la que se suscriben muchos estudios de animación y VFX (de pago). Archiva por estilo y técnica miles de spots, videoclips y packs de canal; su gran valor es que muchas piezas incluyen el making-of y el desglose técnico del proyecto.
15. Art of the Title#
🔗 https://www.artofthetitle.com/
Un sitio dedicado al diseño de cabeceras de cine, series y videojuegos. No solo publica las cabeceras en alta calidad: lo que más trabajo lleva son las entrevistas largas con los responsables, que traen al director y al diseñador y sacan los bocetos iniciales, las versiones descartadas y el storyboard para explicar paso a paso cómo se pulió esa cabecera de dos minutos.
16. Vimeo Staff Picks#
🔗 https://vimeo.com/channels/staffpicks
El canal de cortos que el equipo editorial de Vimeo selecciona a mano cada día. En el mundillo del vídeo, que tu trabajo lleve la insignia Staff Pick es algo de lo que presumir toda la vida. Ya sea corto de ficción, animación experimental o documental, el nivel es muy constante.
17. La sección de motion design de Behance#
🔗 https://www.behance.net/galleries/motion
Aunque todo el mundo navega por Behance, su categoría Motion sirve especialmente para estudiar flujos de trabajo: muchos estudios publican el proyecto con el moodboard inicial, los styleframes, el animatic y la pieza final, es decir, todo el proceso de entrega desplegado ante ti.
18. Short of the Week#
🔗 https://www.shortoftheweek.com/
Un sitio que recomienda cortos independientes de todo el mundo, tanto de imagen real como de animación. Cada pieza va acompañada de una crítica seria escrita por la redacción que te ayuda a desmontar cómo el director construye el personaje y cuenta una buena historia en apenas quince minutos.
19. Directors Notes#
Un blog de entrevistas con directores independientes. Cada entrega habla de un corto con preguntas muy concretas: cómo reunieron el dinero, con qué cámara y qué ópticas rodaron, qué problemas aparecieron en postproducción. Quien hace encargos y rueda por su cuenta se sentirá muy identificado.
20. Sakugabooru#
🔗 https://www.sakugabooru.com/
Una biblioteca de fragmentos de «sakuga» mantenida por los propios aficionados a la animación, con más de 320 000 clips extraídos de series y películas. Cada clip está etiquetado: qué animador lo dibujó, de qué obra sale y si es un efecto de explosión o interpretación de personaje. Si quieres estudiar el ritmo y la elasticidad de un movimiento, buscas por etiqueta y sacas cientos de clips para ver fotograma a fotograma; sirve tanto para animadores como para quien genera planos de acción con IA.
21. Promonews#
Cada día selecciona varios videoclips y spots recién salidos, casi siempre con la nota de intención del director: con qué cámara se rodó, por qué se etalonó así, cómo se hizo tal plano. El videoclip es el terreno donde más se experimenta con planos estilizados, color y ritmo de montaje; para buscar referencias de estilo visual, recorrer este sitio es mucho más eficiente que buscar a ciegas en una plataforma de vídeo.
Las cinco entradas siguientes no son agregadores, sino las webs de cinco estudios reconocidos como los más potentes del sector. Descarga sus piezas al ordenador, ponlas en el reproductor y desmenuza con las flechas del teclado fotograma a fotograma: funciona mejor que cualquier curso avanzado.
22. BUCK#
Uno de los estudios de motion design más grandes y conocidos del mundo, habitual de Apple, Nike y Meta. Dominan 2D, 3D y la combinación con imagen real, y su portfolio es enorme, como un museo.
23. ManvsMachine#
Un estudio creativo de primer nivel en Londres, especializado sobre todo en colisiones de materiales 3D y publicidad de producto de alto nivel; la calidad de la luz y la textura de sus imágenes pone los pelos de punta.
24. Oddfellows#
Estudio estadounidense centrado en ilustración y animación 2D de personajes, con paletas comodísimas y una continuidad de planos y una inercia de movimiento suavísimas.
25. Golden Wolf#
Estudio de animación londinense con un estilo inconfundible: colores saturados que chocan, deformaciones de perspectiva exageradas y un ritmo de montaje vertiginoso, con energía de cartoon callejero por toda la pantalla.
26. Ordinary Folk#
🔗 https://www.ordinaryfolk.co/
Equipo de Vancouver que se dedica a sacar partido a las formas geométricas 2D más básicas; dominan como nadie la elasticidad y el ritmo de las curvas de animación.
3. 3D y render
En 3D lo peor es encerrarte a ajustar materiales a ciegas. Entra en las comunidades a ver los wireframes y la iluminación de trabajos maduros: muchos de los problemas que te bloquean ya tienen solución hecha.
27. ArtStation#
El sitio por el que pasa todo el que trabaja en CG y arte de videojuegos. Concept artists, modeladores e iluminadores de los grandes estudios de juegos y de VFX tienen aquí su casa; busca cualquier estilo de diseño conceptual o asset 3D y encontrarás referencias de primer nivel.
28. The Rookies#
Una comunidad de concursos anuales para estudiantes y recién llegados al sector, con categorías de animación 3D, desarrollo de juegos, efectos visuales y diseño conceptual. Si acabas de aprender el software o estás buscando trabajo, entra a ver hasta dónde llegan ya los portfolios de los recién titulados.
29. 80 Level#
Un medio dedicado al arte de videojuegos y a la técnica 3D. Lo más valioso son sus artículos de breakdown: invitan al autor original a desmontar una escena 3D compleja, desde con qué software modeló el bloqueo y cómo pintó la suciedad en Substance hasta cómo colocó las luces en el motor, con un detalle de manual de instrucciones.
30. Sketchfab#
Una plataforma para girar modelos 3D 360 grados directamente en el navegador. Cuando un modelo está bien hecho, abre los ajustes del visor abajo a la derecha y cambia a blanco puro, wireframe, mapas de normales o canal de rugosidad: verás con total claridad cómo se han distribuido los bucles de aristas y cómo se ha desplegado el UV.
31. befores & afters#
🔗 https://beforesandafters.com/
Una revista online dedicada a destripar los efectos visuales de los grandes éxitos de Hollywood. Le encanta publicar comparativas de antes y después: a la izquierda el actor con traje de captura de movimiento delante del croma, a la derecha la explosión ya compuesta, junto con entrevistas al supervisor de VFX que explican cómo se resolvió el plano.
32. fxguide#
El medio técnico de VFX más veterano del sector. Sus artículos son muy duros, sin cotilleos: profundizan en los algoritmos internos de los renderizadores, en los pipelines de platós LED de producción virtual o en la simulación de fluidos; ideal para quien quiera ir hacia technical art (TA) o la parte más profunda del VFX.
33. Blender Studio#
El estudio de animación open source que Blender mantiene (de pago). Su equipo hace cada año un corto de alta calidad con Blender para llevar el software al límite; con la suscripción no solo ves los tutoriales, también te descargas los rigs de personajes y los proyectos de iluminación para abrirlos y estudiarlos en tu ordenador.
34. Poly Haven#
Un sitio de recursos imprescindible para render 3D. Sus HDRI de iluminación de entorno, materiales PBR y modelos escaneados están bajo licencia CC0: totalmente gratis, sin registro para descargar y sin necesidad de atribuir si los usas en un encargo comercial.
35. Beeple Everydays#
🔗 https://beeple-crap.com/everydays
Desde el 1 de mayo de 2007, el artista digital Beeple se obligó a hacer una imagen al día y subirla; ni con bodas, enfermedades o fiestas faltó un solo día, y así lleva casi veinte años. Si te vas a sus dos primeros años verás que dibujaba bastante tosco, pero pasando páginas compruebas con tus propios ojos cómo una persona normal se convirtió en un referente a base de entregar la tarea cada día.
4. Imagen cinematográfica y referencia de planos
Al rodar vídeo o etalonar, eso que el cliente llama «sensación cinematográfica» es en realidad un término muy vago. En vez de adivinar, recorta fotogramas de películas y mira cómo un director de fotografía profesional ilumina, hunde las sombras y elige distancias focales.
36. ShotDeck#
La base de fotogramas de cine profesional que impulsó Lawrence Sher, director de fotografía de «Joker» y «Resacón en Las Vegas» (de pago). Es enorme y el etiquetado de cada imagen es increíblemente fino: puedes filtrar «hora dorada + contraluz + gran angular + tonos fríos + interior de coche» y en un segundo sacar decenas de fotogramas que cumplen exactamente lo pedido para usarlos como referencia de storyboard.
37. FILMGRAB#
Una web de capturas de películas totalmente gratuita, con miles de clásicos. Su organización es muy pura: cada película es una página con cincuenta o sesenta fotogramas clave en alta calidad seleccionados del film. Si quieres estudiar la luz y la composición de un director, entras en una página, bajas hasta el final y lo entiendes todo.
38. StillsLab#
Una base de capturas gratuita con cine, series, videoclips y publicidad; sin pagar puedes ver todo el catálogo. Las etiquetas son muy detalladas: puedes filtrar por tamaño de plano, ángulo de cámara, luz, color, día o noche e incluso por la cámara y la óptica usadas, o escribir directamente una descripción normal de la imagen para buscar. Cada película tiene además estadísticas, por ejemplo en «Blade Runner 2049» el 69 % son planos nocturnos y el 52 % luz suave, algo comodísimo para estudiar la receta visual de un film.
39. Flim#
Una base de capturas con búsqueda semántica por IA que, además de cine, incluye bastantes videoclips y publicidad. Lo mejor es que no hace falta recordar el título: escribes en el buscador una frase normal, como «una persona al final de un pasillo a contraluz» o «vista cenital de comida sobre una mesa», y te saca planos similares de todas las películas.
40. EyeCannndy#
Una web que convierte el «lenguaje de cámara y las técnicas de montaje» en un diccionario de GIF. Es normal no saber cómo se llama una transición o un movimiento que te gusta; aquí están listadas decenas de técnicas habituales como el match cut, el efecto vértigo de Hitchcock, el whip pan o el plano subjetivo, y al abrir una entrada te muestra cinco o seis ejemplos animados de distintos anuncios y videoclips.
41. La guía de planos de StudioBinder#
🔗 https://www.studiobinder.com/blog/ultimate-guide-to-camera-shots/
Una serie de tutoriales de una empresa de software de producción que explica uno por uno los tamaños de plano, los ángulos de cámara y los movimientos (dolly, panorámica, whip pan, órbita), cada uno con ejemplos de películas. El nivel estético es normalito, pero es sistemático y fácil de consultar. Al generar vídeo con IA, escribir «low angle», «dolly in» o «whip pan» en el prompt funciona mucho mejor que «hazlo más pro», y aquí encuentras todos esos términos.
42. American Cinematographer#
La revista que la American Society of Cinematographers (ASC) publica desde hace más de cien años. Casi todos los artículos son directores de fotografía explicando una película: por qué eligieron ese juego de ópticas, con qué cámara rodaron, de dónde viene la luz principal, cómo se decidió el etalonaje. La base de capturas te dice cómo se ve la imagen; aquí te dicen por qué se rodó así. Muchos artículos se leen completos gratis en la web.
5. Diseño de UI
Antes de dibujar pantallas, conviene revisar productos reales ya en producción y frecuentar menos las comunidades de diseño conceptual. Los productos reales te ayudan a ordenar la lógica básica de estados de error y jerarquía de botones; las maquetas conceptuales son bonitas, pero muchas no se pueden llevar a producción, y si las usas para alimentar a la IA solo consigues que el resultado tenga más «olor a IA».
43. Mobbin#
La mejor base de capturas de apps reales ahora mismo (de pago; con cuenta gratuita se ve una parte). El equipo ha capturado de arriba abajo muchísimas aplicaciones iOS, Android y web de referencia y ha reunido más de 600 000 pantallas. Cuando tengas que diseñar una «página de suscripción» o un «aviso de estado vacío», filtra por esa etiqueta funcional y podrás poner lado a lado cómo lo hacen Airbnb, Spotify o Notion.
44. Page Flows#
Mobbin muestra capturas estáticas; este sitio guarda grabaciones de pantalla de productos reales (de pago). Desde que un usuario nuevo abre la landing, se registra y añade la tarjeta hasta cómo encuentra el acceso para cancelar la suscripción, todo grabado con el recorrido del cursor y los cambios de página; es comodísimo para ordenar flujos de interacción.
45. Refero#
Una base de capturas centrada en interfaces web y iOS (de pago). Sus etiquetas de componentes y tipos de página están muy fragmentadas: si quieres ver solo cómo se diseña un «filtro de tabla», unas «migajas de pan» o una «tabla comparativa de precios», aciertas rápido. Tiene además un subsitio gratuito, styles.refero.design, que convierte el color, la tipografía y el espaciado de más de 2000 webs reales en un DESIGN.md que la IA puede leer directamente, sin necesidad de iniciar sesión.
46. Nicelydone#
Una galería centrada en interfaces de aplicaciones web y software SaaS (de pago). Quien trabaja en B2B, paneles de empresa o herramientas de trabajo no suele sacar partido de las apps de consumo; aquí encontrará las mejores referencias de maquetación para formularios complejos y dashboards de datos.
47. SaaSFrame#
Otra biblioteca de interfaces centrada en productos SaaS (de pago), con webs de marketing, páginas de login y registro, modales de funciones y páginas de configuración bien clasificadas; muy útil para desarrolladores independientes y diseñadores de B2B.
48. Figma Community#
🔗 https://www.figma.com/community
La comunidad open source que viene con Figma. Ver capturas de otros solo te muestra la superficie; aquí, cuando encuentras un buen design system, una librería de componentes abierta de una gran empresa o una plantilla bien maquetada, pulsas «Open in Figma» arriba a la derecha y el archivo fuente entero aparece en tus borradores. Abres el panel de capas y ves al instante cómo montaron el Auto Layout o cómo nombraron las variables de color.
49. Guías de interfaz humana de Apple (HIG)#
🔗 https://developer.apple.com/design/human-interface-guidelines/
El documento de normas que Apple escribe para diseñadores y desarrolladores. Ante dudas básicas como «cuántos iconos debe llevar la barra de navegación inferior», «cuántos píxeles mínimos necesita una zona táctil» o «cuándo hay que mostrar un diálogo de alerta», no hace falta preguntar por internet: consulta esta documentación de Apple y verás la razón explicada con claridad.
50. Material Design 3#
La documentación del sistema de diseño de Google. Aunque no hagas aplicaciones nativas de Android, merece mucho la pena leerla entera: expone sin reservas cómo un gran design system define escalas de color, calcula la jerarquía de tamaños de texto, resuelve el contraste en modo oscuro y define los estados hover y pressed de los componentes.
51. Vercel Web Interface Guidelines#
🔗 https://vercel.com/design/guidelines
Una lista de detalles de interfaz recopilada por Vercel, clasificada por interacción, animación, maquetación, textos, formularios y rendimiento; cada punto es una regla concreta que puedes comprobar tal cual, por ejemplo «en móvil el tamaño de fuente de un input no puede bajar de 16 px, porque iOS hace zoom automático al tocarlo» o «no seas vago y no escribas transition: all». Es ideal para quien programa con IA: hay una sección dedicada a integrarla en la IA, con un AGENTS.md y una skill de revisión listos para usar, para que la IA se autocompruebe punto por punto después de escribir la interfaz.
52. Impeccable#
Una skill de diseño especializada en curar el «olor a IA». Recoge en 62 comprobaciones los tópicos por defecto que más usa la IA: la «paleta IA» beige, titulares grandes en serif cursiva, una barra de color a la izquierda de los avisos, tarjetas dentro de tarjetas, subtítulos numerados tipo «01 Discover»… Instalada en Claude Code, Cursor o Codex, puedes usar sus comandos para que la IA pula la tipografía, ajuste la maquetación o critique tu propio diseño. Aunque no la instales, leer la lista te permite detectar de un vistazo por qué muchas páginas parecen baratas.
53. The Component Gallery#
Una web que pone cara a cara los «componentes básicos» de las grandes empresas. Si quieres estudiar un simple «toggle» o un «banner de alerta», al entrar te muestra en una sola página las capturas del componente equivalente en decenas de design systems (Apple, Google, Microsoft, Shopify, GitHub…) con enlaces a su documentación; perfecto para repasar y detectar huecos al escribir especificaciones de componentes.
54. 60fps#
Una web dedicada a recopilar «microinteracciones de UI suaves». Todo son grabaciones a alto framerate de interacciones reales de aplicaciones, sin paja: abres la página y la pantalla se llena de expansiones de tarjeta, pull-to-refresh y transiciones de página con una sensación táctil excelente.
55. Spotted in Prod#
🔗 https://www.spottedinprod.com/
Una web centrada en capturar esos «pequeños detalles que sorprenden» en aplicaciones iOS ya publicadas. Son vídeos de pocos segundos de uso real: la visualización de la vibración sutil al pulsar un botón o un pequeño easter egg escondido en los ajustes; ideal para quien cuida el detalle y busca ideas.
56. Growth.Design#
Una web de dos diseñadores de producto que desmonta la experiencia real de aplicaciones conocidas en formato cómic. Por ejemplo, recorren el onboarding de Duolingo como un usuario normal o hacen un pedido en Airbnb y lo dibujan página a página: por qué el texto de este paso te hace pagar tranquilo y por qué el modal siguiente te espanta. Divertido y con sustancia.
57. Laws of UX#
Condensa en una veintena de tarjetas limpias de texto e imagen las leyes psicológicas que tanto se citan para presumir en diseño de interacción (Fitts, Hick, Miller, pico-final). Al abrir cada una te explica en tres frases qué significa, quién la formuló y qué tener en cuenta al aplicarla a una interfaz concreta. Cuando necesites base teórica para una propuesta de rediseño, aquí la encuentras rápido.
58. Game UI Database#
🔗 https://www.gameuidatabase.com/
Una base de capturas de interfaces de videojuegos con un tamaño impresionante: casi 2000 juegos de consola y PC y más de 70 000 capturas en alta calidad. Lo mejor es que está clasificada por función de UI: puedes buscar directamente el «editor de personaje», la «mochila de equipo», el «árbol de habilidades», el «modal de misión» o la «pantalla de derrota» de todos los juegos. Aunque no hagas juegos, ver cómo los diseñadores ordenan la jerarquía visual con una cantidad de información brutal abre mucho la cabeza.
6. Inspiración web
Cada vez que llega un encargo web nuevo, lo peor es abrir el software y empezar a dibujar sobre un lienzo en blanco. Dedica un cuarto de hora a recorrer decenas de páginas similares en los sitios de abajo y empieza cuando tengas tres o cuatro direcciones de maquetación fiables: te ahorras más de la mitad de las idas y venidas.
59. Recent (antes Godly)#
Godly (godly.website), ese marcador que casi todo diseñador web tenía guardado, ahora redirige a este nuevo sitio, Recent. Mantiene la experiencia de ver grabaciones de scroll en alta calidad directamente en la miniatura, sin entrar en la web original, y ha ampliado el catálogo a vídeos de producto, iconos de aplicación, identidad de marca y carteles. Si quieres ver qué dirección web predomina ahora entre desarrolladores independientes y empresas tecnológicas, este es el sitio.
60. Siteinspire#
🔗 https://www.siteinspire.com/
Una biblioteca veterana de inspiración web con más de diez años y miles de sitios. Sus filtros funcionan muy bien: puedes combinar «estilo visual (rejilla, minimalista, tipografía gigante)», «tipo de sitio (portfolio, e-commerce)» y «sector (arquitectura, moda)». La selección es contenida: rara vez incluye esos sitios de fuegos artificiales y sí mucha maquetación que aguanta el paso del tiempo.
61. Land-book#
Una galería centrada en landing pages. Además de las homepages de producto, tiene colecciones separadas de páginas de precios, «sobre nosotros» y currículums personales; muy práctica para webs comerciales al uso.
62. Landingfolio#
🔗 https://www.landingfolio.com/
Otra galería de landings, pero da un paso más: divide la página en bloques de primer scroll, presentación de funciones, testimonios, botón de acción y pie, más de 4600 en total, y permite copiarlos en formato Tailwind, Figma o Webflow (parte de pago). Va de maravilla para alimentar a la IA: eliges un bloque que te guste y se lo pasas, mucho más preciso que describir con palabras «hazme un primer scroll bonito».
63. awesome-design-md#
🔗 https://github.com/VoltAgent/awesome-design-md
Una colección open source de GitHub que convierte el color, la tipografía, el espaciado y el estilo de componentes de webs reconocidas como Stripe, Linear, Vercel o Apple en un archivo DESIGN.md. Si lo pones en tu proyecto, la IA generará interfaces siguiendo las reglas de esa marca, mucho más fiable que explicarle «quiero esa sensación de Linear».
64. One Page Love#
Una web centrada en «sitios de una sola página». Algunos productos pequeños, eventos presenciales o páginas personales no aguantan una barra de navegación con varios canales; aquí ves cómo otros cuentan todo con claridad y ritmo en una única página que se recorre de arriba abajo.
65. Minimal Gallery#
Una galería que solo acepta webs minimalistas. Si sientes que tus páginas quedan siempre llenísimas y sin aire, pasea por aquí y aprende cómo otros sostienen una página solo con blanco, negro, gris, mucho espacio vacío y un contraste tipográfico limpio.
66. Dark Mode Design#
🔗 https://www.darkmodedesign.com/
Una galería que solo recoge webs en «modo oscuro». A mucha gente le pasa que su web de fondo negro queda o toda negra sin jerarquía o con tantos efectos luminosos que parece barata. Aquí ves casos maduros: cómo separar niveles de tarjeta con negro puro y grises profundos y hasta qué opacidad bajar textos y bordes finos para que no deslumbren.
67. Hoverstat.es#
El lugar dedicado a las «webs raras». Casi no hay webs corporativas serias: son homepages de artistas independientes, estudios de diseño vanguardistas, bandas underground o arquitectos experimentales. La navegación se esconde en sitios extraños y el ratón hace volar cosas por la pantalla; cuando sientas que todas las webs se parecen y te hayas cansado de los clichés, entrar aquí despeja mucho.
68. Web Design Museum#
🔗 https://www.webdesignmuseum.org/
Un auténtico «museo de historia del diseño web». Su autor ha guardado capturas de miles de webs antiguas entre 1991 y 2006: puedes ver cómo era la web de Apple en 1997, lo denso que era el portal de Yahoo en el cambio de milenio y aquellos botones skeuomórficos y sitios Flash que arrasaron. Además de nostalgia, el estilo retro de los 2000 (Y2K) que ahora usan muchas marcas de moda tiene aquí su fuente histórica más pura.
7. Front-end e interacción
Para quien escribe front-end, ver un efecto de interacción impresionante y limitarse a decir «qué pasada» no sirve; hay que pulsar F12 y destripar si está hecho con CSS o con WebGL. La mayoría de los sitios de abajo te dejan el código fuente a la vista.
69. Codrops#
🔗 https://tympanus.net/codrops/
Un tesoro obligatorio para quien hace front-end creativo. Comparte todo el año tutoriales de efectos que ganan premios en Awwwards: distorsión de imágenes con WebGL, transiciones de página suaves sin recarga, rejillas de texto que se deforman con el scroll. Lo mejor es que cada artículo no solo explica el enfoque paso a paso, también incluye una demo online y el repositorio de GitHub.
70. CodePen Spark#
Una selección de código creativo que la redacción de CodePen publica cada semana. Todo son pequeños juguetes hechos por gente de todo el mundo con unos cientos de líneas de CSS, SVG o Canvas. Si te gusta un efecto, entras y a la izquierda tienes el editor con el código HTML/CSS/JS; cambias dos números y la vista de la derecha se actualiza al momento. Perfecto para practicar.
71. La biblioteca oficial de demos de GSAP#
La biblioteca de ejemplos oficiales de GSAP (GreenSock), el veterano de la animación web: más de cien efectos clasificados por scroll, texto, hover, seguimiento de ratón y carrusel, cada uno con su código en CodePen. Antes muchos de sus mejores plugins premium (ScrollTrigger para vincular animaciones al scroll, SplitText para animar letras) exigían suscripción; tras la compra por Webflow, ahora todos los plugins comerciales son gratuitos. Si te gusta un efecto, le pasas el código a la IA para adaptarlo y listo.
72. Ejemplos oficiales de Three.js#
🔗 https://threejs.org/examples/
Si quieres hacer 3D en el navegador, es difícil evitar Three.js. No hace falta buscar tutoriales de dudosa procedencia: abre uno por uno los cientos de demos oficiales, desde cargar un modelo con animación de esqueleto hasta reflejos de agua oceánica, colisiones físicas o pasadas de bloom; todos tienen un botón de «source» abajo a la derecha y al pulsarlo ves la forma oficial y canónica de escribirlo.
73. Shadertoy#
El sitio donde los gurús de gráficos presumen de técnica. Todas las imágenes espectaculares de esta web —nubes volumétricas que se revuelven, refracción de agua realista o una ciudad entera de neones— no usan imágenes externas ni modelos 3D: se calculan en tiempo real en la GPU con unos cientos de líneas de matemáticas (código GLSL de shaders). El código está a la derecha de la página; aunque las trigonométricas mareen, es inevitable para quien quiera hacer fondos fluidos o estudiar gráficos.
74. The Book of Shaders#
🔗 https://thebookofshaders.com/
Si abres Shadertoy y te parece un texto indescifrable, empieza por este tutorial interactivo online gratuito. El autor desmenuza los fragment shaders: cómo dibujar una línea con una fórmula, luego un círculo y después una textura de ruido; cada fragmento de código se puede modificar en el propio artículo mientras ves cambiar el patrón. Es el mejor libro de iniciación a shaders por consenso.
75. Bruno Simon#
La página personal del desarrollador francés Bruno Simon. El currículum de los demás es un PDF; el suyo te pone a conducir un coche de juguete por un diorama 3D y a chocar contra las señales, que al caer muestran su experiencia y sus proyectos. Su curso «Three.js Journey» es además uno de los que explican el 3D web con más profundidad.
76. Lusion#
Un estudio británico especializado en desarrollo creativo a medida. Su propia web es hoy uno de los techos de la interacción web con WebGL: desde la carga de la página, el amortiguamiento de la rueda, las transiciones de partículas 3D y la sincronía con el sonido, no hay un fotograma que se atasque ni que sobre. Merece que todo front-end la abra y la mire con calma.
77. Active Theory#
Un estudio de interacción digital de primer nivel en Estados Unidos. Detrás de las experiencias online de varias ediciones de Google I/O o de la página interactiva del Spotify Wrapped de hace unos años, muchos de los proyectos de marketing tecnológico que se hicieron virales los programaron ellos.
78. Framer Gallery#
🔗 https://www.framer.com/gallery/
Una selección de webs destacadas que hace el propio Framer. Su interfaz es casi idéntica a Figma, pero al terminar pulsas publicar y tienes una web responsive con código real. Date una vuelta por la galería y verás hasta dónde puede llevar el motion de una web un diseñador que no programa, solo con arrastrar y los componentes incluidos.
79. Ejemplos oficiales de Motion#
La página de ejemplos oficiales de Motion (antes Framer Motion), la librería de animación más usada hoy en React y Vue. Desde el easing físico de muelle más básico y la reordenación de listas hasta animaciones complejas ligadas al scroll, los efectos de UI habituales tienen ejemplos cortos listos (parte de pago): todos se pueden ver en demo y más de cien de la categoría básica incluyen el código gratis, que puedes copiar y adaptar; el resto requiere Motion+ para ver el código.
80. React Bits#
Un pequeño supermercado de componentes de animación React totalmente gratuito y open source. Todo son piezas visuales ya encapsuladas: texto que aparece con glitch, botones con atracción magnética del ratón, bordes de tarjeta con brillo en movimiento, fondos fluidos animados. Ajustas velocidad y color a la izquierda, copias el código a la derecha y lo pegas en tu proyecto: en cinco minutos una página seca cobra vida.
81. coss ui#
El design system propio de Cal.com, la herramienta open source de agenda, antes conocido como Origin UI, que muchos tenían guardado. Está hecho con Tailwind y ofrece más de cincuenta componentes básicos y más de quinientos módulos listos bajo licencia MIT, totalmente libres. Su estilo es contenido: parece un producto real bien trabajado y no otra web de startup de IA con «fondo oscuro + bordes brillantes + haces de luz».
82. Josh W. Comeau#
🔗 https://www.joshwcomeau.com/
El blog del desarrollador front-end Josh Comeau. Cuando explica maquetación CSS, animaciones de muelle o rutas SVG no se limita a pegar código: llena los artículos de diagramas interactivos que puedes arrastrar y ajustar. Mueves un deslizador y entiendes por qué esa curva se siente mejor. Los artículos son gratis y los cursos avanzados de pago. Cuando entiendas los principios, sabrás qué pedirle a la IA al encargarle animaciones.
83. Rauno Freiberg#
La web personal de Rauno, actualmente design engineer en Vercel. Recomiendo leer de principio a fin su artículo «Invisible Details of Interaction Design» (los detalles invisibles del diseño de interacción). Con una decena de pequeños componentes interactivos que puedes pulsar, explica con claridad por qué el scroll de Apple se detiene de forma tan natural o cómo un menú desplegable evita pulsaciones erróneas según la pendiente del movimiento del ratón: detalles de ingeniería que normalmente quedan bajo la superficie.
84. Emil Kowalski#
Autor de Sonner, el componente de notificaciones open source que usan muchos front-ends, y de Vaul, el de cajones deslizantes; antes fue design engineer en Linear. Sus artículos son cortos, pero todos atacan la misma pregunta: cómo hacer que la animación de una interfaz sea «contenida y pegajosa». Por ejemplo, cuántos milisegundos debe durar un modal o en qué casos no hay que animar nunca. Después de leerlos se te quitan muchas manías de añadir animaciones a todo.
8. Tipografía y color
Ya sea para montar vídeo con subtítulos o para dibujar interfaces y webs, la tipografía y el color son siempre donde más se nota la base. Si un trabajo parece «de mal gusto» o «desordenado», nueve de cada diez veces es porque estas dos cosas no están bien resueltas.
85. Typewolf#
La guía tipográfica más fiable del circuito editorial internacional. Su autor es un diseñador extremadamente exigente con las fuentes: durante años recomendó cada día una web real con un uso magnífico de la tipografía, indicando qué fuente usaba en titulares y en cuerpo (dejó de actualizar a finales de 2025, pero los casos y rankings acumulados siguen consultándose). Además, sus listas de «las diez mejores sans serif» y «las mejores combinaciones de Google Fonts» tienen mucho valor: si dudas qué fuente usar en una página en inglés o mixta, sus rankings no fallan.
86. Fonts In Use#
Un «archivo de tipografía en el mundo real» mantenido por diseñadores de todo el mundo. No vende fuentes: recoge carteles, portadas de libros, fundas de discos, señales de calle y capturas de webs y, como un forense, identifica junto a cada pieza todas las fuentes usadas. Si quieres saber qué carácter tiene una tipografía impresa en papel o maquetada en una web, busca un caso real y lo verás.
87. Google Fonts#
El viejo conocido de siempre, una fuente open source totalmente gratuita para uso comercial. Además de una enorme cantidad de tipografías latinas, permite descargar directamente familias para chino como Noto Sans SC, Noto Serif SC o LXGW WenKai en su versión tradicional; en front-end no hace falta ni bajar el paquete: con una línea de enlace funciona.
88. Fontshare#
La web de fuentes gratuitas de ITF, la conocida fundidora india. Aunque no tiene la cantidad descomunal de Google Fonts, cada familia es una joya y garantiza un uso 100 % gratuito para proyectos personales y comerciales. De aquí salen gratis geométricas sans como Satoshi, o las display Clash Display y General Sans, que en los últimos años aparecen constantemente en webs independientes y en el sector tecnológico.
89. Butterick's Practical Typography#
🔗 https://practicaltypography.com/
Un pequeño libro online gratuito de tipografía que se lee de un tirón. Su autor ha programado y ha sido tipógrafo profesional; no hay teoría artística pretenciosa: empieza con un capítulo, «Domina lo esencial de la tipografía en 10 minutos», que te marca mínimos concretos: cuántas letras por línea resultan más cómodas, qué interlineado usar, por qué no hay que ensanchar el tracking a la ligera. Aunque solo leas ese primer capítulo, tus documentos y webs mejorarán de golpe.
90. Utopia#
Mucha gente que empieza pone el titular a 32 px, el subtítulo a 22 px y el cuerpo a 14 px porque sí, y la página acaba sin orden. Esta pequeña herramienta te ayuda a definir tamaños con «proporción matemática»: indicas el tamaño de cuerpo en móvil y en escritorio, eliges una escala (por ejemplo, tercera mayor, 1,250) y calcula automáticamente un conjunto de variables tipográficas que escalan suavemente con el ancho de pantalla, además del espaciado. Es gratis, sin registro, el CSS generado se copia y se usa, y también puedes pasárselo a la IA como norma tipográfica.
91. Coolors#
La herramienta de color más fácil de usar. Abres la web sin configurar nada, pulsas la barra espaciadora y aparece una paleta aleatoria de cinco colores; si uno te gusta, lo bloqueas con el candado y sigues pulsando espacio, y el algoritmo combina el resto alrededor de los colores fijados. Simula la visión de personas con daltonismo y exporta la paleta como imagen o código.
92. Realtime Colors#
🔗 https://www.realtimecolors.com/
Tienes una colección de paletas preciosas y, a la hora de maquetar, sigues perdido: no sabes qué color va al fondo, cuál al botón y cuál al texto. Esta herramienta resuelve justo eso: eliges (o generas al azar) color de texto, fondo, primario, secundario y de acento en la barra inferior, y la landing y el dashboard de ejemplo de arriba cambian en tiempo real; además puedes pulsar el icono de sol y luna para ver si la paleta se rompe en modo oscuro. Cuando esté a tu gusto, exporta la configuración de Tailwind, variables CSS o sincroniza con Figma con su plugin del mismo nombre.
93. Radix Colors#
🔗 https://www.radix-ui.com/colors
La paleta de interfaz que acompaña a Radix, la librería de componentes open source. No entrega solo unas paletas bonitas: divide cada color en 12 niveles y define para qué sirve cada uno —qué niveles van de fondo, cuáles al hover de un botón, cuáles a bordes o a texto— y el modo oscuro ya viene resuelto. Usando el color según estas reglas, es difícil que una página se desordene; decirle a la IA «usa los 12 niveles de Radix para el color» funciona mejor que «haz la paleta más elegante».
94. tweakcn#
Hoy mucha gente que programa front-end con IA usa los componentes de shadcn/ui, y el resultado es que todas las webs se parecen; por eso su autor creó esto. tweakcn es un editor visual para cambiar la piel de shadcn: ajustas color, tipografía, radios y sombras a la izquierda y las tarjetas, formularios y dashboards de la derecha cambian al momento; hay además varios temas predefinidos que puedes aplicar. Cuando te guste, exportas el código del tema y lo pegas en tu proyecto. Gratis y open source.
9. Recopilar inspiración a diario
El criterio estético no se puede improvisar a última hora. Cuando veas en el móvil o navegando una imagen que te impacte, guárdala por categorías en tu propia biblioteca; cuando llegue un proyecto y necesites una dirección, revisar tu archivo personal siempre es más rápido que buscar a ciegas por toda la red.
95. Pinterest#
Sigue siendo la mayor galería de la red y sirve especialmente para ir tirando del hilo: encuentras una referencia que encaja, entras y vas pulsando «imágenes similares» hacia abajo; en diez minutos sacas decenas de imágenes del mismo estilo. La pega es que en los últimos años el feed de inicio se ha llenado de imágenes generadas por IA de baja calidad y de cuentas de spam; conviene crear varios tableros privados y fijar solo lo que hayas elegido de verdad, para ir limpiando poco a poco el algoritmo de recomendación.
96. Are.na#
Una herramienta de recopilación que prefieren muchos geeks del diseño, arquitectos y periodistas independientes. Es muy sobria: sin publicidad, sin feed algorítmico y sin siquiera número de «me gusta». Puedes crear canales distintos y meter imágenes, documentos PDF, enlaces o una nota escrita al vuelo, e incluso conectar tus canales con los públicos de gente de todo el mundo. Ideal para acumular tranquilamente material de investigación sobre un tema concreto.
97. Cosmos#
El nuevo favorito para guardar inspiración que se ha popularizado entre diseñadores internacionales en los últimos años. Con su extensión de navegador, cuando veas una buena imagen o un buen vídeo en Twitter o en cualquier web, con el botón derecho lo guardas en tu espacio. Su interfaz es limpísima y, como sus primeros usuarios eran creativos con buen ojo, pasear por la página Discover y ver las colecciones públicas de otros da una calidad de imagen altísima.
98. Savee#
Una comunidad de imágenes minimalista pensada para diseñadores visuales. Al abrir la web no hay ni títulos sobrantes: solo un muro limpio de imágenes en alta calidad. El contenido es muy puro y se concentra en maquetación gráfica, branding, fotografía de vanguardia, diseño tipográfico y diseño industrial; para buscar referencias gráficas con clase, aquí es mucho más eficiente que en una plataforma generalista.
99. It's Nice That#
🔗 https://www.itsnicethat.com/
Un medio de cultura creativa con muchos años en Londres. Cada día publica varios artículos cortos sobre proyectos recientes de ilustración, gráfica, animación y fotografía de todo el mundo. Lo bueno es que no se limita a poner imágenes: sus editores saben sacar historias interesantes detrás del creador, como por qué esa tipografía rara nació de un error de impresión o qué pensaba el director de ese corto absurdo. Perfecto para leer mientras comes.
100. Brand New#
🔗 https://www.underconsideration.com/brandnew/
La web de crítica profesional sobre rebrandings de todo el mundo. Cuando una empresa, universidad, liga deportiva o marca de consumo mínimamente conocida cambia de logo y de sistema visual, aquí publican al momento la versión antigua y la nueva lado a lado y hacen un análisis objetivo (a veces bastante mordaz) desde el ajuste tipográfico y la evolución del símbolo hasta las aplicaciones reales; abajo hay una votación de colegas de todo el mundo (de pago; sin suscripción solo se ven las comparativas de logos). Leerla a menudo entrena rápido el ojo para juzgar el diseño de marca comercial.
Por último: cómo aprovechar de verdad estos 100 sitios
Ya lo decía al principio: guardar este artículo en favoritos y no volver a abrirlo no sirve absolutamente de nada.
Yo uso estos sitios con cuatro trucos de lo más simple, y mantenidos en el tiempo funcionan bastante bien:
Elige un solo sitio al día y ciérralo a los 15 minutos. No abras veinte pestañas de golpe en el navegador: a los cinco minutos te cansarás. Mejor ponte un calendario fijo que no exija pensar: los lunes con el café, Awwwards; los martes, Motionographer; los miércoles, Mobbin… Un cuarto de hora en un solo lugar cada día; poco a poco es como se queda en la cabeza.
Antes de hacer scroll, oblígate a decir en una frase «qué tiene de bueno». Cuando una imagen o una web te parezca preciosa, no te limites a guardarla: para diez segundos y piensa. ¿Te parece buena porque se atreve con el espacio en blanco? ¿Porque la diferencia de tamaño entre titular y cuerpo es amplia? ¿Porque el gris de fondo está bien elegido? ¿Porque el botón aparece con la velocidad justa? Si puedes resumir el motivo con palabras normales, la técnica pasa a ser tuya; si no, solo has dado un gusto al ojo.
Cuando algo te guste mucho, desmóntalo y cópialo. Si una web te impresiona, pulsa F12 y mira qué espaciado de rejilla usa, qué tipografía latina emplea, qué parámetros tiene la curva de easing en CSS. Si un corto tiene un ritmo magnífico, descárgalo, llévalo al editor y cuenta fotograma a fotograma cuántos segundos aguanta un plano y en qué fotograma se esconde la transición. Cuando lo entiendas, cierra el original, crea un proyecto nuevo e imítalo: una vez vale por diez tutoriales.
Memoriza los nombres de los estilos que ves: es lo que te da autoridad al hablar con la IA. Hoy todos trabajamos a diario con Claude, Cursor o generadores de imágenes. Si solo le dices a la IA «hazme la web más elegante y moderna», siempre te dará la plantilla más mediocre; pero si frecuentas estos sitios, puedes darle instrucciones directas: «siguiendo las reglas del DESIGN.md de Linear en awesome-design-md, escríbeme una tarjeta Bento en modo oscuro con rejilla, un borde con un brillo muy sutil, el titular en una geométrica sans como Satoshi y la animación de apertura con la curva de amortiguación rápida que recomienda Emil Kowalski; al terminar, revísala con las guidelines de interfaz de Vercel». Cuando sueltas nombres y técnicas concretas, lo que entrega la IA es de otro nivel.
Al final, solo lo que puedes nombrar con precisión y explicar con claridad es el criterio estético que realmente has interiorizado.
Estos 100 sitios los he filtrado según mi forma de trabajar con vídeo y gráficos, y seguro que falta algún buen lugar. Si en tu barra de marcadores guardas alguna web imprescindible que no te atreves a borrar, déjala en los comentarios y compartimos.
Si esta lista te ha sido útil, dale un me gusta y pásasela a algún amigo con quien trabajes. La próxima vez que te quedes mirando la pantalla en blanco al empezar un proyecto, vuelve a abrirla.
Soy Eian, gracias por el apoyo.