Вайбкодинг против старой школы: что делать дизайнерам в эпоху ИИ?

Недавно ко мне пришел начинающий дизайнер с неожиданным вопросом: стоит ли учить WordPress для создания сайтов с нуля? Поначалу я уходила от темы, предлагая посмотреть на что-то посвежее, типа Tilda или Webflow. Сравнивала с ситуацией в 2014, когда альтернатив собрать сайт без знания кода было немного.

Но потом решилась. И сказала то, в чем сама себе боялась признаться: «Есть нешуточная вероятность, что нашей профессии скоро не будет».

Почему тогда курсы до сих пор обещают легкий вход в индустрию, удаленную работу из любой точки мира, а лиды бигтехов зарабатывают на консультациях — и к ним идут?

А потому что, по моим наблюдениям, индустрия раскололась на два лагеря. Они живут в параллельных вселенных, в одной из которых новички идут за советом к старшим, уверенным в своей незаменимости. Во второй — те, кто без знаний базы веб-дизайна идут и вайбкодят сайты, блистая эффектом Даннинга-Крюгера, за что получают по шапке от «старичков».

Покупая билет в первую, новичок вынужден перейти во вторую, потому что работодатели все чаще требуют владеть нейросетями. А параллельно дизайнеры-сеньоры кошмарят в комментариях работы, сделанные через ИИ: «Невозможно без опыта ^[1] сгенерировать сайт, решающий задачи бизнеса».

Совсем недавно я тоже считала, что вот с моим-то огромным опытом бояться нечего. Ага)

Давайте сравним

С веб-дизайном я познакомилась в 2005 году. Начинала с кривого HTML на narod.ru, продолжала в Joomla, WordPress и постоянно вылетающем Фотошопе с макетами по 200+ мегабайт. Потом, как и все, перешла в Фигму — короче, прошла все стадии эволюции.

Возьмем реальный пример из 2014 года, на который ушло несколько часов работы, и посмотрим, что сделает нейросеть по описанию этого экрана.

Вот что получилось за пару минут с готовой реализацией в HTML. Claude за один промпт выполнил все пожелания, использовал шрифт Unbounded (думаю, тут даже учтен контекст — его любят в афишах и анонсах мероприятий). Фильтры по сферам он добавил сам, я не просила об этом.

Простим ему висящие предлоги, заглушки в баннере и чуть зажеванный хедер: согласитесь, неплохо?

Но «неплохо» — это не объективно. Представим, что дизайнер навайбкодил сайт и выкатил, как есть. Как ему понять, не фигню ли он сделал?

Я сама иногда не понимаю

В момент, когда готовишь ревью работы дизайнера, стараешься добавить хоть какой-то измеримой объективности в проверку, кроме «я опытнее и считаю, что так надо». А поскольку просьбы «Можешь глянуть макет?» сыпятся бесконечным потоком, в какой-то момент просто захотелось облегчить себе жизнь и не отвечать на одни и те же вопросы.

Недавно я создала инструмент для проверки качества HMI-интерфейсов и написала об этом статью ^[2]. Но люди грузили туда просто сайты! Проверка выдавала бессмысленный результат, потому что у HMI свои правила: например, 50 мм между аварийными кнопками, и перчатки, в которых эти кнопки нажимают.

Пришлось сделать отдельную версию ^[3] для обычных сайтов и приложений. Анализ дизайна опирается на общие стандарты — WCAG 2.2, Apple Human Interface Guidelines и Material Design, а рекомендации привязаны к измеряемым нарушениям.

Можно ли доверять ИИ?

В начале 2026 года NN/g выпустила интервью ^[4] с основателями Baymard про точность ИИ-аудитов. В 2023 году точность GPT-4 была всего 20%, а в свежем исследовании ^[5] Baymard UX-Ray 2.0 заявлено 95% точности инструмента против человеческих аудиторов на 79 сайтах электронной коммерции. Результаты публичных тестов нескольких подобных инструментов — 50-75%.

Как пишет сам Baymard, одно неверное решение в UX может привести к астрономическим бизнес-затратам, поэтому дизайн-чекер измеряет то, что можно проверить в цифрах, а остальное честно помечает как оценку или прогноз. Алгоритм подсвечивает, на что обратить внимание ^[6] в интерфейсе, а не заменяет живого эксперта.

На рынке есть Lighthouse для кода, Stark для Figma, отдельные платные тепловые карты. Но инструмента, который по одному скриншоту одновременно посчитает контраст, размеры кнопок с расстояниями между ними, покажет тепловую карту и выдаст готовые промпты для правок, я не нашла.

Поэтому собрала набор правил под самые частые ошибки ^[7] и сделала его сама с помощью Claude. Инструмент работает без фантазий языковых моделей и не оценивает красоту сайтов, он использует обычное компьютерное зрение ^[8], а также формулы и нормы стандартов.

Фан-факт: «страшненькие» по визуалу зарубежные сайты типа Amazon, Adobe, Lufthansa и др. проходят все проверки.

Посмотрим, что получилось после прогона двух наших скриншотов через чекер:

Сравнивать с проектом 2014 нечестно по технологиям, поэтому важны не баллы, а что именно нашлось, а также сам путь до результата. Тогда это были дни работы дизайнера, а теперь пара минут и один промпт. Контраст 2:1 не проходил и в олдскульной версии (WCAG 2.0 опубликован в 2008 году), просто это никто не измерял, а сайт при этом работал и радовал посетителей несколько лет.

С помощью тепловой карты мы можем проверить визуальную иерархию, контролировать зоны CTA, обнаружить визуальный шум и увидеть естественный паттерн движения взгляда.

По базовым правилам дизайн в Claude прошел. Так что все реплики в духе «фу, это же сайт, сделанный нейросетью» не супер корректны.

Клиентам, кстати, вообще наплевать, как вы это сделаете)

Чему не научат курсы

Курсы продают вход через ту часть, которую уже заменила нейросеть — навык реализации дизайн-макетов. Как эти навыки потом продавать, на курсе по дизайну вряд ли расскажут (либо это очень хороший курс).

Всем новичкам я всегда рекомендую осваивать базовые знания бесплатно, сразу практиковаться с нейросетями — в том числе, с подобными автоматическими проверками по устоявшимся правилам.

И конечно, не забывать ^[9] про сообщества и набираться знаний у коллег.

Чему стоит учиться

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

Исправить контраст можно будет в один клик, но нужно ли вообще второстепенным кнопкам быть заметнее — решает человек.

Вне зависимости от изменений рынка, дизайнерам стоит развивать:

1. Любопытство. Нейросеть не предложит референс, о котором вы не спросили. Чтобы сказать искусственному интеллекту ^[10] «Нарисуй, как будто ты Энди Уорхол», нужно понимать, кто это такой. Разбираться, чем брутализм отличается от швейцарского стиля, скевоморфизм от неоморфизма, гротеск от антиквы — ну и в том духе.

2. Понимание контекста. Кто пользователь, где он, что ему мешает. Оператор на заводе, бабушка на Госуслугах, инвестор с телефона. Из промпта «сделай сайт вакансий» без уточнения, для кого мы его делаем, может получиться значительно хуже.

3. Отбраковка. Увидеть, что сгенерированное — правдоподобная ерунда. Нейросеть выдает и хорошее, и плохое, а различать — наша работа.

4. Умение говорить «нет». Убрать лишнее, отказаться от фичи, переубедить заказчика. Нейросеть добавит что угодно, но везде должен побеждать здравый смысл.

5. Ответственность. Защитить решение перед клиентом и отвечать, если оно не сработало.

Но это практика и опыт, курсы тут почти бессильны.

Куда пойти дизайнеру-новичку

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

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

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

Что делать, если начальник вайбкодит

Вайбкодить лучше него. Серьезно)

Спорить о вкусе ^[11] бесполезно, особенно когда «и так сойдет»: работают только цифры. Предлагайте то, чего нет в промпте (аудит, доведение продукта до ума, ответственность за результат), и аргументируйте бизнес-потерями. Без нас не обойтись в разработке и контроле правил, по которым живет дизайн в компании.

Тот же совет, что и новичкам: присмотреться к сферам с высокой ценой ошибки. Или к госсектору с его требованиями доступности (ГОСТ Р 52872-2019) и экспорту: в Евросоюзе с июня 2025 года действует European Accessibility Act. Там «навайбкодил и выкатил» не прокатит.

А что бы вы порекомендовали ребятам, которые только приходят в профессию? И как зарабатываете сами, когда сайт за вечер собирает нейросеть?