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

Parece que después de años de espera, JPEG XL empieza a tener una oportunidad real en la web.

Mozilla ha anunciado su intención de activar JPEG XL por defecto en Firefox, con el objetivo de llevarlo a la versión 157, prevista para finales de septiembre. Y lo interesante es que Chromium también ha iniciado su propio proceso para activar el formato. Safari, por su parte, ya lleva tiempo soportándolo desde Safari 17.

¿Y por qué importa tanto?

Porque JPEG XL no es simplemente otro formato de imagen para sustituir al JPG. Está pensado para conseguir archivos más pequeños manteniendo una buena calidad, algo especialmente interesante para páginas web donde cada KB cuenta. Además, incorpora características como HDR, transparencia, animación y, sobre todo, renderizado progresivo: una imagen puede empezar a mostrarse mientras todavía se está descargando.

Para diseñadores y desarrolladores web esto puede ser bastante interesante. Imágenes más ligeras significan menos transferencia de datos, mejores tiempos de carga y, potencialmente, mejores Core Web Vitals.

También tiene una característica bastante curiosa: puede comprimir imágenes JPEG existentes de forma reversible. Es decir, puedes convertir un JPEG a JPEG XL y recuperar posteriormente el JPEG original sin pérdida. Esto lo convierte también en una opción interesante para almacenamiento y archivo.

El problema de JPEG XL hasta ahora no ha sido precisamente la tecnología, sino el soporte de los navegadores. Chrome eliminó inicialmente el soporte y durante años el formato quedó en una especie de limbo. En 2026 Chromium recuperó el decodificador detrás de una opción experimental y Firefox también ha ido avanzando con su implementación.

Ahora la situación empieza a cambiar de verdad.

Si Chrome y Firefox terminan activándolo por defecto, JPEG XL pasará de ser ese formato que conocían principalmente los aficionados a la imagen y los desarrolladores a convertirse en una alternativa real para las páginas web.

Eso sí: todavía no es momento de borrar WebP o AVIF de tus proyectos. La compatibilidad sigue evolucionando y, mientras no exista una cobertura amplia, lo sensato es utilizar JPEG XL como una opción adicional y mantener un formato alternativo para navegadores que no lo soporten.

Pero la noticia es buena. Después de mucho tiempo dando vueltas, JPEG XL parece que por fin puede tener aquello que necesitaba para despegar: que los principales navegadores lo activen de serie.

Y si eso ocurre, el viejo JPG podría empezar a tener, por fin, un sucesor de verdad.

https://hacks.mozilla.org/2026/08/intent-to-ship-jpeg-xl/

#JPEGXL #JPEG #DiseñoWeb #DesarrolloWeb #Programación #WebPerformance #Frontend #WebDesign #OptimizaciónWeb #Imágenes #Firefox #Chrome #Safari #CoreWebVitals

Si te gustan las interfaces limpias, ordenadas y con ese aspecto de «todo está en su sitio», esta skill para Cursor te puede interesar bastante.

Scandinavian Design sirve para aplicar automáticamente un sistema visual inspirado en el diseño escandinavo a un proyecto web. La idea es sencilla: quitar ruido visual y conseguir una interfaz mucho más limpia, con una base en blanco y negro, tipografías sans-serif, espacios generosos y un uso más cuidado de las imágenes.

Vamos, llevar un poco de ese estilo IKEA al desarrollo web. 😄

Lo interesante es que no se limita a decirle a la IA «hazlo minimalista». La skill está pensada para trabajar sobre un código existente y rediseñar su aspecto visual. El repositorio incluye además diez demos utilizadas para probar y corregir el resultado tanto en escritorio como en móvil.

Para instalarla solo tienes que ejecutar:

npx skills add ericzakariasson/scandinavian-design

Después puedes invocar /scandinavian-design sobre la superficie que quieras rediseñar.

Puede ser especialmente útil cuando tienes una web funcional pero visualmente demasiado cargada y quieres darle una vuelta rápida sin empezar el proyecto desde cero.

Eso sí, minimalismo no significa simplemente poner todo blanco y quitar elementos. Lo interesante está en conseguir que la jerarquía visual, los espacios, la tipografía y las imágenes trabajen juntos para que la interfaz respire.

Una herramienta bastante curiosa para quienes estamos utilizando IA para acelerar el diseño y desarrollo de interfaces.

Ver Scandinavian Design en GitHub

#DiseñoWeb #DiseñoMinimalista #ScandinavianDesign #Cursor #IA #InteligenciaArtificial #WebDesign #Frontend #Programacion #UX #UI #GitHub #DesarrolloWeb

Diseñar una interfaz en una herramienta y después pasarla al desarrollador siempre ha tenido un pequeño problema: el diseño y el código viven en mundos distintos. pen.dev propone eliminar ese salto y poner el diseño directamente donde ya estamos programando.

La idea es bastante sencilla y, a la vez, muy interesante: pen.dev es un canvas de diseño basado en IA que vive dentro del entorno de desarrollo. El proyecto se guarda en el propio código y permite trabajar con el diseño y la implementación prácticamente uno al lado del otro. Actualmente funciona con entornos como Cursor y VS Code, además de otros IDE compatibles.

Aquí entra la parte que más nos interesa si programamos. Puedes diseñar una pantalla o un componente visualmente y después pedirle a la IA que genere el código correspondiente. La documentación muestra ejemplos como convertir un diseño en un componente React, generar una página de Next.js o crear componentes utilizando Tailwind CSS. También permite hacer el camino inverso: llevar código existente al canvas para trabajar sobre él visualmente.

Todo esto se apoya en un formato de diseño abierto basado en archivos .pen, pensado para vivir dentro del propio proyecto. Es decir, el diseño deja de ser un archivo perdido en otra herramienta y pasa a formar parte del workflow de desarrollo.

Y aquí está probablemente lo más interesante de pen.dev: no intenta ser simplemente otro Figma. Su planteamiento es bastante más cercano al de un entorno de programación con capacidades de diseño. La IA puede ayudarte a crear pantallas, explorar diferentes propuestas y trabajar en varios flujos en paralelo.

Además, existe una aplicación de escritorio para Windows, macOS y Linux, extensiones para diferentes IDE y una CLI que permite utilizar las capacidades de diseño asistidas por IA desde el terminal.

¿Va a sustituir a las herramientas tradicionales de diseño? Todavía es pronto para decirlo. Pero el concepto resulta muy interesante: diseñar, programar y utilizar IA dentro del mismo flujo de trabajo, sin estar continuamente exportando diseños, copiando medidas o intentando explicar al desarrollador cómo debería quedar una interfaz.

Para quienes mezclamos diseño gráfico, UI y programación, pen.dev es una herramienta que merece la pena tener en el radar.

Web: pen.dev

#penDev #DiseñoWeb #DiseñoUI #UX #Programacion #IA #InteligenciaArtificial #Frontend #WebDevelopment #React #Cursor #VSCode #DiseñoDigital #DesignToCode #AIDesign

Si trabajas con Figma y quieres darle un poco más de vida a tus diseños, los degradados son un recurso que nunca falla. El problema es que crear algo que quede realmente bien puede llevar más tiempo del que parece. Para eso existen plugins como Mesh Gradient y Noisy Gradients, dos opciones interesantes para experimentar con fondos y composiciones más llamativas.

Mesh Gradient está pensado para crear degradados tipo mesh, esos fondos con transiciones suaves entre diferentes colores que se han convertido en un recurso habitual en interfaces, landing pages, presentaciones y piezas gráficas. Es una forma rápida de conseguir un resultado más orgánico y menos plano que el típico degradado lineal.

Por otro lado, Noisy Gradients añade una vuelta de tuerca al concepto incorporando ruido a los degradados. El resultado son fondos con una textura más granulada y con un aspecto menos digital, algo que puede funcionar especialmente bien en diseños modernos, carteles, portadas o interfaces que buscan un acabado más experimental.

Lo interesante es que puedes utilizar ambos plugins como punto de partida para generar fondos y después seguir trabajando sobre ellos directamente en Figma. Son recursos sencillos, pero pueden ahorrarte bastante tiempo cuando necesitas crear una composición visual atractiva sin empezar desde cero.

Si te gusta experimentar con el color, las texturas y los fondos abstractos, merece la pena tenerlos en tu caja de herramientas de Figma. A veces, un buen degradado es justo lo que necesita un diseño para dejar de parecer tan plano.

#Figma #FigmaPlugins #DiseñoGráfico #DiseñoUI #UXDesign #GraphicDesign #MeshGradient #NoisyGradients #Gradientes #DiseñoDigital #RecursosDiseño #DiseñoWeb

Si pensabas que Figma ya era mucho más que una herramienta de diseño, Config 2026 ha dejado claro que la compañía quiere convertirse en el centro de todo el proceso creativo y de desarrollo digital.

La gran estrella del evento ha sido la llegada de los Code Layers, una función que permite trabajar directamente con código dentro del propio lienzo de Figma. La idea es reducir la distancia entre diseño y desarrollo, permitiendo explorar, modificar y sincronizar interfaces sin saltar constantemente entre herramientas.

Otra de las novedades más llamativas es Figma Motion, un sistema de animación integrado que añade líneas de tiempo, fotogramas clave y generación de animaciones mediante IA. Esto significa que los diseñadores podrán crear transiciones, efectos y movimientos complejos sin depender de software externo.

La inteligencia artificial también llega al apartado visual con los nuevos Shaders, capaces de generar efectos avanzados como pixelados, desenfoques o tratamientos gráficos personalizados simplemente describiendo lo que se quiere conseguir.

Además, Figma ha presentado los Generative Plugins, una forma de crear herramientas personalizadas mediante instrucciones en lenguaje natural, sin necesidad de conocimientos de programación. A esto se suman las nuevas integraciones de IA, conectores con plataformas externas y los flujos de trabajo de Weave, orientados a automatizar tareas creativas complejas.

La sensación general tras Config 2026 es clara: Figma ya no quiere ser únicamente una aplicación para diseñar interfaces. Su objetivo es convertirse en el espacio donde diseñadores, desarrolladores e inteligencia artificial colaboren sobre un mismo lienzo, eliminando barreras entre la idea inicial y el producto final.

#Figma #Config2026 #DiseñoUX #UIDesign #DiseñoDigital #Programacion #DesarrolloWeb #InteligenciaArtificial #MotionDesign #DesignTools #Frontend #ProductDesign

Aquí hay que ser claros: no es que “Fable 5” sea una herramienta mágica nueva, sino más bien una forma de nombrar la evolución que está empujando Anthropic con Claude en el terreno creativo y generativo. Y lo interesante no es el nombre, es lo que cambia para diseñadores y devs.

Para diseño, la novedad más bestia es que dejamos de trabajar solo con pantallas estáticas. Ahora el contenido puede generarse en tiempo real según contexto, usuario o intención. Eso significa que el diseñador ya no está solo pensando en UI, sino en sistemas de comportamiento. Interfaces que no son fijas, sino que “responden”. UX más viva, más variable, menos predecible… y eso obliga a diseñar con reglas, no solo con layouts.

Otra cosa importante: el contenido deja de ser un “asset” cerrado. Antes diseñabas textos, estados, variantes… ahora diseñas estructuras que generan esos elementos. Es como pasar de dibujar cada frame a diseñar el motor que los crea.

En desarrollo, el cambio es igual o más profundo. Las APIs de IA no son solo una feature más, se convierten en parte del core lógico del producto. Empiezas a trabajar con prompts como configuración, estados conversacionales como máquinas de estado, y flujos que no están 100% definidos en el código clásico.

Esto tiene una parte brutal: velocidad. Puedes prototipar ideas complejas muchísimo más rápido. Interfaces, juegos narrativos, asistentes, SaaS dinámicos… cosas que antes requerían semanas de iteración ahora se testean en horas.

Pero también hay una parte menos sexy: control y consistencia. Si el sistema genera contenido, tú tienes que diseñar los límites. Qué puede hacer, qué no, cómo se comporta en edge cases, cómo mantienes coherencia. Eso es nuevo terreno para muchos devs: mezclar ingeniería con diseño de comportamiento.

Y lo más interesante de todo esto es el cambio mental: ya no diseñas pantallas o funciones aisladas. Diseñas sistemas vivos que producen experiencia.

#Claude #Anthropic #IA #DiseñoUX #UI #Programación #CreativeCoding #DesignSystems #UXDesign #AIProducts #Desarrollo

Vale, esto es importante: si sabes hacer una web, ya puedes hacer vídeos. Sin timeline, sin Premiere, sin After Effects. Solo HTML.

Eso es exactamente lo que propone HyperFrames, un framework open source de HeyGen que básicamente rompe la forma tradicional de crear vídeo.

La idea es tan simple que cuesta entender por qué no existía antes: escribes HTML, lo renderizas y obtienes un MP4. Fin.

Pero ojo, no es “HTML metido en un vídeo”. Es un sistema donde defines cada elemento con timing, capas y animaciones usando atributos tipo data-start o data-duration. Es decir, conviertes el DOM en una línea de tiempo.

Y aquí es donde se pone interesante para diseñadores y devs:
no hay interfaz visual obligatoria. No hay timeline arrastrando clips. No hay caos. Hay código limpio.

De hecho, HyperFrames está pensado más para máquinas que para humanos. Sí, literalmente. Está diseñado para que agentes de IA puedan generar vídeos solos porque “hablan HTML de forma nativa”.

Esto cambia totalmente el juego.

Antes:
→ Diseñas en Figma
→ Exportas
→ Editas vídeo
→ Renderizas

Ahora:
→ Describes el vídeo
→ Un agente escribe el HTML
→ Ejecutas un comando
→ Tienes el vídeo listo

Y además con algo clave: determinismo. Mismo input, mismo output siempre. Nada de renders aleatorios o bugs raros. Esto es oro para pipelines automáticos, CI/CD o generación masiva de contenido.

A nivel técnico, por dentro mezcla cosas que ya conoces: Chrome en modo headless, captura frame a frame y FFmpeg para generar el vídeo final. Nada mágico, pero muy bien conectado.

Lo realmente potente no es la tecnología, es el enfoque.

HyperFrames no intenta ser “otro editor de vídeo”. Es más bien una capa nueva:
el vídeo como código.

Y eso tiene implicaciones brutales:
puedes versionar vídeos en Git, generar contenido dinámico, automatizar campañas, o crear vídeos personalizados a escala sin tocar una interfaz visual.

Para diseñadores, esto puede sonar raro al principio. Pero si ya trabajas con motion, UI o sistemas de diseño, en el fondo es lo mismo: componentes, estados y animaciones… solo que ahora viven en HTML.

Para developers, esto es directamente un regalo. No tienes que aprender un software nuevo. Usas lo que ya sabes: HTML, CSS, JS, GSAP o lo que quieras.

Y si te preguntas si esto es hype o no, la comunidad está bastante intrigada. En Reddit ya lo están llamando “lo más interesante” que ha salido en vídeo programático últimamente, sobre todo por lo fácil que encaja con herramientas tipo Claude Code o similares.

¿Va a sustituir a After Effects? No.
¿Va a cambiar cómo se crean vídeos en productos digitales, marketing o IA? Muy probablemente sí.

Porque cuando el contenido se vuelve código, deja de ser manual y pasa a ser escalable.

Y ahí es donde empieza lo realmente gordo.

#HyperFrames #DiseñoGráfico #Programación #VideoAutomation #AI #HTML #Frontend #MotionDesign #DevTools #OpenSource #HeyGen #ContentCreation #NoCode #CreativeCoding

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 empezando en diseño o simplemente necesitas un logo rápido sin complicarte la vida, Logo Diffusion es una de esas herramientas que te hacen pensar: “vale, esto ya está jugando en otra liga”.

La idea es simple: escribes lo que quieres (por ejemplo: logo minimalista para marca de café moderno) y la IA te escupe varias propuestas listas para usar. También puedes subir un boceto cutre hecho en 30 segundos y la herramienta lo convierte en algo bastante decente.

Y aquí viene lo interesante: no es solo generar por generar. Puedes ajustar colores, estilos, composición… básicamente tienes control suficiente para que no parezca el típico logo genérico de IA.

Además, trabaja con modelos de difusión (de ahí el nombre), lo que significa que las imágenes que genera tienen bastante calidad y coherencia visual. Nada de logos rotos o letras raras… bueno, casi nunca

Otro punto fuerte es la velocidad. En minutos tienes varias opciones sobre la mesa, algo que en un proceso tradicional te puede llevar horas o días. Y si estás validando ideas o haciendo branding rápido, esto es oro puro.

También mola que puedas exportar en vector (SVG), lo cual es clave si luego quieres usar ese logo en serio: web, impresión, lo que sea.

Ahora, vamos a ser claros: esto no sustituye a un diseñador. Es una herramienta brutal para empezar, prototipar o incluso sacar algo funcional si vas justo de presupuesto. Pero si quieres una identidad de marca con personalidad de verdad, ahí sigue ganando el factor humano.

En resumen, Logo Diffusion es como tener un diseñador junior ultrarrápido dentro del navegador. Tú le das ideas, él te devuelve opciones. Y a partir de ahí decides si te vale o si necesitas algo más trabajado.

#DiseñoGráfico #IA #LogoDesign #Branding #HerramientasIA #Diseño #Creatividad #Startups #Freelance #DiseñoDigital

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