ZaRQuN – Diseño Gráfico, Web y Programación Blog sobre diseño grafico en general y curiosidades

Vale, te voy a ahorrar tiempo: si estás usando IA para programar interfaces y todo te sale con pinta de plantilla cutre… no eres tú, es la falta de contexto.

Aquí entra awesome-design-md, un repo que básicamente dice: “oye, en vez de pedirle magia a la IA, dale instrucciones de diseño claras”. Y lo hace con algo tan simple que duele: archivos Markdown.

Sí, Markdown. Nada de Figma, nada de tokens raros, nada de pipelines complejos. Un archivo llamado DESIGN.md donde defines colores, tipografías, espaciados, componentes… y listo. Lo metes en tu proyecto y le dices al agente: “usa esto”. Fin.

La idea es potente porque soluciona un problema real: las IAs programan bien, pero diseñan como si vivieran en 2014. Botones genéricos, layouts reciclados… todo correcto, pero sin alma.

Este repo lo que hace es convertir el “gusto” en texto reutilizable. No estás copiando componentes, estás copiando criterios de diseño.

Y aquí está la magia: puedes hacer que tu app parezca Stripe, Notion o Apple simplemente cambiando un archivo. Literalmente eliges un estilo y la IA lo sigue como si fuera un manual de marca.

Además, cada DESIGN.md no es un resumen cutre. Tiene de todo:

• paleta de colores con roles semánticos
• jerarquía tipográfica completa
• estilos de botones, inputs, cards
• reglas de espaciado y layout
• comportamiento responsive
• incluso “qué NO hacer”

O sea, es como pasarle a la IA el cerebro de un diseñador comprimido en texto.

Y lo mejor: funciona porque Markdown es justo el idioma que las LLM entienden mejor. No hay que parsear nada raro.

Ahora bien, tampoco es la panacea.

#diseñografico #uxui #frontend #ia #programacion #webdesign #openSource #designsystems #markdown #aiTools

Si estás tirando de Google Fonts en todos tus proyectos… hay algo que deberías conocer ya: Fontsource.

Básicamente, es una librería enorme de tipografías open source listas para usar en tus proyectos, pero con un enfoque muy distinto: aquí no dependes de CDNs externos, tú te llevas las fuentes a casa y las gestionas como cualquier otra dependencia.

¿Y esto qué significa? Que instalas una fuente con npm y listo. Como si fuera una librería más de tu proyecto. Sin líos raros.

Fontsource te da acceso a más de 1500 familias tipográficas listas para descargar y usar directamente en tu código . Y lo mejor es que no se queda solo en las típicas fuentes de Google, también incluye otras que normalmente no tienes tan a mano.

La gracia está en cómo funciona. En lugar de cargar fuentes desde servidores externos (como hace Google Fonts), aquí haces self-hosting. Es decir, las fuentes viven dentro de tu proyecto. Esto tiene varias ventajas bastante serias.

Primero: rendimiento. Al evitar llamadas externas, reduces latencia y mejoras tiempos de carga. Nada de esperar a que otro servidor responda para pintar tu tipografía .

Segundo: privacidad. Google Fonts rastrea cierto uso, y aunque no sea dramático, hay proyectos donde esto importa. Con Fontsource, ese problema desaparece porque todo corre en tu propio entorno .

Tercero: control total. Las fuentes están versionadas como cualquier paquete npm. Nada de sorpresas porque Google ha actualizado una fuente y tu diseño ahora se ve distinto .

Y cuarto: funciona incluso offline. Esto es clave si estás trabajando con PWAs o apps donde no siempre hay conexión.

Además, puedes elegir exactamente qué pesos y estilos necesitas. No tienes que cargar toda la familia si solo quieres un par de variantes, lo cual ayuda bastante a optimizar.

A nivel práctico, usar Fontsource es ridículamente simple. Instalas la fuente que quieras, la importas en tu CSS o JS y listo. Sin enlaces externos, sin configuraciones raras.

Eso sí, no todo es perfecto. Hay gente que comenta que la interfaz de selección de fuentes no es la más cómoda del mundo, pero siendo honestos, eso es lo de menos cuando el sistema que hay detrás es tan sólido.

En resumen: si te tomas en serio el rendimiento y quieres dejar de depender de terceros para algo tan básico como la tipografía, Fontsource es una opción muy potente que deberías probar ya.

#WebDesign #Frontend #Tipografía #CSS #JavaScript #OpenSource #UI #UX #DevTools #Fonts

Vale, vamos al grano. Cambiar entre modo claro y oscuro ya no es suficiente. Si tu web todavía hace ese cambio cutre sin animación… estás perdiendo una oportunidad brutal de destacar.

La demo de https://theme-toggle.rdsx.dev/ es justo lo contrario: un ejemplo simple pero muy potente de cómo hacer transiciones entre temas que parecen magia. Y lo mejor, no necesitas un framework raro ni 200 líneas de código.

La base de todo esto es la View Transitions API, una API moderna del navegador que te permite animar cambios entre estados de la UI de forma nativa. Nada de hacks, nada de trucos raros. Directo al grano.

De hecho, el propio ejemplo te deja claro lo absurdo de simple que puede ser:

if (!document.startViewTransition) switchTheme()
document.startViewTransition(switchTheme);

Ya está. Literalmente eso. Con eso puedes envolver el cambio de tema y convertirlo en una transición animada.

Aquí es donde viene lo interesante. El toggle no se limita a cambiar colores, sino que puedes meterle creatividad: máscaras circulares, efectos blur, animaciones con SVG, clip-paths… incluso GIFs si te vienes arriba.

Y esto cambia totalmente el juego. Porque ya no estás haciendo un “modo oscuro”, estás creando una experiencia.

Piensa en esto: cuando el usuario hace clic, no solo cambia el tema, siente que la web responde, que hay una transición cuidada. Eso es UX del bueno.

Además, este enfoque encaja perfecto con cómo ya funcionan los toggles clásicos. Normalmente solo cambias una clase en el <html> o guardas el estado en localStorage para recordar la preferencia del usuario . Aquí haces lo mismo… pero con esteroides visuales.

Otro punto clave: esto es totalmente personalizable. No estás atado a un estilo concreto. Puedes hacer:

• Animaciones tipo “círculo que se expande”
• Transiciones desde una esquina
• Efectos tipo eclipse
• Cambios con degradados o blur

Y todo controlado con CSS + SVG.

Si estás aprendiendo front, este tipo de recursos son oro. Porque te enseñan algo muy importante: no siempre necesitas más librerías, necesitas entender mejor el navegador.

Y sí, esto se puede integrar perfectamente con Tailwind, React, Astro o lo que quieras. Al final, el toggle sigue siendo un botón que cambia estado. Solo que ahora lo envuelves en una transición.

En resumen:

• Código mínimo
• Impacto visual máximo
• UX mucho más pro

Y sobre todo, algo que la mayoría de webs todavía no está usando. Ahí tienes ventaja.

#Frontend #JavaScript #UX #UI #WebDesign #DarkMode #CSS #SVG #ViewTransitions #DesarrolloWeb #Programación

Si alguna vez has diseñado en Figma y luego has tenido que “traducir” eso a código… sabes perfectamente el dolor.

Horas perdidas, inconsistencias, y ese momento en el que el diseño final no se parece en nada al mockup. Pues bien, ahí es donde entra Pencil.dev y viene a romper esa dinámica de raíz.

La idea de pencil.dev es simple pero potente: diseñar interfaces directamente dentro de tu editor de código. Sí, dentro del propio VS Code o Cursor. Nada de saltar entre herramientas. Nada de handoff. Todo en el mismo sitio.

Funciona como un lienzo vectorial (rollo Figma), pero integrado en tu entorno de desarrollo. Tienes canvas infinito, capas, componentes reutilizables… lo típico de diseño, pero pegado a tu código.

Y aquí viene lo interesante: está pensado para trabajar con IA desde el minuto uno. Puedes generar interfaces enteras con prompts, iterar diseños o modificar componentes sin salir del editor.

En lugar de diseñar algo bonito y luego pelearte para implementarlo, aquí el diseño ya vive dentro del proyecto. Literalmente se guarda como archivos versionables en Git, lo que significa que diseño y código están sincronizados desde el principio.

Esto cambia bastante el juego, sobre todo si eres desarrollador con inquietudes de diseño o si trabajas solo. Porque elimina ese paso intermedio donde todo se rompe.

Además, la herramienta tira fuerte hacia lo que ahora llaman “vibe coding”: generar interfaces directamente con IA mientras programas. Es decir, describes lo que quieres y el sistema te monta la UI y el código a la vez.

¿Es perfecta? Ni de lejos.

Al ser una herramienta bastante nueva, todavía está verde. Le faltan cosas que Figma ya tiene súper pulidas, y dependiendo de cómo la uses puede volverse algo inestable o consumir bastantes recursos. Pero eso es bastante normal en este tipo de herramientas que están naciendo ahora mismo.

Aun así, lo importante no es si hoy es mejor que Figma o no. Lo importante es hacia dónde apunta:

Eliminar la separación entre diseño y desarrollo
Trabajar directamente sobre el producto final
Usar IA como parte del flujo, no como añadido

Si estás empezando en diseño o desarrollo, esta es de esas herramientas que merece la pena probar aunque sea por entender por dónde va el futuro.

Porque esto huele a cambio gordo.

#DiseñoUI #UX #IA #Herramientas #Programación #Frontend #WebDesign #AItools #Figma #Desarrollo

Si te dedicas al desarrollo web o simplemente te gusta ver cómo una web “cobra vida” cuando haces scroll o clic, probablemente ya hayas oído hablar de GSAP (GreenSock Animation Platform). Es una de esas herramientas que, cuando la pruebas, entiendes por qué está en tantísimos sitios web modernos: animaciones suaves, control total del tiempo y un rendimiento brutal.

Pues bien, dentro del ecosistema de GSAP existe un repositorio en GitHub llamado gsap-skills, que básicamente funciona como una especie de “mapa de aprendizaje avanzado”. No es un tutorial típico ni una librería nueva, sino un conjunto de skills o habilidades estructuradas para aprender a usar GSAP como un profesional de verdad.

La idea es muy interesante: en lugar de aprender GSAP de forma caótica (un poco de timelines por aquí, un ScrollTrigger por allá), este proyecto organiza conocimientos prácticos como si fueran “habilidades desbloqueables”. Por ejemplo, puedes aprender cómo construir animaciones basadas en scroll, cómo estructurar timelines complejos, cómo optimizar rendimiento o incluso cómo aplicar principios clásicos de animación como anticipación, rebote o squash & stretch directamente en código.

GSAP ya es conocido por ser una herramienta extremadamente potente para animaciones en CSS, SVG, Canvas o incluso React, pero este tipo de recursos lo llevan un paso más allá: te enseñan a pensar como un animador, no solo como un desarrollador que mueve elementos en pantalla.

Además, encaja perfectamente con el enfoque moderno del frontend: experiencias más interactivas, sitios más dinámicos y microinteracciones que hacen que una web no solo funcione, sino que también “se sienta viva”.

En resumen, gsap-skills no es una librería, es una guía estructurada para subir de nivel con GSAP. Si ya has hecho tus primeras animaciones con gsap.to() o ScrollTrigger, este repo es como pasar de conducir un coche automático a pilotar un Fórmula 1 con control total de cada curva.

Y lo mejor de todo es que encaja con la filosofía de GSAP: aprender haciendo, experimentar y construir animaciones que realmente impacten.

#GSAP #JavaScript #Frontend #WebAnimation #GreenSock #ScrollTrigger #MotionDesign #WebDevelopment #UIAnimation #GitHub

Si ya usas GitHub Copilot y sientes que podría dar más de sí… no estás loco. La realidad es que Copilot es potente, pero lo que realmente marca la diferencia es cómo lo usas. Y aquí es donde entra Awesome GitHub Copilot para volarte la cabeza.

Estamos hablando de una especie de “repositorio cheat code” creado por la comunidad que reúne prompts, agentes, instrucciones y configuraciones para sacarle todo el jugo a Copilot. No es una herramienta nueva, es mejor: es un kit de mejoras para una herramienta que ya usas.

Dentro te encuentras auténticas joyas: prompts listos para generar documentación sin sufrir, instrucciones que hacen que Copilot siga estándares de código como si fuera tu senior más exigente, y agentes especializados que entienden flujos concretos de trabajo. Todo pensado para que dejes de pelearte con la IA y empieces a dirigirla como toca.

La gracia de todo esto es que no partes de cero. En lugar de escribir prompts random esperando que Copilot adivine lo que quieres, aquí tienes estructuras ya probadas por otros desarrolladores. Es literalmente aprender de la experiencia colectiva, pero sin tener que leer mil hilos de foros.

Además, el proyecto no para de crecer. Es open source, así que cualquiera puede aportar nuevos prompts, mejorar los existentes o crear colecciones completas para casos específicos como DevOps, testing, documentación o incluso arquitectura de software.

Y por si fuera poco, han montado incluso una web navegable donde puedes explorar todo esto como si fuera una tienda de mejoras para tu Copilot: agentes, skills, plugins, workflows… todo organizado para que encuentres rápido lo que necesitas sin perderte entre markdowns.

¿El resultado? Que pasas de usar Copilot como “autocompletado fancy” a convertirlo en un copiloto real que entiende contexto, sigue reglas y trabaja contigo. Productividad, sí, pero con cabeza.

Porque al final, la diferencia entre una IA que ayuda y una que estorba no es la tecnología… es cómo la configuras. Y ahí Awesome GitHub Copilot juega en otra liga.

#GitHubCopilot #IA #Programación #DesarrolloWeb #Productividad #DevTools #AIcoding #OpenSource

Si alguna vez has intentado meter mapas en una app web, ya sabes el drama: APIs, claves, configuraciones eternas y documentación que parece escrita por villanos. Pues bien, eso se acaba con Mapcn, un proyecto open source que básicamente dice: “pega esto y ya tienes mapas funcionando”.

Este repositorio de GitHub creado por Anmoldeep Singh se centra en algo muy claro: ofrecer componentes de mapas listos para usar en React, sin complicaciones y con una estética brutal desde el minuto uno. Y lo mejor, sin API keys ni configuraciones infernales. Literalmente puedes instalarlo con un comando y empezar a jugar.

Mapcn está construido sobre MapLibre GL, lo que significa que tienes toda la potencia de un motor de mapas moderno, pero sin depender de servicios de pago ni limitaciones raras. Además, utiliza Tailwind CSS para el diseño, así que encaja perfectamente con proyectos modernos y, especialmente, con shadcn/ui.

Lo interesante aquí es que no estás usando una librería cerrada que te limita, sino que puedes copiar los componentes directamente a tu proyecto y modificarlos como quieras. Es decir, control total. Nada de cajas negras.

En cuanto a funcionalidades, Mapcn no se queda corto: puedes añadir marcadores, popups, rutas, controles de zoom, brújula, localización e incluso animaciones tipo “fly to” para mover el mapa con estilo. Todo esto con componentes declarativos que hacen que trabajar con mapas sea mucho más intuitivo.

Otro puntazo es que es “theme-aware”, es decir, se adapta automáticamente al modo claro u oscuro de tu app, lo que te ahorra tiempo en diseño y hace que todo quede coherente sin esfuerzo.

Además, al no depender de APIs externas obligatorias, puedes usar proveedores como OpenStreetMap o MapTiler sin coste, lo que lo convierte en una opción perfecta tanto para proyectos personales como para productos en producción.

En resumen, Mapcn es de esas herramientas que te hacen preguntarte por qué todo no es así de simple. Si trabajas con React o Next.js y necesitas mapas, esto es prácticamente un must: rápido, bonito, flexible y totalmente gratis.

#Mapcn #React #NextJS #OpenSource #DesarrolloWeb #Frontend #JavaScript #TailwindCSS #Mapas #UIComponents #Programación

Si te mueves en el mundo de la inteligencia artificial, seguro que ya te has dado cuenta de algo: cada semana aparece un modelo nuevo. Que si GPT, que si Claude, que si Gemini… y al final acabas con mil APIs, claves y facturas diferentes. Aquí es donde entra OpenRouter, una herramienta que básicamente hace de “hub” universal para modelos de IA.

OpenRouter es una plataforma que te permite acceder a cientos de modelos de inteligencia artificial desde una única API. Sí, una sola clave para gobernarlos a todos. La idea es sencilla pero potente: en lugar de integrar cada proveedor por separado, usas OpenRouter como intermediario y listo.

Lo interesante es que no solo simplifica el trabajo, sino que también optimiza costes y rendimiento. La propia plataforma puede enrutar tus peticiones al modelo más adecuado según precio, velocidad o disponibilidad, algo clave cuando trabajas con apps o automatizaciones a escala.

Además, funciona con una barbaridad de modelos (más de 300 y más de 60 proveedores), lo que significa que puedes probar, comparar y cambiar de IA sin tocar prácticamente tu código. Esto es oro puro para desarrolladores, startups y gente que está experimentando con productos basados en IA.

Otro punto fuerte es que OpenRouter es compatible con la API de OpenAI, así que si ya has trabajado con ChatGPT o herramientas similares, la curva de aprendizaje es mínima. Cambias la URL, tu API key y a correr.

También mola su sistema de créditos: en lugar de pagar suscripciones individuales por cada modelo, compras saldo y lo usas donde quieras. Esto hace que tengas más control sobre el gasto, especialmente si estás testeando diferentes modelos o construyendo prototipos.

Y ojo, porque esto no es solo para developers hardcore. Cada vez más herramientas y apps integran OpenRouter por debajo, lo que significa que indirectamente lo estás usando sin darte cuenta. De hecho, ya hay cientos de miles de aplicaciones funcionando sobre esta infraestructura.

En resumen, OpenRouter es como el “Spotify de las IA”: eliges el modelo que quieras, cuando quieras, sin casarte con ninguno. Y en un mundo donde la IA cambia cada mes, esa flexibilidad es justo lo que necesitas.

#OpenRouter #InteligenciaArtificial #IA #MachineLearning #Desarrollo #APIs #GPT #Claude #Gemini #Programacion #Tech #AItools

Si te interesa el desarrollo web moderno y React, hay un recurso que deberías guardar ya mismo en favoritos: el curso oficial Learn Next.js de la web de Next.js. Se trata de un tutorial interactivo y totalmente gratuito creado por el propio equipo del framework para aprender a construir aplicaciones web modernas paso a paso.

La gracia de este curso es que no se limita a teoría ni a ejemplos sueltos. Desde el primer momento empiezas a construir una aplicación real mientras aprendes cómo funciona el framework por dentro. El tutorial está organizado en varios capítulos que te guían desde los conceptos básicos hasta características más avanzadas, con ejercicios y pequeños tests para comprobar que realmente has entendido cada parte.

A lo largo del curso crearás un proyecto completo, configurando el entorno de desarrollo y trabajando con un proyecto base llamado “ACME”. Poco a poco irás añadiendo funcionalidades reales como estilos con CSS o Tailwind, optimización de imágenes y fuentes, creación de páginas y layouts, navegación entre rutas o gestión de datos en el servidor.

También aprenderás temas bastante potentes del ecosistema moderno de React: renderizado estático y dinámico, streaming para mejorar tiempos de carga, búsqueda y paginación de datos, autenticación de usuarios, manejo de errores y optimización SEO mediante metadata. Todo ello dentro del propio flujo de desarrollo de Next.js.

Una de las mejores cosas del curso es que puedes hacerlo completamente a tu ritmo. La plataforma guarda tu progreso, así que puedes seguir aprendiendo cuando tengas un rato libre sin perder el hilo. Además, al terminar tendrás una aplicación funcional lista para desplegar, lo cual es perfecto si quieres empezar a crear tus propios proyectos con este framework.

En definitiva, si quieres dar el salto de React a aplicaciones web más completas y rápidas, este tutorial es probablemente uno de los mejores puntos de partida. Es oficial, está pensado para aprender construyendo y, lo mejor de todo, no cuesta absolutamente nada.

#NextJS #ReactJS #DesarrolloWeb #Programacion #JavaScript #Frontend #FullStack #WebDevelopment #DevTools #AprenderProgramacion

Si eres diseñador, desarrollador o simplemente te flipa el buen diseño, Godly.website es como ese moodboard imposible de ignorar que siempre quisiste tener. Se trata de una galería curada de sitios web extraordinarios, seleccionados a mano por su estética, creatividad y presencia visual — nada de basura generada automáticamente. Cada día puedes perderte entre propuestas audaces, portfolios espectaculares, webs con animaciones locas y proyectos que rompen las reglas tradicionales del diseño digital.

La magia de Godly está en su selección: no verás miles de sitios mediocres sino lo mejor de lo mejor, desde e-commerce con estilo hasta portafolios que parecen obras de arte, todo organizado para que te inspires sin perder tiempo.

Eso sí: algunos usuarios comentan que cuando cambian el diseño de la propia plataforma, no todo el mundo está contento — para algunos, la navegación pierde facilidad aunque sigue siendo una mina de buenas ideas.

En definitiva, si lo tuyo es el diseño web con alma, visualmente atrevido y con toneladas de UX y UI que te hagan decir “wow”, Godly.website es una parada obligatoria en tu feed diario de inspiración.

#GodlyWebsite #DiseñoWeb #InspiracionUIUX #WebDesign #UXDesign #UIDesign #TendenciasUX #CreatividadDigital #PortafolioWeb #DiseñadoresWeb #InspiracionWeb