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