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