Что подготовить до сборки сайта с агентом

Редакция CMO.PRO. Илья Чумаченков, 18 июля 2026 года, запись «ИИ-сайты через агентов Codex и Claude Code».

До первого запроса откройте папку, а не пожелание «красивый сайт». Оставьте в ней четыре решения: зачем страница, на чём она стоит, как выглядит и куда попадёт заявка. Проверьте, что каждое решение уже лежит файлом. Фраза в чате таким файлом не считается.

Сначала задача, потом стек

Стек берите от бизнес-задачи. Разбирать инструменты заранее не нужно. Запомните, какая страница с каким вариантом связана.

Одностраничный сайт прямо назовите в инструкции агенту. Если на нём есть форма заявки, оставьте HTML. Дальше заявку переводите в Telegram или в таблицу, где она фиксируется.

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

Папка на компьютере, а не память конструктора

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

Codex и Claude Code здесь устроены одинаково. Файлы лежат в вашей папке. Агент опирается на них и не забывает элементы. До сборки всё опорное уже должно быть файлом. Всё, что агент вернёт, прочитайте, прежде чем считать это правилом проекта.

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

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

Два файла, без которых агент додумывает

Главная заготовка — два файла. Готовые формулировки и коллекция оформления лежат в материалах записи: ИИ-сайты через агентов Codex и Claude Code.

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

Второй назовите «дизайн MD». Он отвечает не за устройство, а за вид: цвета, шрифты, компоненты и описание визуала простым языком. Держите его так же, как инструкцию по тону текста. Там агенту объясняют, как говорить. Здесь — как страница должна выглядеть. Формат отнесите к компании Google. Внутри сначала параметры цвета и типографики, дальше — что человек должен увидеть.

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

Второй файл не сочиняйте с нуля, если дизайнера нет. Дайте ссылку на свой образец и попросите собрать файл оттуда. Либо возьмите готовый из коллекции в материалах: она разложена по сайтам. В коллекции есть вид Claude, цвета и расположение как у Twitter и визуал Pinterest. На практике откройте Pinterest и попросите зафиксировать цвета, шрифты и концепцию. Хватит ссылки или самого описания. Проверьте, что в файле есть цвета, шрифты и концепция.

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

К двум файлам добавьте два навыка и на этом остановитесь. Первый убирает безликий вид. Обычные агенты делают очень похожие сайты. Навык сглаживает элементы и делает их чётче. Им же можно усилить удобство, убрать скуку или приглушить слишком яркое. Название в материалах рассыпалось: не восстанавливайте его по слуху. Ставьте по ссылке из презентации и вызывайте, когда оформление уже начато. Второй навык прописан для Claude и подходит для Codex: выезжающие буквы и реакция на курсор. Нет своих образцов — оставьте навык. Есть образцы — отдайте секции с сайтов, которые показаны в материалах.

Что положить текстом в первый запрос

Файл проекта без содержания страницы агента не держит. Соберите страницу по разделам, которые можете назвать сами. Ориентир — сайт личного бренда детского дерматолога-трихолога.

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

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

Куда сядет заявка

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

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

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

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

Как составить требования к MVP с ИИ

Как проверять материалы ИИ перед публикацией

Каталог встреч: https://cmo.pro/yadro/meetings

Каталог открыт, запись для участников Ядра.