Получаем чистый кайф от программирования, или что такое «вайб-кодинг»

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

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

Что такое вайб-кодинг

Термин «вайб-кодинг» впервые использовал AI-инженер из Tesla и Open AI Andrej Karpathy на своей страничке в Твиттере:

Если кратко, то суть примерно такая:

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

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

Вот, например, еще один твиттерский сделал Candy Crush всего одним промптом:

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

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

Что говорят айтишники

На Реддите есть вот такой недавний тред с кликбейтным заголовком: «Вайб-кодинг — просто унизительное занятие для новичков. Говорю это как человек, который обожает вайб-кодинг и использует его впервые в тех областях, в которых плохо ориентируюсь».

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

В комментах ему ответили, что вайб-кодинг очень помогает, если хочешь научиться чему-то новому:

Автор согласился и сказал, что это действительно так: люди переоценивают возможности ИИ, и без знаний программирования все рухнет. А еще в комментах было предположение, что SwiftUI — довольно узкая тема, поэтому нейронки не могут работать с ним в полном объеме. А вот простой React — совсем другое дело.

Есть ли польза от вайб-кодинга

На самом деле, да. Особенно это касается владельцев бизнеса, диджатальщиков и в целом тех, кто работает с контентом. Например, если редакции журнала нужно создать пример какого-то интерфейса, сайта или мини-игры, то они могут не нанимать специального кодера и не тратить время собственной команды разработки. Или, например, бизнесу нужно создать простой лендинг или приложение с минимальным UI — здесь тоже на помощь приходит вайб-кодинг.

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

Недавно эксперты посчитали, что к 2027 году количество строк кода, написанных ИИ, увеличится на 25%. Уже сейчас нейросети закрывают 5-10% рутинных задач, а в будущем этот процент станет еще выше.

А вот Дарио Амадей — CEO Anthropic и создатель ClaudeAI — и вовсе заявил, что программисты закончатся всего через год. По его словам, через полгода нейронки будут писать до 90% кода, а через год — и вовсе весь. В США, кстати, уже упал спрос на прогеров. Но здесь важно сделать ремарку от редакции: пока нет нейронок, которые могут написать полностью безопасное приложение. Его нужно тестировать и проверять на ошибки.

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

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

А теперь — делаем свой простой сайт

Сейчас мы попробуем создать классный сайт с приглашением на вечеринку и простой формой пожеланий по еде. Использовать будем Grok. Вот первый промпт:

			Создай сайт-приглашение на вечеринку, который можно будет отправить друзьям. 
На сайте должно быть несколько блоков: 
1. Дата и время вечеринки и текст «Приглашаем на самую безумную вечеринку этого лета» 
2. Тайминг мероприятия Я
3. Вишлист 
4. Форма пожеланий по алкоголю, из которой ответы будут собираться в Google-таблицу 
5. Кнопка для принятия приглашения с текстом «Я в деле!» 
Оформи приглашение в розовых тонах, можно в ярко розовых. 
Добавь фигуры сердечек и бокалов шампанского в виде графики. 
Шрифты должны быть простыми, но довольно крупными. 
Также используй закругленные углы на элементах и полупрозрачные элементы.
		

А вот первый результат. Кажется, очень неплохо! Grok создал HTML-код и дал подробную инструкцию, как прикрутить гугл-таблицы и залить сайт на Гитхаб, чтобы он открывался по ссылке. А еще доступен предпросмотр прямо в интерфейсе — очень удобно.

Единственное, кажется, что приглашение немного пустовато. Напишем еще один промт:

			Увеличь размер фона и добавь на него полупрозрачные пузыри. 
Сделай блоки больше по размеру и стилизуй шрифты. 
Сделай их гораздо крупнее и жирнее. 
Также добавь мемоджи людей, чтобы сайт смотрелся более наполненным. 
Сделай форму с выбором алкоголя: 1) крепкий алкоголь 2) игристое 3) вино 4) я не пью!  
В первый блок с самим приглашением добавь графику вечеринки: это должна быть лужайка с шарами, 
на которой веселятся люди. Также сделай фигурки сердец и бокалов более крупными.
		

Теперь сайт выглядит вот так:

Все еще не идеальный вариант. Давайте попробуем доработать форму и сделать тайминг в виде таймлайна:

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

Кажется, получилось:

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

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

Ожидание:

Реальность:

Что ж, попробуем исправить:

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

Ну, допустим:

В целом у нас получился действительно неплохой сайт-приглашение. Немного изучили моменты, как подкрутить гугл-форму и захостить сайт — все работает. Если же у вас большой опыт во фронтенде, то сможете доработать сайт по ИИшному коду, например, добавить картинки, другие интерактивные элементы и различные приколы. Ставим лайк!

А вы — обязательно попробуйте вайб-кодинг и делитесь своими творениями в комментах.