Десктопное приложение

Дизайн дашборда планировщика путешествий

Составьте маршрут из шести остановок по Halcyon Cove. Свяжите сохранённые места, позиции на карте и время пешего перехода.

OpenDesignДизайн и производство
Официальный
Однодневное знакомство с городом3 экранов
Дизайн дашборда планировщика путешествий: полная карта города, библиотека мест и план дня
Пример оценки · Claude Opus 5Скриншот 1 из 3

LLM Arena, сентябрь 2026

Заметки к кейсу
Модель
Claude Opus 5
Задача дизайна
Планировщик однодневной поездки с перетаскиванием
Результат
Десктопное приложение

Для чего предназначен

  • Планирование маршрутаОрганизуйте день вокруг мест, часов работы и продолжительности посещений.
  • Дашборды на основе картСвяжите выбор локаций с видимой последовательностью остановок.
  • Прототипы тревел-продуктовПротестируйте сценарии планирования до подключения реальных туристических сервисов.

Ключевые особенности

  • Три связанных представленияБиблиотека мест, карта города и маршрут разделяют каждый выбор.
  • Шесть именованных временных слотовОт Breakfast до Evening день получает узнаваемую структуру.
  • Контекстная панель местаПроверяйте часы работы и перемещайте остановку, не покидая план.
  • Видимая стоимость маршрутаРасчёты пешего пути показывают время перехода между последовательными остановками.

Тревел-дашборд, связывающий место и время

Daybreak Atlas превращает вымышленный день в Halcyon Cove в три взаимосвязанных представления. Сохранённые места расположены слева, иллюстрированная карта города занимает центр, а The Day разворачивается справа. Карта отвечает на вопрос, куда относится остановка; хронология — когда её посетить. Одновременная видимость обоих элементов облегчает сравнение последствий выбора места.

Библиотека мест — это не просто список названий. У Gullwing Bakery окно работы 6:30am–11am, и при добавлении в маршрут она помечается как In Breakfast. То же место затем появляется в слоте Breakfast с продолжительностью посещения и элементами управления View и Remove. Эта повторяющаяся идентичность и есть связь между просмотром и планированием: карточка меняет роль, но не название.

Полное рабочее пространство планирования связывает библиотеку сохранённых мест, иллюстрированную карту и дневную хронологию. Захваченный маршрут Hidden Gardens заполняет все шесть слотов.
Полное рабочее пространство планирования связывает библиотеку сохранённых мест, иллюстрированную карту и дневную хронологию. Захваченный маршрут Hidden Gardens заполняет все шесть слотов.

Разделение часов работы, продолжительности посещения и времени в пути

Наиболее полезная часть данного дизайна дашборда планировщика путешествий — подход к отображению времени. Окно работы, продолжительность посещения и расчёт пешего пути описывают разные ограничения. Их не следует сжимать в одну неоднозначную длительность. В этом примере каждый показатель размещён рядом с тем решением, которое он поддерживает.

Три вида временны́х сигналов в захваченном маршруте
Временной сигналГде отображаетсяЧто может решить пользователь
6:30am–11amКарточка Gullwing Bakery и панель местаОткрыто ли заведение в предполагаемое время посещения.
35 min visitПекарня в слоте BreakfastСколько времени выделить на эту остановку — отдельно от дороги до неё.
~10 min walkПеред Verdant Steps GardenСколько транзитного времени добавляет следующая остановка к плану.
62 min walkingСводка The Day для Hidden GardensНасколько время в пути накапливается по этому конкретному маршруту из шести остановок.

От предложенного маршрута к осознанному плану дня

Surprise Me предлагает начальный маршрут, не требуя от пользователя заполнять шесть пустых слотов. В захваченном состоянии Hidden Gardens последовательность начинается с Gullwing Bakery, проходит через сады, обед и читальный зал. Это даёт пользователю нечто конкретное для редактирования. Тем не менее это по-прежнему предложение, а не свидетельство того, что маршрут оптимизирован или географически точен.

Нажатие на Gullwing Bakery открывает её полную панель места. Карта города и маршрут остаются видимыми позади, а элементы управления временными слотами предлагают явную альтернативу перетаскиванию.
Нажатие на Gullwing Bakery открывает её полную панель места. Карта города и маршрут остаются видимыми позади, а элементы управления временными слотами предлагают явную альтернативу перетаскиванию.

Одно место, несколько удобных точек входа

Карточка сохранённого места и пин на карте могут оба открывать детали. Панель объединяет описание, часы работы, типичную продолжительность посещения и наиболее подходящий слот. Таким образом, пользователь, начавший с карты, может принять то же решение по планированию, что и тот, кто просматривает библиотеку.

Именованные назначения делают перемещение предсказуемым

Панель показывает текущее назначение и предлагает кнопки Breakfast, Morning, Lunch, Afternoon, Sunset и Evening. Это превращает перемещение места в явное действие, а не жест, который нужно угадать. В производственной версии замена занятого слота должна быть столь же явной — до фиксации изменения.

  1. Начните с готового примера

    Выберите тему Surprise Me и прочитайте последовательность остановок вместе с картой. Проверьте, отражается ли предложенная тема в реальных категориях мест, а не только в её названии.

  2. Изучите место перед перемещением

    Откройте одно место, сравните его окно работы с доступными временными слотами и используйте именованный слот для перемещения. Проследите за изменением в хронологии и маршруте.

  3. Просмотрите день в целом

    Прежде чем воспользоваться Lock the Day, сравните количество заполненных слотов с суммарным временем пешего пути. Это даёт более полезный итоговый обзор, чем восприятие кнопки завершения как подтверждения выполнимого маршрута.

Что демонстрирует этот прототип планировщика путешествий

Halcyon Cove, её заведения и расчёты пешего пути — демонстрационный контент. Артефакт является локальным front-end прототипом, а не живой картой, сервисом бронирования или многопользовательским планировщиком. Исходное поведение с использованием локального хранилища недоступно в изолированной среде Show Preview, поэтому не следует рассчитывать на сохранение прогресса там. Claude Opus 5 — это метка, предоставленная с экспортом владельца, а не независимо верифицированный результат бенчмарка.

Как создать дизайн дашборда планировщика путешествий в OpenDesign

  1. Скачайте и установите OpenDesign

    Скачайте десктопное приложение, установите его и завершите настройку. Создайте проект для своего дизайна.

    Скачать OpenDesign
  2. Опишите три взаимосвязанных представления

    Укажите OpenDesign небольшой вымышленный город и опишите, как место отображается в библиотеке, на карте и в хронологии. Определите общую идентичность места до добавления оформления. Приведённый ниже промпт — это новое упражнение по дизайну, вдохновлённое данным кейсом, а не оригинальный промпт генерации.

    Рекомендуемый промпт

    Создай дизайн дашборда планировщика путешествий для вымышленного прибрежного города. Используй тёплый бумажный фон, компактную библиотеку мест слева, иллюстрированную карту по центру и дневную хронологию справа. Предусмотри шесть именованных слотов: Breakfast, Morning, Lunch, Afternoon, Sunset и Evening. Каждое демонстрационное место должно иметь окно работы, типичную продолжительность посещения и категорию. Нажатие на пин карты или карточку библиотеки должно открывать одну и ту же панель места. Позволь пользователям назначать место через явные кнопки слотов, а также через перетаскивание. Показывай расчётное время пешего перехода между последовательными остановками — отдельно от продолжительности посещения — и итог в сводке дня. Включи начальное состояние с предложенным маршрутом и финальное состояние с обзором. Пометь места и расчёты маршрута как вымышленные демонстрационные данные; не давай поводов полагать, что используются живые карты, бронирования, совместное редактирование или облачное хранение.

  3. Проследите одно изменение через весь дашборд

    Попросите OpenDesign переместить место в другой слот и отразить изменение в подписи карточки, выбранном пине карты и хронологии. Сравните состояния до и после. Сохраняйте одно и то же название места и продолжительность везде, и укажите, что происходит, если в целевом слоте уже есть остановка.

  4. Проверьте маршрут, который не вписывается

    Используйте пример заведения, которое закрывается до начала назначенного слота, и посмотрите, как дизайн объясняет это несоответствие. На экранах меньшего размера решите, какая панель имеет приоритет, и сделайте две другие доступными — без того, чтобы сжимать три десктопные колонки в область просмотра телефона.

  5. Экспортируйте дизайн и получите ссылку для публикации

    Экспортируйте готовый дизайн, затем воспользуйтесь функцией Share в OpenDesign, чтобы получить ссылку. Откройте ссылку в отдельном окне браузера и убедитесь, что нужная версия со всеми ресурсами доступна, прежде чем отправлять её.

OpenDesign для компьютера

Одна дизайн-система. Единый образ бренда во всех материалах

В полном Vibe Design Workspace одни и те же правила бренда работают для сайтов, слайдов, интерактивных прототипов, дашбордов, изображений и HTML-видео. Подключите локальные Codex, Claude Code, Cursor и другие кодинг-агенты и создавайте бесплатно.

  • Сайты, слайды, прототипы, дашборды, изображения и видео
  • Более 140 дизайн-систем и полная библиотека шаблонов и навыков
  • Локальный Codex и более 21 кодинг-агента · Бесплатно
Скачать бесплатно

Для macOS и Windows