Модуль d.6: AI в веб-дизайне, вайб-кодинг и инструменты

Ведущая: Привет-привет! С вами AIStudy — бесплатный курс про искусственный интеллект, который можно слушать за рулём, в метро или на кухне. Сегодня разговор о том, как дизайнеру собирать настоящие сайты и прототипы, не набирая код руками.

Ведущий: Привет! Три вопроса. Что такое вайб-кодинг и зачем он дизайнеру. Почему у новичков все сайты выходят одинаковыми и как это лечить. И какой инструмент брать под какую задачу, в том числе из России.

Ведущая: Вайб-кодинг. Звучит как название плейлиста для работы.

Ведущий: Почти. Термин придумал Андрей Карпати, сооснователь OpenAI и бывший директор по ИИ в Tesla. Это было в феврале две тысячи двадцать пятого года. Идея такая: ты не пишешь код строчка за строчкой. Ты описываешь цель словами, смотришь на живой результат, направляешь агента и уточняешь, что не так. Сам код при этом почти не читаешь.

Ведущая: Погоди, давай на примере. Я пишу: «сделай личный кабинет студии керамики с таблицей заказов». И что?

Ведущий: Примерно через минуту видишь работающий экран. Дальше говоришь: «таблицу сделай компактнее, добавь фильтр по статусу». Агент правит, ты смотришь. Как разговор с очень быстрым подрядчиком, который никогда не устаёт.

Ведущая: И не обижается, когда в пятый раз просишь переделать.

Ведущий: Ни капли.

Ведущая: И это прижилось?

Ведущий: Ещё как. К концу того же года словарь Коллинз выбрал «вайб-кодинг» словом года.

Ведущая: Ну хорошо, а дизайнеру-то что с этого? Мы вроде рисуем, а не программируем.

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

Ведущая: Знакомая боль. Макет красивый, а в браузере всё какое-то деревянное.

Ведущий: А теперь человек со вкусом и парой ИИ-инструментов сам собирает живой, кликабельный продукт прямо в браузере. Таких людей называют дизайн-инженерами. Не потому что они стали программистами, а потому что граница между «нарисовал» и «сделал» почти стёрлась.

Ведущая: То есть гипотезу можно проверить не через неделю, а вечером, на живой странице?

Ведущий: Именно. Показать клиенту не картинку, а то, что нажимается. Это меняет разговор с заказчиком.

Ведущая: Звучит как сказка. Где подвох?

Ведущий: Подвох есть, и очень узнаваемый. Сайты-близнецы.

Ведущий: Часть вторая. Откройте десять сайтов, которые новички собрали по запросу «сделай современный лендинг». Что мы увидим?

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

Ведущий: Фиолетовый нейрослоп. Запомню. А почему так? Модель же умная.

Ведущая: Причин три. Первая: без жёстких рамок модель скатывается к среднему по больнице. Пишешь «сделай минималистично и премиально» — а это абстракция. Модель берёт самые частые решения из того, на чём училась. А самое частое как раз и есть тот самый градиент.

Ведущий: Понятно. А если я приложу скриншот классного макета?

Ведущая: Вторая причина как раз про это. Скриншот — это пиксели. Точных цветов, размеров шрифта и отступов в нём нет. Модель угадывает на глаз. На первой странице угадает один отступ, на второй уже другой.

Ведущий: То есть кнопки вроде похожи, но каждый раз чуть-чуть другие.

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

Ведущий: Выходит, чем больше правишь в чате, тем хуже?

Ведущая: Для внешнего вида — да. Чат хорош для идей и содержания. А для вида нужен единый источник правды, который лежит вне чата. Без него каждая новая страница изобретает свои размеры кнопок и карточек. С ним новые экраны сами наследуют сетку и состояния. И пустой экран, и ошибка в форме описаны заранее, а не забыты.

Ведущий: Забытые пустые экраны — вечная классика. Открыл список, а там белое ничего.

Ведущая: Вот-вот. Так что нейрослоп — не провал модели. Это следствие того, что мы не дали ей правил. Не сказали, какое именно «среднее» наше.

Ведущая: Часть третья. Хорошо, правила нужны. Но как их записать, чтобы модель поняла?

Ведущий: Обычным текстовым файлом. Его называют паспортом дизайн-системы, а по-английски DESIGN.md. Это простой текст в формате Markdown. Его кладут в корень проекта или вставляют в самое первое сообщение. Формат открытый, и его понимают и Google Stitch, и Cursor, и Claude Code.

Ведущая: И что туда писать? «Хочу красиво»?

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

Ведущая: Приятно. Не больничный белый и не синий.

Ведущий: Вторая: шкала шрифтов. Какой шрифт, какие размеры у заголовка экрана, заголовка секции, основного текста и мелких подписей, какой интервал между строк. Третья: отступы и скругления. Один базовый шаг сетки, допустимый набор отступов, радиусы для кнопок и для карточек. И сразу запрет на тяжёлые тени: блоки отделяем тонкой рамкой и воздухом.

Ведущая: А состояния? Ты про них говорил.

Ведущий: Четвёртая как раз они. Как выглядит кнопка при наведении и когда она неактивна. Как выглядит поле при ошибке: рамка другого цвета, а под ним короткая подпись, как исправить. И пустое состояние. Если в списке ничего нет, это не белый блок, а рамка пунктиром, понятная причина и одна кнопка действия.

Ведущая: Вот это продумано.

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

Ведущая: Прямые запреты?

Ведущий: Прямее некуда. Можно: брать только цвета из паспорта, разделять блоки тонкой рамкой, писать реальные русские тексты и числа. Нельзя: сине-фиолетовые градиенты, размытые цветные тени и свечение, заглушки «лорем ипсум», карточки внутри карточек глубже трёх уровней.

Ведущая: Получается, шесть слов-напоминалок: цвета, шрифты, отступы, состояния, сетка, запреты.

Ведущий: Хорошо сказано. Запоминай так.

Ведущая: Хорошо, файл есть. Куда его совать?

Ведущий: Зависит от сервиса. В Lovable и Bolt.new первым сообщением, со словами: «Используй этот паспорт как единственный источник правды для стилей, применяй только эти цвета и отступы, соблюдай таблицу можно-нельзя». В v0 прикладываешь к запросу, и он переводит цвета в переменные, так что стандартные компоненты перекрашиваются в твой стиль. В Cursor и Claude Code кладёшь файл в корень проекта и в каждой задаче ссылаешься на него.

Ведущая: А если агент всё равно выдал чужой цвет?

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

Ведущая: Тут напрашивается эксперимент. Одна и та же задача, две вкладки. В первой голый запрос, во второй тот же запрос вместе с паспортом.

Ведущий: Именно. Берёшь, скажем, личный кабинет студии керамики с таблицей заказов и карточками статистики. И сравниваешь по четырём вещам: нет ли случайных фиолетовых градиентов, чистые ли рамки, выровнены ли цифры в таблице, продумано ли пустое состояние.

Ведущий: Часть четвёртая. Паспорт есть. Теперь инструмент. Их же десяток, и каждый кричит, что он лучший.

Ведущая: Главное правило одной фразой: выбирай инструмент по слою задачи, а не по шуму вокруг него. Типичная история. Дизайнер видит в соцсетях вирусный ролик про один сервис, пытается собрать в нём многостраничный кабинет с базой данных, застревает на авторизации и решает, что вайб-кодинг не работает.

Ведущий: Забивать гвозди микроскопом.

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

Ведущий: И как это выглядит, когда выбрали по слою?

Ведущая: Кабинет с базой собран в сервисе, который сам даёт вход и таблицы. Прототип живой, с настоящим вводом данных. Лендинг собран на визуальном холсте. Слоёв пять. Первый: отдельные блоки маркетингового интерфейса, то есть таблица тарифов, карточка товара, сложная форма, первый экран. Для этого v0 от Vercel: он собирает чистые React-секции, которые потом вставляешь в проект. Но бэкенд он не строит.

Ведущий: Второй слой?

Ведущая: Быстрый прототип к пятнице. Нужно показать клиенту живой сценарий из нескольких экранов. Это Bolt.new: приложение запускается прямо во вкладке браузера, без настройки серверов. Когда прототип перерастает эту песочницу, код выгружают в репозиторий.

Ведущий: А если нужен не прототип, а настоящий продукт? С входом, пользователями, базой?

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

Ведущая: Четвёртый слой — имиджевый лендинг со сложной анимацией, портфолио, сайт с редактором контента. Для него Framer и Webflow: визуальная сборка на холсте, контроль до пикселя. А пятый — Cursor. Когда продукт уже запущен и нужно аккуратно править отдельные файлы боевого кода, не ломая архитектуру.

Ведущий: Получается лестница: секция, прототип, продукт, красота, сопровождение.

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

Ведущий: А для поиска стиля и передачи дизайна есть что-то отдельное?

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

Ведущий: А можно потом поправить?

Ведущая: С холстом можно разговаривать голосом: «сделай палитру теплее», «добавь сравнение тарифов», «покажи три варианта мобильного меню». И Stitch умеет вести тот самый паспорт, так что найденный стиль не теряется, когда дело доходит до кода.

Ведущий: А вторая вещь?

Ведущая: Figma. Там ИИ разделился на три отдельных инструмента. Figma Make превращает текстовый бриф или выбранный фрейм в кликабельное приложение. Совет к нему: сначала описывай путь пользователя и состояния. Откуда пришёл, что будет при пустом списке, сохранятся ли фильтры после кнопки «Назад». И только потом пожелания по внешнему виду.

Ведущая: Второй инструмент — сервер MCP. Раньше разработчики кормили нейросеть скриншотами из Figma и теряли переменные и сетку. Теперь агент в Cursor или Claude Code напрямую читает слои, автолейаут, переменные цветов и компоненты выбранного фрейма. А третий — Make Kits. Если в команде при генерации разъезжаются кнопки и цвета, дизайн-лид собирает набор: кодовый пакет, библиотеку стилей и правила. Какую кнопку брать для главного действия и когда она становится неактивной.

Ведущий: Запомню так: Make даёт скорость, MCP строит мост в код, а Make Kits держат дисциплину.

Ведущая: Часть пятая. Допустим, страницу собрали за десять минут. Что дальше?

Ведущий: Разложить генераторы по шагам. Первый: разведка стиля и паспорт — в Stitch или в Figma. Если для первого экрана нужны уникальные продуктовые рендеры или иконки, делаешь их в генераторе картинок. Второй: сложные секции, вроде таблицы с фильтрами, калькулятора цены или карточки дашборда, — в v0 вместе с паспортом, и забираешь готовый компонент.

Ведущий: Третий шаг зависит от цели. Нужно просто прокликать сценарий на созвоне — Bolt.new. Нужно, чтобы продукт реально регистрировал людей и сохранял заказы — Lovable. И четвёртый: проверка адаптивности и доводка в Cursor.

Ведущая: Про адаптивность. Как проверять, что не разъехалось?

Ведущий: Стресс-тест. Открой страницу на ширине мобильного экрана, как у самого маленького телефона. Замени заголовок на длинную русскую фразу слов из восьми-десяти и смотри, не поехали ли карточки и кнопки. Длинные русские слова переносятся иначе, чем английские. Проверь зоны нажатия: они не меньше сорока четырёх на сорок четыре пикселя. А если нашёл поломку, ссылайся на пятый раздел паспорта, про сетку и плотность.

Ведущая: А сам дизайн как понять, что он работает? Нужны же пользователи.

Ведущий: Для этого третья категория, UX-аналитика. Создать страницу — половина дела. Вторая половина — убедиться, что человек за первые секунды прочитал заголовок и нашёл главную кнопку. Три инструмента на три момента.

Ведущий: Attention Insight: модель, обученная на исследованиях движения глаз. Загружаешь скриншот макета и до запуска рекламы получаешь тепловую карту внимания и оценку заметности главной кнопки. Hotjar работает уже с опубликованным сайтом: записывает реальные визиты, строит карты кликов и прокрутки, а встроенный ИИ группирует жалобы и места, где люди раздражённо жмут по одному и тому же. И Maze для быстрых тестов. Даёшь людям ссылку на прототип и задание, например «найдите тариф для команды», а ИИ собирает отчёт: где воронка узкая.

Ведущая: Проверка до запуска, после запуска и на прототипе.

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

Ведущий: И последнее про выбор: не покупай десять сервисов сразу. Одного инструмента на слой хватит. Три набора по ролям. Фрилансер или соло-дизайнер: бесплатная Figma с паспортом, бесплатные тарифы генераторов кода и бесплатный Hotjar. Студия: платная Figma с Make, конструктор сайтов для клиентов и предварительная проверка макетов моделью внимания.

Ведущая: А продуктовая команда?

Ведущий: Figma с Make Kits и MCP, паспорт в корне репозитория, Lovable для проверки гипотез, Cursor для основного продукта и исследования в Maze и Hotjar.

Ведущий: Часть шестая. Последняя. Всё это хорошо, но мы-то в России. Что вообще открывается?

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

Ведущий: Выходит, строить работу на этих сервисах рискованно?

Ведущая: Главный секрет в другом. От блокировок не зависит то, что у тебя в голове и на твоём компьютере. Паспорт дизайн-системы — обычный текстовый файл у тебя дома. Умение строить запросы и выбирать инструмент по слою тоже никуда не денется. Закрылся один сервис — паспорт переезжает в другой. Поэтому не привязывайся к одному конструктору: храни паспорт у себя и приноси его в любой инструмент. Есть и приятный бонус: приложишь паспорт к первому сообщению, и не сожжёшь бесплатные лимиты на бесконечные переделки стиля в чате.

Ведущий: А если бесплатных лимитов уже мало, и нужна платная зарубежная подписка?

Ведущая: Многие в таком случае платят виртуальной картой зарубежного банка. И тут два правила гигиены. Первое: не держать на карте больше, чем нужно на одно списание. Второе: сразу после оплаты месяца отключать автопродление, чтобы не получить лишнее списание.

Ведущий: А сколько вообще нужно вложить?

Ведущая: Можно начать с нуля. Первый уровень, бесплатный: бесплатная Figma, бесплатные тарифы генераторов кода, свой паспорт и открытые бесплатные инструменты вроде Blender. Этого хватает, чтобы собрать портфолио. Второй, рабочий уровень фрилансера: к бесплатному добавляешь оплату генерации картинок и видео под конкретные заказы. Фиксированной подписки нет, платишь за то, что сделал. Третий, для продуктовой команды: платная подписка на среду разработки и конструктор продуктов, ежедневная работа с кодовой базой и бэкендом.

Ведущий: Давай соберём весь цикл на примере. Допустим, лендинг для умной колонки.

Ведущая: Давай. Шаг один: рисуем продуктовый кадр для первого экрана в сильной фотомодели, например в Nano Banana. В запросе используем цвета нашего паспорта. Беспроводная колонка на тёплом кремовом подиуме, тёмно-зелёная тканевая решётка, мягкий студийный свет, чистые тени.

Ведущая: Шаг два: векторный знак в Recraft. Он выдаёт настоящий SVG из компактных кривых, а не трассировку картинки на тысячи точек, и принимает точные цвета из паспорта. Делаем двухцветный знак в той же палитре. Шаг три, по желанию: если на лендинге нужен объёмный объект, превращаем рендер колонки в трёхмерную модель.

Ведущий: А потом сборка?

Ведущая: Шаг четыре. Открываем Bolt.new, если нужен быстрый прототип, или Lovable, если нужна форма предзаказа с сохранением заявок в базу. Вставляем паспорт в первое сообщение, подключаем картинки и знак. И проверяем по списку против нейрослопа: цвета строго из паспорта, работают состояния наведения, неактивности, пустого экрана и ошибки, нет «лорем ипсум», на узком экране вёрстка аккуратная.

Ведущий: Два вопроса себе. К какому слою относится ваша ближайшая задача: секция, прототип, продукт, лендинг или доработка?

Ведущая: И что вы запишете в паспорт первым: цвета, шрифты или запреты?

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

Ведущая: Картинки и задания к этим урокам ждут на сайте.

Ведущий: Дальше в курсе модуль про Figma AI и прототипирование: от запроса до кликабельного макета. А если хочется попробовать разные нейросети в одном месте, без VPN и с оплатой рублями, это наш сервис arckep.ru.

Ведущая: Спасибо, что слушали!

Ведущий: До встречи!