Equipos de agentes
⚡ Product Design & UX Labs • Nivel de Autonomía L4 / L5

Célula de Diseño de Aplicaciones (UI/UX & Product Design)

Equipo multiagente especializado en investigación de usuarios, arquitectura de producto, diseño de interfaces modernas, tokens de diseño y prototipos interactivos testeados.

⚠️

El Problema Tradicional

El 70% de las aplicaciones móviles y plataformas web fallan por interfaces confusas, flujos de registro engorrosos, falta de estándares de accesibilidad y una gran brecha de comunicación entre diseñadores y desarrolladores.

✨

Con el Equipo Multiagente

Una célula de diseño con 6 especialistas que investiga usuarios objetivo, crea sistemas de diseño modulares basados en tokens compatibles con código, diseña microinteracciones fluidas y audita heurísticamente la usabilidad antes del lanzamiento.

6
Especialistas UI/UX
Tokens
Design System Sincronizado
WCAG AAA
Accesibilidad Universal
100%
Paridad Diseño / Código
Ecosistema Especializado

Quiénes son los Agentes

Cada agente posee un rol delimitado, criterios de éxito rigurosos y herramientas específicas para eliminar la improvisación.

📱

Product Designer Lead

Líder de Producto & Experiencia

"Liderar la visión integral del producto digital, diseñar la arquitectura de flujos de navegación (User Journeys) y alinear la experiencia con los objetivos comerciales del negocio."

Entrada:
Visión de la appPúblico objetivoRequerimientos funcionales
Salida:
MAPA_FLUJOS_APP.mdUser Journey MapsWireframes Estructurales
🔬

UX Researcher

Investigador de Usuarios & Validación

"Conducir investigaciones profundas, entrevistas cualitativas con usuarios sintéticos, análisis de competidores (benchmark) y pruebas de usabilidad para validar hipótesis antes de diseñar."

Entrada:
Hipótesis de usoPerfil del usuarioProblemas a resolver
Salida:
INFORME_RESEARCH.mdBuyer Personas & ArquetiposMatriz de Dolores y Necesidades
🎨

UI & Design System Specialist

Arquitecto Visual & Componentes

"Diseñar la interfaz visual final de alta fidelidad, definir la paleta cromática, tipografías, estados de componentes y estructurar los tokens de diseño (variables JSON) listos para los programadores."

Entrada:
Wireframes aprobadosLineamientos de marcaGuías de accesibilidad
Salida:
DESIGN_TOKENS.jsonBiblioteca de ComponentesMockups de Alta Fidelidad
✨

Interaction & Motion Designer

Especialista en Microinteracciones & Animación

"Diseñar las transiciones de pantalla, animaciones funcionales de carga, feedback táctil/háptico y comportamientos interactivos que doten a la app de dinamismo y personalidad."

Entrada:
Mockups de UIFlujos de navegaciónEspecificaciones de gestos
Salida:
ESPECIFICACION_ANIMACIONES.mdCurvas de Aceleración (Easing)Lottie / SVG Specs
✍️

UX Writer / Product Copy

Estratega de Microcopy & Contenido

"Escribir todos los textos de la interfaz: etiquetas de botones, mensajes de confirmación, flujos de bienvenida (onboarding), estados vacíos y mensajes de error comprensibles sin frustración."

Entrada:
Wireframes de pantallasTono de la aplicaciónCasos de error
Salida:
DICCIONARIO_MICROCOPY.mdGuión de OnboardingTextos de Ayuda y Notificaciones
🔍

Design QA & Auditor Heurístico

Auditor de Usabilidad & Paridad

"Evaluar los diseños contra las 10 heurísticas de usabilidad de Nielsen, auditar contrastes y verificar que la app construida en código replique con 100% de fidelidad las pantallas diseñadas."

Entrada:
Prototipo de diseñoImplementación frontend / mobile
Salida:
AUDITORIA_HEURISTICA.mdChecklist de Paridad Diseño-CódigoReporte de Accesibilidad
Arquitectura y Orquestación

Cómo Trabajan en Equipo

Un proceso estructurado por fases donde ningún agente inicia sin su contrato de entrada (Input Contract) validado.

1

Fase 1: Descubrimiento y Mapeo del Usuario

UX ResearcherProduct Designer Lead

Investigación de necesidades, benchmark de apps líderes en la categoría y mapeo de las tareas críticas que el usuario resolverá en la aplicación.

📄 Artefacto: INFORME_RESEARCH.md + USER_JOURNEYS.md
2

Fase 2: Arquitectura de Información y Wireframing

Product Designer LeadUX Writer

Construcción de la estructura de navegación, jerarquía visual en baja fidelidad y validación de los textos funcionales clave.

📄 Artefacto: WIREFRAMES_ESQUELETO.pdf
3

Fase 3: Sistema de Diseño Visual y Mockups de Alta Fidelidad

UI & Design System Specialist

Creación de la biblioteca de componentes, definición de tokens de diseño (colores, sombras, radios) y armado de todas las pantallas finales.

📄 Artefacto: DESIGN_TOKENS.json + UI_MOCKUPS
4

Fase 4: Microinteracciones y Detalle de Movimiento

Interaction & Motion DesignerUX Writer

Definición de transiciones de pantalla, animaciones de éxito, estados de carga (skeletons) y mensajes de retroalimentación.

📄 Artefacto: MOTION_SPECIFICATIONS.md
5

Fase 5: Auditoría Heurística y Handoff a Ingeniería

Design QA & Auditor Heurístico

Revisión final de 10 heurísticas de usabilidad, chequeo de contrastes y preparación del paquete de especificaciones para los programadores.

📄 Artefacto: AUDITORIA_HEURISTICA_APROBADA.md
📱

Prueba de Usabilidad en Móvil Real

Todo flujo se prueba simulando uso con una sola mano en pantallas de 5.8 a 6.7 pulgadas para verificar que los botones queden en la 'zona del pulgar'.

👁️

Certificación de Accesibilidad WCAG AAA

Auditoría obligatoria de contrastes de color, tamaños mínimos de tipografía (16px) y áreas de toque no inferiores a 48x48 píxeles.

Laboratorio Didáctico

Simulador Interactivo de Flujo

Selecciona un escenario de negocio y observa paso a paso cómo se activan los agentes, cómo debaten y qué artefacto entregan.

Escenario a Simular:

Selecciona un escenario arriba y pulsa "Ejecutar Simulación" para ver el flujo en acción en tiempo real.

Documentación Oficial

Entregables y Artefactos

Archivos concretos y estructurados generados durante el ciclo de trabajo del equipo.

📄 DESIGN_TOKENS.json

Tokens de Diseño para Código

Variables estructuradas de colores, espaciados, tipografías y sombras listas para importar en Tailwind, CSS o React Native.

📄 USER_JOURNEY_MAPS.pdf

Mapas de Experiencia de Usuario

Diagrama de los pasos del usuario, emociones, puntos de contacto y momentos de dolor resueltos.

📄 AUDITORIA_HEURISTICA.md

Reporte de Auditoría Heurística

Evaluación de cumplimiento de las 10 heurísticas de Nielsen con score de usabilidad y lista de correcciones.

Puesta en Marcha

Cómo Activar este Equipo

Puedes interactuar con este equipo en Claude Code o en tu entorno multiagente favorito pegando el prompt de inicio.

PROMPT DE INICIO SUGERIDO (Orquestador)
Actúa como el Product Designer Lead de la Célula de Diseño de Aplicaciones. Queremos diseñar la siguiente app: [describe la idea de la app, su público y funciones principales]. Inicia coordinando la investigación de usuario con el UX Researcher y presenta el mapa de flujos inicial.