Решил попробовать вайб-кодинг и заодно сделать полезное дело — создать HR-сайт для компании, в которой я руковожу ИТ-департаментом. Рассказываю, что меня впечатлило, а с чем пришлось повозиться.
Мне давно было любопытно самостоятельно собрать сайт с нуля при помощи вайб-кодинга, посмотреть на результат работы LLM с реальной задачей, оценить сроки выполнения. Получилось в итоге две недели, но это вместе с предварительной работой и согласованием результата со всей командой. Чистой работы над сайтом вместе с AI было три рабочих дня. И это конечно впечатляющий результат, самостоятельно я бы писал код только если бы был готов дизайн, и это заняло бы в разы больше времени. Тем не менее, думаю, это вовсе не значит, что теперь кто угодно в любой момент времени может навайбкодить что угодно. Но обо всём по порядку.
Выбор сервиса
С выбором сервиса мне помогла статья на Хабре «Сравнение AI-инструментов для прототипирования: v0, Bolt и Lovable» — классный подробный материал, спасибо автору. Мне было важно, чтобы это был AI, заточенный именно под прототипирование сайтов. Так что выбрал я в итоге v0.dev. Забегая вперед, скажу, что уже после первого теста мне всё понравилось, и я решил не искать дальше, а продолжить работать с ним.
Почему v0.dev:
Фокус на визуальной части. Опыта в бекэнде у меня сильно больше, так что с кодом я могу справиться самостоятельно, а с дизайном — нет.
Интеграция с Figma: можно загрузить дизайн из Figma и нейронка сделает сайт по нему. Сразу скажу, что этой фишкой я в этот раз не воспользовался, но она показалась нужной, сохранил себе на будущее.
Оперативная визуальная обратная связь.
Единственное, с чем могу поспорить с автором разбора, что у v0.dev есть зависимость от экосистемы Vercel. Не очень понял, о какой потенциальной привязке идет речь. Я скачал исходники с сайта и развернул у себя на домашнем домене без привязки к поставщику.
От промпта до релиза
Работает v0.dev как и любой AI-агент, только в привязке генерации сайтов: пишешь промпт, а он в ответ создает код и рисует сайт. Мой первый пробный промпт выглядел, если коротко, примерно так: «Иди на сайт нашей компании, возьми оттуда цветовую гамму и сделай другой сайт». Кроме этого, я указал референсы HR-сайтов компаний, которые можно использовать для вдохновения, и прикинул, какие нужны разделы.
Уже первый результат v0.dev меня приятно удивил. Да, многое требовало правок и доработок, однако общий вайб и основная структура совпали с ожиданиями, это было достаточно неплохо. Поэтому я решил взять за основу уже первую версию, составил план доработок и приступил к корректировке.
В целом все изменения были небольшими — по сути просто доработки того, что предложил ИИ. Тем не менее, около 60% пришлось корректировать.
Например, мне показалась классной идея AI-агента проиллюстрировать верхний блок кодом — сайт изначально предназначался для разработчиков, и так мы сразу показываем, что говорим на одном языке. Правда сейчас на сайте есть вакансии не только для разработки, но код всё равно вполне органично вписывается в концепцию.
Впрочем, в первоначальной версии код был простоват: «Revenue 1000%, growth 500%» на TypeScript. Так что блок я оставил, но код переписал — сделал в стиле Python путь кандидата.
В нижней части сайта я полностью заменил блок обратной связи и отправки резюме. AI сгенерил форму обратной связи, которая никуда не вела. Была мысль оставить ее, но для этого надо было настраивать взаимодействие с бекэндом, а этого как раз хотелось избежать, поэтому в итоге решили ограничиться контактами эйчара. Также полностью переписал раздел про продукты компании, так как ИИ сгенерировал эту часть откровенно неудачно.
К слову, контент AI в принципе генерирует очень и очень плохо. Он предлагает шаблонный текст, которые просто неинтересно, а иногда даже неприятно читать. Если бы я сам попал на такой сайт работодателя — закрыл бы его сразу. Многие текстовые блоки я писал сам, и всё это потом отдал редактору на доработку. В итоге в финальной версии нет ни одной строчки, которую бы сгенерировал v0.dev или отредактировала другая LLM-модель.
Выводы
После своих опытов могу сказать, что даже человек, который никогда в жизни не сталкивался с кодом, сможет навайбкодить простой сайт. И это одна из немногих задач, где вайб-кодинг действительно применим, в отличие от более сложных вещей. Например, в качестве эксперимента я вайбкодил телеграм-бота для одной небольшой задачи. И вот с этим уже точно не справится человек, который до этого с кодом не работал.
У меня во время работы с нашим HR-сайтом был только один момент, который AI не смог нормально сделать с первого раза, и я исправил код вручную. Возможность понимать код и при необходимости править его самостоятельно — большой плюс, поскольку часто это быстрее, чем писать промпт, а результат получается более прогнозируемый. Однако, полагаю, что с современными инструментами в целом при вайб-кодинге можно легко обойтись и без ручной доработки.
Впрочем, и для создания сайтов вайб-кодинг хорош, только если задача стоит сделать что-то небольшое с нуля, при этом получившийся портал не будет встроен в сложную архитектуру и не будет связываться с другими ресурсами. Если он решает простую задачу, которая не планируется существенно масштабировать в будущем, вайб-кодинг — идеальное решение. Например, сделать одностраничный сайт для кофейни с меню и адресом действительно можно легко и непринужденно.
Вайб-кодинг в разы ускоряет процесс разработки, но вряд ли полностью заменит создателей сайтов в ближайшей перспективе. Уже даже для того, чтобы написать нормальный промпт, нужно уметь структурировать задачу, а также понимать, каким должен быть результат. То есть, хотя бы немного разбираться в создании сайтов. Сейчас я бы сказал, что часть работы можно смело делегировать AI, но отвечать за результат придется всё равно самому.
Наш HR-cайт посмотреть можно тут, буду рад конструктивным комментариям.
P.S.
Так совпало, что в тот же день, что мы зарелизили HR-сайт, и буквально сразу наш эйчар отправила ссылку двум кандидатам вместе с оффером. У ребят было время подумать пару дней, но оба приняли офферы спустя несколько часов. Может, просто совпадение, но всё равно уже есть ощущение, что две недели на разработку были потрачены не напрасно.
Максим Быстров
СТО ИТ-компании TYMY
