Проблема «достаточно хорошего» AI-фронтенда
Передовые модели AI уже пишут корректный фронтенд-код. Попросите такую модель сделать лендинг — и вы получите валидный HTML, разумный reset, доступную разметку и адаптивную сетку. Код работает.
Но «работает» это не то же самое, что «хорошо». Предоставленный самому себе, AI выдаёт узнаваемый шаблонный вид: тёмный градиент от фиолетового к синему, градиентный текст заголовка, всё по центру, одинаковые равномерно расставленные карточки, одна плоская тень. Это компетентно и незапоминаемо — ровно тот результат, который размывает бренд, а не выстраивает его.
Поэтому мы поставили перед собой конкретный вопрос: можно ли надёжно вывести AI-агента из состояния «компетентно» в «по-настоящему красиво, выверено до пикселя и безупречно адаптивно» — и доказать, что разница реальна, а не выдаёт желаемое за действительное? Это исследование и есть ответ.
Шаг 1. Построить базу знаний
Мы начали там, где начал бы старший инженер: с консолидации лучшего фронтенд-мышления в единый источник истины. Мы проработали шесть углублённых курсов по фронтенду — 717 транскриптов лекций, около 5,3 миллиона символов — и свели их в единый рабочий свод лучших практик объёмом более 600 строк, охватывающий архитектуру, дизайн-системы, адаптивную вёрстку, доступность, семантику, производительность и современный CSS.
Затем мы привели его в соответствие с реальностью платформы 2024–2025: Web Platform Baseline для решений о поддержке, современный CSS (container queries, :has(), cascade layers, цвет OKLCH, clamp()), реальное положение дел с вендорными префиксами, современные браузерные API (IntersectionObserver, View Transitions, Popover API, нативный <dialog>) и Core Web Vitals.
Шаг 2. Превратить знания в переиспользуемые навыки агента
Свод правил, который читает человек, полезен. Возможность, которую AI-агент применяет автоматически, преображает работу. Поэтому мы упаковали свод в семь модульных навыков агента — каждый настроен срабатывать в нужном контексте и подгружать нужные рекомендации по запросу:
- Архитектура CSS — resets, дизайн-токены, стратегия rem, BEM, организация CSS в масштабе.
- Веб-дизайн-система — типографика, цвет, отступы, иерархия и дизайн «от индивидуальности».
- Адаптивная вёрстка — Flexbox, Grid, container queries, медиазапросы на основе EM.
- Семантический HTML и доступность — WCAG, поддержка клавиатуры и скринридеров, доступные формы.
- Анимация и движение — производительная, безопасная для reduced-motion анимация и современные эффекты.
- Современный CSS и совместимость — возможности 2024–2025, безопасно ограниченные через Baseline и feature queries.
- Производительность и браузерные API — Core Web Vitals, ленивая загрузка, подходящий DOM API под задачу.
Первый результат оказался неожиданным: ничья
Сначала мы оценили навыки очевидным способом — собрали одни и те же задачи с навыками и без них и сверили результат с объективными критериями. Итог оказался почти идентичным: примерно 91% с навыками против 95% без них.
Это выглядит как провал. На самом деле это важнейший вывод всего проекта. Объективные проверки измеряли корректность — используются ли единицы rem, семантический HTML, тег viewport — а передовая модель уже делает всё это сама. Мы измеряли не то.
«Корректность решена. Мастерство — нет. Разрыв между компетентным и выдающимся фронтендом это не знания, которых модели не хватает, — это вкус, применённый через итерации, и отказ выкатывать шаблонный дефолт».
Прорыв: навык, который работает как дизайнер
Дизайнер никогда не выкатывает первый рендер. Он собирает его, смотрит на реальные пиксели, находит слабые места и дорабатывает. Навыки-знания не могли этого охватить — поэтому мы создали восьмой навык, Visual Polish, который меняет то, как работает агент, за счёт трёх рычагов:
1. Цикл «отрендерь и итерируй»
Агент обязан перестать делать всё с одного захода. Он собирает страницу, рендерит её в реальном браузере, делает скриншоты на каждом брейкпоинте, критикует скриншот по рубрике качества, исправляет главные проблемы и повторяет. Смотреть на пиксели — самый мощный рычаг: в наших прогонах агент с навыками делал 40–54 шага сборки и проверки на задачу против 3–4 у агента без поддержки.
2. Дизайн-система высокого вкуса, поставляемая в навыке
Вместо того чтобы говорить агенту «используй хорошую типографику», мы поставляем выверенные, продуманные дефолты: цветовую систему OKLCH, редакторскую пару шрифтов, плавную шкалу, многослойные тени глубины и отполированные компоненты, где каждое состояние взаимодействия уже проработано. Агент стартует со вкуса, а не импровизирует шаблонный дефолт.
3. Ограждения и определение готовности (Definition of Done)
Навык называет конкретные признаки «обобщённого AI», которых нужно избегать, и задаёт строгий чек-лист, который агент обязан проверить перед объявлением работы завершённой: отсутствие горизонтального переполнения на любом брейкпоинте, контраст AA в светлой и тёмной темах, продуманные состояния фокуса и наведения и движение, уважающее настройки reduced-motion.
Цикл доказал свою ценность сразу же. При сборке собственной эталонной страницы навыка шаг рендеринга выявил два реальных дефекта, которые пропустил код-ревью: контент, невидимый без JavaScript, и вёрстку, переполнявшуюся на мобильных. Оба были исправлены ещё до выпуска — ровно те сбои, что доходят до продакшена, когда никто не смотрит на отрендеренный результат.
Доказательство: слепой A/B-тест
Заявления о «красоте» легко сделать и легко подделать, поэтому мы провели честную проверку. Мы дали два новых брифа — секцию с тарифами SaaS и лендинг финансового приложения — агенту с навыками и агенту без поддержки. Мы отрендерили все четыре результата, а затем передали скриншоты независимому AI-критику, который не знал, что есть что, с рандомизированными метками, чтобы он не смог сопоставить по паттернам.
Вердикт был однозначным. Дизайны с навыками победили в обеих задачах с высокой уверенностью, а судья самостоятельно опознал результаты без поддержки как «шаблонный дефолт AI».
| Критерий (слепая оценка, 1–10) | С навыками | AI без поддержки |
|---|---|---|
| Визуальная привлекательность | 8 | 5 |
| Типографика | 8 | 5 |
| Цвет и палитра | 8 | 4 |
| Вёрстка и композиция | 8 | 6 |
| Глубина и отделка | 8 | 6 |
| Самобытность | 9 | 3 |
| Итог | Агент с навыками победил в обеих задачах — разрыв «очевидный, а не незначительный» | |
«Один вариант арт-директирован и явно кастомно спроектирован — материал для доски вдохновения. Другой опирается сразу на два самых больших признака обобщённого AI: тёмный градиент и градиентный текст заголовка. Разрыв очевидный, а не незначительный».
Почему это важно
Большинство команд, внедряющих AI в разработку, останавливаются на «он выдаёт работающий код». Это исследование показывает следующий, более ценный шаг: закодировать мастерство и процесс в агенте так, чтобы его результат был надёжно превосходным, а не просто корректным — и затем доказать это реальным слепым тестом, а не ощущением.
Эти принципы хорошо обобщаются далеко за пределы CSS:
- Измеряйте то, что нужно. Если ваша оценка проверяет только корректность, сильная модель всегда будет выглядеть «достаточно хорошо», и вы полностью упустите разрыв в качестве.
- Процесс важнее знаний. Наибольший прирост дали не новые правила, а принуждение агента сверять собственную работу с реальностью и итерировать.
- Поставляйте вкус, а не принципы. Выверенные, продуманные дефолты продвигают результат дальше, чем когда-либо продвинут абстрактные советы.
- Доказывайте вслепую. Независимое слепое сравнение превращает «мне так больше нравится» в доказательство.
Как SplatDev это применяет
SplatDev строит системы разработки с использованием AI для агентств и софтверных компаний. Мы не просто направляем AI на вашу кодовую базу — мы проектируем навыки, ограждения и циклы верификации, которые делают его результат надёжным и по-настоящему качественным, и мы валидируем итог, а не полагаемся на предположения.
- Кастомные навыки агента, настроенные под ваш стек, дизайн-систему и стандарты.
- Циклы верификации — рендеринг, тестирование и ревью встроены в то, как работает AI, а не приделаны постфактум.
- Поставка на основе доказательств — мы измеряем качество, а не только скорость.
Сделайте следующий шаг
Если ваша команда использует AI, чтобы писать код, но пока не для того, чтобы выпускать превосходный код, есть измеримый разрыв, который можно закрыть — и есть метод, как это сделать.
Хотите AI, который выдаёт работу, достойную портфолио, а не просто ту, что компилируется?
Связаться со SplatDev — стройте лучше с AI
Или напишите нам на [email protected]