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