Советы по вайб-кодингу для начинающих

Андрей Карпаты ввёл термин «вайб-кодинг» для обозначения бездумного дилетантского программирования, когда пользователь с помощью небрежного «исправь, пожалуйста» пытается добиться от нейронки рабочего кода. Такой подход возможен для небольших проектов, когда качество кода не имеет значения. Однако, если у вас коммерческий продукт или как минимум сайт, программировать с нейросетями нужно вдумчиво. Как создавать сложные рабочие проекты с ИИ даже без знания программирования и почему для этого важно задавать контекст задачи — рассказываем в статье
Мария Шушпанова
Мария Шушпанова
Редактор в «Оди»

Как правильно проектировать контекст для нейросети

Чем качественнее и подробнее контекст задачи, тем лучше будет результат. Рекомендуем выстраивать работу по следующим этапам:

Составьте верхнеуровневое описание проекта с целями и задачами. Расскажите, что хотите сделать, какую проблему решаете и какие есть правила для нейросети.

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

Документация рабочего проекта

С самого начала лучше писать каждый документ по одному шаблону с ключевыми разделами:

Пример шаблона, по которому можно писать документы

Не вываливайте весь контекст за раз: нейросеть его не запомнит. Модели ограничены так называемым окном контекста — максимальной длиной диалога, который они фиксируют в «памяти». Например, у GPT-5 это 272 тысячи токенов для входных данных, а у Claude Sonnet 3.7 — 200 тысяч. Ни один сложный продукт не «поместится» в эти рамки, поэтому проектировать контекст нужно по частям. Хорошо, если он занимает не меньше 20% «окна»: для модели с «окном» 128 тысяч токенов контекст составит не менее 25–30 тысяч.

Обсудите документ с нейронкой. Отправьте его в чат, обсудите архитектуру или попросите выбрать технологический стек. Задавайте вопросы, чтобы узнать недостатки вашего описания и улучшить его.

Добавьте в документацию детали:

Например, при создании приложения для разделения счёта укажите, как будут добавляться плательщики, откуда подтягивать сумму счёта, как учитывать налоги и скидки и каким должен быть результат.

Не обязательно составлять документацию самостоятельно. Опишите нейронке задачу и попросите её задать вопросы по ней. На основании ваших ответов модель напишет детальный документ с инструкциями для себя. Скорее всего, вам даже не нужно будет вникать в написанное.

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

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

Вот практические советы, которые помогут вайбкодить:

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

Не просите нейронку исправить ошибки. Если это не мелкий недочёт, команда «исправь» не поможет. Когда нейронка делает что-то не так, это означает, что есть ошибки в контексте или промте. Иногда нужно несколько раз переформулировать задачу.

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

ПлохоХорошо
Дать нейронке файл с кодом кнопки и попросить изменить скруглениеДать нейронке описание проекта, документацию по дизайн-системе, где прописаны базовые стили, файлы CSS-фреймворка и примеры страниц с этой кнопкой

Не соглашайтесь с правками, если чего-то не понимаете. Лучше попросите нейронку объяснить термины или её действия. Это поможет разобраться с кодом даже тем, кто плохо разбирается в программировании.

Используйте форматирование Markdown. С ним получится структурированная документация, которую нейронке проще понять.

Используйте не чаты, а специальные агентские инструменты. Лучший агент для вайб-кодинга сегодня — это Claude Code компании Anthropic. Работать с ним в терминале может быть неудобно или непривычно, если у вас нет такого опыта.

Терминал Claude Code

Лучше установить его в Cursor, Windsurf или Google Antigravity в виде плагина и оплачивать подписку, потому что она выгоднее использования по API.

Работа с Claude Code в Cursor

На втором месте по популярности и эффективности после Claude Code идёт OpenAI Codex: они похожи по функционалу и возможностям.

Если вы хотите разрабатывать продукт в одном окне, в том числе и с телефона, выбирайте Replit. Это полнофункциональная среда разработки с собственным агентом, который самостоятельно тестирует сгенерированные приложения. Есть режимы планирования и редактирования, логи, аналитика и база данных, а также можно развернуть продукт на хостинге.

Интерфейс Replit

Если нет необходимости вайбкодить с телефона, вам подойдут Bolt.new или Lovable.

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

Для простых задач подойдут недорогие нейронки, такие как GLM-4.6. Подключите их к Claude Code: так вы сэкономите на разработке без потери качества.

Мастер-классы и гайды по вайб-кодингу

Мастер-класс Дэна Холлика из Tailwind по использованию Claude Code

Мастер-класс по созданию приложения-каталога для разработчиков в Bolt

Трёхчасовой мастер-класс по работе с Bolt

Видео о работе с Cursor

Cursor AI: полный гайд по вайб-кодингу Олега Стефанова

Мастер-класс по созданию клона YouTube в Lovable

Сотни обучающих видео по работе с Replit

23-страничный гайд по вайб-кодингу Anthropic

15-минутное руководство по выстраиванию процессов при вайб-кодинге

Поделиться
Отправить
Запинить

Обсуждение