Главная страница сайта по макету Figma через MCP в Cursor
Автор подключил Figma к Cursor по MCP и собрал новую главную страницу для архива шрифтов. После неудачи с Lovable один промпт в Cursor дал точные цвета и раскладку, но шрифт агент не перенёс.
Что сделали
Автор создал локальный Git-репозиторий с синхронизацией на GitHub и открыл его в Cursor на бесплатном пробном Pro с подключённым MCP от Figma. В режиме Dev Mode в Figma он выделил нужный раздел макета и скопировал его ссылку. Эту ссылку он вставил в простой промпт в Cursor с просьбой сделать HTML и CSS. Cursor подсветил сгенерированный код, чтобы его можно было проверить и оставить или сгенерировать заново.
Что получилось
Один промпт дал раздел с превью, где точно совпали цвета, раскладка и эффекты при наведении на кнопки. Это намного лучше того, что выдал Lovable. Шрифт и начертания агент не перенёс, вероятно, потому что Rotis не бесплатный веб-шрифт. Дальше всё равно нужна доводка.
На что обратить внимание
Claude Code автор не стал брать, потому что для него нужен тариф Pro за $17 в месяц. Бесплатного пробного Pro в Cursor хватило, чтобы начать.
Пояснение
Dev Mode это режим Figma для разработчиков, в нём видны размеры и стили элементов и можно скопировать ссылку на отдельную часть макета. Lovable это сервис, который собирает сайты по текстовому описанию.
Кому пригодится
Дизайнерам, которые хотят сами превратить свой макет в работающую страницу без разработчика.
Попробуйте сами с Cursor
Подключись по MCP к моему файлу Figma для [название проекта] и собери работающую главную страницу по макету, как можно точнее повторив раскладку, отступы и компоненты. Покажи мне отрендеренный результат, чтобы я сравнил его с макетом в Figma, прежде чем считать работу готовой.
Нужна помощь с запуском? Вступайте в сообщество AI Pack ↗
Ещё 1 источник
Источник: designphilosophy.substack.com · · обновлено