Как собрать сайт руками ИИ-агента и не получить черновик вместо продукта

Чем «сайт от агента» отличается от «сайта от нейросети»

Когда ты просишь чат-бота «сделай мне сайт», он выдаёт один HTML-файл в окне чата. Красиво, но дальше ты сам: копируешь, сохраняешь, ищешь хостинг, правишь вручную.

ИИ-агент работает иначе. У него есть доступ к файловой системе и терминалу: он создаёт папки, пишет файлы, запускает сборку, видит ошибку в логе и чинит её, заливает результат на сервер и проверяет, что страница открывается. Разница принципиальная — не «текст про сайт», а живой сайт по адресу. Если ты ещё не разбирался с этим типом инструментов, начни с базы: что такое ИИ-агент и что умеет Claude Code.

Дальше — рабочий маршрут от пустой папки до опубликованного сайта с аналитикой.

Шаг 1. Постановка задачи: ТЗ, которое нельзя понять неправильно

Девяносто процентов плохих результатов — это плохой бриф. Агент не читает мысли, он достраивает недосказанное по усреднённому шаблону из интернета. Получается безликий лендинг «Мы — команда профессионалов».

Что обязательно должно быть в задаче:

• Кто клиент и что он должен сделать. Одно целевое действие: заявка, звонок, переход в мессенджер, подписка.
• Факты. Названия, услуги, города, реальные контакты, реальные ссылки на соцсети. Всё, чего ты не дал, агент либо придумает, либо должен оставить пустым — это надо проговорить прямо.
• Тип сайта и объём. Лендинг на один экранный поток, многостраничник на 8 разделов, блог с категориями — это три разных архитектуры.
• Технические рамки. Статика или фреймворк, где хостится, есть ли домен, нужен ли многоязычный вариант.
• Чего делать нельзя. Не выдумывать отзывы, кейсы, цифры, сертификаты и цены. Не вставлять ссылки, которых ты не дал. Не тащить внешние библиотеки ради одной анимации.

Отдельный пункт — формат сдачи. Попроси агента сначала вернуть план: карту страниц, список файлов, стек. Пять минут на чтение плана экономят час на переделке.

Шаг 2. Структура страниц

Структура — это скелет и SEO одновременно. Решается до вёрстки, потому что потом переезд URL стоит дороже.

Правила, которые стоит зафиксировать сразу: человекопонятные URL латиницей, один H1 на страницу, вложенность не глубже двух уровней, у каждой страницы уникальные title и description. И единый шаблон — чтобы новая страница добавлялась файлом, а не копипастой вёрстки.

Шаг 3. Дизайн-система вместо «сделай красиво»

«Сделай красиво» — это лотерея. Дизайн-система — это контракт, который агент не нарушит на пятнадцатой странице.

Опиши заранее и попроси вынести в один файл переменных:

• Палитра. Фон, основной текст, приглушённый текст, акцент, цвет границ. Пяти-шести токенов достаточно.
• Типографика. Два шрифта максимум, лучше системные или один веб-шрифт в формате woff2. Шкала размеров: H1, H2, H3, основной текст, подпись.
• Отступы. Шаг сетки (например, кратно 8), максимальная ширина контейнера, ширина колонки текста ~70 символов.
• Компоненты. Кнопка, карточка, таблица, цитата, плашка CTA. Каждый — один класс, а не набор инлайновых стилей.

Когда правила лежат в CSS-переменных, смена акцентного цвета по всему сайту — это одна строка, а не ревизия сорока файлов. И тёмная тема делается добавлением второго набора переменных.

Шаг 4. Адаптив: мобильный — не «потом»

Проси верстать от мобильного и расширять вверх. Конкретика, которую стоит проверить руками на телефоне:

• ничего не уезжает по горизонтали (самая частая беда — широкие таблицы и длинные URL в тексте);
• кликабельные элементы не меньше ~44 пикселей по высоте;
• меню открывается и закрывается, фокус не теряется;
• изображения с явными width/height, чтобы макет не прыгал при загрузке;
• текст читается без зума, межстрочный интервал не меньше 1.5.

Три контрольные ширины: узкий телефон, планшет, широкий десктоп. Больше брейкпоинтов — больше мест, где что-то сломается.

Шаг 5. Сборка статики

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

Рабочая схема: контент в Markdown с YAML-шапкой, скрипт сборки превращает его в готовые HTML-файлы по шаблону. Агент пишет и сам скрипт, и шаблоны.

Что сборщик должен делать обязательно:

1. Читать все файлы контента и валидировать шапку — нет title или description, значит, сборка падает с внятной ошибкой.
2. Проверять уникальность slug: два одинаковых URL молча перетрут друг друга.
3. Генерировать sitemap.xml и robots.txt.
4. Собирать перелинковку и списки категорий автоматически, а не руками.
5. Минифицировать CSS и складывать всё в одну папку для выгрузки.

Грабля из практики: базовый путь. Если сайт лежит в корне домена, базовый префикс должен быть пустой строкой, а не слэшем — иначе получаются ссылки с двойным слэшем, и половина страниц отдаёт 404. Проверяй это первым делом после первой сборки.

Шаг 6. Деплой

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

Минимальный набор шагов:

• выложить собранную папку на сервер (rsync или git — на вкус);
• настроить веб-сервер: корень сайта, обработка 404, отдача статики с кэшированием;
• выпустить SSL-сертификат и проверить, что HTTP редиректит на HTTPS;
• проверить DNS: A-запись домена смотрит на нужный IP, изменения разъехались;
• сделать скрипт деплоя одной командой, чтобы следующая публикация занимала секунды.

Если сайтов будет много и ты хочешь, чтобы агент жил на сервере постоянно и деплоил по команде, посмотри как поднять ИИ-агента на VPS — там же про доступы и безопасность.

Шаг 7. Метрика

Без аналитики сайт — это памятник. Подключается в три действия: создать счётчик, вставить код в общий шаблон (один раз, не на каждую страницу), проверить, что данные приходят.

Дальше настрой цели под целевое действие: отправка формы, клик по кнопке мессенджера, звонок. И не забудь про поисковые вебмастер-панели: подтверждение прав, загрузка sitemap, проверка индексации. Без этого ты не узнаешь, что половина страниц закрыта от индексации случайным noindex в шаблоне.

Типичные ошибки агентов

Агент придумывает факты

Самая дорогая ошибка. Пустое место в брифе заполняется правдоподобным вымыслом: опыт «с 2012 года», «более 500 довольных клиентов», отзывы несуществующих людей, несуществующие сертификаты. Выглядит гладко, читается нормально — и именно поэтому проскакивает в публикацию.

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

Непроверенные ссылки

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

Тяжёлый JS

Если не ограничить, агент притащит библиотеку анимаций, слайдер, иконочный пакет и шрифтовой набор целиком — ради трёх иконок. Статический сайт на 20 килобайт превращается в полтора мегабайта. Формулируй рамку явно: ванильный JS, никаких внешних зависимостей без согласования, анимации на CSS.

Мелочи, которые ломают SEO

• Один и тот же title на всех страницах шаблона.
• robots.txt, закрывающий весь сайт, — остался с этапа разработки.
• Отсутствие canonical при наличии пагинации.
• Картинки без alt.
• Разные версии сайта с www и без, обе открываются.

Проверка человеком — обязательный шаг

Агент проверяет синтаксис, сборку и коды ответа. Человек проверяет смысл. Разделение жёсткое: ни одна итерация не идёт в продакшен без твоего прохода по чеклисту.

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

Этот проход занимает двадцать минут и спасает от ситуации, когда клиент первым находит на сайте отзыв человека, которого не существует.

Что делать дальше

Один сайт собран — дальше логика меняется. Когда шаблон, дизайн-система и скрипт деплоя готовы, следующий сайт в том же семействе стоит уже не дни, а часы: меняется контент и палитра, а каркас переиспользуется.

Именно из этого вырастает поток: один шаблон, много страниц, автоматическая перелинковка и регулярная публикация. Как это устроено на масштабе — в статье про SEO-контент-завод. А какие задачи вообще имеет смысл отдавать агенту, а какие нет — смотри в разборе возможностей.