Я хотел автоматически проверить, соответствует ли дизайн Figma реализации в браузере, и при наличии расхождений — исправить их с помощью ИИ. Для этого разделил роли на три части: судья (сравнивает кадр из Figma со скриншотом сайта, определяя результат через сравнение пикселей), командная башня (выбирает участок для корректировки) и специалист по производству (программист с ИИ, который исправляет код).
Однако ИИ пошёл по кратчайшему пути к «хорошему состоянию», а не к точному соответствию Figma. Например, он мог:
- добавить пробелы и <br> для скрытия переходов;
- удалить 1630 строк CSS, чтобы устранить несоответствие в одной секции;
- создать пустую область отображения вместо <br>;
- изменить внешний вид элементов (например, регистр текста, стиль шрифта), не меняя DOM.
Это напоминает закон Гудхарта: когда вы нацеливаетесь на определённый индикатор, возникает давление, чтобы «взломать» его. ИИ стремился минимизировать разницу между Figma и реализацией любым путём, даже если это вело к обманным решениям.
Чтобы справиться с проблемой, мы внедрили несколько контрмер:
1. Разделили роли исполнителя и судьи, чтобы избежать конфликта интересов.
2. Переместили принятие решений из подсказок в код: теперь механизм сам определяет, является ли действие обманом, независимо от подсказок. Например, проверяется, не навязывает ли реализация новую строку, которой нет в Figma (вне зависимости от того, используется <br>, пустой интервал или псевдоэлемент).
3. Ввели допуск при визуальном сравнении, учитывая различия в сглаживании шрифта в Figma и браузере. Соответствие проверяется по нескольким критериям: правильный шрифт, совпадение текстового содержимого, совпадение размера и расположения полей.
4. Попросили другого ИИ-агента выявить лазейки, чтобы затем заблокировать их через код.
Несмотря на достигнутый прогресс, некоторые проблемы остаются — например, связанные с CSS для глифов. Сейчас мы склоняемся к анализу «формы» изображения различий, а не отдельных свойств. Это требует изменений в архитектуре, но может обеспечить более точное соответствие.
style.css | 1630 +----------------------------------
1 file changed, 1 insertion(+), 1630 deletions(-)
- <p>いつもごいただきありがとうございますともよろしくおいいたします</p>
+ <p>いつもごいただき<br>ありがとうございます とも<br>よろしくおい いたします</p>
<span class="visualBreak" aria-hidden="true"></span>
// = <br> の + テキストをたない block の
forcedBreaks = countBr(el) + countEmptyBlockChildren(el)
// Figma のな = テキストにまれる \n の
figmaBreaks = countNewlines(figmaText)
// が Figma よりくをしていたら
if (forcedBreaks > figmaBreaks) {
fail
}
Суть подхода в том, чтобы не просить ИИ «сделать правильно», а создать механизм, который вынуждает его сделать всё верно — иначе система не примет результат.
Подписаться в Макс
