Claude Code + Figma MCP: $34 и 40 млн токенов за три макета лендингов

Когда Figma открыла канвас для AI-агентов, я решил проверить на практике: сколько реально стоит попросить Claude Code перенести лендинг в макет через MCP-сервер. Не теория из презентаций, а конкретные цифры — токены, минуты, доллары. За три сессии с разными входными данными я потратил $34,21 и 40,6 миллиона токенов. Ниже — разбор того, куда ушли деньги и что из этого следует для тех, кто хочет автоматизировать дизайн.

Figma MCP — это протокол, через который AI-агенты вроде Claude Code и Codex получают доступ к канвасу Figma: создают фреймы, задают слои, цвета, шрифты и координаты через JavaScript и Plugin API. Агент не рисует картинку — он генерирует код, который Figma исполняет как нативные редактируемые объекты.

Маркетинг AI-инструментов обещает «макет за минуту». Но минута — это не только время, но и деньги. Каждый вызов MCP, каждый скриншот для сравнения, каждая строка JavaScript в аргументах инструмента — это токены. А выходные токены у Opus стоят в пять раз дороже входных. Я хотел понять: где именно горит бюджет и можно ли его оптимизировать выбором входных данных.

Для эксперимента я взял три реальных лендинга: Hero-секцию Hermes Agent, главную PostHog и первый экран Tailwind CSS. Для Hermes и PostHog агент получал скриншот страницы плюс папку с ассетами. Для Tailwind — только URL: агент сам должен был разобрать HTML, CSS, скачать картинки и снять страницу в headless Chrome.

Модель — Opus с effort high. Каждая сессия — чистый harness без лишних скиллов, памяти и плагинов. Только MCP Figma. После запуска я не вмешивался и ждал готовый макет.

Промпт для первых двух сайтов был простым: «Recreate this landing page section as a design. Make exactly one frame via Figma MCP. Use the assets folder. Work in this Figma file.» Для Tailwind — «Recreate the landing page at URL — the first screen at 1440px wide. Use real logos and images from the site.»

После каждого прогона я фиксировал: общую стоимость сессии, время работы, количество обращений к инструментам, стоимость MCP-вызовов, расходы на анализ до канваса и визуальное сходство с тем, что было на входе. Claude Code сохраняет лог в JSONL — там usage для каждого ответа модели.

Из usage я брал четыре значения: input_tokens, output_tokens, cache_read_input_tokens и cache_creation_input_tokens. Для подсчёта стоимости — тариф Opus с часовым кэшем: $5 за миллион входных, $25 за миллион выходных, $0,50 за чтение из кэша, $10 за запись в кэш. Складываю все четыре — получаю строку «Токены» в итоговой таблице.

Итог по трём сессиям: $34,21, 98,5 минуты, 40,6 млн токенов. Если разложить по этапам — картина интереснее, чем одна цифра.

Этапы работы агента и их стоимость:

1. Анализ до работы с канвасом — $9,10. Все ответы до момента, когда агент начал создавать элементы в Figma.

2. MCP-вызовы — $14,96. Ответы, где агент вызывал MCP-инструмент, плюс следующие ответы с результатом вызова.

3. Работа вокруг MCP — $10,15. Bash-команды, чтение файлов, скачивание и сравнение скриншотов после начала сборки.

4. Работа с канвасом целиком (MCP + обвязка) — $25,11.

5. Вся сессия — $34,21.

Главный инсайт: основная часть расходов — не «создание макета» как таковое, а то, как агент получает данные, управляет канвасом и проверяет результат. Сборка — это только половина пути.

Перед созданием элементов агент не начинает с фреймов. Сначала он исследует вход: размеры блоков, координаты, цвета, шрифты, правила обрезки изображений. Способ анализа сильно зависит от того, что лежит на входе.

Если на входе только скриншот — агент идёт через десятки итераций: обрезка → просмотр → измерение → новая гипотеза → ещё одна обрезка. Для Hermes он разделил скриншот 4070×2056 на зоны, взял пробы цвета через Pillow, построил маски относительно фона, нашёл границы элементов. Отдельно исследовал SVG, PNG, WebP — размеры, альфа-канал, положение видимой части. Рендерил варианты шfontов через PIL.ImageFont, сравнивал ширину символов.

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

Для измерения геометрии агент построил маску: пиксель считался частью элемента, если достаточно сильно отличался от известного фона. Скрипт измерил видимые границы заголовка, кнопки, терминала. По координатам — ширина, выравнивание, отступы. Особенно много шагов понадобилось для шрифтов и декоративных изображений, где одного цвета и прямоугольной границы недостаточно.

Если на входе ссылка — агент действовал иначе. Получил HTML, нашёл CSS-файлы и ассеты, открыл сайт в headless Chrome при 1440×900. Обошёл DOM, для каждого видимого узла вызвал getBoundingClientRect() и getComputedStyle(). За один обход — примерно 430 элементов: размеры, шрифты, цвета, скругления. Заголовок Tailwind — Inter 96×96 px. Панель с кодом, карточка — точные отступы, тени, цвета. Всё это стало спецификацией для сборки.

Скриншот страницы агент сделал один раз — как визуальную проверку. Основные параметры — из DOM, не из пикселей. Отсюда разница в стоимости анализа:

Ссылка обходится примерно в два раза дешевле на этапе анализа. HTML и CSS дают структуру напрямую — не нужно восстанавливать её по пикселям.

После анализа Claude Code изучает инструкцию MCP, создаёт элементы, снимает скриншот результата, исправляет отличия. Цикл: сборка → скриншот → сравнение → исправление → новый скриншот.

Figma MCP создаёт редактируемые нативные слои. Для каждого агент явно описывает свойства. Текстовый слой — загрузка шрифта, содержимое, размер, высота строки, межбуквенный интервал, цвет, координаты. Кнопка — Auto Layout-фрейм с дочерним текстовым слоем, padding, cornerRadius, fills.

Особенно дорого — панель с кодом. Агент создал отдельный текстовый слой для каждой из 14 строк, рассчитал координату y, отдельными вызовами раскрасил диапазоны символов. Во время работы с канвасом — 221,7 тысячи выходных токенов. Выходные стоят в пять раз дороже входных, поэтому длинные аргументы инструментов заметно бьют по бюджету.

Проверка скриншотов — отдельная статья расходов. MCP-функция get_screenshot возвращает не изображение, а временную ссылку на PNG. Агент скачивает файл, открывает, сравнивает. Цикл: запросить скриншот → получить ссылку → скачать → открыть → исправить элемент. При проверке Tailwind агент написал JavaScript для попиксельного сравнения — оба изображения в Canvas, подсчёт расхождений цветов. Каждая проверка — дополнительные команды Bash, чтение файлов. Часть «работы вокруг MCP» возникает уже после начала сборки.

Три практических вывода:

1. Давайте агенту ссылку, а не скриншот, если сайт доступен. HTML и CSS экономят $4–5 на анализе и десятки итераций.

2. Считайте выходные токены отдельно. Длинный JavaScript в аргументах MCP — главный драйвер стоимости на канвасе.

3. Макет — половина пути. Обратный эксперимент (макет → код) — отдельная история, которую я планирую разобрать во второй части.

$34 за три макета — это не «дорого» и не «дёшево» без контекста. Для разового прототипа — терпимо. Для пайплайна из сотни лендингов — нужна оптимизация входных данных и, возможно, более дешёвая модель на этапе анализа.

Детализация по каждому сайту показывает, что Hermes и PostHog съели больше всего на этапе анализа скриншота. Hermes — $8,20 только на «разведку» до канваса. PostHog — $7,86. Tailwind со ссылкой — $3,56. Разница не случайна: когда агент видит только растр, он вынужден восстанавливать типографику, цвета и геометрию через Pillow, обрезки и маски. Когда есть DOM — getComputedStyle() отдаёт font-family, font-size, line-height, letter-spacing, color, backgroundColor, borderRadius одним вызовом на элемент.

Для Hermes агент получил не только скринshот, но и исходный файл иллюстрации в Hero-секции. Чтобы правильно разместить её в макете, перебирал разные размеры и позиции, накладывая результат на скриншот. Аналогично подбирал положение фоновых изображений для PostHog. Каждая итерация — новые input и output токены, плюс cache read/write если контекст растёт.

JavaScript для обхода DOM Tailwind собрал примерно 430 элементов за один проход. Заголовок «Rapidly build modern websites…» — Inter 96×96 px с letter-spacing −4,8 px. Панель с кодом — IBM Plex Mono 13 px, line-height 24 px. Карточка справа — borderRadius, box-shadow, padding. Все эти значения агент потом воспроизводил в Figma через Plugin API: figma.loadFontAsync, figma.createText, setRangeFills для подсветки синтаксиса.

На этапе сборки Tailwind агент заметил, что описание под заголовком переносится иначе, чем на живом сайте. Зафиксировал перенос, изменил ширину текстового блока, повторно запросил скринshот блока. Таких микро-итераций — десятки. Каждая — MCP get_screenshot → curl → открытие файла → анализ → правка координат или fontSize.

Тарифная модель Opus с кэшем добавляет нюанс: cache_creation_input_tokens стоят $10 за миллион — дороже обычного input. Когда агент накапливает длинный контекст (скриншоты, логи, фрагменты кода), часть расходов уходит на запись в кэш. cache_read дешевле — $0,50 за миллион — но только если контекст переиспользуется в рамках одной сессии.

Скрипт подсчёта стоимости одного ответа простой: для каждого типа токенов умножаю count на price и делю на миллион. PRICE = input $5, output $25, cache_read $0,50, cache_creation $10. Суммирую по всем строкам JSONL — получаю $34,21 за три сессии.

Визуальное сходство я оценивал субъективно, но Tailwind агент дополнительно прогнал попиксельное сравнение: разница RGB > 60 считалась расхождением. Это помогло найти расхождения в переносе текста и оттенках фона, которые глазом легко пропустить.

Чистый harness без скиллов и памяти — сознательное решение. Я хотел изолировать именно Figma MCP, без «подсказок» из прошлых сессий. В продакшене, возможно, имеет смысл дать агенту skill с best practices по Figma API — но это уже другой эксперимент.

MCP-вызовы ($14,96) — это не только create_frame и create_text. Это ещё get_screenshot, load_font, set_fills, appendChild, resize, move — каждый с JSON-аргументами в output. 221,7 тысячи output tokens на канвасе — следствие verbose API: каждый слой описывается явно, без «магии».

Работа вокруг MCP ($10,15) — Bash (file, sips, curl), Python (Pillow), чтение JSONL, сравнение PNG. Агент не живёт только в MCP — он оркестрирует локальные инструменты для подготовки данных и верификации. Это нормально, но это тоже деньги.

Если масштабировать на десятки лендингов в месяц, первым делом я бы автоматизировал выбор входа: URL если доступен, скриншот только как fallback. Второе — батчить MCP-вызовы где API позволяет. Третье — отдельная модель для анализа и для сборки.

Figma открыла канвас для агентов в конце марта 2026 — Claude Code, Codex и аналоги получили официальный MCP-сервер. Это не хак через плагин вручную, а интеграция на уровне платформы. Значит, подобные эксперimentы станут массовыми — и вопрос стоимости токенов выйдет из ниши энthusiast'ов в операционку продуктовых команд.

PostHog оказался визуально сложнее Hermes: больше декоративных фонов, градиентов, мелкой типографики в навигации. Агент потратил сопоставимое время на анализ ($7,86), но больше итераций на канвасе — особенно на фоновые слои и иконки. Каждая иконка — отдельный createRectangle или import SVG через Plugin API.

Hermes Agent дал агенту синий фон #002ee4 и светлый текст #f3f3f3 — цвета он вытащил из двух проб пикселей на свободных участках и двух внутри текста. Простая эвристика, но для однотонных лендингов работает. Сложнее — когда фон градиентный или с паттерном: тогда маски и bbox по foreground/background множатся.

98,5 минуты на три макета — это не «мгновенно», но и не день работы дизайнера. Вопрос не только в деньгах, но и в том, готов ли результат к правкам человеком или нужна полная переделка. В моём случае макеты были узнаваемы и редактируемы — нативные слои Figma, не flatten.

Отдельно отмечу: я не оптимизировал промпты под минимум токенов — цель была честный замер «как есть». С оптимизацией цифры могут быть ниже, но базовая структура расходов останется той же.

Можно ли собрать макет дешевле $10? Теоретически да — если дать ссылку вместо скриншота и использовать модель полегче на этапе анализа. Но качество и время могут пострадать.

Зачем агенту столько скриншотов при проверке? Figma MCP не возвращает картинку inline — только URL. Каждый цикл проверки — скачивание, открытие, сравнение. Это добавляет «работу вокруг MCP».

Opus обязателен? Я использовал Opus 5 с effort high для максимального качества. Для простых лендингов можно попробовать Sonnet — но я это ещё не тестировал системно.

Макет редактируемый? Да. Figma MCP создаёт нативные слои — фреймы, текст, Auto Layout. Не растр, не картинку поверх канваса.