AI-навыки агентов для фронтенда: выигрыши, пробелы и честное сравнение

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

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

Два вида навыков

Заманчиво воспринимать «навыки агентов» как единый рычаг. Но это не так.

Навыки знаний (семь из них)

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

Один процессный навык

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

Именно это различие в итоге объясняет каждый результат ниже.

Как мы это измеряли

Две оценки, каждая из которых сравнивала одну и ту же задачу, выполненную с навыками и без поддержки (без навыков):

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

Цифры

Прочтите эти два блока вместе — и проступает вся история: по корректности навыки и их отсутствие идут вничью; по мастерству навыки убедительно побеждают, но обходятся дороже.

Где навыки побеждают (выигрыши)

1. Мастерство и эстетика — решающая победа

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

«Один вариант художественно проработан и явно создан на заказ — материал для доски вдохновения. Другой опирается сразу на два самых очевидных признака шаблонного AI. Разрыв очевиден, а не незначителен».

2. Он ловит реальные дефекты

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

3. Он обеспечивает соблюдение ваших соглашений каждый раз

Навыки надёжно внедряют специфичные для проекта решения, которые модель не выберет по умолчанию: последовательную стратегию размеров, медиа-запросы на основе em, современный CSS, ограниченный реальными данными о поддержке браузеров, безопасность для reduced-motion и многослойные (а не плоские) тени. Такая согласованность на сотнях прогонов сама по себе является результатом работы.

Где не побеждают (пробелы)

Честная часть. Эти пробелы реальны, и их стоит учитывать при планировании.

Навыки знаний едва превосходят сильную модель

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

Они обходятся дороже

Прогоны с навыками использовали примерно на 24% больше токенов и на 33% больше времени на задачах на знания; полный цикл рендеринга и итераций ещё тяжелее (десятки шагов сборки и проверки против нескольких). Вы покупаете качество вычислениями — оправданно, когда качество важно, и расточительно, когда задача — «корректный код, быстро».

Лучшему рычагу нужен браузер

Суперсила процессного навыка — рендеринг в реальном браузере. В среде без него он деградирует до навыка знаний, и главное преимущество исчезает. Планируйте инструментарий соответственно.

Качество трудно измерить дёшево

Наши объективные проверки корректности плохо справлялись с оценкой качества — они по большей части пропускали обе версии и давали ложноотрицательные результаты на дизайнерской задаче. Для подлинной оценки качества потребовался слепой судья, работающий по-человечески. И наша оценка качества была небольшой: две задачи, один рецензент. Убедительно, но пока не статистически надёжно.

Вывод, который связывает всё воедино

Одно предложение схватывает суть:

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

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

Что это значит для команд

• Не ждите прироста корректности от сильной модели. Если ваша оценка проверяет только корректность, навыки будут казаться бессмысленными — потому что вы измеряете то, что модель и так уже делает.
• Вкладывайтесь в процесс, а не только в промпты. Устойчивые выигрыши приходят от циклов проверки, которые агент обязан выполнять, а не от более длинных файлов с инструкциями.
• Поставляйте вкус, а не принципы. Проверенные, «с характером» настройки по умолчанию каждый раз побеждают абстрактные советы.
• Измеряйте качество так, как его воспринимают пользователи — отрендерьте, посмотрите, сравните вслепую. Булевы проверки не видят красоты.
• Закладывайте бюджет. Качественный результат стоит больше токенов и времени; тратьте их там, где качество — это суть.

Рекомендации: как закрыть пробелы

Выводы указывают на конкретный список задач — как для нашего собственного набора навыков, так и для любой команды, создающей свой:

• Масштабируйте слепую оценку. Две задачи и один рецензент доказывают направление, а не масштаб. Расширьте до десяти с лишним задач по разным типам страниц, добавьте второго AI-судью и включите как минимум одного рецензента-человека. Отслеживайте долю побед и уверенность, а не единичный вердикт.
• Настраивайте срабатывание, а не только содержание. Навык, который не срабатывает, бесполезен, а тот, что срабатывает не на той задаче, — хуже. Проведите автоматизированную оптимизацию описаний, чтобы каждый навык активировался, когда должен, и молчал, когда не должен.
• Сделайте так, чтобы процессный навык деградировал плавно. Когда браузер недоступен, он должен обнаружить это и откатиться к своим знаниям и чек-листу вместо того, чтобы полагать, будто может рендерить, — так он никогда молча не потеряет свой главный рычаг.
• Консолидируйте пересекающиеся знания. Восемь навыков несут часть дублирующегося материала — современный CSS, адаптивность и производительность затрагивают одну и ту же почву. Более чёткие границы означают меньше поддержки по мере развития платформы.
• Маршрутизируйте по намерению. Используйте тяжёлый цикл рендеринга и итераций, когда цель — качество; пропускайте его для «выдать корректный код, быстро». Самая большая трата — платить вычислениями уровня мастерства за одноразовый внутренний инструмент.
• Переизмерьте на более слабой модели. Навыки знаний должны помогать сильнее там, где базовая модель менее способна; подтверждение этого количественно оценивает их реальную ценность для развёртываний, чувствительных к затратам.

Как SplatDev это применяет

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

Хотите AI, который поставляет работу, достойную портфолио, — и честный отчёт о его ограничениях?

Свяжитесь со SplatDev — стройте лучше с AI

Или напишите нам на [email protected]