Déjame contarte una historia en dos partes.
La primera es compleja, pero marca el antes y el después (y explica por qué sigo enganchado a este dilema).
La segunda es práctica: cómo puedes aprovecharlo hoy.
PARTE 1: Alexa Shopping y el dilema de las capas
Cuando trabajaba en Amazon Alexa Shopping, meses antes del hype de ChatGPT, me obsesioné con una pregunta:¿Cómo diseñas un sistema de compra que funcione igual de bien en voz, pantallas, wearables y múltiples idiomas sin tener que reconstruir todo cada vez?
Pasé 6 meses dándole vueltas a esto. No había referencias, ni gurús ni literatura sobre "Design Systems multimodales aplicados a shopping".
En vez de flujos lineales (buscar -> ver producto -> añadir al carrito -> pagar), propuse algo diferente: agrupar momentos en el tiempo.
No paths únicos. Multi-camino.
Pero aquí viene la parte técnica que me tenía obsesionado:
Cada "momento" no era un componente fijo del Design System. Era un grupo de información que se autogeneraba en un componente multimodal al vuelo.
Déjame explicar esto porque es el núcleo de todo:
El componente multimodal autogenerado
En un Design System tradicional tienes:
- Un botón
- Una card de producto
- Un form de pago
Son componentes prediseñados y estáticos.
En un sistema multimodal, tienes grupos de información que se convierten en componentes según el contexto:
Grupo de información: "Confirmación de compra de pilas AA"
Contiene:
- Nombre del producto
- Precio
- Método de pago guardado
- Dirección de envío
- Fecha estimada de entrega
Y este grupo se autorenderiza como:
🔲 En Echo Show (visual + voz):
-> Card con imagen del producto
-> Botón "Comprar con 1-Click"
-> Voz: "¿Confirmo tu pedido de pilas Duracell por €8.99?"
🗣️ En Echo Dot (solo voz + luz):
-> No hay visual
-> Voz: "Pilas Duracell AA, €8.99, llegan mañana. Di 'confirmar' o 'cancelar'"
-> Anillo LED azul pulsante (esperando respuesta) -> verde (confirmado) -> rojo (cancelado)
👆 En app móvil (visual + touch):
-> Card expandible con detalles completos
-> Botón grande "Confirmar compra"
-> Swipe hacia arriba para ver más opciones
📱 En smartwatch (notificación mínima):
-> "Tu pedido habitual de pilas - €8.99"
-> Dos botones: ✓ y ✗
-> Vibración al confirmar
🤖 En agente de IA (solo API):
-> No hay visual ni voz
-> Consume endpoint: POST /orders/confirm
-> Recibe: {orderId, status, estimatedDelivery}
Y aquí está la magia:
El mismo grupo de información genera 5 componentes distintos automáticamente.
No construyes 5 componentes separados.
Construyes un sistema que sabe qué renderizar según el device.
Lo mejor es que:
Cuando el usuario cambia de device a mitad del flujo, el componente se regenera en el nuevo contexto sin perder estado.
Ejemplo real (más allá del cross-device típico):
Supón que no solo el flujo se retoma entre devices, sino que el componente se reconfigura en tiempo real según el "grupo de información" y el canal en el que aparece.
- Usuario está cocinando y pregunta a Alexa en voz: "¿Queda aceite?"
- Alexa responde con voz: "Queda poco. Puedes pedir tu favorito."
- Alexa activa el componente "pedido recurrente" en modo solo voz, preguntando: "¿Te lo encargo para hoy?"
- Usuario responde con un gesto (acercar la mano a Alexa):
- El sistema traduce ese gesto como "sí, pedir aceite" porque el patrón de luz y la distancia están configurados para esa acción.
- Sin intervención humana, el sistema agrupa toda la info relevante (producto, dirección, método de pago, historial) en un objeto base que puede interpretarse en cualquier contexto.
- El usuario, ya fuera de casa, abre la app móvil de Amazon:
- El sistema detecta el cambio de canal y genera al instante un componente touch, con botón "Cancelar pedido", opciones de cambiar la marca, y notificación con el resumen.
- Todo el estado, opciones y contexto del flujo se mantienen, pero el componente no es el mismo que en Alexa: se adapta automáticamente a las capacidades táctiles y visuales del dispositivo.
El sistema entiende que no existe "un botón de pedir aceite", sino la esencia del pedido, que puede tomar cuerpo como frase de voz, opción en pantalla, vibración en un wearable, o petición a una API de agente de IA.
Así cada "momento" de la experiencia es multimodal y adaptable, no solo cross-device.
Mismo flujo. Múltiples devices. Un solo sistema.
Y esto era posible porque cada componente multimodal tenía estas capas:
🔲 Capa visual: componentes 2D del DS tradicional (cards, botones, forms)
🗣️ Capa conversacional: fragmentos de texto para voz
👆 Capa de input: reglas de interacción (touch, voz, gestos, sensores de distancia)
🔌 Capa de datos: API con el grupo de información
🧭 Capa de navegación: reglas de transición (de dónde vienes, a dónde vas)
Dependiendo del device, el sistema activaba las capas necesarias y generaba el componente al vuelo.
En 2022, esto sonaba abstracto.
Porque eso no escala cuando tienes 15 tipos de devices Alexa diferentes, más app móvil, más web, más wearables.
En 2025, con agentes de IA comprando solos...
PARTE 2: Por qué esto importa y cómo aprovecharlo ahora
Lo que cambió esta semana:Los agentes de IA ya compran solos.
Preguntas a un asistente: "Contrata a 10 creadores para mi campaña".
El agente busca, compara, paga los $50 con tu permiso previo, y te entrega resultados.
Sin app. Sin checkout. Sin formularios.
El agente de IA es solo otro "device" más, aunque actúe sin visual ni voz. Solo lógica de negocio.
Los datos que lo avalan
Esto no es ciencia ficción. Los números son claros:
📊 $1.7 trillones en comercio impulsado por IA proyectados para 2030 (Edgar Dunn & Co.)
📊 25% de ventas online serán realizadas por agentes de IA para entonces (PayPal CEO)
📊 1M+ merchants en Shopify ya habilitados para vender a través de agentes conversacionales
📊 58% de instituciones financieras atribuyen crecimiento de ingresos a IA (McKinsey)
En Alexa Shopping en 2022, esto era un experimento.
En 2025, con agentes comprando solos, es la próxima ola.
El caso que lo hace tangible: cuando Stripe entendió el juego
Stripe lo ejemplifica perfecto:
Una sola API y contexto, infinitos usos.
No integraciones manuales sino reglas, tokens y componentes que se adaptan a cada canal.
Si necesitas un nuevo componente para cada contexto, te quedas atrás.
Si defines bien los grupos de información, el sistema se autogenera y escala solo.
Cómo empezar a construir para este futuro (sin reescribir todo)
La buena noticia: no necesitas tirar tu sistema actual.
¿Cómo empezar?
Puedes empezar aplicando estos principios paso a paso:1. Deja de pensar en componentes fijos. Empieza a pensar en grupos de información.
En lugar de diseñar "una card de producto", pregúntate:
¿Qué información crítica necesito mostrar en este momento?
(Nombre, precio, disponibilidad, método de pago...)
Luego define cómo esa información se renderiza según el contexto:
- Visual: card + botón
- Voz: frase + confirmación
- API: JSON con los mismos datos
- Wearable: notificación mínima
2. Separa datos de presentación.
Tu "grupo de información" debe vivir en una capa de datos independiente.
La capa de presentación decide cómo mostrarlo según el device.
3. Haz que tus componentes sean capaces de continuar en múltiples devices.
El estado del flujo no debería vivir en el componente visual.
Debería vivir en una capa de navegación que persiste entre devices.
Ejemplo: usuario empieza en voz, continúa en app, finaliza en web.
Mismo flujo. Múltiples contextos.
4. Convierte procesos manuales en reglas de renderizado automáticas.
En lugar de crear manualmente variantes para cada contexto, define reglas:
"Si device = Alexa Dot -> solo voz"
"Si device = Echo Show -> voz + visual"
"Si device = agente IA -> solo API"
5. Haz la trazabilidad automática, no opcional.
Cada componente autogenerado debe registrar:
- ¿Qué información contenía?
- ¿En qué device se renderizó?
- ¿Qué capas se activaron?
- ¿Cómo respondió el usuario?
Todo auditable. Siempre.
Por qué esto me tiene tan entusiasmado
Hace 3 años, en Alexa Shopping, empecé a explorar componentes multimodales para compras. Ni siquiera sabía si alguien entendería el porqué, pero estaba decidido a llevar el Sistema de Diseño a su siguiente nivel.
Hoy veo agentes de IA comprando en milisegundos, saltando entre contextos, gestionando permisos...
Y pienso: esto es exactamente lo que intentábamos resolver.
La diferencia es que entonces no había demanda masiva.
Ahora, con $1.7 trillones proyectados en comercio agéntico para 2030...
Ya no es un experimento.
Pero por ahora, la pregunta es simple:
¿Hasta qué punto tus componentes se adaptan o solo se copian a cada canal?
Porque esa es la diferencia entre escalar y tener que crear una variante nueva cada vez que cambia algo.
💬 Me encantaría leer tus casos, retos o dudas. ¿Alguna vez lograste que un mismo flujo viviera en mil contextos sin rehacer componentes?"
Déjalo en comentarios. Quiero saber qué están explorando otros equipos.
#DesignSystems #ProductLeadership #APIs #IA #AgenticCommerce #Multimodal #AlexaShopping