Создайте редактируемый прототип приложения с приоритетом мобильных устройств, используя существующий стек проекта для [PROJECT] и [AUDIENCE]. Задача: расписание приложения для участников мероприятия. ## Обязательные контент и структура Просматривайте сессии по времени и тематике, составляйте личное расписание и показывайте конфликты, изменения аудиторий и уведомления мероприятия. ## Экраны и навигация Создайте три связанных представления: «Расписание», «Сведения о сессии» и «Мой день». Сохраняйте выбранную запись видимой в заголовке экрана или сводке. Обеспечьте явное действие возврата и сохраняйте незавершённый ввод при переходе между представлениями. Разместите основное действие рядом с соответствующим контентом и учитывайте безопасные области мобильного экрана, видимую экранную клавиатуру и длинные переведённые подписи. На экранах настольной ширины адаптируйте композицию, не удаляя этапы и не меняя задачу. ## Исходные данные проекта Используйте [APPROVED_CONTENT] для названий, записей, подписей, количественных значений и мест назначения. Запрашивайте недостающие данные вместо того, чтобы выдумывать утверждения о работе системы. В демонстрационных записях можно использовать вымышленный бренд Gather; помечайте их как пример данных. Объясняйте, какие действия являются локальными взаимодействиями в прототипе, а какие требуют аутентификации, сохранения данных, разрешений или серверной части. Не подключайте внешние сервисы и не утверждайте, что транзакция завершена, если соответствующая интеграция не была явно реализована и протестирована. ## Направление дизайна Следуйте [BRAND_RULES]. Если бренд не указан, используйте чёрный, белый и кислотно-жёлтый цвета, а также жирную типографику в стиле конференции. Сделайте рабочий процесс узнаваемым благодаря собственному контенту и элементам управления, а не повторению универсальных карточек панели управления. Используйте единую шкалу интервалов и чёткую текстовую иерархию. Добавьте видимый фокус клавиатуры, доступные названия, достаточную контрастность и текстовые метки состояний, не зависящие только от цвета. Учитывайте настройку уменьшения движения и сделайте анимированные переходы необязательными. ## Проверка критериев приёмки для задачи - Явно показывайте пересечения сохранённых сессий и изменения часового пояса, а не удаляйте выбор без уведомления. ## Состояния взаимодействия Реализуйте успешный сценарий из трёх экранов с локальными тестовыми данными. Добавьте полезное пустое состояние, валидацию перед завершением действия, состояние загрузки или ожидания и состояние ошибки с возможностью восстановления. Для необратимых изменений предусмотрите подтверждение или возможность отмены. Состояние записи должно быть согласованным на всех трёх экранах. Не удаляйте без предупреждения частично введённые данные и не меняйте выбор пользователя после повторной попытки. ## Передача результата и проверка Предоставьте редактируемые экраны приложения и опишите модель данных, поведение локального хранилища и нереализованные интеграции. Протестируйте при ширине 320px и в более широком окне просмотра, используя навигацию с клавиатуры и длинный контент. Перед добавлением функций проверьте результат по приведённому выше критерию приёмки для этой задачи. Чётко отделяйте демонстрационное поведение от работающего промышленного сервиса. ## Референс и цель воссоздания Прикрепите файл reference.webp из пакета загрузки этого дизайн-промпта к самому промпту в OpenDesign. Создайте редактируемый результат с похожими композицией и иерархией; не вставляйте всё референсное изображение в качестве готового интерфейса. Если утверждённый контент проекта и правила бренда противоречат вымышленным примерам подписей, сохраняйте утверждённые материалы. Если изображение отсутствует или нечитаемо, запросите его, а не заявляйте о визуальном соответствии. ## Композиция референса — три связанных экрана приложения На приложенном изображении показан Gather — вымышленное приложение для конференции — в виде трёх мобильных экранов одинаковой ширины на светлом кислотно-жёлтом презентационном фоне. Создайте «Расписание», «Сведения о сессии» и «Мой день» как связанные представления приложения. Не отображайте композицию из трёх экранов как одну страницу и не используйте весь референс в качестве фона. На мобильном экране показывайте по одному представлению за раз. В широком предпросмотре представления можно разместить рядом для сравнения, но рабочее приложение должно сохранять навигацию и состояние. ## Экран «Расписание» Используйте почти белый холст с тонкой тёмной внешней рамкой. В шапке разместите жирный чёрный логотип Gather слева, компактные сведения о датах и месте проведения справа, а также значок поиска. Ниже добавьте очень крупный жирный заголовок «Расписание» и небольшое однострочное вступление. Добавьте трёхколоночный переключатель дат: «Вт, 14 окт.», «Ср, 15 окт.» и «Чт, 16 окт.»; выбранная дата выделена кислотно-жёлтым, остальные — белые со светлыми разделителями. Ниже разместите фильтры «Все темы» и «Все типы», а также компактный переключатель списка. Основной список включает узкий столбец времени, вертикальную цветовую полосу темы, затем название темы прописными буквами, жирный заголовок сессии и меньшую подпись аудитории. В каждой строке справа выровнена круглая кнопка добавления, а снизу расположен тонкий горизонтальный разделитель. Для обозначения тем используйте синий, жёлтый, розовый, зелёный и фиолетовый цвета; также показывайте их названия, чтобы цвет не был единственным ориентиром. Нижняя навигационная панель — чёрная, с пунктами «Расписание», «Мой день», «Уведомления» и «Ещё»; значок и подпись активного пункта — жёлтые. ## Экран «Сведения о сессии» Противопоставьте светлый список почти чёрной поверхности экрана подробностей. В верхней части разместите элементы управления «Назад», «Закладка» и «Поделиться». На фоне верхней секции используйте ненавязчивую фотографию конференции с тёмным наложением, сохраняющим контраст текста. Добавьте небольшую жёлтую метку «ПРОДУКТ», крупный жёлтый заголовок «Масштабируемые дизайн-системы» в две строки и белую поясняющую строку. Ниже разместите в двух столбцах метаданные даты и времени, площадки и зала с контурными значками. Затем добавьте тонкие контурные теги тем, краткое описание и строку спикера с круглым портретом, именем, должностью, организацией и стрелкой раскрытия. Используйте широкую кислотно-жёлтую кнопку «Сохранить в мой день», а под ней — тёмную контурную кнопку «Добавить в календарь». После разделителя разместите блок «Связанные сессии» с небольшим действием «Показать все» и компактными строками сессий. Путь возврата должен быть понятным; при замене демонстрационных данных не выдумывайте реальных спикеров или рекомендаций. ## Экран «Мой день» Вернитесь к почти белой поверхности и повторите шапку Gather, дату, площадку и значок настроек. Используйте крупный заголовок «Мой день» и короткий подзаголовок. На бледно-жёлтом баннере уведомления разместите колокольчик, жирный заголовок «Смена часового пояса», поясняющий текст и элемент закрытия. Ниже покажите три сегмента: «Моя программа», «Конфликты (1)» и «Уведомления (2)»; выбранный сегмент должен быть чёрным с белым текстом. Для сохранённых сессий повторно используйте структуру строк расписания. Пересекающуюся по времени сессию разместите на бледно-розовой панели с красным временем и акцентом категории, явной меткой «Пересекается с сохранённой сессией» и элементом управления «Оставить обе». Изменение площадки покажите красной строкой «Смена зала: B1 → B2». Повторите чёрную нижнюю навигацию, сделав раздел «Мой день» активным и добавив жёлтый значок с количеством к разделу «Уведомления». ## Визуальная иерархия и токены Используйте жирный нейтральный гротеск для логотипа и крупных заголовков, удобочитаемый шрифт без засечек для основного текста и элементов управления, чёрный и почти белый цвета основных поверхностей, а кислотно-жёлтый — для основных действий и выбранных состояний. Начните с шага отступов 8px, горизонтальных полей страницы 16–24px, минимальной области касания 44px и выраженного контраста между заголовками, основным текстом и метаданными. Рассматривайте эти значения как отправные точки для реализации, а не как точно измеренные пиксельные характеристики. Сохраните компактное расписание со скриншота, жирный заголовок экрана подробностей и чёткий контраст светлого и тёмного. Используйте оригинальную или лицензированную фотографию конференции и вымышленный портрет спикера; оставьте подписи редактируемым текстом. Скруглённые элементы управления в этом примере относятся к визуальному образцу Gather и не зависят от кнопок сайта библиотеки промптов. ## Взаимодействие и контракт данных — реализовать и проверить Используйте локальные демонстрационные записи со стабильными идентификаторами сессий, названием, категорией, типом, временем начала и окончания в UTC, часовым поясом события, залом, previousRoom, спикером и состоянием сохранения. Явно задайте selectedDate, searchQuery, фильтры по категории и типу, savedSessionIds и dismissedNoticeIds. Изображение концептуально: указанные на нём даты и формулировки о часовом поясе не являются официальным расписанием события. Исправьте несогласованные демонстрационные даты, сохранив показанную иерархию. При выборе дня обновляются выделение даты и список. Поиск выполняется по названиям сессий и именам спикеров; фильтры комбинируются, а при отсутствии результатов показываются полезное пустое состояние и действие очистки. При открытии строки отображаются сведения о той же сессии; действие «Назад» восстанавливает предыдущий список, фильтры и позицию прокрутки. Элементы управления «Плюс» и «Сохранить в мой день» сохраняют одну и ту же сессию строго один раз и переходят в понятное сохранённое состояние. Удаление сессии согласованно обновляет раздел «Мой день» и уведомления. Для сохранённых сессий в одну дату определяйте пересечение по условию startA < endB и startB < endA. Показывайте предупреждение и обе записи; действие «Оставить обе» подтверждает конфликт, не удаляя ни один вариант без ведома пользователя. Раздел «Конфликты» показывает затронутые пары и содержит ссылки на их подробности. При смене часового пояса те же моменты UTC преобразуются в выбранный именованный часовой пояс, обновляются отображаемые даты и время и пересчитывается группировка; фактическая продолжительность событий меняться не должна. Оставьте видимую метку часового пояса и закрываемое пояснение. Уведомление о смене зала показывает старый и новый залы; закрытие уведомления не возвращает прежний зал. Для действия «Добавить в календарь» предоставьте корректный локальный файл календаря или явно обозначьте действие как демонстрационное; подключение к внешнему календарю не подразумевается. Для действия «Поделиться» можно использовать системное меню отправки с резервным копированием ссылки. Закладка, закрытие уведомлений и навигация должны иметь видимый фокус клавиатуры и доступные названия. Основные действия должны оставаться доступными выше безопасной области мобильного устройства. Предусмотрите состояния отсутствия сохранённых сессий, отсутствия подходящих результатов и устранимого сбоя хранилища. Не реализуйте платежи, создание аккаунта или обновления события в реальном времени, если это не запрошено отдельно. ## Визуальное сравнение и передача результата 1. Сравните результат с прикреплённым изображением при совпадающих пропорциях. Перед проработкой декоративных деталей проверьте расположение основных областей, относительные размеры изображений, переносы строк, интервалы, типографическую иерархию, контраст, активные состояния и плотность контента. 2. Затем протестируйте узкий макет, не сжимая текст для настольной версии до крошечных подписей. 3. Храните логотипы, фотографии и значки как отдельные ресурсы, а все значимые подписи оставьте редактируемыми. Перечислите недоступные шрифты и ресурсы, а также намеренные отступления. Верните рабочие файлы вместе с кратким описанием реализованного поведения и оставшихся интеграций; не обещайте попиксельное совпадение только на основании промпта.