Я хотел автоматически проверить, соответствует ли дизайн 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()
}
Суть подхода в том, чтобы не просить ИИ «сделать правильно», а создать механизм, который вынуждает его сделать всё верно — иначе система не примет результат.
Подписаться в Макс
