Cómo fusionar diseño UI/UX de precisión con desarrollo Full-Stack impulsado por IA para construir un sistema de transporte interactivo en tiempo real en tiempo récord.
- Tipo de proyecto: Identidad Visual Corporativa, Diseño UI/UX, Desarrollo web
- Software: Illustrator, Gemini, Claude, GitHub
- Año: 2026
- Cliente: Proyecto ficticio
La movilidad en el área metropolitana de Valladolid se enfrenta históricamente a una barrera institucional crítica: la Junta de Castilla y León ofrece una información pública prácticamente nula, fragmentada o desactualizada sobre las líneas interurbanas. En la actualidad, el viajero se ve obligado a navegar por las webs dispersas de cada operador privado (La Regional, Linecar, Autocares Interbús, etc.), enfrentándose a tablones de horarios opacos y a la descarga constante de PDF fijos que no reflejan la realidad del servicio. MEVASA nace para romper con esta inercia, centralizando toda la información de las 15 líneas metropolitanas, tarifas, operadores y un mapa de la red unificado en una única plataforma digital pensada exclusivamente para ofrecer al usuario lo que realmente necesita: claridad, inmediatez y acceso transparente al transporte público.
Lo que tradicionalmente requeriría semanas de maquetación cartográfica y ajuste manual de coordenadas geográficas se resolvió mediante flujos de trabajo de desarrollo asistidos por Inteligencia Artificial.
Utilizando modelos de lenguaje como copilotos de arquitectura frontend, el proceso de desarrollo avanzó a velocidad de prototipado rápido pero con solidez de código de producción:
- Generación algorítmica del mapa esquemático: Mediante vectores SVG parametrizados y cálculo de proporciones, la IA permitió estructurar las líneas radiales conectando el núcleo de Valladolid con los 15 municipios sin que las trazas cruzaran de forma anómala sobre los viales de OpenStreetMap.
- Sincronización bidireccional: Implementación instantánea de los estados de hover cruzados (al pasar el cursor por un municipio se iluminan sus líneas correspondientes, y viceversa).
- Simulación de flota en tiempo real: Creación de un servicio de telemetría simulada sobre Leaflet con gestión de estados en memoria, capaz de calcular posiciones interpoladas y velocidades por tramo.
Frontend: React 18 sobre Vite, optimizado para cargas instantáneas y compilación limpia mediante despliegue automatizado con GitHub Actions.
Estilos: Tailwind CSS configurado a medida para romper con los estándares predeterminados de bordes redondeados y aplicar una retícula modular estricta.
Cartografía Interactiva: Integración avanzada de Leaflet con capas de teselas personalizadas de OpenStreetMap adaptadas mediante filtros CSS a un tema oscuro corporativo.
MEVASA demuestra cómo la inteligencia artificial no sustituye el criterio de diseño ni la arquitectura de software, sino que actúa como un multiplicador exponencial de capacidad. Al delegar la repetición de código y la resolución matemática de coordenadas en la IA, el rol de desarrollo y diseño se eleva a la dirección de arte, la experiencia de usuario y la toma de decisiones estratégicas, logrando un producto funcional, complejo y visualmente rotundo en un ciclo de desarrollo sin precedentes.