Автоматическая верстка макетов из Figma в Cursor AI с помощью MCP сервера

Описание

В этом видео я покажу, как можно ускорить процесс вёрстки с помощью искусственного интеллекта в редакторе Cursor и подключением MCP-сервера, который позволяет загружать макеты напрямую из Figma — даже на бесплатном плане!

📌 Что будет в видео:
- Получение токена в Figma
- Подключение Figma к Cursor через MCP
- Настройка доступа и авторизации
- Автоматическая генерация HTML + CSS по BEM
- Нюансы по скачиванию графики
- Советы по улучшению кода и предотвращению ошибок

Этот подход может значительно сократить время разработки, особенно для типовой UI-вёрстки. Подходит как для начинающих, так и для опытных верстальщиков, которые хотят автоматизировать рутинные задачи.

⚡️ Новости и материалы по веб-разработке в моём телеграм канале:
👉 https://t.me/+friZxyBulgNmYjE6

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: http://webcademy.ru/htmlsite/

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Мои авторские курсы:

💻 Профессия HTML верстальщик
Для начинающих. Курс по созданию и верстке сайтов.
👉 https://webcademy.ru/htmlstart/

💻 Курс "Frontend разработчик. JavaScript + React"
Станьте frontend разработчиком за 3 месяца.
👉 https://webcademy.ru/jscourse/

💻 Курс "Разработка сайтов на PHP + MySQL"
Сможете создавать сайты с любым функционалом.
👉 https://webcademy.ru/phpcourse/

🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💈 Сайт ВебКадеми: https://webcademy.ru/
💈 Группа Вконтакте: https://vk.com/webcademy
💈 Telegram канал: https://t.me/+friZxyBulgNmYjE6

ТАЙМ КОДЫ:

00:00 Вступление
00:44 Создание токена в Figma
02:43 Инфо про MCP сервер
04:30 Подключение MCP сервера в Cursor
05:38 Не забудьте установить node js
05:59 Проверяем запуск MCP сервера
06:58 Верстаем с помощью AI в Cursor
10:33 Фикс промт для загрузки изображений
13:00 Просмотр результата
13:50 Фикс верстки уточняющими промтами