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