На выходных разбирался, как передать макеты из Figma в нейросеть так, чтобы она точно понимала структуру и могла на основе этого генерировать рабочие компоненты. Цель — не просто "показать картинку", а дать нейросети чёткий контекст: что это за элемент, где он используется и в каких состояниях.

🔌 Для этого используется протокол MCP (Model Communication Protocol). Он позволяет сервисам — таким как Figma — общаться с нейросетями вроде Cursor или Claude. MCP описывает, как передавать данные о выделенных объектах, тексте, свойствах и действиях, чтобы AI мог на это адекватно отреагировать.

🌐 Таких серверов уже очень много для подключения нейросетей к любым интерфейсам: Figma, VS Code, свой сервис или API. Их можно найти в каталоге https://mcp.so/servers.

Cursor + Figma через MCP

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

🎯 Я попробовал один из популярных MCP-серверов — cursor-talk-to-figma-mcp от @sonnylazuardi. Он создаёт мост между Figma и Cursor.

Как это работает: - в Figma выделяешь компонент или фрейм. - в Cursor описываешь, что хочешь получить. - получаешь код, описание, состояния или просто техническую справку по компоненту.

А можно и наоборот — попросить Cursor создать интерфейс в Figma. Об этом расскажу отдельно.

Как я использовал это

🧪 Я практиковался на простом примере сделал игру вроде Wordle. Выделял кнопку, писал: «это кнопка для проверки ответа, нужны три состояния: по умолчанию, hover и нажатие». В результате Cursor предлагал вполне рабочий компонент — иногда с доработками, но с вполне вменяемым результатом. Работает пока не идеально, но уже даёт возможность быстро получать простые вещи.