Аудит лендинга с ИИ можно выстроить как последовательность: агент получает текст страницы, скриншоты и бриф, собирает наблюдения с привязкой к исходнику, отделяет их от гипотез, сверяет советы с известными фактами и готовит матрицу решений. По этой матрице можно выбрать одну локальную правку и определить, как её проверить. Это предлагаемая схема работы, а не гарантия поведения модели: в учебном примере ниже файлы и скриншоты подготовлены и проверены локально, модель не вызывалась.
Подготовьте страницу
Передайте агенту полный текст лендинга, скриншоты desktop- и mobile-версии и задачу страницы. Уточните, кто аудитория, что ей предлагают и какое действие должно быть доступно. Зафиксируйте ширину окна для каждого скриншота. Отдельно перечислите подтверждённые бизнес-факты и неизвестные условия: например, наличие скидки, отзывов, результатов и работа формы. Если содержимое страницы недоступно по URL, одного адреса недостаточно — приложите сам текст и изображения.
В AI-first процессе агент может собрать и отсортировать наблюдения, сверить их по заданным правилам и отметить, где не хватает контекста. Человек уточняет отсутствующие бизнес-факты и принимает решения по исключениям. Не нужно вводить обязательную ручную вычитку каждой записи: агент может передать человеку только вопросы, которые требуют недостающих данных или решения. Это не отменяет проверки рекомендаций по исходнику и не гарантирует точность выводов.
Если задача — создать страницу, а не проверить готовую, пригодится материал о том, как сделать лендинг с помощью нейросети. Для подготовки вопросов и ответов есть разбор FAQ для сайта с нейросетью.
Учебный пример. Все условия вымышлены. Мастерская «Пятница» предлагает маркетологу с готовым текстом страницы онлайн-разбор рекламного лендинга: 90 минут за 2000 рублей. В программе — разобрать первый экран, проверить связь предложения и действия, составить одну проверяемую правку. Клиентские результаты, отзывы и скидки не заданы. Регистрация отключена, форма не отправляет данные.
Полный текст учебной страницы до и после CSS-правки одинаков:
УЧЕБНЫЙ ПРИМЕР · вымышленные данные и условия
Учебный лендинг — одна правка
Рост продаж на 30% гарантирован
Учебный разбор рекламного лендинга. 90 минут онлайн.
Получить скидку
Оставьте заявку
Учебная форма отключена. Данные не отправляются.
Отправить
Запросите наблюдения
Просите не общий список улучшений, а записи, которые можно сверить с исходником. Для каждого пункта нужны место на странице и точная цитата либо конкретный элемент. Если совет относится к элементу, которого на странице нет, это нужно явно отметить: формулировка совета не становится цитатой страницы. Наблюдение о том, что видно в исходнике, отделяйте от гипотезы о возможном последствии. Добавьте альтернативу, решение и критерий проверки. Если данных нет, агент должен обозначить пробел, а не заполнять его выдуманной аналитикой.
Шаблон запроса:
Разбери переданные текст и скриншоты лендинга относительно брифа.
Для каждого замечания укажи:
1. место и короткую точную цитату либо конкретный элемент;
2. наблюдение: что непосредственно видно в исходнике;
3. гипотезу: какое последствие возможно, но не измерено;
4. альтернативу: что ещё может объяснить наблюдение;
5. решение: исправить, запросить факт у владельца или отклонить совет;
6. критерий, по которому можно проверить решение.
Не выдавай формулировку совета за цитату страницы. Если элемента
нет в исходнике, укажи это. Не выдумывай аналитику, отзывы, скидки,
результаты, функции формы и бизнес-условия. Отделяй гипотезу от факта.
Если содержимое или элемент недоступны, отметь это.
Например, «в заголовке обещан результат, которого нет в брифе» — наблюдение о тексте и брифе. «Посетитель может понять обещание буквально» — гипотеза, а не установленная причина ухода. Скриншот показывает страницу, но сам по себе не объясняет поведение посетителей.
Проверьте советы
Матрица ниже передаёт все девять полей id, place, quote, observation, hypothesis, alternative, decision, state и check из файла audit.csv. Она разделена на две таблицы, чтобы не сжимать длинные поля. В колонке quote A4 приведена формулировка проверяемого совета, а не цитата с лендинга. new testimonial в place — предложенное место, а не существующий элемент страницы: исходного отзыва на ней нет. Полный комплект с исходниками и файлами для воспроизведения — ZIP.
| id | place | quote (для A4 — совет, не цитата страницы) | observation | hypothesis | alternative |
|---|---|---|---|---|---|
| A1 | #hero |
Рост продаж на 30% гарантирован |
Обещание отсутствует в учебном брифе | Может создать неверное ожидание; эффект не измерен | Возможная альтернативная гипотеза: заголовок остался от предыдущей версии оффера; проверить историю правок, не считать это установленным фактом. |
| A2 | .broken a.button |
Получить скидку |
Скидка отсутствует в учебном брифе | CTA обещает неизвестное условие | Владелец мог бы отдельно подтвердить акцию. |
| A3 | style .broken |
.broken{width:900px;min-width:900px} |
В CSS одновременно заданы width:900px и min-width:900px; блок даёт scrollWidth=950 при viewport=390 |
На телефоне приходится прокручивать страницу горизонтально; это измерение геометрии, не причины отказов | Можно оставить фиксированный блок при другой задаче; здесь нужен viewport=390 без переполнения. |
| A4 | new testimonial |
Добавить отзыв известного клиента |
Нет исходного отзыва и разрешения на его использование | Совет требует выдуманного доказательства | Дождаться подлинного разрешённого отзыва. |
| id | decision | state | check |
|---|---|---|---|
| A1 | Следующая отдельная правка: заменить заголовком о задаче после согласования | pending_not_applied |
В этой before/after паре заголовок остаётся одинаковым; не объявлять обещание исправленным |
| A2 | Следующая отдельная правка: согласовать действие и заменить CTA | pending_not_applied |
В этой паре текст и href=#register не меняются; переход к отключённой форме технически работает |
| A3 | Заменить ОДНО правило .broken целиком на .broken{width:auto;min-width:0} |
applied_single_css_rule |
scrollWidth<=390; HTML/текст/CTA и весь исходник вне заменённого CSS-правила идентичны; перенос строк и вертикальный сдвиг следующего блока ожидаемы |
| A4 | Отклонить совет | rejected_not_applied |
В обоих вариантах нет выдуманного отзыва |
A1 и A2 остались без правок, A3 — единственное выполненное изменение, A4 отклонён. Новый вариант гипотезы для A1 не подтверждает обещание о росте продаж и не даёт основания принять его. A2 можно пересмотреть, если владелец подтвердит акцию; A4 — если появятся подлинный отзыв и разрешение на публикацию. Это решения учебного примера, а не рекомендация выпускать реальную страницу. UX-критерий не заменяет факты бизнеса.
Для проверки формы есть отдельный технический критерий: подпись и элемент управления формы должны быть связаны явно или неявно. W3C WAI: Labelling Controls
При явной связи значение for у label должно точно совпадать с id поля. W3C WAI: Labelling Controls
Перед принятием рекомендации проверьте три вещи:
- Есть ли опора в исходнике? Найдите место и цитату. Если их нельзя сверить, запросите уточнение или снимите замечание.
- Не противоречит ли совет брифу? Не добавляйте цену, скидку, отзыв или обещание без подтверждения бизнеса.
- Можно ли проверить решение? Критерий должен относиться к самой правке. Скриншот и UX-критерий не заменяют данные о поведении посетителей и факты бизнеса.
Сделайте одну правку
В примере выполнена только A3 — заменено одно CSS-правило. Заголовок, CTA, HTML и текст не менялись. A1 и A2 остаются в очереди, A4 отклонён. Исправление геометрии не делает неподтверждённые бизнес-обещания приемлемыми.
До правки:
.broken{width:900px;min-width:900px}
После правки:
.broken{width:auto;min-width:0}
HTML секции до и после одинаков:
<section class='broken'>
<h2 id='hero'>Рост продаж на 30% гарантирован</h2>
<p>Учебный разбор рекламного лендинга. 90 минут онлайн.</p>
<a class='button' href='#register'>Получить скидку</a>
</section>
Сама секция не воспроизводит проверку геометрии без CSS. Полные страницы до и после с неизменной секцией находятся в ZIP; в них заменено только правило .broken. Ниже — реальные скриншоты учебной страницы. Они показывают отображение при заданных размерах окна, а не конверсию или причину ухода посетителей.
В учебном комплекте зафиксированы результаты проверки геометрии:
| Состояние | Ширина окна | Ширина прокрутки | Переполнение |
|---|---|---|---|
| До правки | 1440 px | 1440 px | Нет |
| До правки | 390 px | 950 px | Да |
| После правки | 1440 px | 1440 px | Нет |
| После правки | 390 px | 390 px | Нет |
Это проверка отображения при указанных размерах, а не конверсии или причины ухода. Форма отключена, доставка заявки не проверялась.
Выберите следующую проверку
Следующий шаг — запланированная техническая регрессия CSS-правки A3. Это будущий повтор и расширение проверки, а не уже полученный результат на всех размерах. В учебном комплекте проверены 1440 и 390 px; 320 и 768 px пока не проверены.
Вопрос: помещаются ли секция .broken и её CTA после правила .broken{width:auto;min-width:0} при ширинах 320, 390, 768 и 1440 px без горизонтального переполнения?
Данные и ресурсы: неизменные before.html и after.html, полный CSS из ZIP и строки A1–A4 файла audit.csv. Новая бизнес-аналитика и участники не нужны. Понадобится локальный браузер с управляемым viewport — например, браузерный инструмент агента или Playwright. Задайте высоту 900 px, масштаб 100%, deviceScaleFactor=1 и дождитесь загрузки шрифтов. Локальные файлы или сервер должны работать без отправки формы.
Порядок проверки:
- Зафиксировать версии файлов и настройки браузера.
- Открыть оба варианта при каждой из четырёх ширин, дождаться загрузки.
- Записать
innerWidth,document.documentElement.scrollWidth, границы.brokenи CTA; сохранить кадр. - Проверить локальный переход по
href=#register. Форму не отправлять. - Использовать положительный контроль: до правки при ширине 390 px должно воспроизводиться известное переполнение. Если его нет, сначала проверить файл и настройки viewport, а не делать вывод о правке.
Критерий приёмки после правки: на каждой ширине scrollWidth<=innerWidth, секция и CTA находятся в viewport без обрезки текста, локальный переход ведёт к #register. Если хотя бы одно условие не выполнено или измерение не записано, техническая приёмка этой проверки не завершена. Зафиксируйте исключение и причину; после узкой правки повторите проверку.
Форма отчёта: вариант, ширина viewport и настройки, измерения, кадр, действие, ожидаемый и фактический результат, решение. Этот протокол не подменяет уже выполненные проверки на 1440 и 390 px и не измеряет конверсию. A1 и A2 остаются pending_not_applied, A4 — rejected_not_applied; до разбора неподтверждённых бизнес-обещаний страницу нельзя считать готовой к запуску.
Итог аудита — не заданное число замечаний, а проверяемая последовательность: исходник и бриф → наблюдение с местом → отдельная гипотеза → решение по совету → одна правка → следующая проверка. Если не хватает бизнес-факта, его уточняют у владельца. Если не хватает измерения, вывод остаётся непроверенным.
Автор метода «Машиночитаемый маркетинг»