Использовать промпт
Добавьте своё задание
Добавьте контекст ниже. Он будет включён в промпт при копировании или скачивании.
Создайте адаптивный HTML-сайт с использованием существующего стека проекта для [PROJECT] и [AUDIENCE]. Задача: страница маршрута путешествия.
Обязательные контент и структура
Представьте остановки по дням, допущения о времени в пути, данные бронирований и необязательные отклонения от маршрута.
Используйте [APPROVED_CONTENT] как источник названий, дат, числовых данных, утверждений и целевых страниц. Перечислите недостающие исходные данные, прежде чем что-либо заменять. Если нужна демонстрация, обозначьте её контент как вымышленный. Не придумывайте отзывы клиентов, рейтинги, логотипы партнёров или возможности продукта.
Направление дизайна
Используйте [BRAND_RULES] и уже выбранную для проекта дизайн-систему. Если система не предоставлена, начните со следующего направления: тёплый кремовый, приглушённый оливковый и терракотовый цвета; фактурные материалы и спокойный редакционный ритм. Обеспечьте согласованность типографики, интервалов и цветовых ролей. Отдавайте приоритет задаче перед декоративными элементами и избегайте универсального набора несвязанных карточек.
Подготовка контента
Подготовьте остановки с датами, допущения о времени в пути, данные бронирований, адреса и необязательные отклонения от маршрута. Отметьте каждый пункт как подтверждённый, предложенный или зависящий от другого бронирования.
Макет и поведение
Организуйте маршрут по дням: сначала основной план, затем чётко отделённые необязательные альтернативы. Размещайте допущения о поездке рядом с переходами, на которые они влияют.
Проверка критериев приёмки для задачи
- Различайте подтверждённые бронирования и предложенные мероприятия.
- Проверьте задержанный трансфер, неподтверждённое бронирование и день с несколькими часовыми поясами.
- Не позволяйте привлекательной временной шкале выдавать расчётное время за подтверждённое бронирование.
Реализация и проверка
Оставьте текст редактируемым. Используйте семантическую структуру, понятные элементы управления, видимый фокус клавиатуры и подходящие состояния отсутствия данных и ошибок. Проверьте узкие и широкие макеты. Учитывайте настройку уменьшения движения. Сохраните существующие фреймворк и зависимости проекта; не заменяйте стек без предупреждения. Верните редактируемые файлы и опишите любое неполное поведение или неподдерживаемые исходные данные. Проверьте именно эту задачу, прежде чем предлагать дополнительные функции.
Референс и цель воссоздания
Прикрепите файл reference.webp из пакета загрузки этого дизайн-промпта к самому промпту в OpenDesign. Создайте редактируемый результат с похожими композицией и иерархией; не вставляйте всё референсное изображение в качестве готового интерфейса. Если утверждённый контент проекта и правила бренда противоречат вымышленным примерам подписей, сохраняйте утверждённые материалы. Если изображение отсутствует или нечитаемо, запросите его, а не заявляйте о визуальном соответствии.
Композиция и контент референса
Используйте приложенный файл reference.webp как визуальный образец для страницы маршрута путешествия. Перед созданием определите основные области сверху вниз, их относительную ширину и высоту, выравнивание, интервалы, типографическую иерархию, цвета поверхностей, границы, изображения и повторяющиеся компоненты. Сохраните эти соотношения, а не заменяйте их типовым шаблоном. Обязательное содержание задачи: представьте остановки по дням, допущения о времени в пути, данные бронирований и необязательные отклонения от маршрута. При преобразовании изображения в редактируемые элементы используйте следующие указания по компоновке для этой задачи: организуйте маршрут по дням — сначала основной план, затем чётко отделённые необязательные альтернативы. Размещайте допущения о поездке рядом с переходами, на которые они влияют.
Визуальное направление из примера проекта
тёплый кремовый, приглушённый оливковый и терракотовый цвета; фактурные материалы и спокойный редакционный ритм.
Спецификация взаимодействия
Образец представляет собой статическую концепцию: описанное ниже поведение — это требование к реализации, а не доказательство того, что изображение уже функционально. Скопируйте настроенный промпт в свой рабочий проект. Начните с основной задачи: представьте остановки по дням, допущения о времени в пути, данные бронирований и необязательные отклонения от маршрута. Различайте подтверждённые бронирования и предложенные мероприятия. Для каждого видимого элемента управления укажите событие запуска, затрагиваемое состояние и обратную связь; реализуйте локальные изменения с согласованным состоянием во взаимосвязанных представлениях. Обеспечьте реальные результаты поиска и фильтрации, явно обозначайте активное состояние элементов выбора, а для сохранения при необходимости показывайте видимую обратную связь об ожидании, успехе или сбое. Не добавляйте несвязанные рабочие процессы. Используйте ссылки для навигации, кнопки для действий и доступные названия для элементов управления со значками. Не создавайте впечатление, что серверная операция выполнена успешно, если изменилось только локальное демо.
Визуальное сравнение и передача результата
- Сравните результат с прикреплённым изображением при совпадающих пропорциях. Перед проработкой декоративных деталей проверьте расположение основных областей, относительные размеры изображений, переносы строк, интервалы, типографическую иерархию, контраст, активные состояния и плотность контента.
- Затем протестируйте узкий макет, не сжимая текст для настольной версии до крошечных подписей.
- Храните логотипы, фотографии и значки как отдельные ресурсы, а все значимые подписи оставьте редактируемыми. Перечислите недоступные шрифты и ресурсы, а также намеренные отступления. Верните рабочие файлы вместе с кратким описанием реализованного поведения и оставшихся интеграций; не обещайте попиксельное совпадение только на основании промпта.
Скачать промпт и изображение
Содержит полный промпт и полноразмерное референсное изображение. Добавьте оба файла в OpenDesign, чтобы задать направление макета.
Как написать дизайн-промпт для страницы маршрута путешествия
Используйте этот дизайн-промпт для страницы маршрута путешествия, чтобы представить остановки по дням, допущения о времени в пути, данные бронирований и необязательные отклонения от маршрута.
Референс — концепция, созданная ИИ. Приведённые ниже инструкции описывают, что нужно создать и протестировать; изображение не демонстрирует работающее поведение.
Явно указывайте местное время и статус подтверждения бронирования
Маршрут путешествия сочетает подтверждённые бронирования с допущениями, сделанными при планировании.
Читатели должны различать их, прежде чем полагаться на время пересадок или считать остановку забронированной. Организуйте маршрут по дням: сначала основной план, а необязательные альтернативы чётко отделите от него. Размещайте допущения о поездке рядом с переходами, к которым они относятся.
Из промпта
Организуйте маршрут по дням: сначала основной план, а необязательные альтернативы чётко отделите от него.
Настройте под себя
Расположите [ITINERARY_STOPS] по дням с учётом местного времени, сохраняя видимыми часовой пояс, данные бронирования и допущения о времени в пути. Отделите необязательные отклонения от основного расписания.
Подготовьте контент для страницы маршрута путешествия
В маршруте подтверждённые пункты отличаются от предлагаемых планов; сохраняйте этот статус для каждого бронирования и указывайте местное время.
Подготовьте остановки с датами, допущения о времени в пути, данные бронирований, адреса и необязательные отклонения от маршрута. Отметьте каждый пункт как подтверждённый, предложенный или зависящий от другого бронирования.
Из промпта
Представьте остановки по дням, допущения о времени в пути, данные бронирований и необязательные отклонения от маршрута.
Настройте под себя
Для [PROJECT] используйте [APPROVED_CONTENT] как источник контента для этой страницы маршрута путешествия. Подготовьте остановки с датами, допущения о времени в пути, данные бронирований, адреса и необязательные отклонения от маршрута. Отметьте каждый пункт как подтверждённый, предложенный или зависящий от другого бронирования. Определите недостающие данные, прежде чем заменять их демонстрационным контентом.
Проверьте день со сменой часовых поясов
Карта дополняет список по дням, но не подтверждает реалистичность времени в пути; проверяйте маршруты отдельно и сохраняйте возможность редактирования.
Убедитесь, что местные даты и время прибытия согласованы. Расчётный трансфер не должен выглядеть как подтверждённое бронирование или гарантированное время в пути. Проверьте задержанный трансфер, неподтверждённое бронирование и день с несколькими часовыми поясами. Не позволяйте привлекательной временной шкале создавать впечатление, будто расчётное время относится к подтверждённым бронированиям.
Из промпта
Различайте подтверждённые бронирования и предложенные мероприятия.
Настройте под себя
Проверьте страницу маршрута путешествия на соответствие этому требованию: отличайте подтверждённые бронирования от предложенных занятий. Проверьте задержанный трансфер, неподтверждённое бронирование и день с несколькими часовыми поясами. Не позволяйте привлекательной временной шкале создавать впечатление, будто расчётное время относится к подтверждённым бронированиям. Сохраните утверждённый контент и исправьте только те части, которые не проходят эту проверку.
Проверьте результат страницы маршрута путешествия
Сгенерированные тексты, маршруты и визуальная структура требуют проверки. Не подключайте реальные формы, платежи или внешние сервисы без реализации и тестирования соответствующих сценариев.
- Проверьте задержанный трансфер, неподтверждённое бронирование и день с несколькими часовыми поясами. Не позволяйте привлекательной временной шкале выдавать расчётное время за подтверждённое бронирование.
Уточняющий промпт
Используйте это после получения первого результата. Так доработка будет сосредоточена на самой важной части задачи.
Доработайте текущую страницу маршрута путешествия. Проверьте задержанный трансфер, неподтверждённое бронирование и день с несколькими часовыми поясами. Не позволяйте привлекательной временной шкале выдавать расчётное время за подтверждённое бронирование. Сохраните утверждённое содержимое и визуальное направление; измените только то, что необходимо для устранения этих проблем.
