Portafolio
Harness Design
Preparamos el design system para que la IA entienda el producto por sí sola.
Un design system de una plataforma SaaS B2B para el sector de flotas y logística, con cerca de 90 personas, pasó a ser leído y aplicado correctamente por la IA, en las dos plataformas, ya en producción.
- Rol
- Product Design Manager
- Duración
- 5 meses
- Plataformas
- Web y mobile
Principales resultados
- de los tokens de diseño ya tienen instrucciones de uso listas para la IA, 491 de 496
- 99%
- del código web ya usa el nuevo estándar de diseño
- 97,6%
- de la app mobile ya usa el nuevo estándar, partiendo de 0% antes del rollout
- 68%
- componentes del design system todavía en el estándar anterior
- 0
El desafío
Una empresa de SaaS B2B para el sector de flotas y logística empezó a usar IA para acelerar el desarrollo de software. La ganancia de velocidad en ingeniería dejó al descubierto un cuello de botella: el diseño no seguía el ritmo, y los squads sin diseñador dedicado empezaron a generar interfaz directamente en el código con IA, sin un design system preparado para eso.
El resultado era retrabajo, inconsistencia visual y una IA que inventaba su propia lógica de interfaz cada vez que no encontraba un estándar documentado del producto. La pregunta que motivó el proyecto: cómo preparar el design system para que una IA pudiera producir interfaz con consistencia, sin aumentar el equipo de diseño.
Cómo lo resolvimos
Diagnóstico honesto
Mapeamos lo que ya existía antes de crear cualquier cosa nueva. El plazo estimado era de tres días, llevó cinco, y eso evitó decisiones equivocadas más adelante.
Errores como mapa
La IA acierta sola los patrones universales, pero inventa cuando no encuentra una referencia del producto. Cada error revelaba exactamente qué faltaba documentar.
Instrucciones de uso por token
El color, el espaciado y la tipografía pasaron a llevar propósito, cuándo usar, cuándo no usar y con qué combinan, directamente en la herramienta de diseño.
Producción, no prototipo
Web en julio y app mobile en septiembre de 2026, con pruebas automáticas y comparación visual para dar seguridad al equipo.
Accesibilidad, antes y después
Contraste de color medido por el criterio de la WCAG. Cuanto mayor la razón, más fácil de leer.
- Antes
- Después
Adopción del nuevo estándar por plataforma
Porcentaje del código que ya usa el nuevo vocabulario de diseño, medido en octubre de 2026.
era el presupuesto de mercado para apenas 30 componentes listos. Entregamos la base completa en las dos plataformas con cerca de 4 horas por semana por desarrollador.
pruebas automáticas protegieron una actualización que tocó 1.093 archivos de una vez, con apenas 1 divergencia visual encontrada.
Lo que viene
La base de tokens fue el primer paso. La segunda capa, documentar la intención de cada componente de interfaz (no solo color y espaciado, sino cuándo usar cada pieza y por qué), está en marcha hasta fines de octubre de 2026, y cubre cerca de 60 componentes.
En paralelo, estamos creando una forma de medir, con un puntaje de fidelidad, cuánto refleja ya una pantalla generada por IA el estándar del producto sin necesitar ajuste manual, con una meta de 80% de fidelidad. El objetivo final es que la IA arme pantallas completas con una calidad cercana a la del equipo hoy, liberando a los diseñadores para decisiones de más alto nivel.