Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Мнения</a>

2 <ul><li>26 ноя 2025</li>

3 <li>0</li>

4 </ul><h2>Что за зверь этот ваш вайбкодинг и зачем он маркетологу</h2>

5 Рассказали, как улучшать сайт и тестировать идеи, не привлекая внимания айтишников.

6 Иллюстрация: Катя Павловская для Skillbox Media

7 Рассказывает просто о сложных вещах из мира бизнеса и управления. До редактуры - пять лет в банке и три - в оценке имущества. Разбирается в Excel, финансах и корпоративной жизни.

8 О вайбкодинге рассказал маркетолог компании "<a>Аспро</a>" Никита Лошин.

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

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

11 <ul><li>Что такое вайбкодинг и <a>чем он полезен для маркетолога</a></li>

12 <li>Как можно<a>использовать вайбкодинг</a></li>

13 <li>Как вайбкодить<a>с помощью ChatGPT</a></li>

14 <li>Что нужно знать,<a>чтобы получать качественный код</a></li>

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

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

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

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

19 <ul><li>быстро проверить гипотезу и понять, стоит ли отвлекать разработчиков;</li>

20 <li>собрать рабочий скелет проекта, который потом доработают дизайнеры и разработчики;</li>

21 <li>вносить небольшие правки и делать фичи без участия программистов.</li>

22 </ul>Вайбкодинг превращает идеи в готовые решения буквально за часы, снимает зависимость от разработчиков и открывает маркетологам доступ к тому, что раньше казалось "чужой территорией".

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

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

25 Виджет с ползункомСкриншот: "Аспро"Также мы добавили<a>интерактивную шторку "до - после" для фотографий</a>, чтобы наглядно показать изменения при запуске нового сайта. Благодаря виджету изображения стали больше - можно лучше разглядеть детали. Код получился универсальным, поэтому планируем использовать его и на других страницах сайта - например, в кейсах.

26 Старый блок картинкойСкриншот: "Аспро"Новый блок со шторкойСкриншот: "Аспро"Для нашего финансового направления мы создали простой<a>калькулятор, позволяющий рассчитывать затраты на финучёт</a>. Цель - быстро показать преимущество нашего сервиса перед ручным ведением Excel-таблиц. Программиста привлекали только для вёрстки страницы.

27 Калькулятор финучётаСкриншот: "Аспро"Затем мы разработали чуть более сложный<a>калькулятор для расчёта финансовых потерь от отсутствия SEO-продвижения сайта</a>. В нём появились коэффициенты, учитывающие тип и возраст сайта. Для привлечения внимания к блоку записали видеовиджет и добавили баннер в меню.

28 Калькулятор для расчёта потерь сайта без SEO-продвиженияСкриншот: "Аспро"Как оказалось, вайбкодинг полезен и при работе с "Google Таблицами". Мы дорабатывали услугу, в рамках которой проверяем сайты клиентов по чек-листу. Чтобы быстрее определять приоритеты, добавили столбец с уровнем критичности.

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

30 Меняем значения в ячейках без применения формулСкриншот: "Google Таблицы" / "Аспро"В этом разделе расскажу, как можно генерировать код с помощью ИИ, на примере нашей компании.

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

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

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

34 Кнопка "Предварительный просмотр" для проверки работы кода в интерфейсе ChatGPTСкриншот: ChatGPT / "Аспро"Если делаете блок для сайта, нужно, чтобы дизайн блока соответствовал общей стилистике. Для этого достаточно скинуть в чат с ИИ скриншот одной из страниц сайта, и нейросеть сама подберёт подходящие стили.

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

36 Прикрепляю скрин и пишу, что хочу изменитьСкриншот: ChatGPT / "Аспро"Также нужно обязательно просить адаптировать код к мобильным устройствам. Иначе плохая вёрстка испортит впечатление пользователей от сайта.

37 Прошу исправить вёрстку на мобильных устройствахСкриншот: ChatGPT / "Аспро"Далее вставьте код в редактор сайта и проверьте, как он работает на разных устройствах. Потом соберите фидбэк от коллег и внесите последние корректировки.

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

39 Однажды я споткнулся на том, что виджет вставал не во всю ширину страницы. Пришлось залезать в режим разработчика (клавиша F12) и искать ограничения вёрстки. Оказалось, у контейнера была установлена максимальная ширина, которую убрали двумя дополнительными строчками кода.

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

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

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

43 - <a>Научитесь: Нейросети для рабочих задач Узнать больше</a>

43 + <a>Практический курс: "Нейросети для рабочих задач" Узнать о курсе</a>