¿Siguen siendo necesarios los Design Systems en la era de agentes de IA?

Durante la última década, los design systems se consolidaron como un pilar fundamental en el desarrollo de productos digitales. Empresas como Google, IBM y Shopify demostraron que la estandarización de componentes, patrones y guías visuales no solo mejoraba la consistencia, sino también la velocidad de desarrollo y la colaboración entre equipos.

Sin embargo, hacia 2025–2026 emerge una nueva pregunta: ¿siguen siendo necesarios los design systems en un contexto donde agentes de IA pueden generar interfaces completas a partir de instrucciones bien definidas?

El módulo CSS View Transitions introduce una forma nativa de crear animaciones fluidas entre diferentes vistas de una aplicación web. A diferencia de soluciones basadas en JavaScript o librerías externas, esta especificación permite definir transiciones visuales directamente desde CSS, integrándose con la View Transition API del navegador.

El objetivo principal es mejorar la continuidad visual al cambiar de estado dentro de una página (SPA) o al navegar entre documentos del mismo origen (MPA), manteniendo un rendimiento óptimo y una implementación declarativa.

Uso y diferencias de cómo usar meter y progress de HTML5

HTML5 introdujo nuevas etiquetas que permiten construir componentes de interfaz de usuario comunes sin necesidad de JavaScript adicional. Dos de estos elementos son <progress> y <meter>, útiles para mostrar progreso de tareas y mediciones dentro de un rango conocido, respectivamente. Al final del artículo tendrás un ejemplo aplicado.

El mundo del diseño web está en constante evolución, y CSS sigue introduciendo propiedades que nos dan mayor control sobre la presentación del texto. Una de las adiciones más interesantes recientemente es la propiedad text-wrap, que permite a los desarrolladores definir con precisión cómo se comportan los saltos de línea en nuestros textos, algo que se necesitaba hace mucho tiempo.

En el mundo del diseño web, la adaptabilidad es clave. Ya tenemos @media para adaptar nuestros estilos a distintos tamaños de pantalla, pero ¿qué pasa si queremos que un componente cambie su estilo según el tamaño de su contenedor y no del viewport? Ahí entra en juego una nueva y poderosa herramienta: @container.

En este artículo te explico qué es, cómo se usa y te muestro ejemplos prácticos para que empieces a usarlo hoy mismo.

Una tarea común en el diseño es aplicar transparencia a un color, y con técnicas más actuales, colores definidos como variable. Esto puede lograrse con pre-procesadores CSS y nativamente utilizando combinaciones de sintaxis modernas como rgba(), hsla() y otros ya soportados ampliamente. Este artículo explica cómo manejar esta necesidad técnica con ejemplos prácticos.

En un Design System que estoy trabajando actualmente, el stack consiste en: Vite, Vue, Ant Design System (Antdv) y otras librerías. Mi intención es customizar Antdv con tal de no crear nuevas clases o sobreescribir estilos sino nativamente crear la identidad gráfica, a través de custom variables de Antdv.

El proceso no fue corto y finalmente encontré la receta, la que muestro en este artículo con tal de ayudar a alguien más.

Este artículo contiene pensamientos, experiencias personales y mucha observación de comportamiento. Espero sea útil. Tenía reservada una hora médica y al pagar le pregunto a la asistente: «¿Para reservar un examen radiológico lo puedo hacer aquí mismo?» A lo que me responde: «No señorito, lo hace en el piso 1 o por internet o envía un correo a qwerty@examenes.xyz». Me siento a esperar mi hora y observo un tótem donde con tu identificación obtienes un número para que te atienda un humano, como lo acababa de hacer.

HTML5 hace años incorporó varios nuevos tipos de input, entre ellos el search. Este nuevo input -aparte de semántico- coloca una ✕ para borrar el valor ingresado en el input y comenzar de nuevo con la búsqueda.

Hace ya varios meses que diferentes sistemas operativos y aplicaciones traen como opcional el dark-mode, donde todo lo claro se ha vuelto oscuro. ¿Moda, accesibilidad? Realmente no he indagado, pero eso trae pequeños problemas en cuanto al uso de navegadores web. Me topé con uno en específico que me llevó a escribir este artículo. Hechos: Navegando por Internet y con varios enlaces abiertos, veo que un favicon de color negro apenas se nota en el tab de color gris oscuro.