Каждому дизайнеру знакома картина: релиз, открываешь макеты в Figma, берёшь скриншот из прода и начинаешь проверять цвета, отступы, размеры шрифтов. Это съедает много времени. И вообще — такую рутинную работу должен делать компьютер, а не человек. Я подумал: а что если создать плагин в Figma, который будет делать это автоматически. Он сам проведёт дизайн-ревью макета со скриншотом и сам найдёт ошибки.

Первая попытка: воркфлоу в n8n (спойлер: провал)

Проблема: я дизайнер, а не разработчик. Я не умею кодить.
Решение: ChatGPT, Claude, Cursor + упрямство и 4 недели итераций.

Я начал с того, в чём немного разбирался — с автоматизаций в n8n. Подумал: ведь можно создать воркфлоу, который будет получать данные из Figma, OpenAI-Vision будет творить магию, и возвращать результат обратно в плагин. За UI плагин отвечал Cursor с подключённым MCP-сервером Figma.

Первый подход: линейный конвейер

1. Figma отдавала в n8n данные с макета и скриншота.

2. Воркфлоу анализировал и нормализовал данные для llm.

3. GPT-4o-mini сравнивал и находил различия.

4. Результат возвращался в плагин.

Зачем тебе столько цепочек нод, спросите вы? А затем, что данные с макета приходят в непригодном формате для OpenAi. Пришлось просеивать эти данные
и переписывать на понятный для Vision-модели язык.

Второй подход: умный воркфлоу

В порыве отчаяния я пошёл к разным LLM-моделям за советом. К Claude, ChatGPT, Gemini. Прикрепил JSON воркфлоу, макеты, ��писал проблему и стал ждать ответа. Лучше всех отработала Claude!

Она предложила разбить анализ на параллельные ветви, каждая из которых отвечает за свой тип проверки (Звучит очень логично, и почему я сам до этого не догадался!)

• Color Compare — сравнивал цвета.

• Measure Padding — проверял внутренние отступы.

• Measure Spacing — считал расстояния между элементами.

• OCR анализ — искал расхождения в тексте.

Все ветви работали одновременно, потом все результаты собирались и отправлялись в OpenAI-Vision. Я переписал воркфлоу. Запустил — и вновь фиаско! Четыре дня я пытался заставить воркфлоу работать как надо. Менял ноды. Переписывал промпты. Правил код. AI по-прежнему либо упрямо утверждал «всё совпадает», либо находил некорректные ошибки.

Ну это вообще что-то непонятное и заумное. Мне скуууучно… Ладно-ладно, дальше будет повеселее (но это не точно)

Я прошёл через все степени отрицания: от «наверное, я что-то не так подключил» до «да это просто невозможно».

На пятый день я снова открыл переписку с Claude и написал: «Я четыре дня бьюсь об стену. Я уверен, что делаю что-то не то, может, есть другой вариант?» Claude спокойно разобрала мои файлы и начала отвечать:

— У тебя проблемы с layout. Нода ждёт layers, а ты отправляешь root. — Промпт у OpenAI слишком мягкий — он не ищет различия, а философствует. — JSON ты обрезаешь до 35 KB — половина нужных данных просто не доходит.

После длительного и продуктивного общения, я понял: «Проблема не в AI, а в архитектуре, n8n просто не вытягивает такую задачу». Claude предложила: «Ты уже работаешь в Cursor над UI-частью плагина. Почему бы не использовать Cursor для бэкенда?» Это был щелчок по носу.

Cursor, декомпозиция, итерации и упрямство

Я закинул в Cursor всю информацию:

• Что я пытался сделать.

• Где воркфлоу спотыкался.

• Какие данные получаю из Figma.

• Как выглядит идеальный флоу распознавания.

И мы с Cursor начали разбивать задачу на части (как говорится, слона надо есть по частям).

Часть 1: Научить AI распознавать цвет

Чтобы начать с самого начала, я максимально упростил плагин: одна кнопка для загрузки изображения и всё. Бэкенд получал макет и скриншот и учился, верно, сравнивать цвета.

Проблемы-проблемы:

• AI путал похожие цвета.

• Антиалиасинг создавал ложные срабатывания.

• Bbox анализа элементов смещались на 3–4 пикселя из-за чего... Вообще, это такая нудятина, что я даже не буду это объяснять.

Я последовательно исправлял каждую проблему. Cursor помогал с кодом, я работал с логикой работы анализа плагина. И через некоторое время мы смогли добиться приемлемого уровня распознавания цвета.

Часть 2: Добавить распознавание текста

Когда цвета начали работать приемлемо, я добавил OCR через OpenAI Vision. И снова новые проблемы, куда же без них:

• AI путал символы: «Кредитка 100%» → «Кредитка 1%.»

• Распознавание зависело от качества скриншота.

• Некоторые шрифты читались плохо.

• Ещё и размер шрифта играл важную роль. На шрифт 12 размера OpenAi вообще не обращала внимания, считая, что это шум. Обидно, ужас (

Снова итерации. Снова правки. Cursor писал код, я тестировал и описывал, что не работает. И так ночь за ночью.

Часть 3: Вернуть полноценный UI

Когда распознавание цвета и текста стало работать на приемлемом уровне, я вернул полноценный UI плагина и протестировал, как будут отображаться найденные ошибки. Первый запуск выглядел как в старых фильмах про инженеров: я нажимаю Enter и жду ? как будто сейчас всё сломается.

Но вместо этого в UI плагина появляются найденные ошибки:

✅ Color difference found: #2FC26E → #FF3636
✅ Text mismatch: «Альфа-Смарт» → «Альфа-Март»

Это эмоции Claude, они точно у него появились после работы со мной :) Система, наконец, видела то же, что и я. Без догадок. Без «всё хорошо». Без философии. Просто конкретные различия, в пикселях и код HEX’ах.

Бо́льшую часть времени я пил кофе, ага, куда там! Я занимался тестированием, исправлением косяков и описывал Cursor, как должен на самом деле работать плагин:

• Ловил смещения рамок bbox offset 3–4px.

• Боролся с антиалиасингом.

• Фильтровал ложные срабатывания.

• Хотел спать.

Что-то получилось в итоге, но вот что?

Настоящий, финальный тест прошёл, как обычно, ��очью. Я загрузил макет и скриншот в плагин, нажал «Проверить» — и буквально через пару секунд на экране начали появляться строчки с найденными ошибками.

Никаких таймаутов. Никаких «ничего не найдено». Спокойные, уверенные результаты

1. Color Fill — ожидалось #E5F9DC, получилось #CBCCE6.

2. Color Fill — ожидалось #F3F4F5, получилось #DDDEDF.

3. Text mismatch — «Кредитка 100%» → «Кредитка 1%»

AI, наконец, видел макет так же, как дизайнер — с точностью до пикселя.

Финальные характеристики MVP

0,01$ — да на это даже кофе не купить (

В этот момент я понял, что сделал не плагин, а инструмент, который может проверять дизайн так же, как любой дизайнер интерфейсов. Бэкенд на FastAPI. Логика чистая. Всё под контролем. Наверное.

Спустя 4 недели плагин перестал быть экспериментом — он превратился в инструмент. А я наконец-то смог пойти поспать.

Что я понял за этот месяц

1. AI не заменит ваше мышление — он усиливает исполнение.

Cursor недодумает задачу за тебя. Если ты дашь ему размытую задачу («сделай плагин для дизайн-ревью»), он сделает не так. И ты скажешь: AI инструменты — лажа! И пойдёшь смотреть сериальчики.

Но если разобьёшь задачу на этапы («сравни цвета», «распознай текст», «проверь bbox»), он справится отлично, конечно же, с твоей помощью.

Заметка: Умение правильно мыслить и декомпозиция важнее, чем мощность AI.

2. Архитектура решает.

n8n — отличный инструмент для простых автоматизаций. Но для сложной логики он не подходит. Claude подсказала перейти на бэкенд — и это был правильный совет (вот правда! если бы не Claude, я бы уже сдался).

Заметка: Выбор инструмента зависит от задачи, а не оттого, что ты знаешь и умеешь.

Я вообще не понимаю зачем нужны эти пункты, но статья должна быть не только весёлой, но и полезной, так что сделаем глубукий вдох и читаем дальше. Осталось чуть-чуть.

3.80% времени уходит на «мелочи»

Даже если AI пишет код быстро, отладка и тестирование занимают львиную долю времени: гораздо больше, чем может показаться. Смещения bbox, антиалиасинг, ложные срабатывания — всё это надо ловить руками.

Заметка: Ты не разработчик — это усложняет задачу, но не делает ее невозможной. Главное — упорство и понимание, зачем ты это делаешь.

4. Не стоит полагаться на одну LLM-модель.

Может, это моя идея фикс, но я намеренно сравнивал ответы разных LLM-моделей. Ответы Claude меня больше всего устраивали.

Заметка: Нужно понимать, какую LLM-ку лучше использовать для своей задачи. Всегда перепроверяй ответы и найди лучший для своей задачи.

А дальше меня ждёт анализ GAP и Padding

Как мне сказал Cursor – это самая сложная часть задачи (кто бы сомневался!), и я собираюсь её сделать! Работа над этим уже идёт. Но об этом я расскажу в следующий раз.

Зачем я вообще написал эту статью

Во-первых, я люблю вызовы! А во-вторых, я хотел доказать себе одно:

Дизайнер интерфейсов без опыта разработки может реализовать любую идею, как я свою. Cursor не реализует её за вас. Он поможет вам сделать это намного быстрее. Конечно, я не стал разработчиком за 4 недели. Но я понял, что могу решить любую задачу.

Главное — разбивать задачи, работать по этапам и не сдаваться. И не спать :) AI — это не суперсила. Суперсила — это твоя готовность не сдаваться, даже когда хочется всё бросить.

Если вы тоже создаёте что-то с AI и хотите обменяться опытом или вам интересно, как будет работать анализ padding и gap — пишите в комменты или в личку, расскажу подробно.