00:00:00Добро пожаловать в «Vibe Coding 101». Если вы не умеете программировать, но очень хотите
00:00:04воплотить идею в жизнь — будь то сайт-портфолио, пет-проект или то, что вы давно
00:00:10мечтали создать, — это видео для вас. К концу ролика вы соберете рабочий сервис,
00:00:15не написав ни единой строчки кода. А если вы разработчик, вам тоже будет полезно,
00:00:21ведь иногда нужно сделать что-то быстро, не усложняя архитектуру. В этом
00:00:26видео я покажу вам весь процесс «вайб-кодинга», поделюсь лучшими практиками на каждом этапе,
00:00:32и мы вместе создадим реальный проект. Для разработки мы будем использовать Abacus AI
00:00:37Deep Agent. Это моя любимая платформа для любых задач с ИИ, потому что по одной подписке
00:00:43можно создавать приложения, сайты, презентации и почти что угодно. Я использую её для
00:00:50вайб-кодинга, так как она допускает меньше ошибок и стоит дешевле аналогов,
00:00:54которые я пробовал. Ссылка есть в описании, обязательно загляните.
00:00:59Итак, есть пять шагов, чтобы правильно создать приложение через вайб-кодинг. Многие их знают,
00:01:05но проблема в том, что люди не владеют нюансами на каждом этапе, из-за чего
00:01:09получают от ИИ слабые или нестабильные результаты. Давайте это исправим. Первый шаг —
00:01:14фаза генерации идей. Здесь вы решаете, что именно хотите собрать. Это может быть портфолио или
00:01:19что-то ещё. Если идей пока нет, попросите ИИ набросать варианты. Я использую
00:01:25Abacus Chat LLM, он отлично с этим справляется. Сервис сам подбирает лучшую
00:01:31модель под конкретную задачу, так что вам не нужно ломать голову, какую
00:01:36выбрать. Как только определитесь с идеей, запишите её. Просто откройте
00:01:42Google Документы или Word и опишите задумку обычными словами. Вы создаете так называемый
00:01:47PRD — документ с требованиями к продукту. Не пугайтесь названия. Для вайб-кодинга PRD — это всего лишь
00:01:53текст на одну-две страницы с описанием проекта. Позже он станет вашим основным промптом.
00:01:59Я взял простой шаблон PRD из этой статьи. Спасибо автору, кстати, почитайте её,
00:02:05чтобы узнать больше. Ссылка на скачивание готового шаблона тоже в описании. Пробежимся
00:02:09по разделам. В пункте «описание одной фразой» кратко сформулируйте суть. В этом видео
00:02:14мы делаем сайт для разделения расходов. Наше описание будет выглядеть примерно так.
00:02:20Следующий раздел — для кого этот продукт и какую проблему он решает. Затем
00:02:25перечислите несколько основных функций приложения. Технических терминов не нужно,
00:02:31пишите как есть, на обычном языке, и только самое главное. В следующем разделе
00:02:36укажите, чего делать НЕ нужно, чтобы проект не раздулся сверх меры. Если не уверены,
00:02:41пока пропустите. Далее идет пользовательский путь (user flow), описывающий логику работы.
00:02:47Это тоже по желанию. И последний пункт — критерии успеха. Здесь вы просто
00:02:52отмечаете, как понять, что функции работают верно. Тоже опционально. Вот и всё.
00:02:58Если это кажется сложным, есть лайфхак: напишите только описание в одну строку,
00:03:03вставьте шаблон в ChatLLM и попросите ИИ дописать PRD за вас. Когда закончите,
00:03:07переходите ко второму шагу. На этом этапе мы выбираем платформу для вайб-кодинга
00:03:13и вставляем наш PRD как первый промпт. Выбор платформы очень важен, так как
00:03:19для классного результата нужен мощный инструмент. Я буду использовать Abacus AI
00:03:25Deep Agent. Просто копируете свой PRD и вставляете в поле для промпта. Если нужен
00:03:30конкретный дизайн, можно загрузить файл и попросить ИИ использовать его как референс.
00:03:36Но помните: файлы Figma напрямую загружать нельзя. Другой вариант — просто
00:03:41описать дизайн словами. Теперь жмем «отправить» и ждем. После запроса агент
00:03:47может задать уточняющие вопросы. Они обычно не технические, просто укажите свои предпочтения.
00:03:53Если что-то непонятно, попросите ИИ разъяснить. Как только вы ответите, агент
00:03:59начнет писать код приложения. Это моя любимая часть: можно спокойно листать
00:04:05рилсы, пока код генерируется. Спустя мгновение... Кажется, наше приложение готово.
00:04:10Переходим к следующему шагу. Эта фаза посвящена тестированию, исправлению багов,
00:04:17улучшению дизайна или добавлению фич. Именно здесь многие совершают ошибки. Прежде чем
00:04:23разбирать их, давайте взглянем на нашу платформу. Приложение работает хорошо.
00:04:28Теперь о том, чего НЕ стоит делать на этапе тестирования и доработки. Главная ошибка —
00:04:58собрать всё, что нужно исправить, в один гигантский список и вывалить на ИИ.
00:05:04Это плохо работает. Лучше исправлять по одной вещи за раз, будучи максимально конкретным.
00:05:09Допустим, не работает кнопка. Не пишите расплывчато. Вместо этого используйте
00:05:15шаблон промпта для исправления багов. Теперь посмотрим, как добавить новую функцию.
00:05:20Вы уже описывали фичи в PRD — используйте тот же формат. К примеру, на нашем сайте
00:05:25давайте добавим неравное разделение расходов. Сейчас при создании траты сумма делится
00:05:32поровну. А я хочу сам указывать долю каждого человека. По нашему шаблону
00:05:38я подготовил описание для этой фичи. Возвращаемся к агенту и вставляем его.
00:05:44Но перед этим добавьте вот эту строку, а затем уже описание. Жмем «отправить» и
00:05:50ждем. Итак, новая функция готова. Протестируем её. Всё выглядит отлично. На этом этапе
00:05:56всё просто: добавляем фичу, тестируем, повторяем. Есть еще пара моментов,
00:06:17которые я хочу отметить перед следующим шагом. Во-первых, не бойтесь откатывать изменения.
00:06:23Откат — это возвращение к старой версии кода. Бывает так, что новая фича
00:06:29или фикс бага ломают что-то другое. В таком случае просто напишите ИИ,
00:06:33что последние правки все испортили, и попросите исправить. Обычно это помогает. Но если
00:06:39нет — лучше просто откатиться назад. Второе: не стесняйтесь дополнять и менять
00:06:44шаблоны промптов, которые я дал. Это подводит нас к следующему шагу.
00:06:49Финальная проверка. Когда все функции добавлены, нужно провести итоговый тест
00:06:54приложения. Ничего сложного: просто пощелкайте по сервису и проверьте каждую кнопку.
00:06:59Убедитесь, что данные верны и всё работает как задумано. Если заметили проблемы,
00:07:04возвращайтесь на этап доработки. Суть в том, чтобы всё работало идеально
00:07:09перед запуском. Последний шаг — деплой. В Abacus AI Deep Agent
00:07:14публикация приложения делается в пару кликов. Найдите кнопку «Deploy» наверху.
00:07:20Нажмите её, и увидите три варианта: домен Abacus AI, свой домен или свой поддомен.
00:07:27Если выбрать домен Abacus, URL вашего сайта будет выглядеть по такому шаблону.
00:07:33Если нужен свой домен, его придется купить и привязать к Abacus через DNS-настройки.
00:07:40С поддоменом проще. Если у вас уже есть домен, можно создать адрес вида «https://www.google.com/search?q=app.%D0%B2%D0%B0%D1%88%D1%81%D0%B0%D0%B9%D1%82.com»,
00:07:45ничего не докупая. Для начала выберем домен Abacus. Придумайте название,
00:07:51и это станет адресом вашего сайта после публикации. Поздравляю! Наше первое приложение,
00:07:57созданное на вайбе, запущено. Эту ссылку можно отправить друзьям, чтобы они тоже
00:08:03могли пользоваться вашим сервисом. Но прежде чем вы побежите творить, есть
00:08:09один нюанс. Чистый вайб-кодинг не подходит для крупных коммерческих продуктов.
00:08:14Это идеальный вариант для личных проектов, утилит, прототипов и небольшого круга юзеров.
00:08:20Всё из-за возможных проблем с безопасностью, скоростью работы и масштабируемостью.
00:08:26Если планируете расти, вам со временем понадобятся разработчики. На этом всё.
00:08:32Пять шагов вайб-кодинга с рабочими лайфхаками. Обязательно попробуйте Abacus AI Deep Agent.
00:08:38Ссылка в описании. Если видео было полезным — ставьте лайк, подписывайтесь и
00:08:44пишите в комментариях, что думаете. Увидимся в следующем ролике!
00:08:49below. And I'll see you in the next one!