Чтобы понять как нейросеть понимает макет из Фигма я погрузился в тему и вот что выяснил.

Чтобы понять как нейросеть понимает макет из Фигма я погрузился в тему и вот что выяснил.

Figma изначально имела Dev Mode режим для разработчиков где можно смотреть CSS свойства любого элемента. Это было просто «инспектор» зашёл, посмотрел значения, руками перенёс в код.

Потом появился Code Connect и Figma начала думать о связке дизайн код.

Потом вышел MCP протокол стандарт для подключения внешних инструментов к ИИ.

Figma сделала MCP сервер который берёт данные из своего внутреннего API и отдаёт их в формате понятном для ИИ.

Почему React + Tailwind:

Figma выбрала React + Tailwind как наиболее популярный стек чтобы покрыть максимальное количество разработчиков.

Внутри Figma всё хранится как:

{
«type»: «FRAME»,
«name»: «Button»,
«layoutMode»: «HORIZONTAL»,
«paddingLeft»: 30,
«paddingRight»: 30,
«cornerRadius»: 20,
«fills»: [{ «color»: { «r»: 0, «g»: 0, «b»: 0 } }]
}

Это просто JSON с параметрами. MCP сервер берёт этот JSON и конвертирует в React + Tailwind код. Можно было бы конвертировать в Vue, Svelte, Angular — просто Figma выбрала React как дефолт.

И я прошу нейросеть перевести Tailwind React в HTML CSS JS это по сути просто конвертация.

Главная проблема если не дать правила для нейросети она может не точно переносить некоторые вещи.

Он просто говорит ну я подумал что так будет быстрее.

Поэтому на обучении вайбкодингу где мы верстаем макет с помощью нейросети я даю этот файлик и показываю как им пользоваться.