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