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