Что за зверь этот ваш вайбкодинг и зачем он маркетологу

О вайбкодинге рассказал маркетолог компании «Аспро» Никита Лошин.

Представьте, что вы можете за день самостоятельно реализовать любую идею на сайте: добавить калькулятор, собрать виджет или сделать интерактив. И для этого вам не нужна помощь разработчиков. Звучит как фантастика? Я тоже так думал, пока не попробовал вайбкодинг. Теперь мне достаточно написать в чате с нейросетью, какой элемент я хочу видеть на сайте, внести правки — и получится готовый код. Главное, что для этого совсем не нужно уметь программировать.

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

• Что такое вайбкодинг и чем он полезен для маркетолога
• Как можно использовать вайбкодинг
• Как вайбкодить с помощью ChatGPT
• Что нужно знать, чтобы получать качественный код

Что такое вайбкодинг и чем он полезен для маркетолога

Вайбкодинг (англ. vibe coding, от vibe — «ощущение, атмосфера») — способ написания компьютерного кода с помощью нейросетей без навыков программирования. Его используют, например, для автоматизации рабочих процессов, создания чат-ботов, дашбордов, интерактивных элементов сайта.

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

Маркетолог всегда ищет новые способы привлечь и удержать пользователей. Для этого ему нужно быстро проверять идеи и внедрять новые элементы. Но есть проблема: у разработчиков почти никогда нет на это времени. Они чинят баги, делают крупные обновления, а мелкие маркетинговые задачи откладывают в длинный бэклог.

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

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

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

Как можно использовать вайбкодинг

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

Виджеты для сайта

Для акционного лендинга мы создали интерактивный блок. Пользователь двигает ползунок и видит, как будет развиваться проект, если он закажет разработку сайта сейчас.

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

Калькуляторы

Для нашего финансового направления мы создали простой калькулятор для расчёта затрат на финучёт. Цель — быстро показать преимущество нашего сервиса перед ручным ведением Excel-таблиц. Программиста привлекали только для вёрстки страницы.

Затем мы разработали чуть более сложный калькулятор для расчёта потерь сайта без SEO-продвижения. В нём появились коэффициенты, учитывающие тип и возраст сайта. Для привлечения внимания к блоку записали видеовиджет и добавили баннер в меню.

Таблицы

Как оказалось, вайбкодинг полезен и при работе с «Google Таблицами». Мы дорабатывали услугу, в рамках которой проверяем сайты клиентов по чек-листу. Чтобы быстрее определять приоритеты, добавили столбец с уровнем критичности.

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

Как вайбкодить с помощью ChatGPT: на примере

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

Для вайбкодинга я использую ChatGPT 5. Если нет дизайнеров, дополнительно можно подключить нейросети для генерации изображений.

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

Результат можно отслеживать прямо в чате с помощью предварительного просмотра. Если что-то не устраивает, вносите текстовые корректировки и проверяйте, что изменилось в коде.

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

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

Также нужно обязательно просить адаптировать код к мобильным устройствам. Иначе плохая вёрстка испортит впечатление пользователей от сайта.

Далее вставьте код в редактор сайта и проверьте, как он работает на разных устройствах. Потом соберите фидбэк от коллег и внесите последние корректировки.

Что нужно знать, чтобы получать качественный код

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

Также стоит понимать, что нейросети могут генерировать лишний код, который будет нагружать сайт. А это скажется на SEO и повлияет на позиции в выдаче. Риск сломать первоначальный код, конечно, тоже есть, но у маркетолога обычно нет таких прав в редакторе, чтобы уронить сайт целиком.

Если возникнут сложности, и вы не будете понимать, почему код не работает, — попросите помощи у коллег. Программисты быстро разберутся, в чём проблема, ведь ChatGPT комментирует, за что отвечает каждый кусок кода, который он написал. А дизайнеры помогут довести визуал до нужного уровня.