Как превратить дизайн-референс в промпт для своего сайта

Чтобы превратить дизайн-референс в полезный промпт, сначала опишите, что именно вам понравилось: крупный заголовок, свободные отступы, спокойные цвета или порядок блоков. Затем добавьте собственную задачу, материалы и ограничения. Одна ссылка с просьбой «сделай так же» не объясняет, какие решения стоит сохранить и что требуется вашему клиенту.

Ниже — способ разобрать страницу, шаблон задания и сценарий с расширением Lovarus для Chrome. Пример учебный: собираем сайт небольшого кафе, используя чужую страницу только как ориентир по оформлению. Это не выполненный клиентский проект и не результат тестовой генерации.

Сначала отделите задачу от оформления

Запишите назначение будущего сайта до выбора референса. Для нашего учебного кафе посетителю нужно посмотреть меню, узнать часы работы и найти адрес. Название, контакты, цены и фотографии должны прийти от владельца кафе. Если этих данных нет, начните с брифа на сайт.

Теперь сформулируйте, зачем нужен образец. Например: «Нравится спокойная подача с крупной фотографией и короткими текстами». Это уже направление. «Хочу скопировать этот сайт» не помогает решить, что делать с чужим каталогом, корзиной и личным кабинетом, если кафе они не нужны.

Выберите одну страницу и несколько конкретных свойств. Не собирайте в один запрос навигацию из одного сайта, анимации из второго и все блоки из третьего без общего приоритета. Сначала согласуйте одно направление; отдельные детали можно уточнить позже.

Разберите референс по пяти признакам

• Иерархия. Что видно первым: заголовок, фотография, предложение или кнопка? Что посетитель должен заметить на вашем сайте?
• Ритм. Блоки плотные или между ними много свободного места? Чередуются ли фотографии и текст? Опишите это обычными словами.
• Типографика. Заголовки крупные или сдержанные, шрифты с засечками или без, строки короткие или длинные? Не пытайтесь угадать точное название шрифта по скриншоту.
• Палитра. Какой цвет у фона, текста и главного действия? Укажите роли цветов, а не только перечень оттенков.
• Структура. Какие блоки помогают решить задачу вашего клиента? Переносить весь порядок исходной страницы необязательно.

Для кафе это можно записать так: «Светлый тёплый фон, тёмный текст, один акцент для кнопки меню. Крупная собственная фотография в начале. После неё — меню, атмосфера, часы и адрес». Такая запись описывает желаемый результат и не утверждает, что эти свойства уже измерены на конкретном сайте.

Если просите ИИ помочь с разбором изображения, отделите наблюдение от догадки:

Разбери приложенный скриншот как дизайн-референс.
Опиши иерархию, отступы, типографику, роли цветов и порядок блоков.
Отдели видимые признаки от предположений.
Не угадывай точные шрифты, размеры и скрытые состояния интерфейса.
Не переписывай тексты и название исходного бизнеса.
Предложи, какие приёмы подходят для сайта небольшого кафе
с меню, часами работы и адресом. Пока не собирай сайт.

По одному скриншоту нельзя проверить раскрывающееся меню, отправку формы или мобильное поведение. Эти требования запишите отдельно и затем проверьте на своём результате.

Готовый промпт для собственного сайта

В учебном примере берём только направление оформления. Замените скобки согласованными данными. Если доступен лишь снимок первого экрана, не описывайте нижние блоки исходной страницы как изученные.

Создай сайт небольшого кафе по моему брифу.
Приложенная страница — ориентир по оформлению.

Данные кафе:
— Название: [название].
— Адрес и часы работы: [подтверждённые сведения].
— Меню: [актуальные позиции и цены или действующая ссылка].
— Контакт: [телефон или ссылка].
— Фотографии: [мои материалы и подписи].

Цель страницы — помочь посмотреть меню и спланировать визит.
Главная кнопка: «Посмотреть меню».
Она ведёт к блоку меню или по указанной действующей ссылке.

Возьми за ориентир:
— крупную фотографию и короткий заголовок на первом экране;
— свободные отступы между смысловыми блоками;
— светлый тёплый фон и тёмный читаемый текст;
— один акцентный цвет для основного действия.

Измени под мою задачу:
— используй название, тексты и фотографии только из моего брифа;
— выстрой блоки: первый экран, меню, фотографии кафе, часы и адрес;
— вместо каталога и корзины сделай понятный переход к меню;
— на телефоне расположи блоки последовательно, без обрезки текста.

Не воспроизводи чужой логотип, отзывы и рекламные обещания.
Не добавляй доставку, оплату и бронирование без отдельного задания.
Не придумывай цены и часы работы.
Если материала не хватает, перечисли вопросы отдельно.
Результат должен быть самостоятельным сайтом под эту задачу.

Промпт содержит выбранное направление, а не требование совпасть с оригиналом до пикселя. Если для клиента важнее текст предложения, сначала уточните его с помощью вариантов задания для первого экрана, а затем возвращайтесь к оформлению.

Как использовать расширение Lovarus

На странице расширения для Chrome описан сбор референса из открытой страницы: длинный скриншот до 14 000 пикселей по высоте, основные тексты, структура, цвета и шрифты. Эти сведения собираются в редактируемый промпт. Расширение предназначено для Chrome на компьютере.

Откройте выбранную страницу, нажмите иконку расширения и выберите «Собрать со страницы». До следующего шага прочитайте получившуюся задачу. Уберите чужие контакты, рекламные утверждения и блоки, которые вашему проекту не нужны. Добавьте свою нишу, материалы и желаемые изменения.

Кнопка «Открыть в Lovarus» передаёт промпт и скриншот для сборки сайта. Это переход к выполнению задачи, поэтому проверьте текст до нажатия: работа ИИ в Lovarus оплачивается по использованию. Сам сбор референса не подтверждает, что будущий сайт уже готов.

Расширение не переносит сервер, базу данных и работающие интеграции исходного сайта. Если на образце есть форма брони, задайте способ бронирования своего кафе отдельно. Красивое изображение формы не доказывает, что она принимает заявки.

Для длинной страницы проверьте, что нужные блоки попали в ограниченный по высоте снимок. Для шрифтов и цветов сверьте извлечённые сведения с выбранным направлением: перечень всех найденных элементов ещё не является готовой системой оформления.

Как оценить результат и уточнить запрос

Сравните сайт с собственным заданием, а затем с референсом. Для нашего кафе меню, часы и адрес важнее сходства декоративных деталей. Проверьте, что на странице используются ваши материалы, а кнопка открывает актуальное меню.

Для слишком плотной композиции можно отправить локальную правку:

Измени только отступы в блоках меню и контактов.
Сейчас заголовки и соседние блоки визуально сливаются.
Увеличь расстояние между разделами, сохрани компактные связи
между названием блюда, описанием и ценой.
Не меняй тексты, фотографии, палитру и адреса ссылок.
Проверь, чтобы на узком экране цены оставались рядом с блюдами.

После правки откройте страницу на телефоне и компьютере. Просмотрите длинные заголовки, читаемость текста поверх фото, повторяющиеся кнопки и нижние блоки. Не называйте результат точной копией или проверенной системой бронирования без соответствующей проверки. Зафиксируйте удачные приёмы в своём задании: тогда референс станет понятной отправной точкой для дальнейшей работы.