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