- Ningún lenguaje visual consistente
- Tests A/B estadísticamente poco fiables — cada variante construida de forma distinta
- Más de 10 días por ciclo de campaña
- Equipos externos contratados para cubrir las carencias de capacidad
Caso 02 / 05Sistema de diseñoIngenieríaTokens · MCP
EVOLOK — infraestructura de diseño que mantiene 12 marcas sincronizadas sin un humano de por medio.
12 marcas. 12 equipos independientes. Ningún sistema compartido. Cada campaña empezaba de cero.
EVOLOK 2.0 · el pipelineLo que existe en Figma tiene que existir en CSS automáticamente
Fuente de la verdadFigmaTokens, componentes, Verde / Amarillo / Rojo
→
Capa de sincronizaciónMCPModel Context Protocol
→
SalidaVariables CSSGeneradas, nunca escritas a mano
→
Producción11 temas12 marcas + 3 portales
- Periodo
- 2022 — 2026en curso
- Empresa
- Vocento
- Rol
- Lead · único arquitecto del sistemadiseño, ingeniería y documentación
- Alcance
- 12 marcas editoriales + 3 portales corporativos
- Marcas
- ABC · El Correo · El Diario Vasco · La Rioja · El Diario Montañés · El Comercio · El Norte de Castilla · Las Provincias · La Verdad · Hoy · Ideal · Diario Sur · Sumauto · MujerHoy · Vocento
01 — El problema
Un sistema que nadie había construido — así que todo se rompía constantemente.
Cada una de las 12 marcas editoriales gestionaba sus propias campañas de suscripción, con sus propios archivos CSS, sus propias interpretaciones de los componentes, su propia forma de tratar paywalls y banners. Solo había reutilización informal, que generaba inconsistencias más rápido de lo que cualquier equipo podía corregir. Los diseñadores trabajaban en Figma. Los desarrolladores leían Figma manualmente y lo traducían a CSS a mano. Cada cambio de token exigía un ciclo completo de versionado, revisión y corrección.
“El sistema no era frágil por accidente. Era frágil por defecto — porque no existía ningún sistema.”
Negocio
Producto / UX
- Una experiencia distinta por marca
- Patrones inconsistentes de paywall, banner y checkout que erosionaban la confianza
- Sin una base de diseño, no había mejora medible
Ingeniería
- Sin arquitectura CSS compartida; duplicación
- Dependencias sin control; archivos inmantenibles
- Sin versionado en Git
- Cada desarrollador resolviendo los mismos problemas de forma distinta
02 — El punto de partida
Cómo era de verdad el “antes”.
Campaña en todas las marcas~10,5 días
Cambio visual pequeño~1 día
Nueva variante A/B1+ horas
Componentes reutilizables · docs · versionadoNinguno
03 — La decisión
Podríamos haber construido una librería de Figma. Ese no era el problema.
El problema real era la brecha entre diseño y código. Un sistema de diseño mantenido mediante disciplina humana siempre se degradará más rápido que uno mantenido mediante automatización. La restricción: el sistema tenía que automantenerse — garantizado por la arquitectura.
Descartado
Librería de Figma + CSS manual
En 18 meses los equipos lo adaptarían por su cuenta.
Descartado
Guía de estilo impuesta de forma centralizada
Falla ante la primera fecha de entrega de una campaña regional.
Elegido
Un pipeline automatizado de diseño a código
Figma como única fuente de la verdad, MCP como capa de sincronización, CSS generado automáticamente.
04 — Arquitectura
Un archivo, once temas, cero traducción manual.
Pipeline automatizado
Figma → MCP → variables CSS
La consistencia la garantiza el propio sistema, no las personas acordándose.
MVC aplicado a Figma
ModelInvestigación e insights de comportamientoViewDiseño y prototipado, validados antes del códigoControllerActivos de semáforo
VerdeAmarilloRojo
Los desarrolladores solo reciben archivos en estado Verde — eliminando la mayor fuente de desperdicio.
Theming automático11
Temas en producción. Una configuración de clase por contenedor; logotipos, tipografía y color codificados en CSS. Añadir una marca pasó a ser configuración — no reconstruir.
Infraestructura de documentación
Las docs cambian en el mismo commit. Sin deriva.
Markdown versionado en Git · cheat sheets con HTML listo para copiar · sistema de semáforo · guías de onboarding.
05 — El problema de escala
La adopción no podía imponerse. Había que ganársela.
Adopción
Un archivo CSS. Una etiqueta link. Una clase.
La barrera para adoptarlo era más baja que la barrera para construir cualquier cosa a medida.
Cumplimiento
Autorregulación por versionado
Git más convenciones de nomenclatura. Los componentes obsoletos marcados en rojo en Figma y en las docs al mismo tiempo.
Automatización
Eliminar la traducción manual
Si un token existe en Figma, existe en CSS.
06 — Resultados
Números que cambiaron la forma de operar de los equipos.
Creación de campaña en todas las marcas2 dAntes ~10,5 días. Reducción del ~85%.
MinutosCambios pequeños. Antes ~1 día completo. Reducción del ~95%.
5 minCreación de variante. Antes 1+ horas. Reducción del ~92%.
12+Equipos editoriales usando el sistema, más 3 portales corporativos.
11Temas de marca en producción desde un solo archivo.
07 — Reflexión
Un sistema de diseño es una colección de componentes. La infraestructura es lo que los mantiene vivos.
EVOLOK empezó siendo lo primero y se convirtió en lo segundo. El giro ocurrió cuando dejé de pensar en componentes y empecé a pensar en el pipeline — el flujo desde la decisión de diseño hasta el código enviado, y cada punto en que ese flujo podía romperse.
“La traducción manual entre diseño y código no es un problema de proceso — es estructural. El único arreglo fiable es eliminar el paso manual.”
Qué haría distinto
Implementar MCP desde el primer día, no como una optimización posterior — la fase manual costó meses de deriva. Y validar el pipeline de sincronización con equipos reales antes de escalar.
