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