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