# Entraron cuatro briefs y salió un solo sistema de diseño Antes de lanzar ux-skill 4.0 lo probé con cuatro briefs sin nada en común. Repitió el mismo sistema. Esta fue la regla que lo corrigió. https://laithjunaidy.com/es/writing/four-briefs-one-design-system Por Laith Aljunaidy. Publicado: 2026-11-14. --- ![Cinco tarjetas que resumen la historia: cuatro briefs, texto de 16 píxeles en los cuatro, la regla «Corrígelo con criterio, sin reglas fijas», el par más cercano a 0.41 sobre un mínimo de 0.20 y la versión 4.0.0](https://laithjunaidy.com/writing/four-briefs/bento.jpg) *La historia en cinco tarjetas.* [ux-skill](https://laithjunaidy.com/es/research/ux-skill) es mi motor de diseño de código abierto. Le das un color de marca y un brief, y construye un sistema de diseño: color, tipografía, espaciado, esquinas y movimiento. Existe porque las páginas creadas con herramientas de IA se parecen todas, y yo quería que dejaran de hacerlo. El 25 de septiembre de 2026 la versión 4.0 estaba cerca. El motor construía sistemas y cada uno superaba los 324 controles de contraste, la prueba de que el texto puede leerse sobre su fondo. Hasta entonces las demostraciones eran pequeñas: el motor funcionando sobre una sola tarjeta. Una tarjeta no demuestra nada sobre una marca. Así que mandé probarlo en sitios reales antes de seguir. Esta es la prueba, como instrucción que puedes reutilizar con tu propia herramienta: ``` Antes del lanzamiento, construye cuatro sistemas de diseño a partir de cuatro briefs que no deberían compartir nada: una aplicación de pagos con árabe como idioma principal para comerciantes, una herramienta de bases de datos para ingenieros de backend con modo oscuro por defecto, un restaurante familiar cálido y divertido y una clínica donde muchos pacientes tienen más de 60 años. Coloca los cuatro uno al lado del otro y enumera todo lo que haya salido igual. ``` Esto es para cualquiera que construya una herramienta que genere cosas: sistemas de diseño, composiciones, textos o código. No hace falta saber programar para seguirlo. ## ¿Qué salió igual? Casi todo. ![Cuatro páginas del motor del 25 de septiembre, para una clínica, una herramienta de bases de datos, un restaurante y una aplicación de pagos: la misma tipografía y los mismos tamaños, en cuatro colores](https://laithjunaidy.com/writing/four-briefs/before.jpg) *El motor del 25 de septiembre, reconstruido esta semana. Cada brief recibe a propósito la misma página y las mismas palabras, para que solo cambie el sistema. Solo cambia el color.* Medí los cuatro sistemas que construye esa versión: | Brief | Texto del cuerpo | Fuente de títulos | Fuente del cuerpo | Esquinas de botones | | :- | -: | :- | :- | -: | | Clínica, pacientes mayores de 60 | 16px | Source Sans 3 | Source Sans 3 | 10px | | Herramienta de bases de datos, modo oscuro por defecto | 16px | Manrope | Manrope | 6px | | Restaurante familiar, divertido | 16px | IBM Plex Sans | IBM Plex Sans | 8px | | Aplicación de pagos, árabe como idioma principal | 16px | IBM Plex Sans | IBM Plex Sans | 6px | La clínica para mayores de 60 recibió el mismo texto de 16px que la herramienta para ingenieros. El restaurante divertido recibió la tipografía de la aplicación de pagos. Todos los sistemas usaban una sola fuente para títulos y cuerpo. El azul de los mensajes informativos era el mismo en los cuatro. Era peor de lo que muestra la tabla: - **El brief se leía y se descartaba.** El motor indicaba que no reconocía «muchos mayores de 60», lo ignoraba y después informaba de que no había nada que hacer. - **Las fuentes solo eran nombres.** Cada sistema nombraba una tipografía sin incluir cómo cargarla, así que una página real recurría a lo que tuviera el ordenador. Por eso las cuatro páginas de arriba comparten una fuente. - **El color de marca se cambiaba.** El naranja del restaurante, #E85D04, se convertía en #BB4900 en el botón para que el texto blanco superara el contraste. El texto oscuro sobre el naranja real también lo habría superado. Los cuatro sistemas superaban todos los controles de contraste. Los controles preguntaban si cada sistema era correcto. Ninguno preguntaba si dos sistemas eran diferentes. ## ¿Cuál es la solución equivocada? La solución rápida es una tabla. Restaurante significa esquinas redondas y una fuente amable. Clínica significa texto grande. Herramienta para desarrolladores significa formas angulosas y modo oscuro. Es un callejón sin salida. Una tabla es una plantilla con más filas. Falla con el primer brief que nadie haya incluido y da a todos los restaurantes del mundo el mismo restaurante. Es la uniformidad que la herramienta existe para combatir. Me presentaron la lista de hallazgos. Mi decisión ocupó una línea: ``` Todo correcto. Corrígelo con criterio, sin reglas fijas. ``` Las reglas fijas son la tabla. Aplicar criterio significa calcular cada valor a partir de este brief y esta marca, dentro de un rango lo bastante amplio para que una persona vea la diferencia. La misma regla, desarrollada para que puedas dársela a tu propia herramienta: ``` No añadas una tabla de correspondencias por sector o categoría. Calcula cada valor a partir de este brief y esta marca: tamaño del texto, tipografía, esquinas, espaciado, funciones del color y movimiento. Usa un rango lo bastante amplio para apreciarlo a simple vista. Lee a quién va dirigido el producto: edad, idiomas, qué escritura tiene prioridad, modo claro u oscuro por defecto, lectura en un escritorio o en movimiento. Escribe en el informe el motivo de cada valor. Si no has podido interpretar algo del brief, indica qué y cómo hay que proporcionártelo. Nunca informes de que no hay nada que hacer. ``` ## ¿Cómo se prueba que son «diferentes»? «Hazlos diferentes» no es algo que una herramienta pueda aprobar o suspender. Un número sí. Así que la diferencia pasó a medirse. Para cada par de sistemas, el motor compara lo que una persona ve de un vistazo: color, tipografía, tamaños, esquinas, sombras y espaciado. Devuelve una distancia: 0 significa idénticos y 1 significa que difieren en todo. El mínimo se fija en 0.20. Si algún par de los briefs de prueba queda por debajo, falla el conjunto de pruebas, y un cambio que no lo supera no se incorpora. ``` Para cada par de resultados, mide cuánto se diferencian en lo que una persona ve de un vistazo: color, tipografía, tamaños, esquinas, sombras y espaciado. Dame un número por par, donde 0 signifique idénticos y 1 signifique que difieren en todo. Fija un mínimo. Haz que las pruebas fallen si algún par queda por debajo del mínimo. ``` El trabajo para darles personalidad se incorporó ese mismo día: 44 cambios entre las 09:22 y las 16:31. El resto de 4.0 llevó cinco semanas más. ## ¿Cómo se ven ahora los cuatro? ![Las mismas cuatro páginas en la versión 4.0.0: cuatro fuentes distintas para títulos, distintos tamaños de texto y distintas esquinas, y la herramienta de bases de datos en modo oscuro](https://laithjunaidy.com/writing/four-briefs/after.jpg) *Los mismos cuatro briefs en la versión 4.0.0. La misma página, las mismas palabras. Ahora los sistemas se diferencian.* | Brief | Texto del cuerpo | Fuente de títulos | Fuente del cuerpo | Esquinas de botones | | :- | -: | :- | :- | -: | | Clínica, pacientes mayores de 60 | 18px | Newsreader | Source Sans 3 | 9px | | Herramienta de bases de datos, modo oscuro por defecto | 16px | Space Grotesk | Manrope | 2px | | Restaurante familiar, divertido | 17px | Baloo 2 | Nunito Sans | 11px | | Aplicación de pagos, árabe como idioma principal | 16px | Sora, y Alexandria para árabe | IBM Plex Sans | 2px | El texto de la clínica es más grande porque el brief decía quién lo lee, y el informe lo explica. La herramienta de bases de datos se abre en modo oscuro porque su brief lo pedía. Cada sistema tiene una fuente de títulos distinta de la del cuerpo e incluye cómo cargar ambas. El azul informativo ahora son cuatro azules distintos, cada uno ajustado a su marca. Dos aún comparten texto de 16px y esquinas de 2px: la herramienta de bases de datos y la aplicación de pagos. Se diferencian en tipografía, color y composición, por eso su distancia es 0.46 y no cero. Las seis distancias, por encima del mínimo de 0.20: | Par | Distancia | | :- | -: | | Clínica y herramienta de bases de datos | 0.41 | | Clínica y restaurante | 0.53 | | Clínica y aplicación de pagos | 0.46 | | Herramienta de bases de datos y restaurante | 0.56 | | Herramienta de bases de datos y aplicación de pagos | 0.46 | | Restaurante y aplicación de pagos | 0.54 | Hay algo que aún no está bien. El botón del restaurante es #CA5000 en 4.0.0. Está más cerca del #E85D04 de la marca que el #BB4900 de septiembre, y sigue sin ser el naranja de la marca. Las cuatro páginas están bien. Ninguna es una página que te haga detenerte a mirarla, y lo acepté para este lanzamiento: 4.0 se llama Foundations porque eso es lo que establece, los cimientos. El motor tenía 3,315 pruebas la mañana del ensayo. La versión 4.0.0 se publicó con 13,059. ## ¿Se publicó cuando dije que estaba publicada? No, y el mismo tipo de control lo habría detectado. Marqué 4.0.0 como publicada el 2 de noviembre. El 11 de noviembre miré qué recibe alguien que no me conoce al instalarla. El registro público, de donde descarga una orden de instalación, seguía ofreciendo 3.2.0, publicada el 23 de septiembre. Las notas de la versión decían 4.0. La instalación decía 3.2. Siguió así durante diez días, hasta que 4.0.0 se subió el 12 de noviembre. Es el fallo de septiembre otra vez. Había comprobado mi parte: el código, la etiqueta y las notas. No había comprobado qué recibe una persona. Ese control ahora forma parte de cada lanzamiento: ``` Después de cada lanzamiento, instala el paquete desde el registro público en una máquina limpia, como lo haría un usuario nuevo. Muestra la versión. Si no coincide con la anunciada, el lanzamiento no está publicado. Avísame antes de que lo descubra otra persona. ``` ## Si construyes una herramienta que genera cosas - En lugar de comprobar si un resultado es correcto, compara cuatro resultados entre sí. - En lugar de elegir entradas de prueba fáciles, elige entradas que no deberían compartir nada. - En lugar de corregir la uniformidad con una tabla por categoría, calcula cada valor a partir de la entrada. - En lugar de pedir «más variedad», mide la distancia entre resultados y fija un mínimo. - En lugar de dejar que la herramienta omita lo que no pudo interpretar, haz que diga qué omitió. - En lugar de confiar en las notas de la versión, instala tu propio producto como lo haría un usuario nuevo. La pregunta que espero: cuatro briefs son una muestra pequeña, ¿por qué confiar en ella? No la uso como medida. Cuatro briefs que no deberían compartir nada bastan para detectar una herramienta que lo hace todo igual, y son lo bastante pocos para ponerlos en una pantalla y juzgarlos a simple vista. El mínimo cubre el resto: esa prueba se ejecuta con cada cambio propuesto para el motor. ux-skill es gratuito y de código abierto. [La página del proyecto](https://laithjunaidy.com/es/research/ux-skill) tiene los detalles y el enlace al código.