Почему Claude снова рисует один и тот же лендинг
Фраза «сделай красивый премиальный сайт» почти не содержит управляемого решения. Модель знает тысячи страниц и достраивает недостающее самым вероятным способом: крупный заголовок, короткий серый текст, две кнопки, градиентный шар и сетка одинаковых карточек. Всё аккуратно, но страницу можно перенести из оптовой торговли в консалтинг или SaaS, не меняя композицию. Это и есть нейрослоп: дизайн выглядит законченным, но не принадлежит конкретному бизнесу.
Проблема не сводится к выбору модели. Даже сильному Claude Opus нужен маршрут, который одновременно держит смыслы бизнеса, предметную арт-дирекцию, мобильную композицию, техническую сохранность и выпускную проверку. Поэтому мы собрали собственный скилл не как ещё один список красивых приёмов, а как маршрут производства страницы.
Сначала смысл, затем форма
До сетки агент строит карту смысл → доказательство → визуализация → действие. Если поставщик обещает не коробки товара, а запуск категории, это нельзя доказывать абстрактным градиентом. Нужны следы реальной работы: ассортиментная матрица, логика выкладки, путь запуска, розничная экспертиза, примеры решений и понятный следующий шаг.
Такой порядок защищает сразу от двух потерь. Первая — красивый, но пустой макет. Вторая — сильный текст, который разложили в двадцать одинаковых карточек и лишили характера. У каждой главы появляется отдельный вопрос посетителя, доказательство и свой визуальный носитель. Блок удаляется, если он не двигает решение человека и только повторяет предыдущий другими словами.
Скилл запрещает выдумывать цифры, клиентов, отзывы и гарантии. Если доказательства пока нет, агент оставляет честное место под конкретный материал и фиксирует, что нужно получить у владельца. Это важнее эффектной фразы: сильная упаковка усиливает правду, а не маскирует пробелы.
Предметная арт-дирекция вместо «тёмного премиума»
Визуальная идея считается сильной, если её нельзя без потери смысла перенести в соседнюю нишу. «Современный минимализм», «дорогой градиент», «как Apple» и «тёмный luxury» этому условию не соответствуют. Они описывают настроение, но не объясняют, почему страница выглядит именно так.
Скилл заставляет выбрать физический источник композиции: рабочую поверхность архитектора категории, витрину, маршрут, каталог, материал товара, процесс сборки или другой правдивый предметный мир. Из него выводятся пять решений: материал, типографический голос, композиционный жест, роль изображений и одно осмысленное движение.
Изображения здесь не запираются автоматически в закруглённые плашки. Полноформатная сцена, встроенный коллаж, предметный 3D-мокап с фоном или без него, фотография и схема допустимы, если объясняют тезис. Составной арт проектируется слоями: главный объект, среда, доказательная деталь, направление взгляда и свободное место под текст. Точный интерфейсный текст и логотипы добавляются управляемо в вёрстке, а не отдаются генератору картинок.
Контрольный фрагмент экономит большую переделку
Главное производственное правило — не собирать всю длинную страницу до проверки направления. Сначала агент реализует hero и две следующие главы. Отдельно проектирует широкий экран и мобильный первый кадр. Затем открывает результат в браузере и смотрит на скриншот, а не только на CSS.
На первом экране должны читаться аудитория, результат, причина необычности предложения и следующий шаг. Заголовок не обязан занимать половину экрана. На телефоне до прокрутки видны результат, кнопка и значимая часть предметного арта. Длинные пояснения уходят ниже. Липкая шапка не закрывает содержание, декоративные подписи не ложатся поверх заголовка или товара, основной текст сохраняет контраст не ниже 4.5:1.
Если контрольный фрагмент не выдержал 1440 × 1100 и 390 × 844, полная страница не строится. Благодаря этому одна ошибка не размножается на десять секций, а визуальное направление можно исправить за одну итерацию.
Что именно отсекает anti-slop
Внутри есть список решений, которые нужно отвергнуть или предметно обосновать: универсальный hero с бейджем и двумя кнопками, одинаковые карточки для разных смыслов, декоративные номера 01 / 02 / 03, служебный надзаголовок над каждой секцией, гигантская русская типографика, бессодержательные сетки, стекло и светящиеся шары.
Отдельно проверяются повторяемые «премиальные» привычки: бежевый editorial, один курсивный фрагмент в каждом заголовке, тёмный фон с едва заметным серым текстом. Эти приёмы не запрещены навсегда, но каждый должен происходить из идеи страницы. Если объяснение сводится к «так выглядит дороже», приём не проходит.
Соседние главы не должны быть одинаковыми по высоте, сетке и способу показа доказательств. При этом разнообразие не превращается в хаос: страницу объединяют типографика, материалы, цветовые роли и один визуальный тезис.
Как мы проверили скилл
Для чистого практического теста взяли отдельный вымышленный бизнес — акустическое ателье для ресторанов и общественных пространств. В брифе были подтверждены только процесс работы и целевое действие. Цифры, клиенты и измерения запрещалось придумывать. Единственным изображением стала сырая архитектурная фотография без меню, кнопок, заголовков и других частей готового сайта.
Claude Opus 5 получил основной SKILL.md и четыре его справочника. Вход составил 5 327 токенов. Скилл вывел композицию из ритма войлочных ламелей: первый экран работает как архитектурный разрез, следующая глава связывает источник шума, маршрут гостя и материал, а производственный путь собран в отдельную последовательность вместо очередного ряда карточек.
Готовый HTML открыли в Chromium на 1440 × 1100 и 390 × 844. В обоих вариантах ширина страницы совпала с окном, ошибок не появилось, изображение осталось частью композиции, а мобильный экран получил собственный ритм. Это не доказывает, что любой следующий дизайн автоматически станет идеальным. Зато показывает реальное действие инструкции на чистом брифе и чистом исходнике.
В первый вариант лабораторного теста когда-то ошибочно попал арт, внутри которого уже были нарисованы меню, hero и следующий блок. Такой источник заставлял модель собирать страницу внутри страницы и делал визуальное сравнение бессмысленным. Теперь конвейер требует явно передать бриф и сырой контентный актив, а сам скилл запрещает путать фотографию для вёрстки со скриншотом-референсом.
Что сохраняется при редизайне работающего сайта
В скилле отдельно зафиксирован регрессионный контур. Если пользователь не попросил иначе, агент сохраняет публичный URL, title, description, canonical, H1, robots, sitemap, JSON-LD, формы, мессенджеры, аналитику и состояния ошибок. После сборки всё это перепроверяется уже на опубликованной странице.
Это отличает редизайн от красивого экспериментального HTML. Коммерческая страница готова не тогда, когда разработчику нравится скриншот, а когда человек на компьютере и телефоне понимает предложение, видит доказательства, проходит основной сценарий и получает подтверждённый результат.
Как применять
Скачайте самостоятельный SKILL.md и положите его в каталог скиллов Claude Code, Codex или совместимого агента. Передайте фактуру бизнеса, цель страницы, аудиторию, доказанные обещания, активы, существующий URL и технические ограничения. Попросите сначала реализовать контрольный фрагмент, а не всю страницу.
После согласования направления разрешите полную сборку и потребуйте отдельную живую приёмку. Для финального заслона можно использовать наш скилл «Приёмка лендинга»: он независимо проверит коммерческий путь, форму, SEO, консоль и мобильный экран.