Как создать сайт по примеру другого сайта с помощью ИИ

Ссылка на хороший сайт помогает объяснить вкус быстрее длинного описания. Нейросети всё равно нужен разбор: какие решения взять за основу, какие материалы сохранить и где начинается ваш собственный сайт.

Команда Lork·редакция Lork

8 августа 2026 г.·9 мин чтения

Короткий ответ: дайте AI ссылку или скриншоты и отдельно опишите, какие решения вам нужны. Разделите референс на структуру, композицию, цвета, типографику и поведение элементов. Свои тексты, логотип и фотографии приложите отдельным набором.

В интервью с пользователями Lork этот сценарий встречался несколько раз. Предпринимателю понравилось создание сайта по примерам конкурентов. Веб-студия тоже работала со ссылками и дизайн-референсами, но сталкивалась с нестабильным результатом. Разница часто скрывается в качестве задания.

Создать сайт по референсу в AI-конструкторе Lork

Что можно взять из сайта-референса

Сайт конкурента полезно рассматривать как набор решений. Тогда AI получает ясное задание, а ваш результат сохраняет собственное лицо.

Из референса можно взять:

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

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

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

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

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

Элемент	Что указать в задании
Первый экран	Высота, расположение текста, фотография, кнопка
Навигация	Количество пунктов, закрепление при прокрутке, мобильное меню
Услуги	Сетка карточек, объём текста, порядок информации
Кейсы	Формат изображения, подпись, ссылка на подробности
Форма	Количество полей, место на странице, текст после отправки
Мобильная версия	Порядок блоков, размер кнопок, поведение изображений

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

Подготовьте собственные материалы:

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

Отдельно составьте список запретов. Например: не менять пропорции логотипа, не придумывать отзывы, не добавлять услуги, не сокращать утверждённый текст.

Как собрать сайт по примеру

Начните со структуры. Попросите AI перечислить страницы и блоки, которые он увидел в референсе. Исправьте этот разбор до генерации сайта.

Дальше двигайтесь короткими этапами:

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

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

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

Какие ошибки встречаются чаще всего

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

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

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

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

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

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

Готовый промпт и ответы на вопросы

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

Достаточно ли одной ссылки?

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

Можно ли сделать точную копию сайта?

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

Что делать, если AI игнорирует референс?

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

Можно ли передать PDF или скриншот?

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

Как выбрать AI-конструктор?

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

Продолжить можно с более конкретного исходника: создать сайт по скриншоту, перенести макет из Figma или разобраться, как получить HTML и React-код.

Собрать сайт по примеру

Поделиться:Сообщество Lork в Telegram