Claude Code генерирует макеты в Figma: сколько токенов уходит на дизайн сайта

В конце марта 2026 года Figma открыла Canvas for AI‑agents – публичный MCP‑сервер, позволяющий внешним моделям создавать и редактировать макеты напрямую в Figma. Среди первых интеграций оказались Claude Code, Codex и несколько аналогичных инструментов. Автор статьи на Habr AI решил проверить, насколько эффективно Claude Code может переносить готовый дизайн сайта в Figma‑макет и какие затраты токенов при этом возникают.

Для эксперимента были выбраны три типовых лендинга: стартап‑продукт, онлайн‑курс и портфолио‑страница. На каждый из них агенту давали либо скриншот, либо URL сайта. Claude Code последовательно выполнял шаги: 1) анализ изображения/страницы, 2) построение структуры слоёв, 3) создание компонентов (кнопки, формы, изображения) и 4) размещение их на канвасе Figma. Все действия фиксировались в логах MCP‑сервера.

Результаты показали, что полный перенос одного лендинга требует от 1 200 до 2 300 токенов, в зависимости от сложности макета и формата входных данных. При работе со скриншотом потребление было выше (≈ 2 300 токенов) из‑за необходимости распознавания визуального контента, тогда как при передаче URL – около 1 200 токенов, так как агент мог сразу получить HTML‑структуру.

Время выполнения варьировалось от 45 сек до 1 мин 30 сек. Качество макетов получалось достаточно высоким: большинство элементов были правильно распознаны и размещены, однако иногда агент создавал избыточные группы слоёв, требующие ручной очистки.

Автор делится подробным набором запросов и рекомендациями по оптимизации токенов, а также ссылкой на официальную документацию Figma Canvas: https://www.figma.com/developers/canvas.

Вывод: интеграция Claude Code с Figma открывает новые возможности автоматизации UI‑дизайна, но пока требует контроля за расходом токенов и последующей правкой макетов.