Сайт нейросетью для клиента: от референса до сдачи

«Сайт за $10 000 нейросетью» — таких роликов десятки. Почти ни в одном не показано главное: заплатил ли кто-то эти деньги. И почти ни в одном не говорят, кому принадлежит сайт, собранный в конструкторе с ИИ.

Я разобрал процесс, который показывают честно: от картинки на Pinterest до лендинга, который клиент принял на встрече. И добавил то, о чём молчат, — как сделать, чтобы сайт принадлежал тебе или клиенту, а не сервису.

Процесс разобран по бесплатным урокам сообщества NextPhase AI, где автор показывает сайт для строительной компании вплоть до встречи с клиентом. Промпты и чек-лист владения — мои.

Почему сайт — это код, а не картинка

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

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

Процесс по шагам

1. Референс

Найди на Pinterest 2–3 картинки с нужным настроением. Для строительной компании — стройка на закате, экскаватор, чертёж. Берём настроение и композицию, а не чужой дизайн один в один.

2. Образ первого экрана

По референсу сделай свою картинку в генераторе: «этот участок ночью, без травы», «экскаватор, камера на 10 метров дальше». Черновые варианты генерируй в низком разрешении — так тратится в разы меньше кредитов. В высоком качестве делай только финальный кадр.

Приём, который выглядит дорого: надпись за объектом. Вырезаешь объект с фона, кладёшь крупный текст между фоном и объектом — и экскаватор «стоит перед» заголовком.

3. Черновик лендинга

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

Ты — веб-дизайнер и верстальщик. Сделай лендинг одним проектом на чистом HTML, CSS и JS — без конструкторов и тяжёлых библиотек.

БРИФ (спроси одним сообщением, если чего-то нет):
— кто клиент, чем занимается, город;
— главное действие на сайте (заявка, звонок, запись);
— 3 преимущества и 3 частых вопроса клиентов;
— референс: картинка с Pinterest или сайт, который нравится (берём настроение, а не дизайн один в один);
— цвета и шрифт, если есть.

СТРУКТУРА: первый экран с одним сильным образом и одной фразой; блок «что делаем»; процесс по шагам; отзыв или пример работы; вопросы и ответы; форма заявки; подвал с контактами и политикой конфиденциальности.

ТРЕБОВАНИЯ:
— сначала мобильная версия, потом компьютер;
— анимации лёгкие: CSS и небольшой JS, без видео на фоне первого экрана;
— картинки в WebP, у каждой — alt;
— все тексты на месте, без «Lorem ipsum»;
— никаких чужих логотипов и дизайнов один в один.
Покажи первую версию и список того, что я должен заменить своими материалами.

4. Правки словами

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

Совет из практики: не переделывай всё одним сообщением. Одна правка — одно сообщение, иначе нейросеть чинит одно и ломает другое.

Два элемента, которые продают сайт

3D-объект, который вращается при прокрутке

Видео вращения объекта нарезается на кадры, фон убирается, и при прокрутке показывается нужный кадр. Выглядит как настоящее 3D, а весит в разы меньше видео и не тормозит на телефоне. Подходит для товара: мороженое, кроссовок, бутылка, украшение.

У меня есть видео вращения объекта на однотонном фоне: [ФАЙЛ]. Сделай из него элемент сайта, который поворачивается, когда человек прокручивает страницу.

1. Нарежь видео на 60–90 кадров, убери фон (прозрачность), сожми каждый кадр в WebP — общий вес до 2–3 МБ.
2. Напиши код: при прокрутке секции показывается кадр, соответствующий положению прокрутки; объект закреплён в центре экрана, пока идёт секция.
3. На телефоне — меньше кадров и меньший размер, чтобы не тормозило.
4. Проверь на медленном интернете: пока кадры грузятся, показывается первый кадр, а не пустота.
Выдай папку с кадрами, код секции и инструкцию, как вставить её в лендинг.

Таймлапс «от фундамента до готового дома»

Три картинки одного участка — пустой, с фундаментом, готовый дом — и видео-нейросеть в режиме «первый и последний кадр» между ними. Для строительной компании это лучше любого текста «строим под ключ».

Помоги сделать короткий таймлапс стройки для сайта строительной компании.

1. Напиши 3 промпта на английском для генератора изображений — один и тот же участок, одна точка съёмки сверху (дрон), один свет:
   кадр А — пустой участок с разметкой;
   кадр Б — залит фундамент и стоит каркас;
   кадр В — готовый дом [ОПИСАНИЕ ДОМА КЛИЕНТА].
   Каждый следующий кадр делай по предыдущему как референсу, меняя только стадию стройки.
2. Напиши промпт для видео-нейросети в режиме «первый и последний кадр» (А→Б, затем Б→В): медленный облёт по кругу, стройка идёт как ускоренная съёмка, без людей в кадре, без звука.
3. Подскажи, как склеить два клипа и сжать для сайта (MP4 до 3 МБ, без звука, автоповтор).

Как я делаю видео, где объект не меняется от кадра к кадру, — в курсе «AI-сериал с нуля».

Кому принадлежит сайт: чек-лист

Это часть, о которой молчат почти все. Сайт, собранный в конструкторе с ИИ, может оказаться не твоим: код живёт только внутри сервиса, домен оформлен на исполнителя, а шрифт куплен на личную лицензию.

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

Проверь, кому на самом деле принадлежит сайт, который я сделал с помощью нейросети: [ОПИСАНИЕ: где сделан, где лежит код, где хостинг, где домен].

Пройди по списку и для каждого пункта ответь «да / нет / не знаю» и что сделать:
1. Код лежит в моём репозитории (GitHub или архив у меня), а не только внутри конструктора.
2. Сайт можно перенести на другой хостинг без конструктора, в котором он сделан.
3. Домен зарегистрирован на владельца бизнеса, а не на исполнителя или сервис.
4. Доступ к хостингу, домену, почте и аналитике — у владельца, пароли не только у исполнителя.
5. Шрифты, фото, иконки и 3D-модели — с лицензией на коммерческое использование.
6. В коде нет ключей API и паролей в открытом виде.
7. Есть резервная копия и понятная инструкция, как обновлять сайт.
В конце — план передачи сайта клиенту по шагам.

Сдача клиенту

Клиент принимает не код, а впечатление. Поэтому на показе:

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

В разобранном кейсе сайт для строительной компании собрали примерно за полтора часа, а клиент на встрече попросил ещё один таймлапс — уже про замену кровли. Хороший знак: значит, элемент понятен без объяснений.

Частые ошибки

Вопросы и ответы

Нужно ли уметь программировать?

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

Сколько стоит такой сайт в работе?

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

Это можно продавать?

Да, лендинги для местного бизнеса — понятная услуга. Но цена держится на результате для клиента и честной передаче прав, а не на словах «сделано ИИ».

Итог

• ☑ Референс — для настроения, образ первого экрана — свой
• ☑ Лендинг на чистом коде, сначала мобильная версия
• ☑ Один «вау»-элемент: 3D при прокрутке или таймлапс
• ☑ Чек-лист владения пройден до сдачи

Разборы инструментов и промпты — в моём Telegram-канале.