How To Vibecode: Руководство для полных новичков
Привет, на связи Райтер! В пузыре, в котором сидят многие из нас, может показаться, будто бы вайбкодят уже все.
Каждый строит продукты, каждый зарегистрирован на GitHub, каждый сделал по 3 кастомных скилла и так далее.
Именно таким людям и посвящена эта статья. Для гиков она покажется самоочевидной базой. Но для многих она станет самым настоящим ключом к новой жизненной арке и откроет двери в дивный мир вайбкодинга.
Чтобы дать правильный, сбалансированный и практичный гайд, я решил писать эту статью вместе с несколькими экспертами по вайбкодингу:
— @whemohere
— @bishx_devlog
— @SolTimer
— @maloymediika
Приятного прочтения! Время погрузиться в (вайб)код.
Оглавление:
0. Вступление.
1. Зачем тебе вайбкодинг, если ты обычный чел?
2. Как оплатить подписку из РФ?
3. Claude Code VS Codex? Что взять первым и почему.
4. Веб, десктоп и терминал - в чем разница?
5. Как создать свой первый вайбкод-проект step-by-step.
6. Что может твой агент?
7. Заключение.
Ⅱ. Зачем тебе вайбкодинг, если ты обычный чел?
(by @SolTimer)
Вайбкодинг сейчас сильно недооценен. Одни боятся сложности. Другие вообще не понимают зачем это им.
С первым хочу успокоить. Просто зайди в ИИ-чат и напиши свою задумку. ВСЕ.
Да, так просто.
Но зачем мне вайбкодинг? Не важно кто ты - школьник/студент или работяга. Вайбкодинг НУЖЕН ВСЕМ и даже ТЕБЕ.
Школьнику/студенту - для обучения или решение задач. Ну или найти "темку" в инете и заработать c помощью вайбкод автоматизации. Вариантов на самом деле масса.
Но что насчет работяг? Практически любой работяга нуждается в делегировании своих обязанностей:
- нудные подсчеты на которые тратятся десятки минут
- планирование на которое могут уйти часы
- монотонные задачи, ctrl c + ctrl v, отчеты
Не важно кто ты - в большинстве сфер есть место для делегирования.
> Аналитик: пару часов рутины с "данными" превратил в десятки минут подсчета и формирования отчета.
> Риелтор: вместо ручного подбора квартиры под запросы клиента - автоматизировал фильтрацию и учел каждый каприз.
> Да даже обычный человек: решил купить телевизор и вместо дней на выбор лучшего потратил час сопоставив сотни вариантов по характеристикам в своем самописном софте.
Подчеркну. Место для вайбкодинга есть в любой сфере и аспекте нашей жизни.
Уже потом более опытные вайбкодеры строят системы которыми заменяют целые специальности или большинство бизнес-задач, но об этом уже позже!)
Время сейчас ценный ресурс. Вайбкодинг нам это время экономит.
Сейчас у тебя есть выбор:
1. Избегать технологического прогресса и отрицать реалии рынка.
2. Либо наконец начать свой путь в вайбкодинге.
И нет - вайбкодинг это необязательно про свой "b2b crypto ai SaaS business".
Вайбкодинг это про экономию кучи времени именно вашей жизни в угоду более приоритетным благам.
Кто то скажет: "Нейрослоп. ИИ-хлам. Очередной пузырь"
А вы скажите это мировым державам активно участвующим в ИИ-гонке: внедряют где только можно, использует в военке, мировые компании соревнуются в создании своей лучшей ИИ-модели.
Даже пытаются ограничить как это было с Fable 5 в США. Зачем такое внимание какому-то "ии слопу"?
Лично я знаю не мало знакомых кто сейчас зарабатывает исключительно с вайбкода: кто-то делает сайты, кто-то отдельные бизнес-решения, а кто-то экономит десятки часов, а время тоже = деньги.
ИИ лишь инструмент. Одни с ним добиваются лайфченджа путем билда и изучения. Другие введя промпт аля "сделай мне сайт" получают кальку и проклинают ИИ во всех бедах.
Так вот чтоб не быть скептичным и наконец попробовать себя в вайбкоде и сделана данная статья.
Ⅲ. Как оплатить подписку из РФ?
(by @writer_crypto)
Но перейдем к тому, без чего не повайбкодишь - покупка подписки. Ни для кого не секрет, что для вайбкодерского комьюнити из России регулярно всплывает одна и та же проблема - оплата подписок.
Из-за санкций оплачивать нейросети российскими карточками невозможно.
Есть сайд-решения, которые можно посоветовать:
- Zarub. Классический сервис виртуальной карты, но последнее время юзеры жалуются, что стали взимать гигантские непомерные комиссии и есть проблемы с депозитом денег и блокировкой счетов.
- Solcard. Один из популярных сервисов виртуальной криптокарты. Комиссия 5% на базовом тарифе, зато работает без особых проблем, но при этом оплата клода может пройти не всегда.
- Также есть сторонние шопы и проекты, которые дают одноразовую карту для оплаты. Из плюсов, обычно можно рассчитаться с сервисом рублями (т.е не надо открывать карту и тд), но комиссии часто бывают самыми высокими.
Каждое имеет свои подводные камни, поэтому выбирать следует самостоятельно и с должным ресерчем.
Еще важный момент: не стоит держать деньги, которые жалко потерять, на виртуальных картах. Почти с любым сервисом может произойти так, что деньги залочат или с ними случится что то еще (шанс этого не прям огромен, но это возможно).
Поэтому лучше делать деп только перед тем, как что-то оплачиваешь, а остальное время держать баланс пустым.
Ⅳ. Claude Code VS Codex? Что взять первым и почему.
(by @whemohere)
Теперь перейдем к выбору инструмента для собственно самого вайбкодинга. Начать нужно с того, что понятное дело не существует одного совершенно удобного инструмента для каждого пользователя. То, что покажется преимуществом одному, другому может показаться недостатком.
Ответ на вопрос "что взять первым и почему" будет исходить из ваших целей и предпочтений. В конце этого пункта, после детального сравнения двух продуктов, я оставлю путеводитель, который поможет определиться с выбором инструмента
Начнём сравнение с прайсов.
Можно заметить, что у этих двух инструментов практически идентичная ценовая политика относительно планов. Так в чём отличия? Есть ли они вообще?
Думаю легко заметить первое отличие. На момент написания статьи попробовать Codex ты можешь бесплатно, Claude такой щедрости не предоставляет, ограничившись лишь только возможностью тестирования одноименного чат-бота.
Здесь я отдаю преимущество команде OpenAI, для новичка эта возможность особенна важна, ведь хочется сперва потыкать все кнопочки самому, прежде чем решиться на покупку плана, не так ли? (стоит держать в уме, что тестовые возможности не дадут разогнаться по полной, это как на рынке попросить попробовать виноград на пробу)
У ChatGPT есть план Go, стоящий всего 8$ в месяц. Цена может привлечь, но я нерекомендую этот план к покупке, если твоя цель - вайбкодить, так как его возможности также всего-лишь тестовые
Следующий порог - 20$, Claude Pro или ChatGPT Plus. Отсюда появляется возможность использовать Claude Code, или расширитьвозможности Codex, при этом всё так же иногда ощущая пакостные лимиты.
Лимиты/Usage - встроенные ограничения на использование нейросети. Лимиты сопровождают нас НА ЛЮБОМ плане, при этом на Max/Pro мы ощущаем их намного реже, разница значительная.
Но и за такую цену можно и нужно что-то делать. Лично мне этого хватало для нужд и проектов. Вероятно, тебе не получится целый день без остановки взаимодействовать с ним (с самыми сильными моделями на максимальных efforts лимит может сгореть за пару запросов), но при грамотном использовании этого должно хватить.
Небольшой совет: используй сильные модели для сложных решений по типу продумывания архитектуры, а рутинные задачи отдавай моделям послабее
У этих двух инструментов есть общий признак в части лимитов использования: двухуровневая система ограничений. Первый уровень - лимит сообщений, который сбрасывается каждые 5 часов. Второй уровень - недельный лимит, ограничивающий суммарный объём использования за 7 дней.
Стоит отметить важный нюанс: лимиты от подписки Claude являются общими что для обычного чат-бота, что для Claude Code. Поэтому придется расставлять приоритеты между повседневным использованием чат-бота и вайбкодингом
ChatGPT осуществляет определенное разделение между Chat и Work/Codex. Если написать что-то в обычный чат, это не повлияет на лимиты Codex, и можно легко разграничивать деятельность чат-бот помощника и полноценного агента разработчика.
Кстати, у Codex есть еще одна приятная особенность: периодически предлагаются полные сбросы лимитов, в этом плане они также щедрее Claude
Что касается функционала, весь арсенал по типу скиллов, MCP, плагинов, запланированных задач - присутствует в обоих инструментах. Если первые внедрят новую функцию, вторые воспроизведут это у себя немного позже.
Достаточно взглянуть на инфографику снизу, чтобы убедиться в этом:
Но если углубится, некоторые отличия всё же есть.
Где Claude Code значительно отличается
1. Routines - автоматизация без постоянного участия человека
В Claude Code можно сохранить целый сценарий: промпт, нужные репозитории и подключённые connectors, и запускать его автоматически по расписанию, событию GitHub или HTTP-запросу. Например: Новый PR → Claude запускается → проверяет изменения → запускает тесты → находит проблему → предлагает исправление → оставляет комментарий в PR.
Подобное есть и в Codex, просто без такой глубокой настройки как у Claude. Например, можно подключить огромное количество коннекторов, расширяющие возможности твоей автоматизации
Claude Code может сам создать JavaScript-workflow, который делит большую задачу между подагентами. Например, один проверяет frontend, второй backend, третий тесты. Подагенты есть и в Codex, но там главный агент обычно сам решает, кого и когда запускать. В Claude этот порядок можно заранее записать в коде: какие агенты запускаются параллельно, что перепроверяется, какие результаты отбрасываются и что происходит дальше. Такой workflow можно сохранить и запускать снова по тем же правилам
Сам JS-файл можно потом прочитать, изменить, сохранить и снова запустить. Anthropic указывает до 16 одновременно работающих агентов и до 1000 агентов за один workflow
Чтобы включить эту функцию, напиши /config => Dynamic Workflows => ON (обрати внимание, что лимиты будут тратиться быстрее, также требуются топовые модели)
3. Claude Code сильнее ориентирован на совместное планирование с пользователем (моё субъективное мнение)
Перед сложной задачей он может сначала изучить нужные файлы, задать уточняющие вопросы и составить план, ничего не меняя в проекте. План можно проверить и несколько раз доработать перед запуском. В Ultraplan можно даже оставлять комментарии к отдельным пунктам плана. У Codex планирование тоже есть, поэтому это не уникальная возможность, но у Claude оно оформлено как отдельный и более интерактивный workflow
4. Claude Code чаще сильнее в frontend (моё субъективное мнение)
По опыту многих моих знакомых и в том числе меня, если дать Claude не очень подробное описание интерфейса, он чаще сам предлагает более удачную структуру страницы, иерархию, тексты и визуальные детали. Codex обычно сильнее чувствует себя в задачах с чёткими техническими условиями, тестами и backend-логикой, а для хорошего UI ему чаще полезны референсы или готовая дизайн-система.
Где Codex значительно отличается
1. Доступ к топовой модели без обязательной доплаты за каждый запрос
Codex даёт доступ к одной из своих самых сильных моделей прямо внутри обычных лимитов. GPT-6 Astra уже работает в Codex и Work, а дополнительный баланс нужен только после исчерпания включённого объёма. Для сравнения, в Claude Pro использование Fable оплачивается отдельно через usage credits
При этом стоит учитывать, что Астры, особенно на подписке в 20$, хватит ненадолго, но пользоваться этим можно
2. Полноценная работа с браузером и компьютером
У Codex сильно развита именно работа за компьютером, а не только внутри терминала. Он может открыть встроенный браузер, переходить между вкладками, нажимать кнопки, вводить текст, тестировать сайт и даже управлять обычными desktop-приложениями своим курсором. При этом можно открыть браузер и в реальном времени смотреть, что именно делает агент. OpenAI также позволяет нескольким агентам работать с компьютером параллельно в фоне
НО! Иногда это может надоедать, особенно когда определенное действие можно сделать руками, это сэкономит твоё время и токены.
А в целом, для полноценной автоматизации прекрасный инструмент, особенно для новичка
3. Codex больше ощущается как автономный исполнитель (моё субъективное мнение)
Codex лучше раскрывается в таком сценарии: дал ему понятную цель и критерий готовности, а дальше он сам долго работает до результата. В Codex даже есть отдельный Goal Mode (как и в Claude, но в Codex он нравится мне больше) где задаётся конечный результат и условия успеха, после чего агент продолжает работать в этом направлении
При этом, c /goal нужно быть осторожным - постарайся задать чёткие рамки, при которых агент не выйдет в бесконечное выполнение цели, что приведет к бесполезному исчерпанию твоих лимитов. Будь конкретен
4. Codex чаще сильнее в backend и сложной технической реализации (моё субъективное мнение)
Когда задача требует изменить много связанных частей проекта, сохранить совместимость, прогнать тесты и найти неочевидные ошибки, Codex чаще доводит работу до рабочего состояния без постоянного контроля. Особенно хорошо это заметно на backend-задачах
Я предоставил всю необходимую информацию, связанную с особенностями этих двух инструментов. Пришло время сделать свой выбор:
Таково положение дел на момент написания статьи, но не забывай, что AI - сфера мимолетных изменений. Возможно, через пару лет эти два продукта уступят своё лидерство другим оппонентам
Кто-то вовсе ограничивается бесплатными альтернативами по типу OpenCode, кто-то использует Kimi Code как дополнительного помощника из-за его мягкого подхода к цензуре
Только личная проба поможет тебе определиться наверняка, так что дерзай
Ⅴ. Веб, десктоп и терминал - в чем разница?
(by @maloymediika)
Теперь поговорим про различие между терминалом, десктопом и веб-сайтом, ты спросишь - а это вообще что?
А я отвечу - это 3 места, где ты можешь поюзать свою любимую иишечку. Сегодня мы разберем все плюсы и минусы каждого из вариантов. Думаю томить не буду, поэтому...
Терминал (CLI) - командная строка, куда вы устанавливаете своего агента, будь то клод, кодекс и тд. Работает все прямо у вас на пк. Для себя я выделил пару плюсов и минусов работы в терминале
Плюсы
- Очень легкий вход - то есть, тебе не нужно качать никаких доп инструментов, все что нужно - уже установлено у тебя на компе. Тебе остается только установить агента и включить впн.
- Терминал ничего не стоит - один юзер замерял насколько десктоп тратит ресурсов процессора больше, чем терминал. В итоге разница составила около 70%, если точнее 8 - у терминала и 70 у десктопа.
- /dontASK - режим автопринятия изменений, который есть только в терминале.
- Очень много кастомизации - терминал считается самым лучшим вариантом для тех, кто хочет настроить весь свой воркфлоу
Минусы
- Нужны минимальные знания команд, ибо все настраивается через команды, будь то skill или личность нового агента, все ты будешь делать через /...
Если говорить про меня - то терминал - не мое. Вообще я не прямо много его юзал, почему? Да как-то даже не было желания, ибо сразу выбрал для себя десктоп приложение. Но я знаю много людей для которых терминал - мастхев.
Декстопное приложение - лично для меня самый удобный вариант, который я сам юзаю. Для начала нужно понять, что декстоп - отдельное приложение, которое ты ставишь себе на комп.
1. Официальные решения - например оф приложение Codex или Claude Code.
Плюсы
> Вход через аккаунт с подпиской, не нужно ебаться с костылями и тд.
> Очень юзер-френдли - обычно у таких приложух очень удобный интерфейс, который понятен для любого юзера.
Минусы
> Очень много ограничений - модели только от одного провайдера, оркестрацию не сделать, короче если ты не хочешь лишней маррокки, то кайф
> Тк мы люди из стран, которые частенько получают санкции и блокировки, то такие приложухи могут не работать без доп инструментов
2. Сторонние IDE - инструменты по типу Opencode, Vs Code и тд. Я использую именно это - а точнее, Vs Code с расширением Claude, почему именно это? Да потому что сам Vs Code удобный, понятный интерфейс, я бы даже сказал интуитивно-понятный. Единственный минус, что он жрет много ресурсов пк, сильно нагружая его.
Я лично советую юзать тебе Ide, по типу Vs code, потому что это реально удобно, у тебя около безграничные возможности для работы. Ты можешь юзать любую модель, любые плагины и тд. Короче плюсов больше чем минусов.
Я думаю, что рассказывать про плюсы десктопа особо много не нужно, чего стоит один Cowork, кстати пост про него - https://t.me/maloymediika/146, тут прям пошагово.
Кстати в моем щитпосте, в который ты тоже можешь вступить - https://t.me/+lD6nmBpgAgcyZDhi люди голосовали и результаты ты видишь сверху. Из 20 проголосовавших - 9 людей юзают декстоп, как и я.
Ну и последний вариант, где ты можешь поюзать иишку. Веб - это когда ты юзаешь иишку на сайте. И тут нужно понимать, что десктоп и терминал обычно юзают для кодинга, в вебе это делать можно, но неудобно. Поэтому я веб юзаю например для каких-то дневных задач, по типу что-то найти или написать.
Плюсы
> РЕАЛЬНО простой вход - зашел на сайт, написал промпт и все, ответ уже у тебя
> У тебя очень много возможностей, ведь у тебя в пользовании буквально весь веб
Минусы
> Сложно кодить, но удобно писать промпты и обговаривать путь проекта, который ты собираешься билдить.
Короче как основной вариант - плохо, как доп.инструмент для вторичных задач - гуд, я сам юзаю
Ⅵ. Как создать свой первый вайбкод-проект step-by-step
(by @whemohere)
Пришло время пройти весь путь от пустой папки до первой рабочей версии проекта в интернете
Для первого раза не нужно учить терминал и пытаться стать разработчиком за вечер. Будем исходить из того, что ты работаешь через Claude Code/Codex Desktop
Для первого проекта я бы не выбирал новую "революционную" идею. Возможно, придется изобрести велосипед снова, но таким образом ты учишься проходить весь цикл разработки, параллельно знакомясь с агентом
Возьми проблему, которая есть лично у тебя.
Приведу свой пример: я учу английские слова по карточкам ежедневно, но мне надоело создавать карточки руками, а готовые колоды не отражали мои цели и часто оказывались битыми
Поэтому я со своим агентом создал набор скиллов, позволяющий автоматически схватывать контекст любого источника или заданной темы и создавать готовые колоды сразу же их заливая в приложение Anki без моего вмешательства
Подробнее можешь почитать про этот кейс на моем канале: https://t.me/whemohere/79
Этот кейс одновременно решил мою проблему и прибавило опыта в разработке решений
В нашем случае давай придумаем что-то лёгкое, но чем потенциально можно пользоваться, например: сайт со списком фильмов и сериалов, которые ты хочешь посмотреть
добавить фильм → выбрать статус → найти его позже → отметить просмотренным
Для новичка разработка подобного функционала должна ощущаться простой
2. Создай проект и сразу подключи GitHub
Создай обычную папку, например: my-watchlistи открой её как новый проект в Claude Code или Codex Desktop
Дальше создай пустой repository на GitHub и отправь агенту ссылку:
Подключи эту папку к моему GitHub repository: [ссылка]. Настрой Git, добавь подходящий .gitignore, сделай первый commit и отправь проект на GitHub. Перед выполнением коротко объясни, что собираешься сделать.GitHub нужен прежде всего как история сохранений проекта.
Если через несколько часов что-то серьёзно сломается, у тебя останется предыдущая версия
Git - система истории изменений проекта. Она запоминает, какие файлы менялись и позволяет вернуться к прошлой версии.
commit = сохранили рабочую версию;
push = отправили её на GitHub.
Repository - папка проекта вместе с его Git-историей
.gitignore - обычный текстовый файл со списком того, что Git не должен отправлять на GitHub
3. Создай короткую память проекта
Не стоит хранить всю информацию только внутри одного длинного чата, эффективность работы от этого меньше, потраченных нервов больше
CLAUDE.md для Claude Code или AGENTS.md для Codex
После крупного этапа просто проси:
Обнови PROJECT.md с учётом текущего состояния проекта.
С началом новой сессии это особенно полезно, так как ты передаешь определенный контекст
Markdown / .md - обычный текстовый файл с простой разметкой.
Контекст - информация, которую агент сейчас учитывает при работе
4. Проверь, нужны ли вообще Skills, MCP или Plugins
На первом проекте встроенных возможностей агента чаще всего достаточно
Не нужно начинать с установки двадцати расширений. Количество ≠ качество, особенно в контексте этих инструментов
Подключай дополнительный инструмент только тогда, когда появилась конкретная причина.
- нужен дизайн из Figma - подключаешь Figma;
- нужна работа с определённой базой - ищешь подходящий MCP;
- нужно отправлять сообщения в Slack - подключаешь Slack.
- нужно регулярно создавать API endpoints по одной схеме → skill с готовым шаблоном процесса;
Для видеохостинга тебе потенциально пригодятся: Frontend Skills для интерфейса, testing skills для проверки функций, Figma Connector если есть дизайн. Остальное не ставь заранее.
Будь осторожен с маркетплейсами подобных скиллов/плагинов/MCP - есть риск занести недоброжелателей на свое устройство. Пользуйся авторитетными источниками, в первую очередь - внутри продуктов, где ты работаешь. У Claude есть Discover раздел, который предлагает персонализированные вспомогательный инструменты:
Skills - готовые правила работы для агента, могут включать в себя конкретные примеры кода/референсы
MCP / Connector = подключение внешнего сервиса.
5. Сначала составь план, потом разрешай писать код
Мы делаем простой watchlist для фильмов и сериалов. Пользователь должен добавить фильм, выбрать статус «Хочу посмотреть / Смотрю / Просмотрено», найти его позже и изменить статус. Это мой первый проект. Пока ничего не создавай. Сначала предложи максимально простую структуру проекта и разбей разработку на небольшие этапы. Отдельно напиши, что пока не нужно добавлять.
Для плана лучше взять сильную модель. Если нравится чей-то интерфейс, сразу приложи скриншот. У ChatGPT для подобного я использую модели Astra/Sol/Terra (их effort и скорость можно регулировать отдельно), для рутинной реализации использую Terra/Luna.
У Claude - Fable/Opus для сложных архитектурных задач, Sonnet - для рутины
Но для первой пробы можно попробовать планирование и на слабых моделях, дабы хватило лимитов на практику
Если у тебя есть сайты с понравившимся дизайном, прикрепи их сюда же. Чем больше референса - тем точнее агент оправдает твои желания при разработке
Для составления планов у Claude/Codex есть специальные режимы: - /plan для Claude
- @plan для Codex
6. Проверяем план перед запуском.
Где аккуратность, там и опрятность, поэтому посмотри:
- не добавил ли агент лишних функций;
- действительно ли это простая первая версия;
- понятно ли тебе, что он собирается делать;
- нет ли ненужной сложности вроде пяти сервисов там, где хватит одного.
Объясни этот пункт простыми словами и зачем он нужен именно нашему watchlist
В случае если утверждения неубедительны, отклоняй эти инициативы
7. Делаем первый этап из плана
Реализуй только первый этап утверждённого плана. Остальные пока не трогай. После завершения самостоятельно проверь результат.
Не нужно за раз просить одновременно добавить поиск, базу, аккаунты и всё остальное, это допустимо, но на первых порах почти наверняка обернётся провалом и сгоревшими токенами, действуем аккуратно =)
реализовали → проверили → исправили → сохранили → перешли дальше
Например, если следующим пунктом плана был поиск, работаем только над поиском
Запрос лучше писать конкретно:
Реализуй следующий пункт плана: поиск фильмов. Он должен находить фильм даже по части названия. Остальные функции не меняй. После этого проверь несколько запросов.
Чем конкретнее ты будешь, тем более удовлетворительный результат получишь
9. Если проблема визуальная, показываем её
Допустим, карточки фильмов на телефоне выглядят плохо.
Вот скриншот. На мобильной версии карточки слишком широкие и название обрезается. Исправь только этот блок, desktop не меняй.
Конкретно в нашем кейсе тоже случилась небольшая проблема, благополучно исправленная:
10. Если что-то сломалось, нормально описываем баг
Если есть конкретная ошибка, просто копируешь её агенту.
Я меняю статус фильма на «Просмотрено» → обновляю страницу → статус возвращается обратно. Он должен сохраняться.
что сделал → что произошло → что должно было произойти
Если причина непонятна, попроси посмотреть логи, если логов нет - попроси реализовать детальное логирование
Logs = техническая история работы приложения
Debugging = поиск причины бага
11. После каждого нормального этапа сохраняемся
Когда функция уверенно работает:
Проверь текущие изменения, сделай отдельный commit с понятным названием и push на GitHub.
12. Базу подключаем только когда план до неё дошёл
Если первая версия спокойно работает на тестовых данных, не нужно насильно добавлять базу раньше времени
Когда появляется реальная необходимость, например хочется сохранять фильмы между устройствами, спрашиваем:
Сейчас фильмы хранятся локально. Предложи самый простой вариант базы для нашего watchlist и сначала объясни, что придётся изменить.
Больше обсуждений позволит предотвратить потенциальные недопонимания между тобой и агентом, хоть это и чревато большим потреблением токенов
База данных = постоянное хранилище данных
Если позже подключим внешний сервис, например API с информацией о фильмах, появится секретный ключ.
Именно такие секреты обычно лежат в .env, который добавляется в .gitignore.
Желательно добавлять эти ключи самостоятельно, ты можешь попросить агента составить .env и открыть его, но вставь его в файл самостоятельно, не нужно оставлять их в чате, особенно если ты хочешь строить большой проект (да и агенты сами часто настаивают на том, чтобы ты перевыпустил ключ, раз уж ты скинул его в чат)
API = способ одной программы обращаться к другой.
API key = секретный ключ доступа.
.env = файл для таких локальных настроек и секретов.
14. Перед публикацией делаем финальную проверку
Когда все пункты нашего утверждённого плана первой версии выполнены:
Новые функции не добавляй. Проведи финальную проверку проекта: основной сценарий, поиск, статусы, mobile, ошибки, тесты и утечки секретов. Сначала покажи найденные проблемы.
На этом этапе агент уже не строит новые функции, а ищет, где текущая версия ломается
Для первого web-проекта можно использовать Vercel.
Очень упрощённо: Vercel берёт проект с GitHub, запускает его на своём сервере и даёт тебе обычную ссылку на сайт.
Подключаешь репозиторий → нажимаешь Deploy → получаешь ссылку.
Deploy = опубликовать новую версию.
Hosting = сервис, где сайт работает.
Production = версия сайта, которую уже могут открыть другие люди.
16. Последняя проверка уже в интернете
Открой опубликованный watchlist на компьютере и телефоне и пройди тот же сценарий из первого пункта:
добавить фильм → выбрать статус → найти его → отметить просмотренным Если этот путь работает, твой первый проект реально закончен, ура!
У меня вышел такой результат, здесь конечно видно что я кое чем вдохновился, но хотелось показать насколько хорошо агент может понимать референсы
После этого можно думать про авторизацию, внешний API фильмов, рекомендации, рейтинги и всё остальное. Это MVP подход, когда мы публикуем хоть что-то, чтобы уже затем дорабатывать по ходу дела, а не ходить вокруг да около, так и не выложив свой проект в паблик.
Ⅶ. Что может твой агент?
(by @bishx_devlog)
В универе у меня были записи лекций, из которых хотелось получить нормальные конспекты. С формулами, таблицами, чтобы потом открыть перед экзаменом. А ещё выложить всё на свой сайт. С агентом я это и делал.
Можно дать ему и папку с PDF, сканами и таблицами. Попросить разобраться, что там вообще происходит, свести данные и найти, где цифры не сходятся. Собрать таблицу с формулами и графиками, чтобы потом менять исходные данные и видеть пересчёт. Из этих же материалов сделать отчёт, презентацию, нарисовать иллюстрации. Неудачный слайд тут же переделать. Получается, ты отдаёшь кучу разрозненных файлов, а забираешь то, чем уже можно пользоваться.
А иногда хочется вообще отдельную штуку под себя. Мой Telegram-помощник Telepath начинался с простой идеи – чтобы голосовые можно было читать прямо в чате. По тому же принципу можно собрать сайт с записью на съёмку, калькулятор стоимости, тренажёр для учёбы. Агент пишет код, запускает проект, проверяет и поправляет ошибки. Ты смотришь на результат, приходит ещё идея – сразу пробуешь её.
При этом не обязательно заранее знать, как всё должно быть устроено. Можно сначала вместе разобраться. Агент найдёт похожие решения, сравнит цены, функции и ограничения. Если по ходу появились новые вопросы – пойдёт искать дальше, сопоставит источники и соберёт выводы со ссылками. Заодно проверить, где твоя идея не сработает.
Причём ему можно отдать и ту часть работы, где ты обычно сам ходишь по вкладкам. С Computer Use агент видит экран, нажимает кнопки, вводит текст, смотрит, что изменилось, и делает следующий шаг. Открывает личный кабинет, выбирает период, скачивает отчёт и разбирает его. А через подключённые почту и календарь может найти переписку, подобрать время встречи, создать её и подготовить ответ.
А если задача надолго, агент может возвращаться к ней по расписанию. Я так следил за выгрузкой звука из 35 видео. Раз в 10 минут он смотрел, как дела, а в конце проверил файлы и отключил мониторинг. В другой раз Telegram не отдал одну голосовую запись. Агент вернулся с конкретикой – 749 из 750 скачано, вот какого файла не хватает. Можно задать другой ритм работы, а через интеграции – запуск по событию.
Чтобы к следующему отчёту не объяснять всё заново, можно сохранить правила оформления и проверки, подключить память с прошлыми решениями. А большую задачу разделить между несколькими агентами. Пока один изучает сервисы, другой разбирает твои файлы. Потом их результаты собираются вместе.
Для всего этого нужны инструменты и доступы, а для фоновой работы – включённый компьютер или облачный сервис. У меня следующие идеи обычно появляются уже после того, как я попользуюсь результатом. Сделал, заметил, чего не хватает, и пошёл дорабатывать.
Ⅷ. Заключение
(by @writer_crypto x @Iron0re)
Итак, подведем итоги. Сегодня ты ознакомился с одним из самых полезных гайдов для новичков по вайбкодингу, раскладывающих по полочкам все про азы вайбкодинга.
В этом гайде мы не стали расскрывать что-то вроде работы с агентом впс и не говорили про настройку условного харнеса - чтобы не завалить новичка сразу кучей инфы, хотелось сделать материал который будет простым и в меру информативным
Я, @writer_crypto, специально пригласил множество инфлов в качестве экспертов-соавторов, чтобы дать разностороннее мнение и сбалансированные советы.
Напоследок, мы сделали простого бота где каждый человек с ПОЛНЫМ НУЛЕМ знаний в аи сможет приобрести свою первую подписку, настроить рабочее пространство и начать улучшать свою жизнь с аи уже в ближайшие дни, перестав игнорировать самое масштабное конкурентное преимущество 21 века.
> t.me/welcometovibecodebot
> t.me/welcometovibecodebot
> t.me/welcometovibecodebot