Дизайнер отдаёт макет и ждёт. Неделю, две, спринт. Потом получает вёрстку, где отступы уехали, тени плоские, а анимация, ради которой всё затевалось, не приехала вовсе. Знакомая история, которая в 2026 году перестала быть обязательной.
Вайбкодинг дал дизайнеру возможность собрать работающий интерфейс словами: вы описываете, что нужно, нейросеть пишет код, вы правите результат следующим сообщением. Речь про прототип, юзертест и разговор с командой. Боевой продукт так пока не собирают. И этого хватает, чтобы закрыть больше половины ситуаций, в которых раньше приходилось занимать чужое время.
В этой статье разобрали восемь задач дизайнера, которые закрываются без разработчика, чем их собирать в 2026 году, сколько это стоит в рублях и где проходит граница, за которую лезть не стоит. Отдельно разобрали Figma MCP, главное событие с темой за последний год.
CheckroiПодборка курсов по Figma354 курса • 50 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Если про сам подход слышите впервые, начните с обзорной статьи «Вайбкодинг: что это, как работает и с чего начать», там разобрали термин, инструменты и первые проекты.
Материал продолжает серию по профессиям: до этого выходили разборы для маркетолога и продакт-менеджера. У дизайнера задачи другие, поэтому и набор инструментов отличается.
А если хочется освоить навык системно, а не урывками, загляните в подборку курсов по вайбкодингу, где собраны программы от коротких интенсивов до полноценных курсов с проверкой домашних заданий.
CheckroiПодборка курсов по вайбкодингу22 курса • 9 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Что такое вайбкодинг и чем он отличается от конструкторов
Вайбкодинг — это способ получить работающую программу, описав её словами. Вы пишете нейросети «сделай карточку товара с фото, ценой и кнопкой в корзину, стиль как в приложенном макете», она пишет код, вы смотрите результат и просите поправить. Термин ввёл Андрей Карпатый, один из основателей OpenAI, в начале 2025 года.
Дизайнеру важно отличать вайбкодинг от двух соседних вещей, которые он уже знает.
Конструкторы вроде Tilda или Readymag дают готовые блоки, которые вы двигаете мышкой. Быстро, но вы ограничены тем, что придумали авторы конструктора. Шаг в сторону требует встроенного HTML-виджета.
Прототипирование в Figma связывает экраны переходами, но внутри остаются картинки. Форма не принимает ввод, список не фильтруется, счётчик не считает.
Вайбкодинг даёт настоящий код. Кнопка нажимается, поле проверяет ввод, данные сохраняются. Взамен появляется то, чего вы раньше не видели: репозиторий (папку проекта со всеми файлами и историей правок), сборку, деплой (публикацию на реальном адресе в интернете).
Главное отличие для дизайнера. В конструкторе вы собираете из чужих деталей, в прототипе показываете картинку, а в вайбкодинге получаете живой интерфейс, который можно дать человеку и посмотреть, как он им пользуется.
Надо ли дизайнеру уметь программировать
Это первый вопрос, который останавливает большинство. Короткий ответ: писать код с нуля не нужно, но совсем без понимания устройства сайта будет тяжело.
Минимум, который стоит иметь в голове, укладывается в четыре пункта. Первое: страница состоит из вложенных блоков, и отступ у элемента может задаваться как снаружи, так и изнутри. Второе: одни и те же данные могут отображаться по-разному на разной ширине экрана. Третье: у элемента бывают состояния, и их нужно описывать отдельно. Четвёртое: проект живёт в папке с историей изменений, и любую поломку можно откатить.
Всё это дизайнер уже знает по работе с автолейаутом, компонентами и вариантами в Figma. Разница в словах, а не в принципах.
Страх сломать проект обычно тоже преувеличен. Пока вы работаете в своей копии, максимум, что вам грозит, это потратить кредиты и вернуться на шаг назад. Опасность появляется только там, где вы получаете доступ к общему репозиторию команды, и там правила доступа выдаёт разработчик.
Канал основателя Checkroi Вани Буявца3 700 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяОриентир по времени. На первый собранный экран уходит вечер, на уверенное владение одним инструментом уходит три-четыре проекта. Это ближе к освоению нового плагина, чем к изучению профессии.
Восемь задач дизайнера, которые закрываются без разработчика
Список собран по тому, что дизайнеры делают чаще всего и что упирается в чужую очередь.
Задача 1: кликабельный прототип с живой логикой
Форма записи, где поля правда проверяются, а после отправки показывается экран благодарности. В Figma это три статичных фрейма и вера в воображение зрителя. В коде это работающая форма, которую можно дать пяти пользователям и посмотреть, где они спотыкаются.
Разница вылезает на мелочах, которые в макете не видны. Человек вводит телефон в неожиданном формате, промахивается мимо кнопки на мобильном, возвращается назад и теряет заполненное. В прототипе с настоящей логикой такие вещи находятся за полчаса наблюдения.
Задача 2: генерация UI-компонента по описанию
Нужен селектор диапазона дат, таблица с сортировкой, карусель отзывов. Описываете поведение словами, получаете рабочий компонент за минуту. Дальше правите промптом: «сделай отступы 24, скругление 12, состояние hover темнее на 10 %».
Задача 3: лендинг по собственному макету
Самая массовая задача. Макет уже нарисован, разработчика на него не дадут, потому что это промо на две недели. Собираете сами и публикуете.
Тут вайбкодинг выигрывает у конструкторов ровно там, где заканчивается их библиотека блоков: нестандартная сетка, своя анимация появления, календарь под конкретную механику акции. В Tilda это упирается во встроенный HTML-виджет, в коде решается описанием.
Задача 4: проверка гипотезы на реальных данных
Хотите понять, как каталог выглядит не на восьми выдуманных карточках, а на трёхстах реальных. Загружаете выгрузку и смотрите, что стало с сеткой, длинными названиями и пустыми фото.
Именно здесь разваливается половина красивых макетов. Название в три строки ломает высоту карточки, товар без скидки оставляет дырку на месте зачёркнутой цены, а фильтр по двадцати категориям не помещается в задуманную колонку.
Задача 5: интерактивная презентация дизайн-системы
Вместо PDF со скриншотами получается страница, где компоненты живые, состояния переключаются, а токены видно в коде. Разработчик открывает и сразу понимает, чего вы хотите.
Это снимает самую дорогую часть передачи макета в работу, ту самую, из-за которой в командах появилась отдельная роль дизайнера-верстальщика: человека, который переводит задумку в разметку без потерь.
Задача 6: микро-инструмент для себя
Генератор палитры под конкретный бренд, счётчик контраста по вашим правилам, конвертер размеров между макетом и реальными экранами. Пятнадцать минут работы, а пользуетесь месяцами.
Задача 7: правки в уже существующей вёрстке
Отступ не тот, шрифт подгрузился не тот, кнопка на мобильном уехала. Мелочь, из-за которой не хочется дёргать фронтенд. С доступом к репозиторию правите сами и отдаёте готовое изменение.
Такие правки обычно и копятся месяцами в списке задач с низким приоритетом. Дизайнеру они важны, разработчику неинтересны, и до них никогда не доходит очередь. Это самый недооценённый сценарий из всего списка. Похожая логика работает и в соседних профессиях: маркетолог так собирает парсеры и дашборды, не занимая спринт.
Задача 8: витрина портфолио
Свой сайт с кейсами, который выглядит как вы хотите, а не как позволяет шаблон. Заодно первый проект, на котором осваиваете подход.
Figma MCP и главное, что изменилось за год
Раньше связка «дизайн в код» работала через скриншот: вы кидали нейросети картинку макета и надеялись, что она угадает размеры. Угадывала плохо.
В 2026 году появился Figma MCP. MCP расшифровывается как Model Context Protocol, открытый стандарт от Anthropic, по которому нейросеть подключается к внешним программам напрямую. Figma сделала по нему собственный сервер, и теперь ИИ-агент забирает из макета не картинку, а данные: точные размеры, названия слоёв, переменные, структуру компонентов.
Что агент видит в вашем файле
- размеры, отступы и правила автолейаута;
- переменные и стили — цвета, типографику, скругления (их называют дизайн-токенами: это ваши значения, вынесенные в отдельный список, чтобы менять в одном месте);
- структуру компонентов и их варианты;
- содержимое текстовых слоёв.
Разница ощущается сразу: сгенерированный интерфейс попадает в вашу сетку, а не в среднестатистическую.
Обратный ход из кода в макет
В феврале 2026 года Figma и Anthropic запустили функцию Code to Canvas: сгенерированный интерфейс возвращается на холст Figma редактируемыми слоями, а не плоской картинкой. Позже сервер получил инструмент use_figma, через который агент правит макет прямо в файле по вашим правилам.
Для дизайнера это меняет расстановку сил. Раньше код был односторонней улицей: отдал макет и потерял контроль. Теперь правки ходят в обе стороны, и файл остаётся вашим.
Как подключить
Нужен платный тариф Figma с доступом к Dev Mode и любой ИИ-редактор, который умеет в MCP: Claude Code, Cursor или Windsurf. В Claude Code сервер добавляется одной командой, дальше авторизация через браузер и проверка статуса командой /mcp. У тарифов есть лимиты обращений: на младших местах их совсем немного, на Professional счёт идёт на сотни в день, поэтому актуальные цифры смотрите в справке Figma перед покупкой.
CheckroiПодборка курсов по Cursor25 курсов • 11 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Важный нюанс. Качество результата упирается в порядок в файле. Макет на автолейауте, с переменными и нормально названными слоями превращается в приличный код. Макет из свободно раскиданных прямоугольников с именами Frame 127 не превращается ни во что.
Чем это собирают
Инструментов много, но дизайнеру достаточно понимать четыре сценария.
| Инструмент | Что делает | Кому подойдёт |
|---|---|---|
| Figma Make | Собирает работающий прототип прямо из макета, не выходя из Figma | Тем, кто не хочет учить новую программу |
| Lovable | Делает целое приложение с базой данных и авторизацией по описанию | Проверки продуктовой гипотезы целиком |
| v0 by Vercel | Генерирует отдельные интерфейсные компоненты на React и Tailwind | Тем, кто собирает интерфейс по кусочкам |
| Bolt.new | Собирает сайт целиком в браузере, сразу с публикацией | Быстрых лендингов и промо |
| Cursor и Claude Code | Работают с настоящим проектом команды и подключаются к Figma MCP | Правок в живой вёрстке и работы с дизайн-системой |
Что брать, если непонятно. Начните с Figma Make: он живёт внутри инструмента, который вы и так открываете каждый день, и не требует разбираться с репозиториями. Когда упрётесь в его потолок, переходите на v0 для отдельных компонентов или на Lovable, если нужно приложение целиком.
Из технических слов вам встретятся два. React собирает интерфейс из повторяемых блоков, идея та же, что у компонентов в Figma. Tailwind описывает стили короткими пометками прямо в разметке. Специально их учить не нужно, но в сгенерированном коде вы их увидите.
Разбор редакторов для более серьёзной работы есть в отдельном материале «Cursor против Windsurf и Claude Code». А если Figma пока не освоена до конца, пригодится инструкция «Как сделать Figma на русском языке».
Что проверить перед показом
Сгенерированный интерфейс выглядит убедительно ровно до того момента, как его открывает кто-то другой. Короткий список, который спасает от неловких демонстраций.
- Узкий экран. Сузьте окно браузера до ширины телефона. Ломается это первым.
- Длинный текст. Вставьте название из двенадцати слов и посмотрите, что стало с карточкой.
- Пустое состояние. Уберите данные. Пустой список без объяснения выглядит как поломка.
- Медленный интернет. Проверьте, что видит человек, пока картинки грузятся.
- Клавиатура. Пройдите по форме табом. Если фокус прыгает хаотично, интерфейс недоступен части пользователей.
Пять минут на этот список экономят разговор в духе «а почему у тебя всё разъехалось» на встрече с командой. Подробнее про то, чем занимаются дизайнеры разных направлений, мы писали в материале «Виды дизайнеров».
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналСколько это стоит
Порядок цен на осень 2026 года такой. Lovable и Bolt стартуют примерно от 25 долларов в месяц, v0 держится в той же вилке, Cursor стоит около 20 долларов, подписка Claude начинается там же. Figma Make отдельно не продаётся и входит в платные места Figma.
Почти везде есть бесплатный уровень: несколько кредитов в день или лимит генераций в месяц. Для «попробовать и понять, моё ли это» хватает с запасом, и начинать платить сразу смысла нет.
Сложнее всего обстоит дело с оплатой из России. Прямая привязка российской карты у большинства зарубежных сервисов не работает, и платят обычно через зарубежную карту или посредника. Это добавляет к цене комиссию, поэтому бесплатные уровни на старте выручают вдвойне.
Считать бюджет лучше не по цене подписки, а по кредитам. Один приличный лендинг съедает около двадцати кредитов, и месячного пакета младшего тарифа хватает примерно на пять проектов. Если правите один экран по двадцать раз, кредиты кончатся быстрее, чем месяц.
Где проходит граница
Вайбкодинг закрывает прототипы, промо и внутренние инструменты. Дальше начинается зона, куда дизайнеру одному лезть не стоит.
- Всё, что связано с деньгами и персональными данными. Оплата, личные кабинеты, хранение документов. Ошибка тут стоит не переделки, а штрафа.
- Продакшен под нагрузкой. Сгенерированный код работает на демо и разваливается на тысяче одновременных пользователей.
- Интеграции с внутренними системами компании. Там свои правила доступа, и обходить их через сгенерированный скрипт нельзя.
- Долгая поддержка. Код, который вы не понимаете, через полгода придётся кому-то читать.
Простое правило: если результат живёт дольше месяца или к нему имеют доступ посторонние люди, зовите разработчика.
Как не поссориться с фронтендом
Самый частый конфликт выглядит так: дизайнер приносит сгенерированный код и просит «просто вставить». Разработчик открывает и видит чужой набор библиотек, свою систему отступов и компоненты, дублирующие существующие. Вставить это в проект дороже, чем написать заново.
Работает другой договор. Вы приносите не код, а работающий пример: вот так это должно себя вести, вот такие состояния, вот здесь анимация. Разработчик смотрит на поведение и реализует его в своей архитектуре. Экономия появляется на этапе обсуждения, где обычно теряется больше всего времени.
Формулировка, которая снимает напряжение. «Я не прошу брать мой код в проект. Я показываю, как это должно работать, чтобы мы не обсуждали это текстом три итерации».
Как ставить задачу, чтобы получилось с первого раза
Плохой промпт звучит как «сделай красивую карточку товара». Хороший описывает четыре вещи: что за элемент, что в нём лежит, как он себя ведёт и по каким правилам оформлен.
Рабочий шаблон:
- Элемент. «Карточка товара для каталога, ширина 320».
- Содержимое. «Фото 4:3, название в две строки с обрезкой, цена, старая цена зачёркнутая, кнопка в корзину».
- Поведение. «При наведении карточка приподнимается, кнопка меняет текст на В корзине после нажатия».
- Оформление. «Скругление 12, тень мягкая, шрифт Inter, основной цвет #2E5BFF, отступы кратны 8».
Дальше правьте по одному изменению за раз. Список из восьми правок в одном сообщении нейросеть выполнит наполовину, и вы не поймёте, что именно сломалось.
Пять ошибок, которые встречаются чаще всего
Ошибка 1: начинать с пустого места
Дизайнер просит собрать интерфейс с нуля, хотя макет уже есть. Результат приходит чужой. Подключайте макет через Figma MCP или хотя бы задавайте цвета и шрифты в промпте.
Ошибка 2: доверять первому результату
Первая генерация выглядит убедительно на экране и разваливается на узком окне. Проверяйте мобильную ширину сразу, а не перед показом заказчику.
Ошибка 3: копить правки
Двадцать замечаний в одном сообщении дают непредсказуемый результат и сжигают кредиты. Правьте по шагу.
Ошибка 4: показывать прототип как готовый продукт
Заказчик видит работающий интерфейс и решает, что осталось нажать кнопку. Проговаривайте статус вслух: это прототип для проверки, до продакшена ему далеко.
Ошибка 5: бросать после первого провала
Первые два-три проекта выходят кривыми у всех. Навык набирается на пятом, и бросать раньше просто рано.
С чего начать за один вечер
План на три часа, после которого станет понятно, ваше это или нет.
- Первый час. Возьмите готовый макет одного экрана и соберите его в Figma Make. Ничего не настраивайте, просто посмотрите на результат.
- Второй час. Поправьте промптом пять вещей: отступы, цвет кнопки, поведение при наведении, поведение на мобильном, текст заголовка.
- Третий час. Опубликуйте и откройте с телефона. Дайте ссылку коллеге и посмотрите, как он ей пользуется.
Этого хватит, чтобы понять главное: где инструмент экономит вам день, а где отнимает вечер.
CheckroiПодборка курсов для UX/UI-дизайнеров100 курсов • 29 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Что меняется в профессии
В вакансиях продуктовых дизайнеров всё чаще встречается строчка про умение собрать прототип самому. Это не требование писать код профессионально, а ожидание, что вы принесёте работающий пример вместо картинки.
Профессия от этого не исчезает. Нейросеть собирает интерфейс по описанию, но не решает, каким он должен быть, не понимает, зачем пользователь пришёл, и не спорит с заказчиком о сценарии. Инструмент забрал ручную часть работы и оставил ту, ради которой дизайнера и нанимают.
Смежные направления разобрали отдельно: кто такой нейродизайнер, какие вообще бывают дизайнеры и сколько зарабатывает UX/UI-дизайнер.
Где научиться
Осваивать можно по роликам, но на курсе вы получаете проверку работ и порядок тем: сначала основы, потом инструменты, потом собственный проект. Для дизайнера это экономит недели блужданий по чужим советам.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Вайбкодинг для начинающих Перейти на сайт курса |  TeachMeSkills | 30 000 ₽ | 181 666 ₽/мес. | 1 месяц | Обзор курса |
| Вайб-кодинг — программирование с ИИ Перейти на сайт курса |  Академия ТОП | Бесплатно | 54 900 ₽/мес. | Обзор курса | |
| Вайб-кодинг для заработка Перейти на сайт курса |  Skillbox | 85 000 ₽ | 3542 ₽/мес. | 4 месяца | Обзор курса |
| Вайб-кодинг для начинающих Перейти на сайт курса | Skillbox | 55 000 ₽ | 2292 ₽/мес. | 2 месяца | Обзор курса |
| Вайб-кодинг для бизнеса Перейти на сайт курса |  Эдюсон | 83 800 ₽ | 6983 ₽/мес. | 2 месяца | Обзор курса |
| Онлайн-курсы вайбкодинга. Перейти на сайт курса |  МШП | 11 400 ₽ | 950 ₽/мес. | 5 недель | Обзор курса |
| Практический курс по вайб-кодингу на Claude Code Перейти на сайт курса |  Zerocoder | 29 900 ₽ | 1246 ₽/мес. | Обзор курса | |
| Вайб-кодинг Перейти на сайт курса | Zerocoder | 39 900 ₽ | 1663 ₽/мес. | Обзор курса | |
| ИИ-дизайнер Перейти на сайт курса | Skillbox | 34 900 ₽ | 2908 ₽/мес. | 2 месяца | Обзор курса |
| Нейросети для создания сайтов и приложений Перейти на сайт курса |  Нетология | 120 800 ₽ | 3390 ₽/мес. | 6 месяцев | Обзор курса |
Больше программ — в полном каталоге курсов по вайбкодингу
Если хочется усилить базу профессии, а не только добрать навык, смотрите курсы UX/UI-дизайна и программы по Figma.
Что в итоге
Вайбкодинг не делает дизайнера разработчиком и не отменяет фронтенд. Он снимает зависимость от чужой очереди в тех задачах, где раньше приходилось ждать: прототипы, промо, внутренние инструменты, мелкие правки.
Начните с одного экрана в Figma Make сегодня вечером. Через месяц регулярной практики вы перестанете рисовать статичные заглушки там, где можно показать живой интерфейс.
