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