07 — Proyectos
Client confidentiel
Un design system entregado con su control de calidad
Rediseño completo de una plataforma de streaming por suscripción: maquetas de alta fidelidad, design system desde cero y traspaso al desarrollador web. Siete meses, único diseñador en el proyecto.
El encargo
El cliente rehacía su plataforma y no tenía ni lenguaje visual definido ni biblioteca. El encargo era de maquetas; el design system se impuso en las primeras pantallas, porque rehacer cada botón a mano en un producto de este tamaño se paga más tarde, en el momento en que el desarrollador pregunta «¿y en este caso, cómo queda?».
Dos niveles de tokens, no uno
Los valores brutos — colores, espaciados, radios — viven en una colección de primitivas. Una segunda colección, semántica, nombra las intenciones: superficie, borde, texto, estado. Los componentes solo consultan esa segunda capa. Es lo que permite cambiar un color de marca sin abrir un solo componente, y hablar con el cliente en términos de roles y no de códigos hexadecimales.
Un token semántico pone nombre a una intención. Es ese nombre, y no el color, lo que el desarrollador encuentra en el código.
Lo que se entregó
- un kit Figma — los tokens como variables, los componentes y los patterns publicados como biblioteca de assets;
- unas guidelines en PDF — anatomía, estados, reglas de uso, restricciones de accesibilidad;
- un skill Claude de control — relee las interfaces desarrolladas y señala las desviaciones respecto a las guidelines.
El control de calidad forma parte de la entrega
Un design system se degrada en cuanto sale de Figma: el desarrollador interpreta, los casos no documentados se inventan, y seis meses después el producto ya no se parece a la biblioteca. El tercer entregable responde a eso. El skill relee las interfaces producidas, las confronta con las guidelines y devuelve las desviaciones — el control pasa a ser una etapa del desarrollo en vez de una revisión de diseño que se va aplazando.
Accesibilidad
Las restricciones WCAG las sostienen los tokens semánticos: un par texto/superficie se valida una vez, a nivel de sistema, y todo componente que lo use hereda el contraste. Comprobar una pantalla se reduce entonces a comprobar que no ha esquivado el sistema.