Исходный код автоматизации для переноса дизайна из Figma в код вместе с Shadcn

Доступ к полному просмотру и файлам открыт только для активных участников ИИшенка Pro.

Разбор автоматизации, которая переносит дизайн из Figma в рабочий код на Next.js через два MCP-сервера: Figma и Shadcn. За 7 минут объясняется, почему точные названия компонентов дают точный результат, и как устроена команда с шагами и чек-листом.

Чему научишься

Связывать Figma MCP и Shadcn MCP, чтобы нейросеть брала структуру макета из Figma, а компоненты и их реализацию из Shadcn
Строить дизайн из стандартных компонентов с теми же названиями, что и в коде, чтобы перенос получался точным
Писать команду со слэшем (например, Figma to Shadcn) с пошаговой инструкцией и чек-листом для Cursor
Давать нейросети ссылку на артборд и получать готовую страницу на Next.js, не выдумывая названия страниц вручную
Дорабатывать неточности через скриншот или ссылку на выделенный элемент Figma

Тайм-коды

00:00Вайб-дизайн: почему этот способ ближе к продакшну
00:30Два MCP-сервера: Shadcn и Figma MCP от комьюнити
01:30Дизайн из слоёв и компонентов, названных как в коде
02:30Как нейросеть получает данные из Figma и Shadcn
03:31Команда через слэш вместо длинных промптов
04:01Шаги команды: Figma MCP, определение компонентов, Shadcn MCP
05:02Воссоздание экрана на Next.js и название страницы
05:33Чек-лист как инструмент для нейросети
06:03Доработка неточностей: скриншот и ссылка на выделенный элемент
07:04Итог: инструмент для реальных проектов

Проверяем доступ...