Как делать фронтенд с агентами, чтобы он не выглядел как нейрослоп

Лонгрид · июль 2026

Меня часто спрашивают, почему агент так плохо делает фронтенд. Ответ обычно не нравится: плохо делает не агент, плохо им управляют.

Начал я с эксперимента. Взял один ленивый промпт — «сделай крутой современный лендинг, тексты придумай сам» — и отдельной строкой заказал полный набор штампов: градиенты, плавные анимации, стеклянные карточки. Отправил его трём топовым моделям: Claude Opus, GLM 5.2 и GPT-5.6 Sol. Цель была простая и немного подлая: получить трёх уродцев и на их фоне показать, «а вот как надо».

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

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

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

Как выглядел устаревший слоп

Когда говорят «этот сайт сделала нейросеть», в голове всплывает вполне конкретная картинка: фиолетово-синий градиент на тёмном фоне, заголовок по центру с эмодзи («🚀 Возможности», «✨ Начать»), стеклянные карточки с одинаковыми тенями, три колонки «фич» с иконками, тариф посередине выделен и подписан «🔥 Популярный». А в текстах живёт «раскройте потенциал в современном быстро меняющемся мире» и отзывы от несуществующих людей.

Канонический слоп. Из трёх моделей только Opus взял заказ на градиенты и стекло буквально.

Важная деталь: градиенты и стекло стояли в промпте прямым текстом, штампы я заказал сам. И всё равно на наживку клюнула одна модель из трёх — у двух других в промпте стояло то же самое, а результат вышел совсем другой. Слоп образца 2023-го сегодня музейный экспонат. Прощаемся с ним и переходим к настоящему врагу.

Новый слоп — это не уродство, а одинаковость

Вот другие две версии по тому же ленивому промпту. Никаких фиолетовых градиентов, наоборот — вкусно.

GLM 5.2 — тёмная редакционная тема с засечками и градиентными акцентами в тексте.

GPT-5.6 Sol — тёмный продуктовый лендинг с гигантским гротеском и «живым» дашбордом восстановления в hero.

Оба варианта выглядят профессионально, как будто их сделал опытный дизайнер. (Речь идёт о лендинге для вымышленной клиники Afterdeploy — на её примере я дальше и разберу всё по шагам.)

При сравнении видны общие черты. Тёмный фон, один неоновый или приглушённый акцент, крупный дисплейный шрифт, на котором держится вся «личность». В hero у обеих фейковый живой дашборд: у одной мониторинг пациента, у другой кольцо «восстановления 78%». Выдуманные метрики, поданные как настоящие: 78%, −31%, −27%, 1,8×, 63%. Нумерация секций 01 / 02 / 03. Бегущая строка баззвордов. Отзывы от правдоподобных, но несуществующих людей.

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

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

Почему все три сходятся к одному

Модель выдаёт наиболее вероятный результат, а наиболее вероятный результат и есть среднее по всему, что она видела. Видела она весь современный дизайнерский интернет. Поэтому запрос «сделай современно» на практике означает «сделай как у всех прямо сейчас».

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

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

Модель как инструмент со своим вкусом

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

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

Модель	Сильна в	Когда брать
Claude Opus 4.8	Дизайнерское суждение: арт-дирекшн, асимметрия, pixel-accurate CSS, доступная разметка из коробки	Hero и финальные экраны, где важна каждая деталь. Дорогая
GPT-5.6 Sol	Новый флагман OpenAI (июль 2026): смелые уверенные макеты, большой контекст, сильна в сложной логике	Амбициозный визуал, когда нужен характер. Иногда перегружает
GLM 5.2	Чистый семантический HTML, аккуратные дашборды за кратно меньшие деньги	Дашборды, массовый скаффолдинг. На лендингах шаблоннее
Claude Sonnet 4.6	Крепкая структура, ~вдвое дешевле Opus, чуть меньше полировки	Итерации, когда стиль уже зафиксирован
Gemini 3 Flash	Быстрая и дешёвая, смелые решения, сильна в разборе скриншотов	Эксплорейшен, генерация вариантов. Перебарщивает с motion
Kimi 2.6	Сильный открытый вариант для фронтенда	Когда нужен опенсорс

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

Почему я держу под рукой несколько моделей

Когда модели различаются, разумнее не ограничиваться одной, а использовать несколько. Паттернов несколько, от простого к сложному.

Варианты и выбор

Один и тот же экран генерю двумя-тремя моделями по одинаковому брифу. Затем кладу рядом, беру лучшую основу или комбинирую удачные куски.

Кросс-ревью

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

Жюри

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

Роутинг по этапам

Черновики и эксплорейшен отдаю дешёвой быстрой модели, например Gemini Flash или GLM. Финальный hero, где нужно дизайнерское суждение, доверяю Opus или Sol. Дополнительные экраны и правки делает Sonnet. Так дешевле и лучше разом: на каждом этапе работает модель, которая в нём сильна.

Сравнивать можно только при одинаковых вводных: один бриф, один референс, одни токены.

Где я это всё гонял

Гонять несколько моделей руками по разным сервисам — боль. Весь пример в этой статье я делал в Kodik: там в одном месте выбор разных моделей (то есть и «несколько моделей», и роутинг по этапам — без жонглирования вкладками), не нужен VPN, а оплата подпиской, а не за токены — можно спокойно перегенерировать и сравнивать, не считая каждый запрос. Конкретный набор моделей проверьте на актуальную дату, он меняется.

Скилы: вкус, заложенный в правилах

Теперь о скилах. Скилл — это переиспользуемый набор инструкций и инструментов под конкретную задачу, который модель подхватывает автоматически. Полезных категорий много: дизайн-критика, аудит доступности, работа с дизайн-системой, хэндофф в разработку, дата-виз, UX-копирайтинг и humanize, отдельно важный для русского текста, чтобы вычистить из русского копирайта кальки и штампы.

На июль 2026-го стоит знать несколько готовых (названия и наличие тоже проверяйте на текущую дату):

• Anthropic Frontend Design ведёт модель к отличимому production-grade интерфейсу, уводя от стандартных AI-решений. По сути готовый анти-слоп скилл, с него и начинать.

• Vercel Web Design Guidelines работает линтером для UI/UX: сотня с лишним правил на доступность, производительность и пользовательский опыт.

• UI/UX Pro Max даёт базу насмотренности: пятьдесят с лишним UI-стилей, 97 палитр и 57 шрифтовых пар. Особенно полезен на этапе ресёрча стиля.

• AccessLint собирает набор скилов для проверки доступности: контраст, цветовое соответствие и прочее.

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

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

# afterdeploy — анти-слоп правила
- Никаких фиолетовых и индиго градиентов. Фон — тёплая бумага #F6F2EA, чистый белый запрещён.
- Ноль эмодзи в заголовках и кнопках.
- Отступы — только из шкалы 4 / 8 / 12 / 16 / 24 / 40 / 56 / 88 / 128. Инлайн-значения запрещены.
- Шрифты: заголовки — только Golos Text, пометки — Caveat. Inter запрещён.
- Кириллица обязательна: шрифт без неё не рассматривается.
- Цифры на странице — только реальные из контента. Придумывать метрики нельзя.
- Кнопки — по действию и по-русски: «Записаться на приём», не «Начать бесплатно».

Обратите внимание на предпоследнюю строку — «цифры только реальные». Именно её отсутствие позволило каждой из трёх версий придумать себе метрики: Opus выдал «10K+ команд» и «99,9% аптайма», Sol — 78% и −27%, GLM — 63%. Готовые скилы повышают средний уровень. Ваш скилл остаётся единственным фактором, который делает результат вашим, а не усреднённым. В примере ниже этого файла ещё не было: правила жили прямо в промптах, и строка про реальные цифры появилась в списке запретов уже после того, как модели их придумали.

Но инструменты — это ещё не всё

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

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

Тут возражают: ты просто плохо формулируешь, дай один большой промпт с контентом и стилем, и всё наладится. Я дал (сейчас увидите). Большой промпт действительно повышает планку. Но тот же шаблон 2026 года и те же вымышленные метрики никуда не исчезают. Одним промптом, даже отличным, бренд не создать: он появляется только тогда, когда меняется не формулировка, а сам порядок работы.

Дизайн — не первый шаг, а последний. Дальше пример: одна и та же страница, три подхода, от короткого промпта до пайплайна.

---

Одна страница, три подхода

Теперь соберу всё сказанное на одном сквозном примере. Беру вымышленную (и намеренно нелепую) клинику Afterdeploy. Идея проста: довести абсурд до продукта. Это SaaS, который «лечит» разработчиков после релизов, то есть берёт послерелизный стресс и оформляет его как настоящую клинику.

В программе лечения: детокс от алертов (пять дней без пушей в PagerDuty), терапия после ночного хотфикса, реабилитация после инцидента и групповые постмортемы без поиска виноватых. Тарифы как в настоящей клинике: «Амбулаторно» за 4 900 ₽, «Стационар» за 14 900 ₽ и «Санаторий» по запросу для команд. Тон — дружелюбный, доверительный, с элементами дев-юмора.

Почему это хороший полигон для борьбы со слопом:

• Понятен IT-аудитории: релизный стресс знаком любому, кто хоть раз катил в пятницу.

• Есть реальный контент и настоящие цифры: программы, тарифы, отзывы. Нельзя схалтурить на lorem ipsum.

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

Одну и ту же страницу я собрал тремя способами, постепенно увеличивая проработку. Все три прогонял на Claude Opus, GLM 5.2 и GPT-5.6 Sol.

• Короткий промпт. «Сделай мне такой-то сайт» и надежда получить на выходе что-то небанальное.

• Подробный промпт. Контент, тон, требования, список запретов. Выходит заметно лучше, но местами всё равно мимо.

• Работа по пайплайну. Разработка разбита на этапы, и дизайн среди них последний, а не первый.

Подход первый: короткий промпт

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

Сделай крутой современный лендинг для SaaS-стартапа Afterdeploy — это сервис,
который помогает разработчикам восстановиться после релизов и не выгорать.

Сделай красиво, современно, модно, чтобы был вау-эффект: градиенты, плавные
анимации, стеклянные карточки. Продающие тексты придумай сам.

Один файл index.html, Tailwind через CDN.

Я протестировал его на трёх моделях, и вот что получилось:

Claude Opus. Из трёх моделей только она выполнила заказ буквально: градиенты, стекло, эмодзи в кнопках.

GLM 5.2. Стекло и фиолетовый мимо, но градиентные акценты в тексте всё-таки есть: тёмная редакционная тема без признаков уродства.

GPT-5.6 Sol. Снова мимо: тёмный лендинг с гигантским гротескным шрифтом и «живым» дашбордом в hero.

Результат заказа показателен. Градиенты и стекло я попросил прямым текстом, но выполнила просьбу только одна модель из трёх. Две другие взяли из просьбы один градиент в тексте и ушли в тот самый дефолт, который разобран выше: тёмный фон, крупный шрифт, фейковый дашборд. Даже прямая заявка на штампы 2023 года упирается в медиану 2026-го: модель отдаёт не то, что просят, а то, что считает красивым сегодня.

Две из трёх работ не стыдно показать. И всё равно это слоп: цифры (78%, −27%) взяты с потолка, отзывы шаблонные, бренда нет ни в одном из вариантов. Большинство останавливается на этом этапе.

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

Подход второй: детальный промпт

Но сначала — контент. Прежде чем писать промпт, я сделал то, что часто упускают: сначала разработал контент. Не «модель, придумай тексты», а сам написал настоящие заголовки, программы лечения, тарифы и отзывы с живым голосом клиники. Затем прогнал весь текст через humanize-проход, чтобы русский звучал естественно: убрал кальки, канцелярит и клише вроде «в современном быстро меняющемся мире».

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

И вот теперь — тот самый «нормальный» промпт, целиком. Обратите внимание: это не только контент. Сначала идут инструкции (один файл, все секции по порядку, ничего не придумывать и не переводить), а затем весь подготовленный текст клиники:

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

Технически: один самодостаточный файл index.html, Tailwind через CDN, без сборки — чтобы можно было просто открыть в браузере. Свёрстай все секции по порядку.

Используй весь текст ниже как есть: ничего не выдумывай и не переводи, русский оставь русским.

====================
НАВИГАЦИЯ
Логотип: Afterdeploy
Пункты: Симптомы · Программы · Тарифы · Истории · Контакты
Кнопка: Записаться на приём

ПЕРВЫЙ ЭКРАН
Над заголовком: Клиника восстановления после релизов
Заголовок: Выкатили в прод. Теперь давайте выкатим вас из выгорания.
Подзаголовок: Ночной хотфикс, пятничный деплой, постмортем до утра — а наутро снова стендап. Помогаем выдохнуть и прийти в себя, без «ну ты же сам смёржил».
Кнопки: Записаться на приём / Пройти чек-ап за 2 минуты
Подпись под кнопками: Первичная консультация бесплатна. Пейджер можно оставить в гардеробе.

СИМПТОМЫ
Заголовок: Узнаёте себя?
Вступление: Если хотя бы три пункта про вас — это не слабость характера, это профессиональное. И это лечится.
— Фантомные вибрации пейджера в выходной.
— Пульс подскакивает от слова «раскатили».
— Открываете Grafana перед сном. И сразу после сна.
— Пятницу проводите в позе «только не деплой, только не деплой».
— На «это же простая правка» дёргается глаз.
— Спите с ноутбуком. На всякий случай.

ПРОГРАММЫ ЛЕЧЕНИЯ
Заголовок: С чем к нам приходят
— Детокс от алертов. Пять дней без единого пуша в PagerDuty. Забираем телефон и возвращаем нервную систему.
— Терапия после хотфикса. Проговариваем ту ночь, когда вы чинили прод из такси. Спокойно, с чаем, без разбора полётов.
— Реабилитация после инцидента. Мягкое возвращение к кнопке Deploy. Начинаем со стейджинга.
— Групповые постмортемы. Без поиска виноватых. Только «что мы поняли» — и объятия по желанию.

КАК ПРОХОДИТ ЛЕЧЕНИЕ
Заголовок: Как это устроено
1. Приём. Врач-SRE выслушивает вашу историю релизов и снимает первичные показатели: пульс алертов, уровень тревоги, дату последнего нормального сна.
2. Курс. Индивидуальный план: детокс, терапия, дыхание по канбану. От трёх дней до целого спринта.
3. Выписка. Возвращаетесь в команду отдохнувшим — и с планом, как больше к нам не попадать. Хотя мы будем рады.

ТАРИФЫ
Заголовок: Программы и цены
Подзаголовок: Первичная консультация бесплатна. Дальше выбираете формат.
— Амбулаторно — 4 900 ₽ за курс. Приходите на сессии, ночуете дома. Для лёгких случаев и профилактики. Входит: чек-ап, три сессии терапии, детокс-выходные.
— Стационар — 14 900 ₽ за курс. (чаще всего берут) Живёте у нас, телефон сдаёте на ресепшене. Для тех, у кого прод горит прямо сейчас. Входит: всё из амбулаторного, круглосуточный SRE-психолог, палата с видом на зелёный пайплайн.
— Санаторий — по запросу. Для целой команды после большого релиза. Выездная программа, групповые постмортемы, тимбилдинг без верёвочного курса. Входит: всё, что нужно, чтобы вернуться людьми.
Подпись: Оплата картой, счёт на юрлицо или в стори-поинтах.

ИСТОРИИ ВЫЗДОРОВЛЕНИЯ
Заголовок: Нас уже прошли
— «Пришёл после релиза, который катили три ночи. Впервые за полгода уснул без открытого дашборда.» — Артём, тимлид
— «Думала, фантомные пейджеры — это навсегда. Оказалось, за неделю проходит.» — Даша, SRE
— «Меня отправили сюда после деплоя в пятницу. Не жалею ни о том, ни о другом.» — Костя, был джуном, стал мидлом

КТО ВАС ВСТРЕТИТ
Заголовок: Кто вас встретит
— Врачи-SRE — снимут и с дежурства, и с тревоги.
— Инцидент-психологи — помогут не винить себя за строку, которую ревьюил не только вы.
— Дежурная смена 24/7 — потому что прод не спит. Но теперь наконец спите вы.

ЧАСТЫЕ ВОПРОСЫ
— А если прод упадёт, пока я лечусь? На это есть дежурная смена. Ваша задача — не открывать ноутбук.
— Вы правда забираете телефон? Только пуши. Мемы в отпуск не уходят.
— Можно прийти до того, как всё сломалось? Нужно. Профилактика дешевле реанимации.
— Это вообще серьёзно? Клиника — шутка. Выгорание после релизов — нет.

ФИНАЛЬНЫЙ ПРИЗЫВ
Заголовок: Пора на приём
Текст: Релиз уже позади. Дайте себе прийти в себя.
Кнопка: Записаться на приём

ПОДВАЛ
Afterdeploy · Клиника восстановления после релизов
Ссылки: Симптомы · Программы · Тарифы · Истории · Контакты
Мелким шрифтом: Afterdeploy — вымышленная клиника для статьи про то, как делать фронтенд с агентами. Берегите себя и коллег.
====================

Те же три модели получили тот же промпт:

Claude Opus. Спокойная бирюзовая гамма, аккуратные карточки, живые тексты.

GLM 5.2. Светлая редакционная тема с панелью «мониторинга пациента».

GPT-5.6 Sol. Смелый кремово-зелёный дизайн с крупным гротескным шрифтом.

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

А выдуманные цифры контент убрал не до конца. В версии Opus под кнопками появилось «3 дня до первых улучшений» — числа, которого в контент-документе нет. Предоставить достоверные данные мало, нужен ещё и прямой запрет придумывать.

Подход третий: работа по пайплайну

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

• Контент и структура. Сначала определяется, что написано на странице и в каком порядке: реальные тексты вместо lorem, карта секций под сценарий читателя.

• Ресёрч. Насмотренность под конкретную задачу, а не «SaaS landing»: аналоги в индустрии, живой продуктовый UI, шрифты и палитры. Это главный рычаг, уводящий модель от медианы.

• Слепок бренда. Единый визуальный язык, зафиксированный в style-tile — одной странице, где собраны все решения о внешности: палитра с ролями, шрифтовая пара, шкала радиусов, сквозной мотив. Если бренд уже есть, с него снимается слепок, если нет — собирается из результатов ресёрча.

• Компоненты и токены. Цвет, отступы, радиусы и толщина обводки описываются один раз и переиспользуются. После этого страница собирается из системы, а не рисуется заново в каждом блоке.

• Сборка. Экраны компонуются из готовых компонентов в соответствии с контентом. Ключевые решения к этому шагу уже приняты, поэтому агент не изобретает, а применяет готовое.

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

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

---

Клиника по пайплайну, шаг за шагом

---

Дизайн как процесс

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

И вот что важно понимать про этот пример. Каждый шаг здесь пройден один раз, иногда два: ресёрч в один заход, арт-дирекшн в один style-tile, ревью в два круга. Сделано так ровно по одной причине — чтобы статья закончилась.

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

Теперь про стоимость, потому что без неё решать нечего. Замеры трудозатрат я не проводил, поэтому могу показать только то, что осталось в репозитории: четыре календарных дня, почти шестьдесят коммитов, десять прогонов слоп-ревью, семнадцать документов по этапам, четырнадцать html-артефактов, тридцать восемь скриншотов и четыре своих скрипта для замеров. Это одна страница — не сайт и не продукт, а всего лишь одна страница, доведённая до измеримой приёмки.

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

Критерий выхода из цикла определяете вы, а не я. У меня это был слоп-скоринг тремя моделями (модель выставляет странице оценку от одного до десяти по вопросу «насколько это похоже на нейросеть»), посчитанный контраст и замер геометрии. У вас может быть что угодно, главное, чтобы это можно было проверить, а не просто почувствовать.

---

Шаг 1 — сначала контент, затем дизайн

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

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

Я делаю лендинг для клиники Afterdeploy — восстановление
разработчиков после релизов. Читатель — уставший разработчик
сразу после тяжёлого релиза: на нервах, с недоверием к маркетингу.
За минуту он должен узнать себя, поверить, что это про него,
и записаться.

Собери карту секций сверху вниз под этот сценарий. Для каждой
секции — одной строкой её работа: что она делает для читателя.
Никаких секций «потому что у всех так».

Ключевая фраза здесь — последняя. Без неё агент выдаёт стандартный набор SaaS в стандартном порядке: Features → Testimonials → Pricing. С этой фразой он обязан обосновать каждую секцию. У Afterdeploy порядок выбран под сценарий доверия: сначала секция симптомов («Узнаёте себя?») — на узнавание, и только когда читатель поверил, что это про него, идут программы, процесс и тарифы. Оговорка, которая понадобится в шаге 6: карту секций агент дальше взял из этого документа буквально, сверху вниз — и тарифы уехали раньше историй. Обосновать порядок промпт заставил, а проверить его на собранной странице — нет.

Тексты я пишу живыми с самого начала, а не по запросу «сгенерируй продающий текст». Тон задаётся тем же промптом вместе с прямым списком запретов:

Пиши как живой редактор. Тон: клиника с человеческим лицом —
спокойно, тепло, с умным сдержанным юмором.
Запрещено: канцелярит и кальки, штампы «в современном мире»
и «не просто X — это Y», эмодзи в заголовках, слова Unlock,
Seamlessly, Empower. Заголовки — про боль читателя, а не про нас.
Везде конкретные детали из мира разработчика, а не абстракции.

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

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

Вот что этот проход делает с первым, сырым вариантом hero. Оба фрагмента сокращены, и в «до» под нож попало самое показательное предложение — «Мы предлагаем комплексный подход к решению данной проблемы»:

До. Afterdeploy — это инновационная платформа, которая помогает разработчикам восстановиться после релизов. В современном быстро меняющемся мире релизы становятся источником стресса. Это не просто отдых — это полноценная перезагрузка. Начните свой путь к благополучию уже сегодня!

После. Выкатили в прод — теперь пора выкатить вас из выгорания. Ночные хотфиксы, пятничные деплои, постмортемы до утра. Помогаем выдохнуть и снова засыпать без открытой Grafana.

Финальную естественность подтверждает не модель, а человек: текст нужно один раз прочитать вслух — так AI-каданс становится очевиднее. Слоп на этом этапе живёт в самом тексте. Водянистый контент тянет за собой шаблонную структуру, а за ней шаблонный вид, и никакой дизайн это потом не исправит.

Шаг 2 — ресёрч: набрать насмотренность

У агента нет вкуса из ниоткуда, и насмотренность приходится собирать специально. Это главный рычаг против слопа: модель отдаёт медиану того, что видела. Если дать только бриф, получится стандартный лендинг. Но если дать сильный конкретный референс, агент оттолкнётся от него.

Ресёрч — это не поиск красивых картинок, а целенаправленный подбор материалов под конкретную задачу. Промпт агенту:

Собери визуальный ресёрч под лендинг клиники Afterdeploy.
Тон бренда: тёплая клиника с человеческим лицом. НЕ «SaaS-лендинг».
Ориентир — wellness- и health-бренды с характером, спокойная
медицинская типографика, аккуратные графики «жизненных показателей».

Дай 2–3 разных направления. Для каждого: настроение одной фразой,
палитра (hex с ролями), шрифтовая пара (без Inter по умолчанию),
приёмы вёрстки, 3–5 референсов. Явно помечай, где реальный
продуктовый UI, а где концепт.

«НЕ SaaS-лендинг» — это не каприз, а необходимость. Запрос «SaaS landing» вернёт усреднённое, поэтому ищу референсы под конкретную индустрию и настроение. Референсы бывают двух типов: реальные продуктовые интерфейсы, которые прошли проверку настоящими данными и адаптивом, и красивые концепты с Dribbble, которые вдохновляют, но рассыпаются на реальном тексте. Для сборки я беру первый тип.

Референсы не берут из головы. Есть площадки. Реальный прод я смотрю на Refero и Mobbin, лендинги на Land-book и SaaSpo, смелый веб на Awwwards, типографику на Typewolf и Fonts in Use. Я прошёлся по ним вручную и веб-поиском, и для Afterdeploy сразу нашёлся подходящий пример: Parsley Health — тёплый песочный фон с зелёными акцентами и полное отсутствие фиолетового. По итогам ресёрча определились три направления: «тёплая клиника», «спокойный дашборд здоровья» и «тёплый редакторский».

Ресёрч-борд: три направления, палитры с конкретными hex-кодами, шрифты и живые референсы, найденные веб-поиском и обходом сайтов.

Отдельной ловушкой для русских сайтов оказались шрифты, и я на ней обжёгся по-настоящему. Первые кандидаты, Fraunces и Hanken Grotesk, идеально смотрелись на латинском образце, но на русском заголовке превратились в «квадраты»: кириллицы в них просто нет. Пришлось перебирать заново и проверять каждый шрифт на русском тексте. В итоге выбраны Lora и Golos Text (последний ParaType сделал специально под русский) и рукописный Caveat для заголовков. Проверять кириллицу нужно до того, как влюбишься в шрифт, а не после.

Три пары шрифтов под русский сайт. Рукописный Caveat заодно доказывает поддержку кириллицы: шрифт только под латиницу дал бы здесь «квадраты».

Слоп тут скрывается в слабом референсе. «Современный минимализм» — не конкретный референс, а медиана. Чем менее конкретна опора, тем ближе результат к нейросетевому дефолту.

Шаг 3 — слепок бренда: один язык на всё

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

Ресёрч дал три направления, из них выбираю одно и закрепляю визуальный язык. Для Afterdeploy это «тёплая клиника»: кремовая бумага вместо белого, шалфейно-зелёный как основной цвет бренда, охра для главного действия, рукописный Caveat в заголовках и Golos Text в тексте. Сквозной мотив — линия пульса, переходящая в галочку успешной сборки: она присутствует в логотипе, разделителях и графиках.

Часть решений я принял не интуитивно, а сравнением. Основную кнопку я поставил рядом в двух вариантах, зелёную и охряную, на целом экране. В итоге выбрал охру: на кремово-зелёном она держит контраст и тянет глаз к кнопке, а зелёная теряется. Всё это сводится в один артефакт — style-tile, единый источник правды:

Зафиксируй визуальный язык направления «тёплая клиника» в один
style-tile: палитра с ролями цветов, шкала радиусов, типографика
(заголовки Caveat, текст Golos Text), кнопки и их состояния, бейджи,
три роли карточек, сквозной мотив пульс→галочка. Это единый источник
правды — к нему привязываем все экраны.

Style-tile — единый источник правды: палитра, шкала радиусов, типографика, кнопки, три роли карточек и мотив пульса в трёх ритмах.

Style-tile отвечает на вопрос «как это будет выглядеть». Затем он превращается в систему, из которой собираются отдельные экраны.

---

Шаг 4 — компоненты и токены

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

На этом шаге я завожу в проекте два файла. В первом лежат токены, вот его ядро (полный файл длиннее — шкала потом доросла на доводке). Обратите внимание на названия: --cta, а не --ochre. Токен назван по своей роли, а не по внешнему виду, поэтому цвет можно изменить, не переписывая разметку.

:root{
  --bg:#F6F2EA; --paper:#EFE8D6; --card:#FBF8EF; --dark:#1C2E28;
  --brand:#3E6B57; --cta:#9E6522; --accent:#D8A657; --mint:#DCE7DF;
  --r-sm:6px; --r-md:12px; --r-lg:16px; --r-xl:24px;
  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-24:24px;
  --s-40:40px; --s-56:56px; --s-88:88px; --s-128:128px;
}

Четыре ступени радиуса вместо одной появились не из эстетических соображений, а по находке ревьюеров: «pill на всё» уехал, капсульная форма осталась только у бейджей. Шкала отступов здесь одна и применяется как для вертикального, так и для горизонтального ритма.

Во втором — галерея компонентов, где у каждого элемента показаны все состояния. Одно правило важнее остальных:

/* Наведение — только там, где есть настоящий курсор:
   на тач-экране :hover залипает после тапа и врёт про интерактивность. */
@media (hover:hover) and (pointer:fine){
  .btn-cta:hover{background:#84521a}
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

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

---

Шаг 5 — сборка: сначала один экран

Агент здесь применяет готовое. Промпт написан именно так: всё, на что можно опереться, названо файлом, а не описано словами.

Собери лендинг Afterdeploy из готовой системы.

Источники (не отклоняйся от них):
- контент и порядок секций — content.md, тексты берём как есть
- визуальный язык — style-tile.html: палитра, шкала радиусов,
  три роли карточек, пара Caveat + Golos Text, мотив
  «пульс алертов → галочка сборки»
- первый экран — hero-v2.html, он уже прошёл ревью, не переделывай

Правила: цвета, отступы и радиусы только из токенов; ничего
не добавляй инлайн-стилями; никаких новых сущностей, которых
нет в style-tile.
На выходе — один файл landing.html, все секции из content.md.

Модель здесь тоже меняется по этапам: первый экран создаётся на Opus, остальные секции на Sonnet. Язык уже определён, дальше идут итерации по готовой системе, и платить за дизайнерское суждение в каждой секции не нужно.

Обратите внимание на третью строку источников. Первый экран этот промпт не собирает — он берёт его готовым и запрещает переделывать. Hero появился раньше, вместе со style-tile на шаге 3, и до сборки успел пройти слоп-ревью. Вот здесь самый важный поворот всего пайплайна.

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

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

Ревью первого экрана — тремя моделями

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

Промпт здесь не расплывчатый «оцени дизайн», а конкретный чек-лист признаков слопа: модель должна искать известные паттерны, а не выдумывать проблемы. Плюс прямое требование хвалить одной строкой, а копать в слабые места. Вот он целиком:

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

Контекст: вымышленная клиника Afterdeploy — восстановление
разработчиков после релизов. Сайт на русском. Направление —
«тёплая клиника с человеческим лицом», антипод фиолетовых
SaaS-градиентов.

Посмотри две картинки:
- style-tile.png — палитра, типографика, кнопки, карточки, мотив
- hero.png — первый экран лендинга

Чек-лист слопа: фиолетовые градиенты и blur; всё по центру,
одинаковый радиус и одинаковая тень на всех карточках; эмодзи
и стоковые иконки; дефолтный Inter без иерархии; hero = H1 по
центру + два CTA + gradient blob; симметричные 50/50 гриды;
pill-скругление на всё; плавающие карточки с generic-тенью;
template-композиция без асимметрии и арт-дирекшна.

Формат ответа: (1) вердикт — слоп по шкале 1–10 + одно
предложение почему; (2) что работает, 2–3 пункта; (3) находки
слопа, от high к low, для каждой: severity, где именно, почему
читается как AI, конкретный фикс. Будь честным и конкретным,
проблем не выдумывай, но и не щади.

Я прогнал по этому промпту три ревьюера: агент на Claude со свежим контекстом и две модели в Kodik. Одному дал картинки, другому — исходники, чтобы охватить и «на глаз», и «по коду». Какая из двух моделей в Kodik дала какой отчёт, я не записал, и это тоже часть честного отчёта.

Общий свод: где три модели сошлись

Оценки сошлись: 4, 3 и 4 из десяти по шкале «насколько похоже на нейросеть», разброс в один балл. Вердикт у всех один — живо, но остаточный слоп есть. Важнее самих оценок то, что три ревьюера независимо сошлись на двух находках:

• шаблонный hero «текст слева, карточка-виджет справа», симметрия 50/50

• pill-скругление (радиус 999) на всём подряд — кнопки, бейджи и так далее.

Когда три модели независимо указывают на одно и то же — это не придирка одного вкуса, а реальный слоп. Но у этого сигнала есть цена, и её надо назвать. Чек-лист признаков слопа я выдал всем трём ревьюерам сам, симметрия 50/50 и pill в нём прямо перечислены — значит совпадение доказывает, что чек-лист работает, а не что три модели пришли к выводу самостоятельно. Полноценным доказательством был бы пункт, которого в чек-листе нет. И сама шкала «из десяти» относительная: на шум я её не проверял, один и тот же экран дважды не прогонял, поэтому сравнивать по ней можно только версии одного экрана между собой, а не объявлять четвёрку объективной оценкой. Совпадение и есть сигнал «чинить обязательно». Промпт заставил модель выдавать не просто «симпатично», а структурную находку: severity, где именно, почему как AI, фикс. Вот один из пунктов high-приоритета, с сокращениями:

[severity: high] Pill-скругление (radius 999) на всё подряд

Где: все кнопки на style-tile и в hero, включая широкую
вторичную «Пройти чек-ап за 2 минуты».

Почему как нейросеть: rounded-full на каждый CTA по умолчанию —
самый узнаваемый tailwind-дефолт. Style-tile даже сам это
декларирует («все кнопки — pill, радиус 999»), то есть радиус
не обдуман под контекст, а применён глобально.

Фикс: развести радиусы осмысленно. Кнопки — умеренный радиус
(8–12px) в тон карточкам; pill оставить только компактным
бейджам, где капсула оправдана.

А дальше начинается польза именно жюри, а не одного ревьюера — каждая модель нашла своё. Та, что смотрела по коду, обнаружила рассинхрон радиусов (12, 14, 16, 24 вперемешку, без системы) и контур пульса, скопированный по всему макету пиксель-в-пиксель, — с прямыми ссылками на строки исходника. Та, что смотрела по картинке, сформулировала самое неприятное:

«SaaS-дашборд вместо клиники: огромная белая карточка справа в hero — скруглённый прямоугольник, мягкая generic-тень, метрика и два бейджа выглядят как виджет из шаблона аналитики.»

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

Фиксы, не переигрывая направление

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

• сломать симметрию hero — пустить пульс-линию через весь низ экрана, чтобы она связывала колонки и затихала в галочку

• заменить «pill на всё» шкалой радиусов: кнопки умеренные, капсула только бейджам-статусам

• дать карточкам три роли вместо одной плавающей тени — плитка на цвете, «лист наблюдения» на тёплой бумаге (роль карточки), тёмная акцент-карта

• превратить дашбордный виджет в «карту наблюдения» с рукописной пометкой на полях

• убрать чистый белый — в тёплой клинике его быть не должно.

Вот тот же hero до и после. Сверху то, что нашли ревьюеры, снизу — как я поправил.

До — слоп 4/10 по первому отчёту, находки трёх ревьюеров. После — те же цвета, шрифты и мотив, изменились только композиция и детали.

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

Прогоняю тот же тест

Теперь то, что превращает ревью из разового каприза в процесс. Исправленный экран прогоняю тем же промптом через того же ревьюера, чей отчёт дал исходные шесть находок. Это как регрессионные тесты в коде.

Результат — 2 из 10 против прежних 4. Закрыто не всё: шаблонный hero сам ревьюер отметил как закрытый на восемьдесят процентов, часть его пунктов в регрессию не попала вовсе — зато закрылись три находки других ревьюеров. Осталась вкусовая полировка, а не структурный слоп. Цикл замкнулся: ревью, фиксы, повторное ревью. Это не «поревьюили и забыли», а измеримое улучшение.

---

Досборка сайта на проверенной системе

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

И первый прогон сборки оказался неудачным — настолько, что это стоит показать. Агент выполнил все правила: взял токены, не использовал лишних цветов, попал в шкалу радиусов. И собрал десять секций по одному шаблону: кикер (короткая надпись над заголовком), сам заголовок, сетка одинаковых карточек. Один фон на всю страницу, одинаковые вертикальные отступы, сетка в три колонки там, где содержание её не просит. Ни одна секция не доминирует, страница читается как один длинный список.

Дизайн-система защищает от разнобоя, но не заставляет держать композицию: «консистентно» и «монотонно» означают одно и то же, если ритм специально не задан. Пришлось делать второй прогон и менять ритм чередованием фоновых полос, не трогая арт-дирекшн. Три уровня плотности — 128, 88 и 56 пикселей вертикального отступа на секцию — добавились уже после ревью собранной страницы: одного чередования фонов не хватило.

Готовый лендинг: все секции из контент-документа, собранные из компонентов по единому style-tile — уже после ревью и исправлений. Слоп выловили на первом экране, а не на финальной странице.

Слопа здесь практически не осталось — и сразу оговорка: это моя оценка, а не замер. Последние цифры слоп-ревью (3, 2,5 и 3) относятся к версии до второго круга фиксов, после него страницу через ревьюеров я не прогонял. Но случайностью результат не назвать. Всё, что могло скатиться в медиану, решилось заранее: контент, ресёрч, арт-дирекшн, а сам визуальный язык я ещё и проверил на слоп до того, как размножить его на десять секций. Дизайн оказался последним этапом — и проверенным.

И ещё одно наблюдение о самом приёме. Ревью здесь организовано так, что его можно проводить автоматически: на входе скриншот и чек-лист, на выходе список находок с severity. Это именно та форма, которую вешают в CI на каждый макет. Я так не делал (все десять прогонов запущены вручную), но, кроме моей лени, этому ничего не мешает.

---

Шаг 6 — причёсывание и приёмка: когда слоп кончился, а работа продолжается

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

Ревью всей страницы — это отдельный этап

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

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

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

Три модели по одному промпту дали одинаковые 4 из 10 и сошлись в шести местах. Главное совпадение — порядок секций. Тарифы стояли перед историями и командой: цена показывалась до единого доказательства, что клиника вообще существует. Карту секций взяли из контент-документа буквально, сверху вниз, без вопроса о том, в каком порядке человек принимает решение.

После этого тринадцать правок и снова регрессия тем же промптом.

Исправления порождают новый слоп

Это, пожалуй, самое важное открытие всего цикла. Регрессия дала 3 / 2,5 / 3 вместо 4 / 4 / 4. Стало лучше, но почти все новые находки оказались следствием моих же исправлений.

Я чинил «полосы читаются зеброй» и посадил две секции на один фон — после чего они слились в одну секцию из шести колонок, где глаз видит шесть равных плиток вместо двух разных глав. Добавлял мотив пульса в тарифы, где его не хватало, и мотив расползся на восемь вхождений против собственного правила «дозировать». Заткнул пустой сайдбар в FAQ телефоном и адресом — получил +7 495 000-00-00 и типовую набережную — незаменённый placeholder рядом с честной подписью «клиника вымышленная». Во втором круге фиксов оба контакта из страницы убраны: выдуманной клинике телефон не нужен. Перекрасил третью охряную кнопку подряд в зелёный и нарушил собственный style-tile, где охра закреплена за главным действием.

Один проход ревью работу не завершает. Он её только начинает.

Ревьюер показывает где, но не объясняет почему

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

Проверка рендера показала третью причину:

.q-lead p{font-size:40px}   /* объявлено выше */
.q-card p{font-size:16px}   /* объявлено ниже, специфичность равная */

Второе правило просто перебивало первое. Цитата всё это время отображалась шестнадцатым кеглем. Лечится одним селектором, и заодно я поднял кегль до 46px: сорок было объявлено ещё до того, как цитата стала главным акцентом полосы. Дальше в замерах она проходит уже как 46px.

Похожая история с контрастом. Ревьюер нашёл провал — белый текст на охре даёт 3,08 вместо необходимых 4,5 — и предложил другой оттенок, оценив его «примерно 4,6». Пересчёт по формуле дал 4,21. Всё ещё провал. Подобрал следующий, посчитал, вышло 4,84.

Находка ревьюера ценна, но его объяснение — это гипотеза. Проверяйте измерением.

Дизайн-критика ловит врущие элементы

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

Надпись «Написать дежурной смене →» была набрана тегом b. Выглядит как действие, стрелка обещает переход, но элемент не кликается и не берётся в таб. Интерфейс вводил в заблуждение. Слоп-жюри смотрело на картинку, а здесь важна разметка.

Рядом обнаружились тач-таргеты заметно меньше рекомендованных сорока четырёх пикселей, фокус с клавиатуры только у кнопок, список симптомов, набранный дивами вместо списка, и почти два десятка декоративных SVG, которые скринридер считывает как контент.

Типографику отдаём скрипту

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

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

Напиши скрипт типографирования русских текстов для HTML и Markdown.

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

Обрабатывать только текстовые узлы: теги, атрибуты, <style>
и <script> не трогать. В Markdown не ломать маркеры списков.

Скрипт поправил шестьдесят пять фрагментов и поставил сто тридцать семь неразрывных пробелов. А сам выдал при этом три бага, и все три обнаружила проверка, а не человеческий глаз. Сначала список коротких слов содержал местоимения, и «это не слабость характера» превратилось в неразрывный кусок, который в узкой колонке негде перенести. Затем правило «дефис в тире» поглотило маркеры вложенных списков в markdown. А в самом коде вместо обычного пробела оказался неразрывный, невидимый глазу. Из-за него в контент-документе появилось почти триста лишних символов, и строку, которую я же исправлял, поиск не находил.

Примечательно, что сам контент-документ прогон не изменил вообще. Копирайт изначально писался с ёлочками и тире.

Микро-ритм: тридцать шесть чисел на одну страницу

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

всего уникальных значений отступов: 36
вне любой шкалы: 1, 2, 3, 6, 9, 10, 11, 13, 14, 18, 20, 22,
                 26, 28, 30, 34, 36, 38, 44, 52, 72, 84

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

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

И снова правка сломала предыдущую. Скрипт округлил оптический сдвиг кавычки с шести пикселей до четырёх, а наклон рукописной пометки до нуля. Эти значения я замерял по рендеру, они компенсируют боковые свесы глифов, а не выстраивают ритм. Пришлось вывести их из-под шкалы и пометить прямо в CSS.

Шкала управляет ритмом, но не оптикой. Иначе следующий проход всё «выправит» снова.

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

Состояния: единственный ответ интерфейса, который приходит сразу

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

Измеряю контраст рамки фокуса. Для элементов интерфейса требуется 3:1, и вот что вышло:

5,46:1  ok    брендовая рамка на светлом фоне
2,34:1  FAIL  брендовая рамка на тёмной полосе
8,06:1  ok    светлая рамка на тёмной полосе

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

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

Наведение при этом стоит заключить в @media (hover:hover). На тач-устройствах оно залипает после касания: кнопка выглядит нажатой, хотя палец уже убран.

Недоступное состояние я в лендинг не добавлял вовсе. На странице нет ни одной недоступной кнопки, и правило для неё было бы мёртвым кодом. Контракт компонента живёт в style-tile, где показаны все пять состояний подряд. Там же видно, что контраст текста недоступной кнопки — 2,66:1, и это сделано осознанно: WCAG исключает неактивные элементы из требования, а «серое и нечитаемое» и служит сигналом «трогать нечего».

Проверку я проводил не мышкой. Состояния включались принудительно через протокол отладки браузера — Chrome DevTools Protocol, тот же канал, по которому работают инспектор и автотесты, — и снимались по координатам самой кнопки:

Покой, наведение, нажатие, фокус с клавиатуры. Снято принудительным включением псевдоклассов на живой странице, а не нарисовано отдельными макетами.

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

Мобильный: сначала проверь инструмент

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

Я почти начал исправлять. Спасло то, что сначала замерил: chrome --headless --window-size=390 не даёт вьюпорт 390. У окна есть минимальная ширина около пятисот пикселей, страница верстается под эту ширину и обрезается до 390 уже на скриншоте. Настоящая эмуляция через протокол показала иное: ноль элементов за границей экрана.

Настоящая эмуляция вьюпорта 390×844. Шапка переносится, таймлайн получает вертикальную линию-связку вместо исчезающей горизонтальной.

Что значит спроектировать под 390 пикселей

Схлопывание к этому моменту уже работало. Но «влезает» и «сделано под палец» — разные вещи, и разницу видно только при замере. Я снял вычисленные стили на 390 и на 1200 и сравнил построчно:

кегль главной цитаты   390px: 46px   1200px: 46px   ← правило не применялось
зазор сплит-секций     390px: 56px   1200px: 56px   ← десктоп на 350px контента
паддинг флагмана       390px: 32px   1200px: 32px   ← не уменьшен
тач-таргет меню        390px: 39px                  ← мало для пальца

Первая строка — настоящий баг, и вызвал его мой же предыдущий фикс. Когда я выравнивал кавычку в цитате, я поднял специфичность селектора, чтобы правило перестало перебиваться. Мобильное правило осталось на старой специфичности, и на телефоне цитата рендерилась сорок шестым кеглем при ширине контента 350 пикселей.

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

Про тач-таргеты стоит договорить, чем кончилось, потому что кончилось не везде хорошо. Вертикальный паддинг я добавил, и замер на финальной странице показывает меню 47px и кнопки 44px — это норма. А вот ссылки в подвале так и остались 40px, на четыре пикселя меньше рекомендованного. Строчные ссылки внутри абзацев — 25px, и их я не трогал сознательно: это часть текста, а не отдельная цель для пальца. Подвал — долг, и он записан как долг, а не закрашен.

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

.price.hot{order:-1}

На десктопе пользователь сравнивает три плана, стоящие рядом. На телефоне он листает и первым видит тот план, который берут чаще всего. Проверял, кстати, не по разметке, а по реальным координатам: свойство order меняет только визуальный порядок, в разметке «Стационар» остаётся вторым.

Микроанимации: одна на всю страницу

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

Я оставил только одну анимацию на всю страницу. Пульс в детокс-метре — это график на карточке флагманской программы — прочерчивается слева направо, затихает и уходит в зелёную галочку. Это наглядно показывает то, что продаёт флагманская программа: «день 1 — трясёт, день 5 — тишина». Анимация не украшает график, а объясняет его.

Три фазы одной анимации. Кадры получены остановкой анимации на заданной фазе, а не нарисованы отдельно.

Сделано без скриптов, на скролл-таймлайне: браузер сам привязывает прогресс анимации к положению элемента в прокрутке, через animation-timeline. И в этом случае замер снова спас:

страница сверху, метр далеко внизу : прогресс 1  ← анимации нет

Прогресс был равен единице ещё до того, как метр появился в кадре. То есть линия всегда нарисована, а движение существовало только в коде. Причина оказалась в свойстве overflow:hidden на карточке-флагмане, которое я поставил тремя шагами раньше и совсем по другому поводу. Оно делает элемент скролл-контейнером, и анимация начинает измерять прокрутку внутри карточки, где её нет. Замена на overflow:clip обрезает содержимое так же, но контейнером не становится — и прогресс стал корректным:

страница сверху          : прогресс 0     смещение 100px
метр входит в кадр снизу : прогресс 0,47  смещение  35px
метр в центре экрана     : прогресс 0,99  смещение   0px

Ещё одна дыра нашлась в режиме «меньше движения». Стандартный приём — задать всем анимациям длительность в тысячную секунды — на скролл-таймлайне не работает вообще: там длительность игнорируется, а прогресс задаёт прокрутка. Анимация продолжала управлять линией и перебивала статическое состояние. В итоге пришлось снимать её целиком, оставив только конечный кадр.

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

Иконки: одинаковые числа, разная толщина

Растровых изображений на лендинге нет. Ни одной стоковой фотографии, ни одного эмодзи — только собственная векторная графика на мотиве пульса. Это заслуга арт-дирекшна, а не этого шага.

Зато обнаружилось шесть разных толщин обводки: 2.2, 2.4, 2.6, 2.8, 3 и 3.4. Знакомая болезнь, но здесь она проявляется иначе. stroke-width считается в единицах вьюбокса — внутренней системы координат SVG, которую браузер потом растягивает под реальный размер, — а не в пикселях экрана. Одно и то же число может давать разную толщину, и наоборот. Я посчитал оптическую толщину как stroke-width × ширина_на_экране / ширина_вьюбокса:

лого в шапке          вьюбокс 30   на экране  30px   2.4  →  2,40px
график в карте        вьюбокс 300  на экране 218px   2.6  →  1,89px
детокс-метр           вьюбокс 260  на экране 376px   2.4  →  3,47px
галочки в тарифах     вьюбокс 30   на экране  14px   3.4  →  1,59px

Разброс оказался более чем двукратным. Метр выглядел толстым, а галочки в тарифах тонкими, хотя в CSS все числа кажутся похожими. Лечится одной строкой: vector-effect:non-scaling-stroke выводит обводку из-под масштабирования, и она начинает соответствовать экранным пикселям. После этого вся графика свелась к двум ступеням: 2px для мелких иконок и 2.4px для линий.

Логотип заодно перестал дублироваться. Путь был скопирован в шапку и подвал с разными размерами — теперь это один <symbol> и два <use>, разойтись они больше не могут.

Две дыры, которые агент не закроет сам

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

Их не видно на макете, поэтому в задачу «сделай лендинг» они не попадают никогда. Но именно превью первым встречает читателя, которому ссылку переслали в чате. Я собрал карточку 1200×630 на тех же токенах и шрифтах и отрендерил её в картинку на 73 КБ:

Превью для мессенджеров и социальных сетей. Собрано из той же системы, а не нарисовано отдельно — поэтому и не разойдётся со страницей.

Фавиконка сделана инлайновым SVG в data-URI: тот же пульс с галочкой, без дополнительных запросов.

Кто не доберётся до кнопки

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

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

// Полупрозрачный фон нельзя брать как есть: rgba(255,255,255,.045)
// поверх тёмной полосы — это почти тёмный, а не белый.
// Собираем слои и смешиваем по альфе.
const bgOf = el => {
  const layers = []; let e = el;
  while (e) {
    const c = parse(getComputedStyle(e).backgroundColor);
    if (c && c[3] > 0.001) { layers.push(c); if (c[3] >= 0.999) break; }
    e = e.parentElement;
  }
  let base = [255, 255, 255];
  for (let k = layers.length - 1; k >= 0; k--) {
    const [r, g, b, a] = layers[k];
    base = [r*a + base[0]*(1-a), g*a + base[1]*(1-a), b*a + base[2]*(1-a)];
  }
  return base;
};

const lum = c => { /* ... относительная яркость по WCAG ... */ };
const ratio = (a, b) => {
  const l1 = lum(a), l2 = lum(b);
  return (Math.max(l1, l2) + .05) / (Math.min(l1, l2) + .05);
};

// порог зависит от кегля: крупный текст 3:1, остальной 4.5:1
const large = size >= 24 || (size >= 18.66 && weight >= 700);
if (ratio(fg, bgOf(el)) < (large ? 3 : 4.5)) fails.push(el);

Скрипт определял первый непрозрачный фон у родителей. А карточки отзывов окрашены в rgba(255,255,255,.045) — почти прозрачный белый поверх тёмной полосы. Инструмент считал его белым и получал контраст 1:1 на белом тексте. Починил: собираю все слои фона и смешиваю их по альфе от подложки вверх. После этого — ноль провалов на обоих вьюпортах.

Четвёртый раз за доводку инструмент оказался неправ раньше страницы. Мораль остаётся прежней.

По структуре нашлось и закрылось три вещи: не было ориентиров main и header, не было ссылки «пропустить навигацию» (первый элемент в порядке табуляции, видна только при фокусе), и три кнопки стояли без type — внутри формы это неявный submit.

Полсекунды на холодной сети

Замеры я проводил на мобильном вьюпорте с торможением процессора вчетверо и сетью 1,6 Мбит при выключенном кэше. То есть это первый визит с телефона, а не идеальные условия. Первый замер, кстати, выглядел подозрительно хорошо — один ресурс на 0,7 КБ и CLS ровно ноль. Это был эффект кэша: шрифты уже лежали в профиле браузера.

                 Google Fonts   свои статичные   вариативные
FCP / LCP            604 мс          520 мс         472 мс
CLS                  0,0377          0              0
запросов             1 + внешние     12 файлов      2 файла
вес шрифтов          —               168 КБ         53 КБ

Данные по сети, из панели ресурсов. Одно с другим напрямую не сравнивается: 164 КБ — это результат сабсеттинга на диске (было 531), а 168 и 53 КБ — вес по сети до и после перехода на вариативные шрифты. Приёмы разные, замеры тоже.

Три шага. Первый — убрать зависимость от внешнего домена: Google Fonts — это внешний домен, и 538 мс уходило на цепочку DNS, TLS и CSS до того, как начался хоть один шрифт. Кроме того, подмена шрифта давала сдвиг вёрстки.

Второй — урезать шрифты под страницу. Я собрал все символы, которые реально встречаются в разметке: их оказалось 112. Обрезал по ним каждый файл: 531 КБ превратились в 164 — минус 69 процентов.

Третий — вариативные начертания вместо шести статичных весов на семейство. Двенадцать файлов на 168 КБ стали двумя на 53 КБ, а font-weight: 400 700 в @font-face покрывает все нужные веса.

FCP 472 мс   LCP 472 мс   CLS 0
HTML 37,2 КБ + 2 запроса на 52,9 КБ | узлов DOM 259
порог «хорошо»: LCP ≤ 2500 мс, CLS ≤ 0,1 — проходит с запасом в пять раз

И последняя история о том, как я чуть не сдал сломанную страницу. Вырезая старый блок @font-face, я задал границы куска по тексту и снёс вместе с ним весь блок токенов: палитру, шкалу отступов, радиусы. Страница уменьшилась с 5555 пикселей до 2365, а аудит показал 26 провалов контраста.

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

Доводка завершена. Осталось собрать, что из этого забрать.

---

Что забрать

Три версии одного и того же лендинга. Первые две сделаны одной моделью, Claude Opus, и различаются только тем, что я дал ей на входе.

Ленивый промпт. Фиолетовый градиент, «не просто инструмент, это ваш путь», 10K+ команд и 99,9% аптайма у несуществующей клиники, кнопка «Начать бесплатно» с ракетой. Градиенты я тут заказал сам, а метрики модель придумала от себя — настоящих данных ей никто не дал.

Большой промпт с реальным контентом. Тексты живые, 10K+ команд и 99,9% аптайма исчезли. Но обратите внимание на строку под кнопками: «3 дня до первых улучшений» модель добавила сама — такого числа в контенте нет. Планка поднялась, а характер так и не появился: всё тот же актуальный дефолт, только аккуратнее.

По пайплайну. Всё та же клиника и тот же контент. Hero здесь тоже собран на Opus, а остальные секции — на Sonnet, по уже зафиксированной системе. То есть третья панель лучше второй не потому, что движок мощнее: на большей части страницы он как раз слабее.

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

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

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

Ревьюер надёжно показывает где, но не почему. Он дважды за проект верно указал на проблему и дал неверное объяснение: цитата действительно выглядела робко, но не из-за шрифта, а из-за порядка правил в CSS. Контраст действительно провалился, но предложенный оттенок его не исправлял. Находку берите, объяснение проверяйте.

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

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

Чего не видно на макете, того агент не добавит. Фавиконки не было, превью для соцсетей не было, состояний нажатия не было, режим «меньше движения» не поддерживался. Эти вещи не попадают в задачу «сделай лендинг», потому что их не видно на картинке.

Чек-лист

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

Пайплайн: до сборки страницы

• Контент до дизайна. Карта секций под сценарий читателя, а не шаблонный набор блоков. Живые тексты сразу, humanize-проход другой моделью, финальная вычитка вслух.

• Ресёрч под индустрию, а не «SaaS landing». Различайте продуктовый UI, по которому можно строить, и концепты, которые рассыпаются на реальном тексте. Шрифты проверяйте на кириллицу до того, как они вам понравятся.

• Один визуальный язык, зафиксированный в style-tile. Палитра с ролями, шкала радиусов, роли карточек, один сквозной мотив. Решение о том, как выглядит страница, принимается один раз.

• **Токены на всё, что повторяется: ** цвет, отступы, радиусы, толщина обводки. Оптические поправки выведите из-под шкалы и пометьте комментарием, иначе следующий проход их «выправит».

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

• Свод по жюри. Где модели согласны — исправляйте обязательно. Где мнения разошлись — решайте сами и записывайте причины: через две недели вы не вспомните.

• Регрессия тем же промптом. Новые находки после исправлений — это норма, а не провал: значит, цикл работает.

Доводка: после сборки

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

• Типографика инструментом, а не вручную. Ёлочки, тире, неразрывные пробелы после предлогов. Скрипт можно запускать после каждой правки, а вычитку глазами — нет.

• **Состояния: ** покой, наведение, нажатие, фокус с клавиатуры, недоступное. Наведение — только там, где есть курсор. Рамка фокуса на тёмных поверхностях должна быть светлой.

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

• **Движение: ** одна смысловая анимация вместо секций, выезжающих одна за другой. Режим «меньше движения» отключает анимацию, а не ускоряет её.

• Фавиконка, превью для соцсетей, описание. На макете их не видно, но именно превью первым привлекает внимание читателя, которому отправили ссылку.

• Приёмка через измерение. Контраст по формуле, а не визуально. LCP и CLS на холодном кэше и медленной сети, а не на личном ноутбуке с прогретым браузером.

И последнее

Ни один пункт в этом списке не про вкус — каждый проверяется измерением. Куда идти, по-прежнему решаете вы.

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

Afterdeploy — выдуманная клиника. А выгорание после релизов, к сожалению, реальность. Берегите себя и своих коллег.