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