Aplicativo desktop

Design de dashboard de planejamento de viagens

Monte um dia com seis paradas em Halcyon Cove. Conecte lugares salvos, locais no mapa e tempo de caminhada.

OpenDesignDesign e produção
Oficial
Planejamento de um dia na cidade3 telas
Design de dashboard de planejamento de viagens: mapa completo da cidade, biblioteca de lugares e plano do dia
Exemplo de avaliação · Claude Opus 5Captura de tela 1 de 3

LLM Arena Set 2026

Notas do caso
Modelo
Claude Opus 5
Tarefa de design
Planejador de passeio urbano de um dia com recurso de arrastar e soltar
Saída
Aplicativo desktop

Indicado para

  • Planejamento de itineráriosOrganize um dia considerando lugares, horários de funcionamento e duração das visitas.
  • Dashboards baseados em mapasConecte as escolhas de locais a uma sequência visível de paradas.
  • Protótipos de produtos de viagemTeste interações de planejamento antes de adicionar serviços de viagem em tempo real.

Principais destaques

  • Três visualizações conectadasUma biblioteca de lugares, um mapa da cidade e um itinerário compartilham cada seleção.
  • Seis faixas de horário nomeadasDe Café da manhã a Noite, as faixas dão ao dia uma estrutura reconhecível.
  • Painel contextual do lugarConsulte os horários e mova uma parada sem sair do plano.
  • Custo de deslocamento visívelAs estimativas de caminhada revelam o deslocamento entre paradas sucessivas.

Um dashboard de viagens que conecta lugar e horário

O Daybreak Atlas transforma um dia fictício em Halcyon Cove em três visualizações conectadas. Os lugares salvos ficam à esquerda, um mapa ilustrado da cidade ocupa o centro e The Day se estende pela lateral direita. O mapa responde onde uma parada fica; a linha do tempo responde quando visitá-la. Manter ambos visíveis facilita a comparação das consequências de escolher um lugar.

A biblioteca de lugares não é apenas uma lista de nomes. A Gullwing Bakery tem um intervalo de funcionamento das 6:30am às 11am e recebe a marcação In Breakfast quando passa a integrar a rota. O mesmo lugar aparece então na faixa Breakfast, com a duração da visita e os controles View e Remove. Essa identidade repetida é a conexão entre a exploração e o planejamento: o cartão muda de função, mas não de nome.

O espaço de trabalho completo de planejamento conecta a biblioteca de lugares salvos, o mapa ilustrado e a linha do tempo do dia. A rota Hidden Gardens capturada preenche todas as seis faixas.
O espaço de trabalho completo de planejamento conecta a biblioteca de lugares salvos, o mapa ilustrado e a linha do tempo do dia. A rota Hidden Gardens capturada preenche todas as seis faixas.

Separe horário de funcionamento, duração da visita e tempo de deslocamento

O aspecto mais útil deste design de dashboard de planejamento de viagens é a forma como ele trata o tempo. Um intervalo de funcionamento, a duração de uma visita e uma estimativa de caminhada descrevem restrições diferentes. Eles não devem ser condensados em uma única duração ambígua. Este exemplo os posiciona próximos à decisão que cada um fundamenta.

Três tipos de informação temporal mostrados na rota capturada
Indicador de tempoOnde apareceO que o leitor pode decidir
6:30am–11amCartão e painel de detalhes da Gullwing BakerySe o estabelecimento está aberto durante o período previsto para a visita.
Visita de 35 minA padaria na faixa BreakfastQuanto tempo reservar para essa parada, separado do tempo necessário para chegar até lá.
~10 min de caminhadaAntes de Verdant Steps GardenQuanto tempo de transição a próxima parada acrescenta ao plano.
62 min de caminhadaResumo de The Day para Hidden GardensComo o deslocamento se acumula ao longo desta rota específica de seis paradas.

De uma rota sugerida a um itinerário deliberado

Surprise Me oferece uma rota inicial em vez de pedir ao visitante que preencha seis faixas vazias. No estado Hidden Gardens capturado, a sequência parte da Gullwing Bakery e passa por jardins, almoço e uma sala de leitura. Isso oferece ao usuário algo concreto para editar. Ainda se trata de uma sugestão, não de uma evidência de que essa seja uma rota otimizada ou geograficamente precisa.

Selecionar a Gullwing Bakery abre seu painel completo de detalhes. O mapa da cidade e a rota existentes permanecem visíveis ao fundo, enquanto os controles de faixa de horário oferecem uma alternativa explícita ao recurso de arrastar.
Selecionar a Gullwing Bakery abre seu painel completo de detalhes. O mapa da cidade e a rota existentes permanecem visíveis ao fundo, enquanto os controles de faixa de horário oferecem uma alternativa explícita ao recurso de arrastar.

Um lugar, vários pontos de entrada úteis

Tanto um cartão de lugar salvo quanto um marcador no mapa podem levar aos detalhes. O painel reúne a descrição, o horário de funcionamento, a duração típica da visita e a faixa mais adequada. Assim, quem começa pelo mapa pode tomar a mesma decisão de agendamento que alguém que explora a biblioteca.

Destinos nomeados tornam a movimentação previsível

O painel identifica a atribuição atual e oferece Breakfast, Morning, Lunch, Afternoon, Sunset e Evening como botões. Isso torna a movimentação de um lugar uma ação visível, em vez de um gesto que precisa ser descoberto. Uma versão para produção deve tornar a substituição de uma faixa ocupada igualmente explícita antes de confirmá-la.

  1. Comece com um exemplo completo

    Escolha um tema Surprise Me e leia sua sequência de paradas ao lado do mapa. Verifique se o tema proposto se reflete nas categorias reais dos lugares, e não apenas em seu rótulo.

  2. Examine antes de mover

    Abra um lugar, compare seu intervalo de funcionamento com as faixas de horário disponíveis e use uma faixa nomeada para movê-lo. Acompanhe a alteração resultante na linha do tempo e na rota.

  3. Revise o dia como um todo

    Antes de usar Lock the Day, compare a quantidade de faixas preenchidas com o total de caminhada. Esses dados proporcionam uma revisão final mais útil do que tratar um botão de conclusão como prova de um itinerário viável.

O que este protótipo de planejador de viagens demonstra

Halcyon Cove, seus estabelecimentos e suas estimativas de caminhada são conteúdo de demonstração. O artefato é um protótipo front-end local, não um mapa em tempo real, serviço de reservas ou planejador multiusuário. O comportamento original de armazenamento local não está disponível no ambiente isolado Show Preview, portanto não se deve depender do progresso salvo nesse ambiente. Claude Opus 5 é o rótulo fornecido na exportação do proprietário, não o resultado de um benchmark verificado de forma independente.

Como criar um design de dashboard de planejamento de viagens no OpenDesign

  1. Baixar e instalar o OpenDesign

    Baixe o aplicativo desktop, instale-o e conclua a configuração. Crie um projeto para o seu design.

    Baixar OpenDesign
  2. Descreva as três visualizações conectadas

    Forneça ao OpenDesign uma pequena cidade fictícia e especifique como um lugar aparece na biblioteca, no mapa e na linha do tempo. Defina a identidade compartilhada do lugar antes de adicionar elementos decorativos. O prompt abaixo é um novo exercício de design inspirado neste estudo de caso, não o prompt original usado para gerá-lo.

    Prompt sugerido

    Crie um design de dashboard de planejamento de viagens para uma cidade litorânea fictícia. Use um fundo em tom de papel quente, uma biblioteca compacta de lugares à esquerda, um mapa ilustrado no centro e uma linha do tempo do dia à direita. Disponibilize seis faixas nomeadas: Café da manhã, Manhã, Almoço, Tarde, Pôr do sol e Noite. Cada lugar de exemplo precisa ter um intervalo de funcionamento, uma duração típica de visita e uma categoria. Selecionar um marcador no mapa ou um cartão da biblioteca deve abrir o mesmo painel de detalhes do lugar. Permita que os usuários atribuam um lugar por meio de botões explícitos de faixa de horário e também arrastando e soltando. Mostre o tempo estimado de caminhada entre paradas sucessivas, separado da duração da visita, e um total no resumo do dia. Inclua um estado inicial com uma rota sugerida e um estado final de revisão. Identifique os lugares e as estimativas de rota como dados fictícios de demonstração; não dê a entender que há mapas em tempo real, reservas, edição compartilhada ou persistência na nuvem.

  3. Acompanhe uma alteração por todo o dashboard

    Peça ao OpenDesign para mover um lugar para outra faixa e refletir a alteração no rótulo do cartão, no marcador selecionado do mapa e na linha do tempo. Compare os estados anterior e posterior. Mantenha o mesmo nome e a mesma duração do lugar em todos os pontos e especifique o que acontece se a faixa de destino já contiver uma parada.

  4. Teste uma rota que não cabe no horário

    Use como exemplo um estabelecimento que feche antes da faixa atribuída e, em seguida, verifique como o design explica a incompatibilidade. Em telas menores, decida qual painel terá prioridade e torne os outros dois acessíveis sem comprimir três colunas de desktop na área de visualização de um celular.

  5. Exportar e obter um link de compartilhamento

    Exporte seu design finalizado e, em seguida, use Compartilhar no OpenDesign para obter um link de compartilhamento. Abra o link em uma janela separada do navegador e verifique se a versão desejada e seus assets estão disponíveis antes de enviá-lo.

OpenDesign Desktop

Um design system. Sua marca consistente em tudo

No Vibe Design Workspace completo, aplique as mesmas regras de marca a sites, apresentações, protótipos interativos, dashboards, imagens e vídeos HTML. Conecte Codex, Claude Code, Cursor e outros agentes de código locais e crie de graça.

  • Sites, apresentações, protótipos, dashboards, imagens e vídeo
  • Mais de 140 design systems e a biblioteca completa de templates e skills
  • Codex local e mais de 21 agentes de código · Grátis
Baixar grátis

Disponível para macOS e Windows