🤖 Как превратить вайрфрейм в рабочий прототип с помощью Claude Code и Figma MCP

Продуктовый дизайнер Ясонас Георгиадис протестировал, можно ли с помощью AI создавать прототипы, которые используют реальный код проекта, а не генерируют что-то на Tailwind с нуля. Он взял нарисованный от руки вайрфрейм и одним промптом получил страницу на React с правильными компонентами и токенами из дизайн-системы.

Ключ к успеху оказался в подготовке. Переменные Figma были привязаны к CSS-токенам, компоненты связаны с кодом через Code Connect, а для Claude Code написаны файлы CLAUDE.md с правилами работы. В итоге AI не угадывал, а следовал чёткой логике дизайн-системы.

Внутри: – Чем CLI-инструменты лучше плагинов для IDE; – Как выровнять переменные Figma с CSS-токенами; – Субагенты Claude Code для параллельных задач; – Сравнение Claude Code и Codex CLI на одном вайрфрейме; – MCP-серверы для тестирования через Playwright.

➡️Читать статью

———

💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

В этом посте были ссылки, но мы их удалили по правилам Сетки