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