Как Claude Code воссоздаёт макеты в Figma через MCP: подробный разбор расходов и токенов

С появлением интеграций AI-агентов с графическими редакторами проектирование веб-интерфейсов вышло на новый уровень. Когда Figma предоставила прямой доступ к холсту для искусственного интеллекта через Model Context Protocol (MCP), нейросети вроде Claude Code и Codex получили возможность не просто генерировать абстрактные картинки, а создавать полноценные, редактируемые макеты с нативной структурой слоёв. Я решил лично протестировать этот инструмент на практике, оценить точность переноса существующих лендингов в дизайн и детально посчитать, во сколько обходится подобная автоматизация в эквиваленте токенов LLM.

Взаимодействие нейросети с Figma MCP происходит на программном уровне: Claude Code пишет JavaScript-код, который обращается к Figma Plugin API. Через эти вызовы агент формирует фреймы, настраивает параметры Auto Layout, высчитывает точные координаты, задаёт шрифтовые пары, размеры, цвета и декоративные эффекты. Чтобы выяснить эффективность этого процесса, я проверил работу агента на трёх различных сайтах, сравнив входные данные в виде готовых скриншотов и прямых ссылок на страницы.

Как проходил эксперимент по переносу верстки в Figma

Для проведения теста я взял три популярных интерфейса с разной степенью сложности элементов:

• Hero-секцию промо-страницы Hermes Agent;
• Главный экран сервиса PostHog;
• Первый экран официального сайта Tailwind CSS.

Методика подачи исходников различалась. Для Hermes и PostHog я передавал в промпт качественный скриншот страницы, а также папку со скачанными графическими ассетами (логотипы, векторные значки, иллюстрации). Задача агента сводилась к точному считыванию графики и верстке. В случае с Tailwind CSS исходные изображения не предоставлялись — я передал только прямую URL-ссылку на сайт. Claude Code должен был самостоятельно зайти на страницу через headless-браузер, разобрать DOM-дерево, вытащить стили CSS и забрать необходимые ресурсы.

Для чистоты эксперимента я использовал флагманскую модель Opus 5 с максимальным уровнем проработки (effort = high). Каждая рабочая сессия запускалась в изолированном окружении (harness) без сторонних плагинов, сохранённой памяти или дополнительных навыков, оставляя агенту доступ только к серверу Figma MCP.

В процессе работы я фиксировал следующие метрики:

• Общие финансовые затраты на сессию и время её выполнения;
• Количество обращений к внешним инструментам;
• Затраты токенов на этапе первичного анализа и работы с канвасом;
• Визуальное соответствие полученного фрейма оригиналу.

Все действия выполнялись полностью автоматически — после отправки стартового промпта я не вмешивался в процесс и дожидался финального результата.

Промпты для работы с агентским интерфейсом

Для генерации макета по имеющемуся скриншоту использовался следующий промпт:

Recreate this landing page section as a design: <Image>. Make exactly one frame of the landing page via Figma MCP. Use the assets folder to get the exact illustrations from the page and place them as is: you may only change their size — no CSS filters, blend modes, recoloring, opacity or cropping. Work in this Figma file: <URL>

Для воссоздания интерфейса на основе веб-ссылки промпт выглядел так:

Recreate the landing page at <SITE-URL> as a design — the first screen as it looks in the browser at 1440px wide. Make exactly one frame via Figma MCP. Use the real logos and images from the site. Work in this Figma file: <URL>

Результаты тестирования и финансовые затраты

Суммарно на воссоздание трёх интерфейсов нейросеть потратила 98,5 минут и около 40,6 миллиона токенов. Совокупные затраты на API составили $34,21. Если разбить финансовые расходы по категориям действий агента, получается следующая картина:

Разделение на категории помогает понять природу трат. Аналитический этап включает в себя все ответы модели до первого обращения к документу Figma. Вызовы MCP охватывают генерацию кода и обработку ответов от сервера Figma. Вспомогательная работа вокруг MCP включает выполнение системных команд в Bash, чтение локальных файлов, скачивание промежуточных скриншотов холста и их пиксельное сравнение с исходником.

Методология расчета токенов и стоимости сессий

После завершения работы Claude Code сохраняет подробный лог сессии в формате JSONL. В каждой записи содержится метаинформация об использованных токенах в объекте usage. Для расчётов я суммировал четыре основных показателя:

• input_tokens — новые входные токены контекста;
• output_tokens — сгенерированный ответ модели (код и аргументы вызова инструментов);
• cache_read_input_tokens — кэшированные данные, прочитанные из памяти;
• cache_creation_input_tokens — объём информации, записанный в кэш.

Расчёт стоимости производился по действующим тарифам Opus 5 с часовым кэшированием: $5,00 за миллион входных токенов, $25,00 за миллион выходных токенов, $0,50 за чтение из кэша и $10,00 за запись в кэш за 1M токенов. Функция подсчёта на Python выглядит следующим образом:

PRICE = {
    "input_tokens": 5.0,
    "output_tokens": 25.0,
    "cache_read_input_tokens": 0.5,
    "cache_creation_input_tokens": 10.0,
}

def cost(usage):
    return sum(
        usage.get(token_type, 0) * price for token_type, price in PRICE.items()
    ) / 1_000_000

Что происходит на этапе предварительного анализа

Перед тем как приступить к созданию графических слоёв, Claude Code проводит тщательную разведку. Ему необходимо вычислить геометрию блоков, сетку, цветовые палитры, шрифтовые параметры и правила позиционирования. Как показало изучение логов, стратегия нейросети кардинально отличается в зависимости от того, что было передано на вход — изображение или URL.

Анализ верстки по скриншоту товара или сайта

Когда в распоряжении агента находится только растровый скриншот (как в тестах Hermes и PostHog), ему приходится действовать методом визуального реверс-инжиниринга:

1. Агент определяет параметры файла через утилиты file и sips, сжимает исходник для общего обзора.
2. Нарезает растр на отдельные фрагменты (шапка, текстовые блоки, кнопки) и анализирует их через инструмент чтения изображений.
3. Задействует библиотеку Python Pillow (PIL) для анализа пикселей, построения бинарных масок и точного вычисления границ контента.
4. Исследует векторные и растровые ассеты из приложенной папки, вычисляя прозрачность и размеры видимой части.
5. Генерирует тестовые наборы шрифтов через PIL.ImageFont, сравнивая ширину букв и высоту кегля с оригиналом.

Вот пример кода из реальной сессии анализа Hermes, где нейросеть кадрирует изображение размером 4070×2056 пикселей и замеряет значения RGB в ключевых точках:

from PIL import Image

im = Image.open("hero.png").convert("RGB")
print(im.size)
im.crop((0, 0, 4070, 460)).save("crop_nav.png")
im.crop((350, 520, 2000, 1900)).save("crop_left.png")
im.crop((400, 1550, 1800, 1850)).save("crop_term.png")

for point in [
    (20, 20),
    (2000, 1000),
    (500, 760),
    (700, 1450),
    (500, 1660),
    (1000, 1760),
]:
    print(point, im.getpixel(point))

Взяв пробы на пустых участках фона, агент получил цвет (0, 46, 228), что соответствует шестнадцатеричному коду #002ee4. Замер пикселей внутри кнопок и шрифтов дал результат (243, 243, 243) или #f3f3f3. Эти данные были зафиксированы как базовые константы стилей.

Для определения точных координат прямоугольных областей Claude Code использовал скрипт поиска границ на основе цветовых контрастов относительно фона:

from PIL import Image

im = Image.open("hero.png").convert("RGB")
px = im.load()
background = (0, 46, 228)

def is_foreground(color):
    return sum(abs(color[i] - background[i]) for i in range(3)) > 60

def bbox(x0, y0, x1, y1, label, step=1):
    min_x, min_y = 10**9, 10**9
    max_x, max_y = -1, -1
    for y in range(y0, y1, step):
        for x in range(x0, x1, step):
            if is_foreground(px[x, y]):
                min_x, max_x = min(min_x, x), max(max_x, x)
                min_y, max_y = min(min_y, y), max(max_y, y)
    print(label, min_x, min_y, max_x, max_y)

bbox(300, 650, 2100, 1300, "headline")
bbox(300, 1390, 2100, 1520, "button")
bbox(300, 1600, 2100, 1860, "terminal")

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

Анализ страницы при передаче прямой ссылки

В случае с Tailwind CSS нейросеть пошла по кардинально иному пути. Запустив headless-версию Chrome через Chrome DevTools Protocol при разрешении экрана 1440×900, агент выполнил инспекцию DOM и стилей напрямую через JavaScript:

(() => {
  const out = [];
  const walk = (element, depth) => {
    const rect = element.getBoundingClientRect();
    if (rect.bottom < -60 || rect.top > 1450) return;
    const style = getComputedStyle(element);
    const text = [...element.childNodes]
      .filter(node => node.nodeType === 3)
      .map(node => node.textContent)
      .join("")
      .trim();
    out.push({
      depth,
      tag: element.tagName,
      x: +rect.x.toFixed(1),
      y: +rect.y.toFixed(1),
      width: +rect.width.toFixed(1),
      height: +rect.height.toFixed(1),
      font: `${style.fontFamily} ${style.fontSize}/${style.lineHeight}`,
      weight: style.fontWeight,
      letterSpacing: style.letterSpacing,
      color: style.color,
      background: style.backgroundColor,
      borderRadius: style.borderRadius,
      text: text.slice(0, 90),
    });
    for (const child of element.children) {
      walk(child, depth + 1);
    }
  };
  walk(document.body, 0);
  return JSON.stringify(out);
})();

За один проход скрипта Claude Code собрал точные характеристики 430 элементов: размеры, координаты, гарнитуру шрифтов (Inter 96px), отступы, скругления и цвета. Ему потребовался всего один контрольный скриншот для визуальной сверки, а вся геометрия была получена мгновенно из браузера.

Сравнение затрат на этап исследования

Разница в подходах напрямую отразилась на итоговом чеке за этап предварительного анализа:

Куда расходуются токены во время сборки интерфейса

После завершения разведки агент переходит к циклическому процессу генерации: сборка слоёв → создание скриншота канваса → сравнение с эталоном → внесение правок.

Создание нативных слоев через Figma Plugin API

Каждый объект на канвасе требует написания развёрнутого JavaScript-кода. Например, добавление заголовочного блока выглядело следующим образом:

await figma.loadFontAsync({ family: 'Inter', style: 'Regular' });
const h1 = figma.createText();
h1.name = 'Headline';
h1.fontName = { family: 'Inter', style: 'Regular' };
h1.characters = 'Rapidly build modern websites\nwithout ever leaving your HTML.';
h1.fontSize = 96;
h1.lineHeight = { unit: 'PIXELS', value: 96 };
h1.letterSpacing = { unit: 'PIXELS', value: -4.8 };
h1.fills = [{ type: 'SOLID', color: { r: 0.012, g: 0.027, b: 0.071 } }];
h1.resize(1344, 192);
h1.x = 48;
h1.y = 153;
root.appendChild(h1);

Сложнее всего агенту дались детализированные блоки вроде панели с кодом. Для верстки 14 строк кода с подсветкой синтаксиса Claude Code создавал отдельные текстовые слои и программно раскрашивал диапазоны символов функции setRangeFills:

lines.forEach((segments, index) => {
  const line = figma.createText();
  line.fontName = { family: 'IBM Plex Mono', style: 'Regular' };
  line.characters = segments.map(segment => segment[0]).join('');
  line.fontSize = 13;
  line.lineHeight = { unit: 'PIXELS', value: 24 };
  line.x = 48;
  line.y = 12 + 24 * index;
  codePanel.appendChild(line);
  let start = 0;
  for (const [text, color] of segments) {
    line.setRangeFills(start, start + text.length, [S(color)]);
    start += text.length;
  }
});

В процессе сборки моделей нейросеть сгенерировала 221,7 тыс. выходных токенов (output tokens). Поскольку выходной поток у провайдеров оценочно в 5 раз дороже входного, развёрнутые структуры кода стали главной причиной высокой стоимости этапа построения макета.

Проверка результата и сравнение скриншотов

Для контроля качества агент запрашивал рендер макета через функцию get_screenshot, которая возвращала временную ссылку на PNG. После этого через Bash выполнялось скачивание файла:

curl -L -o screenshot.png "https://www.figma.com/api/mcp/asset/...png"

Затем Claude Code запускал скрипт на Node.js для попиксельного сравнения снимка холста с оригинальным изображением:

let different = 0;
for (let i = 0; i < reference.length; i += 4) {
  const difference = Math.abs(reference[i] - result[i]) +
                     Math.abs(reference[i + 1] - result[i + 1]) +
                     Math.abs(reference[i + 2] - result[i + 2]);
  if (difference > 60) {
    different++;
  }
}

Если выявлялись расхождения (например, неверный перенос строки в подзаголовке), агент корректировал ширину блока и повторял цикл проверки снова.

Выводы и практические наблюдения

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

Использование прямой URL-ссылки вместо статичного скриншота снижает стоимость этапа анализа более чем в два раза ($3,56 против ~$8,00), за счёт прямого чтения DOM и CSS без необходимости гадать по пикселям. В следующей публикации я планирую провести обратный тест: передать Claude Code готовые макеты из Figma и проверить, насколько чистый и работоспособный код фронтенда он сможет сгенерировать на их основе.

Источник: habr.com