Если раньше «верстка из Figma» часто означала ручной перенос отступов, цветов и размеров, то теперь этот процесс можно ускорить в разы. Связка Figma + Cursor + MCP позволяет получать контекст дизайна прямо в редакторе и быстрее превращать макет в рабочие компоненты.
В этой статье покажу практический подход: как настроить инструменты и как реально работать с макетом, чтобы получать чистый и предсказуемый код.
Что такое MCP в этом процессе
MCP (Model Context Protocol) — это способ дать Cursor доступ к данным из внешних инструментов (в нашем случае — из Figma) в структурированном виде.
Проще говоря:
- Cursor «видит» не только ваш код, но и контекст из дизайна.
- Можно точнее извлекать спецификации компонентов.
- Меньше ручной рутины и меньше расхождений между макетом и результатом.
Что нужно перед стартом
Минимальный набор:
- Проект в Figma с нормальной структурой (Auto Layout, стили, компоненты).
- Cursor с активной поддержкой MCP/интеграции.
- Подключенный Figma-плагин/сервер MCP с доступом к нужному файлу.
- Локальный проект (React, Vue, Next.js или HTML/CSS), куда будете вносить верстку.
Совет: перед началом проверьте, что в Figma у компонентов понятные имена. Это сильно влияет на качество результата.
Пошаговый workflow: от макета к верстке
1) Подготовьте дизайн к передаче в разработку
Перед тем как просить Cursor «сверстать экран», убедитесь, что в макете:
- Используются компоненты и варианты, а не «разрозненные слои».
- Есть корректные токены: цвета, типографика, spacing.
- Авто-лейауты настроены осмысленно.
- Повторяющиеся блоки унифицированы.
Чем чище Figma, тем меньше «магии» и правок в коде.
2) Подключите Figma-контекст в Cursor через MCP
После подключения Cursor сможет получать данные о выбранных нодах/экранах и использовать их в генерации или обновлении кода.
На практике это выглядит так:
- Открываете нужный экран или компонент в Figma.
- В Cursor формулируете задачу для конкретного блока.
- Cursor работает с учетом вашего текущего кода и контекста из дизайна.
3) Генерируйте не страницу целиком, а секциями
Частая ошибка — пытаться сразу «сверстай весь лендинг». Лучше идти блоками:
- Hero
- Карточки преимуществ
- Блок с CTA
- Футер
Так проще контролировать качество, переиспользование компонентов и адаптив.
4) Сразу привязывайте к вашей дизайн-системе
Просите Cursor использовать уже существующие:
- UI-компоненты (например, Button, Input, Card)
- Токены (например,
--color-primary,--space-md) - Сетку и брейкпоинты проекта
Это предотвращает ситуацию, когда код «визуально похож», но архитектурно чужой вашему проекту.
5) Проверка и доводка
После генерации каждого блока:
- Сравните визуально с Figma.
- Проверьте адаптив (минимум: mobile/tablet/desktop).
- Убедитесь в доступности (контраст, фокус, aria, семантика).
- Уберите лишние обертки и дублирующиеся стили.
Полезные промпты для Cursor
Ниже примеры формулировок, которые обычно дают хороший результат:
- «Сверстай секцию Hero по текущему Figma-контексту. Используй наши компоненты Button и Container, стили через существующие токены. Добавь адаптив для 768px и 1280px.»
- «Преобразуй этот блок в переиспользуемый компонент FeatureCard с пропсами title, description, icon.»
- «Сделай верстку максимально близкой к Figma, но без абсолютного позиционирования, через flex/grid и Auto Layout-логику.»
- «Проверь, где в сгенерированном коде нарушается семантика, и исправь на доступную HTML-структуру.»
Типичные ошибки
- Генерация всего сразу — сложно поддерживать, много шума в PR.
- Игнор существующей UI-системы — появляются лишние стили и компоненты.
- Слепое копирование пикселей — хрупкая верстка, особенно на адаптиве.
- Отсутствие ревью после генерации — визуальные и UX-ошибки уходят в прод.
Когда этот подход особенно полезен
Связка Figma + Cursor + MCP лучше всего работает, когда:
- Нужно быстро переносить макеты в production-код.
- В проекте уже есть компоненты и токены.
- Важна скорость без потери консистентности интерфейса.
Вывод
MCP-интеграция с Figma в Cursor — это не «кнопка сделать сайт», а ускоритель для осмысленной разработки. Лучший результат получается, когда вы даете чистый дизайн-контекст, ставите узкие задачи по секциям и сразу держите фокус на архитектуре вашего проекта.
