Claude Code и Figma: как AI-агент создаёт макеты и почему это дорого
Эксперимент с использованием AI-агента Claude Code для автоматического создания прототипов сайтов в Figma показал, что основная стоимость приходится не на генерацию кода, а на многочисленные запросы к инструментам анализа и правки макета.
В конце марта 2026 года Figma открыла свой канвас для AI-агентов. Теперь инструменты, такие как Claude Code, могут напрямую работать с макетами через специальный MCP-сервер. Мы провели эксперимент, чтобы оценить, насколько хорошо агент переносит дизайн существующего сайта в Figma и какова реальная стоимость этой операции в токенах. Агенту давали либо скриншот лендинга, либо прямую ссылку на него. Мы фиксировали каждый шаг, количество обращений к инструментам и итоговый расход токенов.
Алгоритм работы агента построен на последовательном использовании инструментов MCP-сервера. Получив задание, Claude Code сначала анализирует исходный материал - скриншот или HTML-страницу. Затем он создает первоначальный макет в Figma. После этого запускается цикл проверок и правок: агент запрашивает скриншот текущего макета, сравнивает его с оригиналом, вносит коррективы в элементы, шрифты, цвета и отступы, и снова проверяет результат.
В одном из тестов, где использовался скриншот, агент выполнил 7 шагов и совершил 6 обращений к инструментам. Всего было задействовано 2 разных инструмента. На генерацию кода ушло 410 токенов, а на запросы к инструментам анализа и правки - 2410 токенов. В другом случае, когда агенту дали ссылку на сайт, он потратил 76 токенов на генерацию и 104 токена на инструменты, выполнив 5 шагов и 1 обращение к инструментам. Общий расход токенов в ходе всего эксперимента составил 1712715.
Эти цифры четко показывают, где лежит основная стоимость автоматизации. Она приходится не на творческую генерацию, а на фазу валидации и тонкой настройки. Дорогостоящие запросы к инструментам, которые позволяют агенту "видеть" текущее состояние макета и сравнивать его с целью, - это главная статья расходов. Экономическая эффективность подобных решений напрямую зависит от оптимизации цикла "анализ-правка". Прямое сравнение двух подходов выявило разницу: работа с HTML-ссылкой оказалась значительно менее ресурсоемкой, что указывает на преимущество более структурированных и предсказуемых входных данных.
Эксперимент подтверждает техническую работоспособность концепции "агент-дизайнер". AI способен самостоятельно выполнить задачу по переносу визуального дизайна в интерактивный прототип. Однако ключевой проблемой остается высокая стоимость итеративных улучшений. Это определяет два основных направления для развития: оптимизацию MCP-серверов и Figma API для снижения "токенизации" запросов, а также улучшение архитектуры самих агентов, чтобы уменьшить количество необходимых проверочных циклов. Без таких улучшений широкое коммерческое применение может быть ограничено из-за затрат.
