Сейчас многие говорят о вайб-кодинге и AI-ассистентах, которые будто бы позволяют за пять минут собрать целый продукт. На деле же без понимания основ процесс превращается в хаос. Этот гайд — про то, как наладить повторяемый и качественный перенос дизайна из Figma в код, используя AI, но не теряя контроль.

Что вы получите

Следуя инструкции, вы сможете создать веб-страницу, которая:

• точно соответствует дизайну
• адаптируется под разные экраны
• учитывает retina и обычные дисплеи
• поддерживает динамическое переключение языков
• позволяет легко добавлять новые функции

1. Что нужно для старта

• Figma с Dev Mode и включённым Figma MCP
• AI-ассистент (например, Cursor с GPT-5.3 Codex — бесплатной версии лучше избегать)
• Базовые знания в дизайне и вёрстке
• Умение чётко формулировать задачи. AI не читает мысли: если вы сами не понимаете, что хотите, он тем более не поймёт

2. Подготовка макета в Figma

Чтобы процесс был воспроизводим, придерживайтесь системного подхода к структуре фреймов. Например:

• %pageName — название страницы или блока
• %type — тип состояния: default, hover, layout
• %widthScreen — ширина экрана
• %theme — тема: light, dark

Можете использовать свою систему, главное — чтобы она была последовательной.

Правило 1: Контент и ассеты

Используйте финальные тексты и графику. Если графики пока нет — оставьте контейнеры в нужных размерах.

Для смены тем создайте стили в Figma:

• Light/Primary
• Dark/Primary

Правило 2: Брейкпоинты

Подготовьте фреймы под ключевые разрешения: 1920, 1280, 768, 375. Важно не только делать целые страницы, но и выделять отдельные блоки — меню, карусели, аккордеоны. Это позволяет AI работать точечно.

Пример структуры блоков: Home page, Menu, Hero, Price, Feature, Footer.

Правило 3: Ресайз-логика

AI пока плохо понимает auto layout. Чтобы избежать ошибок, создайте отдельный layout-фрейм, где визуально покажите:

• что растягивается
• что фиксировано
• где перенос на новую строку
• где горизонтальный скролл
• где заданы min/max ширины

Это как инструкция для AI. Да, это временная мера, но сейчас она сильно повышает качество результата.

Правило 4: Состояния элементов

Hover, active, disabled — выносите в отдельные фреймы. Например: «Menu Hover [1920 · Light]».

Так AI видит не только цвет, но и контекст. Это снижает риск ошибок в интерактивности.

Правило 5: Переключение тем

Если нужна смена тем — создайте отдельный фрейм. При правильной настройке стилей в Figma процесс работает стабильно.

Проверьте, что Figma MCP включён:

Откройте проект → Dev Mode → Inspect → MCP

• Server status = Enabled
• Image source = Download

Важно: ресурсы из Figma часто приходят с низким качеством, особенно SVG. Часть ассетов придётся заменить вручную.

3. Перенос дизайна в код

Работайте с AI поэтапно. Не просите «сделать всё сразу» — это приведёт к ошибкам и потере контекста.

Шаг 1. Фундамент

Задайте чёткий контекст. Напишите запрос вроде:

Я делаю сайт про %тема. Нужно поэтапно заверстать его через Figma MCP, ссылка на проект %ссылка. Дизайн-макеты содержат брейкпоинты: 1920, 1280, 768, 375. Например, Home [1920 · Light]. Все ресурсы берём из Figma. Анимацию добавим позже. Работаем со структурой слоёв, а не со скриншотами. Делим задачу на этапы. Задавай уточняющие вопросы.

На этом этапе можно описать базовые элементы навигации. Дайте AI проанализировать проект и разбить работу на шаги.

Создайте агента с правилами — это поможет сохранить контекст и избежать ошибок. Этот шаг превращает хаотичный процесс в системный.

Шаг 2. Агент-шаблон

Создайте файл AGENTS_BASE.md (или любой другой) с правилами для агента. Пример:

Пишите правила на том языке, на котором вам комфортнее. Если вы думаете на русском — пишите на русском. Вы формируете поведенческий паттерн, и понятность важнее «правильного» английского.

Шаг 3. Соединяем кусочки

После настройки агента у вас уже должен быть базовый каркас. Теперь начинается итеративная шлифовка. Вы увидите несоответствия — это нормально.

Исправляйте по одному блоку, ссылаясь на конкретные фреймы. Например:

В блоке Feature ошибка: галерея должна прокручиваться по горизонтали. Все карточки находятся в фрейме %ссылка. Также добавь 20px отступа снизу, чтобы скроллбар не перекрывал контент.

Так вы постепенно доведёте каждый блок до идеала.

Шаг 4. Актуальная графика

Когда верстка работает во всех браузерах и темы переключаются, замените ресурсы. Figma часто отдаёт кривые SVG и низкокачественный растровый контент.

Варианты:

1. Заменить вручную с правильным именованием
2. Поручить AI, чётко указав, что и на что менять:

// Замена внутри блока В блоке Feature есть List с преимуществами. Я подготовил SVG 32x32px. Замени в нужных местах и удали старые: - Поддержка 150 валют > ic_unlimList_BENEFIT_24 - Работа оффлайн > ic_offlineMode_16 // Замена конкретного файла В блоке Hello замени 457г483759734 на final-promo-light.png (x2 для retina)

Шаг 5. Добавляем функционал

Когда дизайн свёрстан, можно внедрять фичи: переключение тем, локализацию, интеграции. У вас уже есть контекст и правила, поэтому AI справится изолированно.

Пример запроса для локализации:

Теперь добавим локализацию через кнопку %buttonName. Сделай dropdown в стиле проекта. Пока нужны два языка: RU и EN. Задай уточняющие вопросы и приступай.

Так, шаг за шагом, вы добьётесь результата.

Важная мысль

AI расширяет возможности. Вы можете теперь не только проектировать, но и верстать, локализовывать, генерировать юридические страницы, делать анимации. Это круто, но и опасно.

Чем больше вы берёте на себя, тем выше риск потерять фокус и качество. Ловушка в том, чтобы не превратиться в «full-stack everything» и не выгореть, создавая посредственные продукты.

Используйте AI как инструмент, а не замену внимательности и мастерства.

Сегодня такое время, что каждый третий — мега-мастер вайб-кодинга и уже успел сделать горы проектов благодаря AI. Правда, ни одного релиза так и не выпустил, но речь не об этом.

Из каждого утюга я слышу про десятки крутых AI-сервисов, подключаемые skills, агенты-валидаторы и множество других обвесов вокруг вайб-кодинга. Всё это создаёт целый новый мир вместе с новыми ролями и вакансиями на рынке. Но очень сложно начать делать что-то действительно кайфовое, пока не разберёшься в базе. Что я, собственно, и сделал.

Этот гайд — стартовый, для тех, кто хочет на простом примере получить большой результат.Как только смогу воспроизвести что-то более сложное с использованием skills, интеграций и других трендов, будет вторая часть. А пока покажу, как добиться повторяемого процесса генерации дизайна в код, без сложных зависимостей и танцев с бубном.

Сделав всё по гайду, у тебя получится генерировать как минимум веб-страницу, которая:

• сделана по дизайну
• адаптивна под разные размеры экрана
• учитывает retina и non-retina дисплеи
• поддерживает локализацию с динамическим переключением языков
• и позволяет реализовать другие свои хотелки

🕵 Потыкать готовый лендингможно тут🥷 А если понравиться гайд, нужен будет ещё похожий контент про дизайн, AI и продуктовую кухню —залетай в мой TG-канал

1. Что нужно для старта

• Figma с доступом к Dev Mode для подключения Figma MCP
• AI-ассистент. Я использовал Cursor с моделью GPT 5.3 Codex(сразу скажу: в бесплатном тарифе нет смысла)
• Базовое понимание дизайна и вёрстки
• Умение формулировать мысли техническим языком. Ведь AI не умеет читать мысли. Если ты сам не понимаешь, что хочешь получить, он тем более не поймёт

2. Подготовка макета в Figma

Чтобы процесс можно было воспроизводить снова и снова, нужно соблюдать 5 простых правил. В конечном итоге внутри проекта должна получиться примерно такая структура нейминга фреймов:

• %pageName— название страницы или отдельного блока
• %type— тип состояния: default, hover, layout
• %widthScreen— ширина экрана
• %theme— тема: light, dark

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

Правило 1: Контент и ассеты

Дизайн должен содержать финальные тексты и графику. Локализацию сразу делать необязательно. Если вместо графики пока заглушки — окей, но делай их контейнеры сразу в финальных размерах.

Для дизайна, который меняет цветовое оформление, в Figma-проекте сразу заводим стили по принципу:

• Light/Primary
• Dark/Primary

Правило 2: Брейкпоинты

Всегда готовь отдельные фреймы под ключевые разрешения: 1920, 1280, 768, 375. Это база. Но ещё важнее — вынести отдельно ключевые блоки, а не только всю страницу целиком. На них будем показывать разные нюансы взаимодействия или весь контент, который скрыт (галереи, аккордеоны, карусели).

Такая структура помогает точечно работать с блоками и не заставлять AI каждый раз анализировать дизайн целиком, достаточно локализовать проблему: «Сейчас работаем только с Menu Default [1920 · Light], нужно исправить…».

В моём кейсе был следующий набор блоков: Home page, Menu, Download app button, Hero, Price, Feature, Settings, Footer.

Правило 3: Ресайз-логика

Поскольку сегодня AI всё ещё не очень уверенно интерпретирует auto layout и логику слоёв в Figma, некоторые моменты нужно буквально показывать на пальцах. Для этого делаем отдельный layout-фрейм, где показываем:

• что тянется по ширине
• что фиксировано
• где перенос в колонку
• где горизонтальный скролл
• где min-width и max-width контейнера

Да, делаем визуальную инструкцию. И да, возможно, уже через пару месяцев это будет не нужно. Но сейчас это решает большую часть проблем и сильно повышает качество результата.

Правило 4: Состояние элементов

Hover, active, disabled — это тоже отдельный фрейм, на котором важно показать состояния элементов. Можно, конечно, ссылаться на UI Kit. Но на практике проще и гибче сделать отдельный фрейм конкретного блока.

Например, для меню делаем фрейм «Menu Hover [1920 · Light]» и показываем hover у всех элементов сразу. Так AI понимает не только цвет, но и контекст. Это сильно снижает шанс, что он сделает какую-нибудь херню.

Правило 5: Переключение тем

Если макет рассчитан на переключение тем — делаем отдельный фрейм. Если цвета нормально заведены в Figma, дальше всё тянется без проблем. У меня с этим почти никогда не было боли.

Всё, база готова. Теперь время переноса. Проверьте, что Figma MCP в твоём проекте включена:

Открываем проект → Dev Mode → Inspect → MCP

• Server status = Enabled
• Image source = Download

Внимание! Ресурсы из Figma часто прилетают максимально херовыми, даже SVG. Поэтому часть файлов всё равно придётся заменять руками.

3. Перенос дизайна в код

Тут важно понять, что нужно работать с AI только поэтапно. Нет смысла закидывать конечную цель «верстай, псина», нужно как минимум понимать каждый шаг. AI должен работать строго только над конкретным шагом, иначе: код удалится, сервер сгорит, а вы услышите: «Прости, ты прав, моя вина».

Шаг 1. Фундамент

Сначала закладываем понятный контекст проекта, прописываем структуру, шаги и правила. Пишем свой первый запрос в подобном виде:

Я делаю сайт про %тема.Нужно поэтапно заверстать его через Figma MCP, ссылка на проект %ссылкаДизайн-макеты содержат основные брейкпоинты, которые отметил в названии фреймов: Home [1920 · Light] — где «1920» это размер экрана. Полный список брейкпоинтов: 1920, 1280, 768, 375. Ссылка на главную страницу с шириной 1920: %ссылкаВсе ресурсы забираем из Figma. Дизайн делаем как в макетах. Анимацию элементов делаем потом. Важно работать не на скринах, а со структурой слоёвРаботать будем этапами. Задавай мне все уточняющие вопросы

Можно сразу описать какие-то фундаментальные навигационные элементы, и на этом шаге лучше остановиться. Подождать, пока ваш любимый AI проанализирует проект, задаст пачку вопросов и поможет разбить работу на шаги.

В этот же момент можно сделать агента с правилами, который будет помогать держать контекст, не делать банальные ошибки и сохранять нервные клетки. Это один из самых важных шагов, потому что именно он превращает хаотичный вайб-кодинг в повторяемый процесс.

Шаг 2. Агент-шаблон

Мы в самом начале написания кода, и лучше сразу зафиксировать правила, чтобы неожиданно не переписывались какие-то блоки, соблюдалось переиспользование кода и так далее. Для этого делаем запрос на генерацию AGENTS_BASE.md (название может быть любым).

Вот мой пример *.md файла. Прочитай его, удали лишнее и добавь нужное конкретно под твои задачи или сгенерируйте файл самостоятельно.

И давайте сразу: писать агента на русском — это абсолютно норм и никак не влияет на качество. Я бы даже сказал, что если ты говоришь на русском, то и пиши правила на нём. Потому что ты создаёшь поведенческий паттерн для агента. Если с инглишем ок, то ок.

Шаг 3. Соединяем кусочки

После анализа, ответов на вопросы, дошлифовки агент-шаблона под проект, на руках уже должна быть работающая страница или экран. Теперь начинается самая муторная часть — итеративная шлифовка. Ты уже видишь набор несоответствий, и это нормально. Теперь ссылаемся на наши подготовленные фреймы и пишем первую инъекцию правок. Пишем их внятно и понятно, ссылаясь на конкретные фреймы, например:

В блоке Feature есть ошибки. Внутри галерея, она прокручивается по горизонтали, все карточки внутри галереи я положил в фрейм %ссылкаТакже добавляем +20px внизу контейнера, чтобы scrollbar не наезжал на контент

Думаю, схема тут понятна. Ссылаемся на заранее подготовленные состояния блоков или экранов, прописываем, что надо исправить. Как только победили все трудности, переходим к следующему блоку в дизайне. Наша задача пока только заверстать всё как в макете, уточнить логику отображения UI, какие-то мелкие эффекты.

Шаг 4. Актуальная графика

Когда адаптив работает шикарно во всех браузерах, а цветовые темы переключаются, надо поправить ресурсы. Как я писал выше, сейчас из Figma прилетают кривые SVG и растр с плохим качеством. Тут два стула:

1. Руками заменять все ресурсы с исправлением нейминга
2. Делегировать AI, явно прописав, что на что заменять. Причём ссылаться можно как на имя файла, так и на блок, в котором находится файл:

// Замена внутри блокаВ блоке Feature есть List с преимуществами, для них я подготовил нормальные SVG, они должны быть 32х32px. Замени в размеченных мной местах следующие файлы, а старые удали:- Поддержка 150 валют > ic_unlimList_BENEFIT_24- Работа оффлайн > ic_offlineMode_16// Замена конкретного файлаВ блоке Hello будет замена 457г483759734 на final-promo-light.png в размере х2 для ретина-экранов

Шаг 5. Какая-то фича

Когда дизайн готов, можно добавлять всё, о чём ты давно мечтал: переключение тем, локализацию, интеграцию. Достаточно ввести запрос. У тебя достаточно контекста и правил, чтобы AI изолированно делал нужный функционал. Если взять для примера локализацию:

Теперь делаем локализацию, она будет доступа через кнопку %buttonName, для нее нужно сделать dropdown в общей стилистикеДля начала сделаем выбор из двух языков: RU, EN. Задай все уточняющие вопросы и приступим

Так, шаг за шагом всё получится.

Важная мысль, которую я понял в самом конце

AI сильно расширяет твои возможности. Это одновременно прекрасно и опасно. Раньше ты делал, например, только дизайн, а теперь ты можешь дополнительно верстать его, локализовать, тянуть цены продукта, делать юридические страницы, шаблоны на основе готового дизайна, анимации и так далее.

Вот тут и есть ловушка. Чем больше ты берёшь на себя, тем сильнее падает внимание к деталям и качеству. Я сам это на себе очень почувствовал. Поэтому важно не впадать в истерию «я теперь full-stack everything». Иначе можно очень быстро выгореть, создавая при этом посредственный результат.