Скриншот в Figma с Cursor и Figma MCP Server: рабочий процесс AI-агента для кода
Если вы используете AI-агентов для кода (Cursor, Claude Code, Windsurf, Codex), чтобы собирать интерфейсы по дизайну, вы наверняка упирались в одну и ту же проблему: вставить скриншот в чат работает для простых компонентов и разваливается на чем-то реальном. Агент делает выводы; выводы оказываются неверными; вы исправляете; токены сгорают; в итоге вы сдаётесь и пересобираете всё вручную.
Есть более удачный сценарий. Сначала используйте Codia AI, чтобы преобразовать скриншот в структурированный файл Figma. Затем подключите к агенту Figma MCP Server. Теперь агент получает структурированные данные о макете, Variables, компонентах и design tokens, а не сплющенное изображение. Качество результата растёт, итераций становится меньше, и работа больше не ощущается как борьба с инструментом.
Используйте Codia Screenshot to Figma, чтобы превращать скриншоты и UI-изображения в редактируемые слои Figma перед редизайном, сравнением или передачей в работу.
Что такое Figma MCP Server
Figma MCP Server — это официальный мост между файлами Figma и AI-агентами, которые поддерживают Model Context Protocol. Он открывает доступ к файлам Figma, компонентам, Variables и design tokens в виде структурированных данных, которые агент может читать напрямую, вместо того чтобы пытаться восстановить всё по скриншоту.
На этапе реконструкции откройте Codia Screenshot to Figma и сначала преобразуйте референс в редактируемые слои, а затем дорабатывайте дизайн.
Редакторы с поддержкой MCP на сегодня: VS Code, Cursor, Windsurf, Claude Code, Codex.
Какую проблему решает MCP
Когда вы вставляете скриншот в Cursor или Claude Code и говорите «сделай вот это», агент делает следующее:
- Смотрит на изображение через vision
- Гадает, как устроена структура макета
- Гадает, какие здесь отступы
- Гадает, какие здесь цвета
- Гадает, какие здесь компоненты
- Пишет код на основе этих догадок
Каждое такое «гадает» наращивает стоимость токенов и снижает качество. В настоящих дизайн-файлах вся эта информация уже есть как данные, а не как пиксели. MCP открывает к ним доступ.
Какую проблему решает Codia в этом процессе
MCP нужен Figma-файл, чтобы быть полезным. Если у вас его нет — есть только скриншот интерфейса, который нужно собрать, — MCP не поможет. Вы снова возвращаетесь к вставке изображения.
Codia закрывает этот разрыв. Скриншот → Codia → структурированный Figma-файл (с Variables, Auto Layout и именованными компонентами) → файл, готовый к MCP.
Трехшаговый процесс
Шаг 1: преобразуйте скриншот с помощью Codia
Возьмите референсный скриншот — страницу конкурента, вдохновляющий пример, уже существующий production-экран — и преобразуйте его в Figma через Codia AI:
- Загрузите файл в плагин Codia Figma или в веб-приложение
- Запустите преобразование (~10 секунд для чистого full-screen)
- Откройте результат в Figma
На выходе вы получаете настоящие Frames, настоящие текстовые слои, Auto Layout там, где аналогия работает, и компоненты для повторяющихся элементов. Главное: здесь есть структура, а именно её читает MCP.
Подробнее о самом преобразовании см. Screenshot to Figma: The Complete Guide.
Шаг 2: приведите Figma-файл в порядок для MCP
MCP особенно хорошо работает с аккуратным Figma-файлом. Потратьте пять минут:
- Примените Variables к цветам. Сырые hex-значения дают агенту просто строки; Variables дают токены. Тогда результат будет опираться на вашу дизайн-систему, а не изобретать новую.
- Проверьте Auto Layout во всех контейнерах, которые должны быть адаптивными. MCP напрямую передаёт это понимание в модель.
- Даёте компонентам осмысленные имена.
PrimaryButton,NavItem,PricingCard, а неGroup 47. Агент использует эти имена в сгенерированном коде. - Группируйте повторяющиеся элементы как компоненты, а не как разрозненные instances. MCP воспринимает компоненты как сущности первого класса.
Если вы стартуете с файла, созданного Codia, большая часть уже сделана — конвертация создаёт Auto Layout, называет элементы и группирует повторяющиеся паттерны. Эти пять минут нужны скорее для финальной полировки.
Шаг 3: подключите MCP к редактору и сгенерируйте код
Установите и настройте Figma MCP Server в выбранном редакторе. Официальная инструкция по настройке: Figma MCP server guide.
Затем в промпте укажите ссылку на файл Figma или выбранный фрагмент:
"Используй Figma-файл [ссылка или selection ID], чтобы собрать React-компонент, который точно повторяет этот дизайн. Используй Variables дизайн-системы. Сохрани токены отступов."
Теперь у агента есть:
- Реальная иерархия слоёв
- Реальные значения отступов из Auto Layout
- Реальные цветовые токены из Variables
- Реальные определения компонентов
- Дополнительные скриншоты выбранного фрагмента для визуальной проверки
Результат получается заметно ближе к дизайну, чем при обычном сценарии «вставь скриншот в чат».
Почему этот процесс лучше, чем «вставить скриншот в чат»
| Подход | Что получает агент | Качество результата | Стоимость токенов |
|---|---|---|---|
| Вставить скриншот в чат | Пиксели + ваш промпт | Низкое-среднее, много догадок | Высокая — много исправлений |
| Codia → MCP → агент | Структурированный макет + Variables + компоненты + скриншот | Среднее-высокое, меньше догадок | Низкая — меньше правок |
| Codia → MCP → агент + чистый Figma-файл | То же плюс данные дизайн-системы | Высокое | Самая низкая |
Практический эффект: команды, которые используют полный пайплайн, обычно получают примерно на 50–70% меньше итераций «поправь это» при генерации UI по сравнению со сценариями только со скриншотами. Соответственно падают и расходы на токены.
Пошагово в Cursor
Рабочий пример именно для Cursor:
- В Figma откройте файл, созданный Codia. Выберите фрейм, который нужно собрать.
- В Cursor установите Figma MCP Server (Settings → MCP → Add Server).
- В чате Cursor напишите: "Используй Figma MCP Server, забери выбранный frame из моего Figma-файла и сгенерируй React + Tailwind-компонент, который точно повторяет дизайн. Используй Variables как Tailwind theme tokens."
- Агент вызывает MCP-инструмент, получает структурированные данные + скриншот выбранного фрагмента.
- Он генерирует компонент. Первый проход получается гораздо ближе к дизайну, чем при обычном скриншотном промпте.
- Итерации делайте точечно, запрашивая конкретные правки по тому же Figma-источнику.
Использование с Claude Code
Тот же процесс, только с другим инструментом. Claude Code поддерживает MCP нативно. Figma MCP Server подключается так же. Стиль промпта остаётся тем же.
Если вы уже используете Claude Code для backend-задач, добавление Figma MCP Server позволяет тому же агенту собирать UI по вашим Figma-файлам, созданным через Codia.
Использование с Windsurf
То же самое. Поддержка MCP в Windsurf позволяет подключить Figma MCP Server так же, как в Cursor или Claude Code.
Частые ошибки
Пропустить шаг с Variables. Если в Figma-файле везде стоят сырые hex-значения, MCP вернёт агенту просто строки. Применяйте Variables дизайн-системы — это разница между «правильным фирменным цветом» и «примерно похожим».
Забыть про Auto Layout. Без Auto Layout MCP может описать позицию, но не адаптивное поведение. Auto Layout превращает это в «это flex-row с gap 16px» — то, что агенту реально полезно.
Просить слишком много в одном промпте. «Собери всю панель» — слишком большой объём. «Собери sidebar-компонент по выбранному фрагменту Figma» работает намного лучше. Сначала компонент, потом сборка.
Неточный выбор в Figma. MCP забирает то, что вы выделили. Размытый выбор → размытый контекст. Выбирайте именно тот frame, который нужен.
Смешивать скриншотные промпты с MCP. Если MCP уже настроен, используйте его. Не вставляйте скриншот вдобавок к MCP-ссылке — агент увидит два источника истины и выберет тот, который проще.
За пределами разовых экранов: строим библиотеку компонентов
Этот процесс масштабируется:
- Преобразуйте пачку репрезентативных скриншотов через Codia
- Превратите результат в компоненты внутри Figma
- Примените Variables и дизайн-систему
- Используйте MCP, чтобы сгенерировать соответствующую библиотеку компонентов в коде
Для пакетного преобразования используйте Visual Struct API — до 1 000 изображений в одной партии.
Когда этот процесс НЕ нужен
- Простые кнопки или иконки. Иногда проще просто вставить скриншот в агент.
- Дизайн уже есть нативно в Figma. Пропустите Codia и сразу переходите к MCP.
- Генерация кода без высокой точности к дизайну. Если достаточно «похоже», путь через скриншот может хватить.
FAQ
Нужно ли платить за Figma MCP Server?
Официальный Figma MCP Server входит в платформу Figma; проверьте тарифы Figma на доступ к MCP.
Видит ли агент настоящий Figma-файл или только API?
MCP Server отдаёт агенту структурированные данные из Figma-файла (слои, имена, позиции, Variables, компоненты) и может возвращать скриншоты выбранных областей для визуальной проверки.
Можно ли использовать это с моим собственным Figma-файлом, а не только из Codia?
Да. MCP работает с любым хорошо структурированным Figma-файлом. Codia нужен как мост в случаях, когда у вас есть только скриншот, а не исходный Figma-файл.
Что если мой Figma-файл после конвертации получился грязным?
Потратьте пять минут на чистку: назовите компоненты, примените Variables, проверьте Auto Layout. Качество результата агента масштабируется от качества файла.
Работает ли это с моделями Auto / Claude / GPT в Cursor?
Да. MCP не зависит от модели; сервер передаёт структурированные данные той модели, которая используется в редакторе.
Чем это отличается от Figma Make?
Figma Make генерирует UI по промптам внутри Figma; пайплайн Codia + MCP генерирует код вне Figma, используя ваш Figma-файл как источник истины для дизайна. Инструменты разные, и результат у них разный.