Diseño Applaudo · Volaris PoC 2 · Fare Flex Android

Contratos claros, menos retrabajo

Qué aprendimos al pedirle a un agente de IA que construya una feature real usando solo el contrato, y qué cambiamos.

VolarisFare FlexAndroidBorradorOct ’26

Applaudo

PoC 2 · Contratos · Oct ’26

Qué buscamos

¿Un contrato claro basta para que la IA construya bien?

Volaris PoC 2: la tarifa Fare Flex en Android, construida por un agente de IA.

1

Contrato diseño ↔ código

Dice qué se construye, con qué piezas y cómo se ve.

2

Agente de IA

Construye la feature usando solo el contrato.

3

Feature correcta

Igual a Figma y con menos retrabajo.

La prueba

Si el contrato es claro, ¿el agente acierta a la primera?

Qué buscamos

PoC 2 · Contratos · Oct ’26

Antecedente · Primera prueba

La primera prueba salió contaminada

La corrida del equipo de desarrollo no sirvió como referencia: no medía lo que queríamos medir.

Figma equivocado

Se partió de un archivo de Figma que no era el vigente.

Fuera del flujo principal

No se enfocó en el flujo principal de Flex.

Pantallas inventadas

Se armaron pantallas que no estaban contempladas.

Aprendizaje

Sin un alcance cerrado, desviarse era fácil. Hacía falta una corrida limpia, con el contrato como única fuente.

Antecedente

PoC 2 · Contratos · Oct ’26

Nuestra corrida «bien hecha»

El agente respetó el contrato

Solo el pack de contratos, solo el flujo principal, sin Figma ni mockups.

0

desviaciones del contrato

Hizo lo que el contrato pedía, tras sus enmiendas.

0

componentes inventados

10 de 12 piezas ya existían. Solo creó las 2 que el contrato pedía.

~3×

más pequeña que la implementación del equipo

1,770 vs 5,779 líneas añadidas. El equipo cubrió más alcance (APIs, CMS, caché).

Además dejó a la vista los huecos de datos (CMS, precios, carrito) en vez de rellenarlos.

Nuestra corrida

PoC 2 · Contratos · Oct ’26

Nuestra corrida · Resultado visual

Pero salió con 32 diferencias

Diferencias visuales contra Figma. Ejemplo: selector Flex completado (2/2).

Selector Flex 2/2 construido por el agente: lista plana sin cajas ni íconos — Agente

Selector Flex 2/2 en Figma: cajas por bloque e íconos — Figma

1El contrato no definía tamaños ni espaciado

Sin tipografía, alturas ni espacios por elemento, el agente decidió por convención.

2Tampoco definía íconos

Salieron filas sin ícono y círculos de relleno donde Figma tiene íconos reales.

3La UI estuvo lista antes que los datos

Sin Flex en el CMS, en los precios ni en el carrito, la card no se pinta en la app real.

36 observaciones contra Figma; 4 coinciden. Quedan 32 diferencias.

Resultado visual

PoC 2 · Contratos · Oct ’26

Comparación

La implementación del equipo quedó más cerca de Figma

Hoja Zero → Flex completada: lo que armó el agente, al lado de Figma.

Hoja Zero a Flex construida por el agente: el selector queda fuera de la card — Agente

Hoja Zero a Flex en Figma: el selector va dentro de la card Flex — Figma

Implementación del equipo

Tomó la geometría de Figma: cajas, tipografía e íconos.
Usó datos reales del CMS.
Cubrió más alcance: APIs, CMS y caché.

Agente

Fiel al contrato y ~3× más pequeño.
Sin datos reales: dejó cada hueco documentado.
Armó la hoja con el selector fuera de la card.

Cada uno ganó en algo distinto. Lo que el equipo tomó de Figma tiene que vivir en el contrato.

Comparación

PoC 2 · Contratos · Oct ’26

Lo que aprendimos en diseño

Nuestro error de lectura

El contrato decía que Flex era una cuarta tarifa. Las reglas de negocio dicen otra cosa.

No aplica

Lo que decía el contrato

Volaris · 4 tarifas

ZeroFlexBasicPlus

Flex como tarifa extra, sin tocar Basic.

Aplica · Confluence

Lo que dicen las reglas de negocio

Volaris · Flex reemplaza a Basic

ZeroFlexBasicPlus

Frontier · Basic se queda

ZeroBasicPlus

Qué cambia

La implementación del equipo siguió la regla correcta. Desde ahora, las reglas de negocio se validan antes de sellar el contrato.

La señal estaba en una nota de Figma («La card de Básica ahora será Flex») y la tratamos como nota vieja.

Aprendizaje de diseño

PoC 2 · Contratos · Oct ’26

El cambio central

Contratos: antes vs ahora

Antes cubrían piezas y estados. Ahora cubren todo lo que el agente necesita para no adivinar.

Antes (pack v1): componentes, estados y todo lo demás sin definir. Ahora (pack nuevo): geometría completa, contrato de composición, origen de cada dato, reglas de negocio, cero invención y paridad visual firmada por Harold y Adonay.

Ver diagrama interactivo ↗ Ver diagrama interactivo ↗

Antes vs ahora

PoC 2 · Contratos · Oct ’26

Ejemplo · Selector Flex

Mismo bloque, dos contratos

El bloque «Equipaje o asiento» del selector Flex, contado en lenguaje simple.

Antes

Pack v1

Piezas: Título + 3 opciones con radio
Textos: «Equipaje o asiento» y sus opciones
Caja y tamaños: —
Íconos: —
Datos: —

Ahora

Pack nuevo

Caja: Borde fino, esquinas medianas, margen interno mediano radiusMd
Título: Negrita grande, color de marca paragraphLargeBold
Opciones: Alto fijo por fila, radio e ícono de 24 px
Textos: Texto exacto en español + su clave en el CMS
Precio: Viene del backend; si falta, usa el de Basic (fallback sellado)
Composición: Va dentro de la card Flex, antes del precio y del botón

Ejemplo de contrato

PoC 2 · Contratos · Oct ’26

El nuevo flujo

Reglas primero, paridad al final

Nada se construye hasta que reglas, datos y UI están sellados.

Flujo en orden: reglas de negocio, contrato de datos y contrato de UI antes del sello; luego construcción y paridad. Si falta algo en la construcción, el agente se detiene y pregunta.

Ver diagrama interactivo ↗ Ver diagrama interactivo ↗

Nuevo flujo

PoC 2 · Contratos · Oct ’26

Qué sigue

Firmar el pack y medir otra vez

La segunda corrida usa el pack nuevo, con la misma feature.

1

Pack nuevo

Beast (nuestro agente de design system) armó 11 contratos, 2 de ellos de composición.

Listo · borrador

2

Firma

Adonay sella contrato y reglas. Harold firma paridad visual y composición.

3

Segunda corrida

El agente reconstruye Fare Flex solo con el pack firmado.

4

Medición

¿Cuántas de las 32 diferencias se cierran?

Si el contrato está completo, el agente no adivina.

Gracias · Preguntas

Applaudo

PoC 2 · Contratos · Oct ’26