Прайс на дизайн от AI: сколько стоят токены в макете Figma от Claude Code
Эксперимент показал, что перенос лендинга в Figma через AI-агента обходится в $34,21, тратя 40,6 млн токенов. Ключевой фактор экономии — переход от анализа пикселей на скриншоте к прямым координатам из HTML/CSS.
# Прайс на дизайн от AI: сколько стоят токены в макете Figma от Claude Code
В конце марта 2026 года Figma открыла доступ к своему канвасу для AI-агентов через MCP-сервер. Это позволило инструментам вроде Claude Code генерировать и редактировать макеты напрямую. Автор исследования проверил, насколько эффективно агенты переносят реальные лендинги в Figma и какова реальная стоимость этого процесса в токенах.
Экономика переноса: скриншот против кода
Для теста были выбраны три проекта: Hero-секция Hermes Agent, главная страница PostHog и первый экран Tailwind CSS. Исследователь использовал модель Opus 5 с настройкой сложности (effort) на высоком уровне. Важно отметить, что для Hermes и PostHog агенту передавали только изображения, тогда как для Tailwind CSS вводили прямую ссылку.
Результаты экспериментов показали значительную разницу в затратах. В общей сложности три сессии обошлись в $34,21. Статистика зафиксировала следующие показатели:
* Время работы: 98,5 минуты. * Общее потребление токенов: 40,6 миллиона. * Структура расходов: Значительная часть бюджета ушла не на само создание слоев, а на предварительный анализ источника, работу вокруг MCP-инструментов и проверку визуального результата.
На этапе подготовки к работе (анализ до запуска на канвасе) агент потратил $9,10. Вызовы MCP-инструментов добавили еще $14,96, а «работа вокруг» — команд bash, чтение файлов и сравнение изображений — составила $10,15. Основная фаза сборки макета через MCP потребовала $25,11.
Пиксели против кода
Разница в стоимости напрямую зависит от типа входных данных. Если агент получает скриншот, он вынужден использовать методы компьютерного зрения для восстановления геометрии.
В сессиях с Hermes и PostHog, где в качестве базы использовались изображения, агент действовал по следующему алгоритму: 1. Разбиение: Проверка формата и разрешение файла. 2. Выделение: Разрезание изображения на зоны (навигация, заголовок, контент). 3. Анализ: Измерение цветов пикселей в точках фона и объектов для определения HEX-кодов. 4. Маскирование: Использование скриптов Python с библиотекой Pillow для построения масок и вычисления границ элементов (bounding box).
Этот подход оказался ресурсоемким. Например, для анализа одного скриншота Hermes агент тратил в среднем $8,20, а для PostHog — $7,86. Множество итераций «обрезать — посмотреть — измерить» требовало огромного количества выходных токенов для описания команд и входных — для анализа промежуточных результатов.
В случае с Tailwind CSS ситуация изменилась. Агент получил ссылку на сайт, доступ к HTML и CSS. Он запустил headless-браузер (Chrome DevTools Protocol), прошелся по DOM-дереву и извлек стили программно: * Координаты блоков через getBoundingClientRect(). * Шрифты и размеры через getComputedStyle(). * Тени, скругления и цвета.
За один обход такой страницы агент собрал данные примерно по 430 элементам. Хотя для верификации все же был сделан один скриншот, основная геометрия была получена без «угадывания» координат по пикселям. Стоимость анализа этой задачи составила всего $3,56. Вывод очевиден: прямой доступ к коду источника выгоднее восстановления дизайна из картинки.
Топливо для Figma: как создаются объекты
После анализа данные переводятся в формат, понятный Figma. Это не магия, а генерация JavaScript-кода, работающего через Plugin API.
Для простых текстовых элементов агент создает слои с явными параметрами: * Нагрузка шрифтов (loadFontAsync). * Настройка начертания, размера шрифта, межбуквенного интервала. * Координаты и размеры фреймов.
Сложность возрастает при работе со сложными компонентами. Например, для создания кнопки агент генерирует Auto Layout-фрейм, а текст помещает в него как дочерний слой, задавая внутренние отступы и скругления. В случае с панелью кода, требующей цветового выделения синтаксиса, агенту приходится создавать отдельный текстовый слой для каждой строки и вручную раскрашивать диапазоны символов.
Во время работы над макетом Tailwind агент сгенерировал 221,7 тысячи выходных токенов. Учитывая высокую цену на выход (25 долларов за миллион токенов для тарифа Opus 5) против входных (5 долларов за миллион), длинные аргументы с координатами и стилями существенно удорожают процесс.
Цикл проверки: скриншоты как верификация
Агент не просто создает макет, но и постоянно сверяет его с оригиналом. Функция получения скриншота в MCP возвращает временную ссылку на файл, который агент должен скачать и открыть локально.
В процессе сборки Tailwind агент заметил расхождение в переносе строки под заголовком. Алгоритм действий выглядел так: 1. Создать элемент. 2. Сделать скриншот текущего состояния. 3. Загрузить изображение в Canvas и провести сравнение пикселей с эталоном. 4. Если различие превышает порог (например, суммарная разница каналов RGB > 60), внести правки и повторить цикл.
Такие проверки, хотя и необходимы для качества, увеличивают нагрузку на систему и время работы, добавляя расходы на команд для скачивания и обработки изображений.
Итоги эксперимента
Эксперимент выявил, что стоимость создания макета AI-агентам складывается из множества этапов: от предварительной разведки до верификации каждого слоя. Основной драйвер стоимости — это метод получения исходных данных. Использование ссылки на сайт с доступом к исходному коду (HTML/CSS) позволяет избежать дорогостоящего анализа изображения по пикселям, сокращая время и расходы на токены.
Макет — это лишь промежуточный этап. Создание таких проектов демонстрирует зрелость AI-инструментов в области автоматизации дизайна, однако цена за автоматизацию остается ощутимой.