Figma-агент на коленке: как мы затащили AI-хакатон, написав бота для дизайна

Вы когда-нибудь пытались объяснить дизайнеру, что padding: 16px — это не margin: 16px? Если да, то вы знаете, как болят глаза при просмотре Figma-макетов с комментариями в 47 слоёв. Мы тоже устали, поэтому на Agentic AI Hackathon родили Figma Design Agent — бота, который берёт макет и на выходе выдаёт готовый код.

Как это работает (без магии, но с LLM)

В основе — связка Gemini CLI и кастомного агента, который парсит слои, группирует их по смыслу и генерирует React-компоненты. Вы просто тыкаете во фрейм, а агент сам решает, где <div>, а где <button>. Звучит как мечта фронтендера, правда? Спойлер: иногда он путает иконку с кнопкой, но мы работаем над этим.

Главный больной момент — передача «дизайн → код». Обычно это выглядит так: дизайнер кидает макет, фронтендер перерисовывает его в CSS, а тимлид страдает в JIRA с таском «согласовать отступы». Наш агент берёт на себя рутину, а разработчик может наконец заняться чем-то полезным — например, починить CI.

Что внутри:

• Gemini CLI для понимания контекста дизайна
• Агент, который умеет группировать слои и генерировать JSX
• Экспорт в Tailwind — потому что кто сейчас пишет чистый CSS?

Конечно, до продакшена ещё далеко: агент иногда выдаёт position: absolute там, где нужен flexbox, но для хакатона — огонь. Мы уже думаем, как добавить поддержку Figma Variants и Auto Layout, чтобы бот не просто копировал пиксели, а понимал логику.

Комментарий студии METABYTE: Автоматизация передачи дизайна в код — это священный грааль, который ищут все. Наш опыт показывает, что даже 50% автоматизации экономит дни работы. А если хотите, чтобы ваш Figma-агент не путал кнопки с иконками — пишите, мы знаем, как дообучить модельку.