Aplicación de escritorio
Diseño de Dashboard para Planificador de Viajes
Organiza una jornada de seis paradas en Halcyon Cove. Vincula lugares guardados, ubicaciones en el mapa y tiempos a pie.
LLM Arena sep. 2026
Notas del caso- Modelo
- Claude Opus 5
- Tarea de diseño
- Planificador de excursión urbana con arrastrar y soltar
- Resultado
- Aplicación de escritorio
Pensado para
- Planificación de itinerariosOrganiza una jornada en torno a lugares, horarios de apertura y duración de visitas.
- Dashboards basados en mapasConecta la elección de ubicaciones con una secuencia visible de paradas.
- Prototipos de productos de viajePrueba interacciones de planificación antes de incorporar servicios de viaje en tiempo real.
Aspectos destacados
- Tres vistas vinculadasUna biblioteca de lugares, un mapa urbano y un itinerario comparten cada selección.
- Seis franjas horarias con nombreDe Desayuno a Noche, la jornada adquiere una estructura reconocible.
- Panel contextual del lugarConsulta los horarios y mueve una parada sin salir del plan.
- Coste de ruta visibleLas estimaciones a pie muestran el desplazamiento entre paradas sucesivas.
Explora el dashboard de planificación de viajes
1 / 3Un dashboard de viaje que conecta lugar y tiempo
Daybreak Atlas convierte una jornada ficticia en Halcyon Cove en tres vistas vinculadas. Los lugares guardados se muestran a la izquierda, un mapa urbano ilustrado ocupa el centro y The Day discurre por la derecha. El mapa responde dónde encaja una parada; la línea de tiempo responde cuándo visitarla. Mantener ambas visibles hace más fácil comparar las consecuencias de elegir un lugar.
La biblioteca de lugares no es solo una lista de nombres. Gullwing Bakery tiene una ventana de apertura de 6:30–11:00 h y aparece marcada como In Breakfast cuando se incorpora a la ruta. El mismo lugar aparece entonces en la franja Breakfast, con una duración de visita y los controles View y Remove. Esta identidad repetida es la conexión entre explorar y planificar: la tarjeta cambia de función, pero no de nombre.
Separar horarios de apertura, duración de visita y tiempo de desplazamiento
La parte más útil de este diseño de dashboard para planificador de viajes es su tratamiento del tiempo. Una ventana de apertura, una duración de visita y una estimación a pie describen restricciones distintas. No deben comprimirse en una sola duración ambigua. Este ejemplo las sitúa cerca de la decisión que cada una informa.
| Señal temporal | Dónde aparece | Qué puede decidir el usuario |
|---|---|---|
| 6:30–11:00 h | Tarjeta de Gullwing Bakery y panel del lugar | Si el local está abierto durante la ventana de visita prevista. |
| 35 min de visita | La panadería en la franja Breakfast | Cuánto tiempo dedicar a esa parada, independientemente del desplazamiento hasta ella. |
| ~10 min a pie | Antes de Verdant Steps Garden | Cuánto tiempo de transición añade la siguiente parada al plan. |
| 62 min a pie | Resumen de The Day para Hidden Gardens | Cómo se acumula el desplazamiento en esta ruta concreta de seis paradas. |
De una ruta sugerida a un itinerario deliberado
Surprise Me proporciona una ruta de partida en lugar de pedir al usuario que rellene seis franjas vacías. En el estado capturado de Hidden Gardens, la secuencia va desde Gullwing Bakery hasta jardines, almuerzo y una sala de lectura. Le da al usuario algo concreto que editar. Sigue siendo una sugerencia, no evidencia de que se trate de una ruta optimizada o geográficamente precisa.
Un lugar, varios puntos de entrada útiles
Una tarjeta de lugar guardado y un pin del mapa pueden llevar ambos a los detalles. El panel combina la descripción, el horario de apertura, la duración de visita típica y la franja más adecuada. Quien empiece desde el mapa puede tomar la misma decisión de programación que quien navega por la biblioteca.
Los destinos con nombre hacen predecible el movimiento
El panel identifica la asignación actual y ofrece Breakfast, Morning, Lunch, Afternoon, Sunset y Evening como botones. Esto convierte mover un lugar en una acción visible en lugar de un gesto que hay que descubrir. Una versión en producción debería hacer igualmente explícita la sustitución de una franja ocupada antes de confirmarla.
Empieza con un ejemplo completo
Elige un tema de Surprise Me y lee la secuencia de paradas junto al mapa. Comprueba si el tema propuesto se refleja en las categorías reales de los lugares y no solo en su etiqueta.
Inspecciona antes de mover
Abre un lugar, compara su ventana de apertura con las franjas horarias disponibles y usa una franja con nombre para moverlo. Observa el cambio resultante en la línea de tiempo y la ruta.
Revisa el día en su conjunto
Antes de usar Lock the Day, compara el número de franjas rellenas con el total de caminata. Estos datos ofrecen una revisión final más útil que tratar un botón de finalización como prueba de un itinerario viable.
Qué demuestra este prototipo de planificador de viajes
Halcyon Cove, sus locales y sus estimaciones de caminata son contenido de demostración. El artefacto es un prototipo local de front-end, no un mapa en tiempo real, un servicio de reservas ni un planificador multiusuario. Su comportamiento original de almacenamiento local no está disponible en el entorno aislado de Show Preview, por lo que no debe confiarse en el progreso guardado allí. Claude Opus 5 es la etiqueta proporcionada con la exportación del propietario, no un resultado de referencia verificado de forma independiente.
Cómo crear un diseño de dashboard para planificador de viajes en OpenDesign
Describe las tres vistas conectadas
Dale a OpenDesign una pequeña ciudad ficticia y especifica cómo aparece un lugar en la biblioteca, en el mapa y en la línea de tiempo. Define la identidad compartida del lugar antes de añadir decoración. El prompt siguiente es un ejercicio de diseño nuevo inspirado en este caso, no el prompt de generación original.
Prompt sugeridoCrea un diseño de dashboard para planificador de viajes ambientado en una ciudad costera ficticia. Usa un fondo de papel cálido, una biblioteca de lugares compacta a la izquierda, un mapa ilustrado en el centro y una línea de tiempo del día a la derecha. Incluye seis franjas con nombre: Desayuno, Mañana, Almuerzo, Tarde, Atardecer y Noche. Cada lugar de muestra necesita una ventana de apertura, una duración de visita típica y una categoría. Seleccionar un pin del mapa o una tarjeta de biblioteca debe abrir el mismo panel de lugar. Permite asignar un lugar mediante botones de franja explícitos y también mediante arrastrar y soltar. Muestra el tiempo estimado a pie entre paradas sucesivas, separado de la duración de la visita, y un total en el resumen del día. Incluye un estado inicial de ruta sugerida y un estado final de revisión. Etiqueta lugares y estimaciones de ruta como datos de demostración ficticios; no impliques mapas en tiempo real, reservas, edición compartida ni persistencia en la nube.
Rastrea un cambio a través del dashboard
Pide a OpenDesign que mueva un lugar a otra franja y que propague el cambio a la etiqueta de la tarjeta, el pin de mapa seleccionado y la línea de tiempo. Compara los estados antes y después. Mantén el mismo nombre de lugar y duración en todas partes, y especifica qué ocurre si la franja de destino ya contiene una parada.
Prueba una ruta que no encaja
Usa un lugar de muestra que cierra antes de su franja asignada y examina cómo el diseño explica el desajuste. En pantallas más pequeñas, decide qué panel tiene prioridad y haz que los otros dos sean accesibles sin comprimir tres columnas de escritorio en una ventana de teléfono.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Diseño de planificador de excursiones
Planifica seis paradas programadas en la ciudad ficticia de Solara Bay, con un mapa ilustrado, estimaciones de trayectos a pie y advertencias útiles sobre la ruta.
Aplicación de escritorio
Diseño de explicación interactiva de producto
Explora las capas separadas de un teléfono conceptual con vistas de cámara predefinidas, un deslizador y un panel de ocho grupos de ensamblaje.
Aplicación de escritorio
Diseño de juego de aventuras isleñas
Explora Harbor Skirmish, una pequeña isla costera con rutas por los tejados, tres ranuras de armas y una interfaz en primera persona de tono desenfadado.
Aplicación de escritorio
Diseño de juego FPS insular
Entra en Harbor Skirmish, donde una llamativa pantalla de título insular conduce a una experiencia en primera persona con paneles de estado enmarcados y controles de armas numerados.
Aplicación de escritorio