Гайд · ИИ в работе

Вайбкодинг для начинающих: первая страница или телеграм-бот с нейросетью

Вайбкодинг (вайб кодинг, vibe coding) — это создание программ, когда вы обычными словами описываете, что нужно сделать, а код пишет нейросеть. Ваша задача — сформулировать, что нужно, и проверить результат. Начинайте с маленькой задачи на один экран: страница записи, калькулятор или телеграм-бот с одной командой. Сначала запишите, что считается готовым результатом, затем собирайте по шагам и после каждого шага проверяйте сами.

Анна Гурьева (ex-Федина) · CIO, CPO-консультант и трекер, ex-CPO.
8 лет своего бизнеса, ведущая подкаста «ИТ-коктейль», 8 премий, из них 5 побед.

Читать по шагам →

Что такое вайбкодинг простыми словами

Слово придумал исследователь ИИ Андрей Карпати в феврале 2025 года. Он описал программирование, при котором человек почти не смотрит в код: говорит модели, что хочет, запускает, смотрит на результат и просит поправить. Сам Карпати называл так подход для небольших проектов «на выходные» — и это честная граница.

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

Выберите задачу на один вечер

Первый проект должен быть маленьким и полезным именно вам. Подходит то, что вы сейчас делаете руками или в таблице: калькулятор стоимости услуги, страница с описанием и кнопкой «Написать в Телеграм», бот, который отвечает на пять частых вопросов, сводка из таблицы.

Сайт целиком на первый вечер не берите. Начните с одной страницы: услуга, цена, кнопка связи. Когда она работает, добавляйте следующие страницы по тем же шагам — так из первой страницы постепенно вырастает сайт.

Для первой попытки не берите приём оплаты, личные кабинеты с паролями и формы, которые собирают телефоны и почту клиентов. Это решаемо, но требует проверок, которые новичок легко пропустит.

Что сделать. Запишите задачу одним предложением: «Хочу [что], чтобы [кто] мог [действие] без [что мешает сейчас]». Если предложение не помещается в строку, разделите задачу на две и возьмите первую.

Lovable, Cursor или Claude Code: что выбрать новичку

Названия сервисов меняются быстро, а типов инструментов три. Выбирайте тип под задачу:

Тип	Пример	Для чего	Где код	Оплата
Конструктор в браузере	Lovable, Bolt	Быстро увидеть работающую страницу или прототип	В сервисе; можно выгрузить в GitHub, но это настройка	Есть бесплатный тариф с ограничениями
ИИ-редактор кода	Cursor	Видеть файлы проекта и править их с ИИ	У вас на компьютере	Есть бесплатный тариф с ограничениями
Агент для кода	Claude Code	Агент сам работает с папкой проекта: пишет файлы, запускает команды и проверки	У вас на компьютере	Платно: подписка Claude или оплата по API

Страница, опубликованная на хостинге конструктора, лежит на зарубежном сервере. Форму с контактами клиентов там не размещайте: по закону о персональных данных (152-ФЗ) данные россиян собирают в базы на территории России.

Доступ из России: часть зарубежных сервисов для вайбкодинга официально недоступна в России. Обходные способы мы не советуем. Для работы с кодом есть российские альтернативы — например, GigaCode от Сбера и ИИ-ассистент для кода от Яндекса. Убедитесь, что выбранный сервис вам доступен, до того как писать ТЗ.

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

Опишите задачу на одной странице

ИИ хорошо выполняет понятное задание и плохо угадывает. Короткое ТЗ (техническое задание) экономит больше времени, чем десяток уточнений потом. В нём пять частей: для кого, три-пять сценариев («человек открывает, выбирает, получает»), что точно не делаем, какие данные нужны и как проверим, что готово.

Хороший приём: попросите ИИ сначала задать вам 5 уточняющих вопросов по ТЗ и только потом писать код.

Пример ТЗ: «Калькулятор стоимости ремонта ванной для сайта. Человек выбирает площадь, тип плитки и демонтаж — видит сумму и кнопку “Написать в Телеграм”. Не делаем: оплату, личный кабинет, сбор телефонов. Готово, если сумма совпадает с моей таблицей на трёх примерах и страница работает на телефоне».

То, что не хочется повторять в каждом запросе, запишите в файл-инструкцию проекта. Это текстовый файл в папке проекта, который ИИ читает в начале каждой работы: у Claude Code это CLAUDE.md, у Cursor — правила проекта (rules).

Пример файла-инструкции: «Проект — калькулятор ремонта ванной. Отвечай по-русски. Меняй только то, о чём прошу. Ключи и пароли в код не вставляй. После каждого изменения скажи, что изменил и как мне это проверить».

Собирайте маленькими шагами

Просите одно изменение за раз и сразу смотрите результат. Если в одном запросе пять пожеланий, ИИ выполнит четыре и незаметно сломает пятое. Удачную версию сохраняйте: в Git (программа, которая хранит историю версий) или хотя бы копией папки с датой.

Правило трёх попыток. Если ИИ трижды не смог починить одно и то же, не просите в четвёртый раз. Вернитесь к последней рабочей версии, откройте новый чат, дайте ТЗ и опишите проблему заново. Латать поломку поверх поломки — самый быстрый способ запутать и себя, и модель.

Что сделать. Порядок: каркас страницы → основной сценарий → тексты → оформление → необычные случаи. После каждого шага: открыть, нажать, сохранить версию.

Проверяйте своими руками

Фраза «готово, всё работает» от ИИ — это не проверка. Пройдите каждый сценарий из ТЗ сами, на телефоне и на компьютере. Введите пустое значение, ноль, минус, очень длинное имя. Посмотрите, что видит человек при ошибке.

Попросите ИИ перечислить, какие файлы он изменил и чем проверил результат, и показать проверку — скриншот или вывод команды, а не описание.

Полезная правка: «На телефоне кнопка “Рассчитать” уходит за край экрана, а при площади 0 показывается сумма 0 ₽. Исправь только это, остальное не трогай. Покажи, как проверил».

Как сделать телеграм-бота с нейросетью

Бот — хороший первый проект: у него нет дизайна, только диалог. Порядок такой:

Создайте бота в Телеграме через официальный @BotFather и получите токен — ключ доступа к боту.
Опишите в ТЗ команды бота и ответы на 5–10 частых вопросов.
Попросите ИИ написать бота; токен в код не вставляйте — храните его в файле .env, который добавлен в .gitignore. Репозиторий с ботом не делайте публичным.
Проверьте бота у себя на компьютере: каждая команда, неизвестная команда, длинное сообщение.
Чтобы бот работал круглосуточно, ему нужен сервер или облачный хостинг — хостинг в России, если бот получает имена или телефоны. Это отдельный шаг и обычно небольшая ежемесячная оплата.

Ключи, данные и публикация — отдельно

Ключи доступа (API-ключи, токены ботов) не вставляйте в чат и не оставляйте в коде страницы. Если ключ попал в переписку или на сайт, считайте его украденным и выпустите новый.

Форма «оставьте телефон» на первой странице кажется мелочью, но имя, телефон и почта россиян — персональные данные. С 1 июля 2025 года их первично собирают только в базы на территории России, с 1 сентября 2025 года согласие на обработку оформляют отдельным документом, а ещё нужны политика обработки и уведомление Роскомнадзора. Для первого проекта проще обойтись без формы: кнопка «Написать в Телеграм» решает ту же задачу. Правила меняются, и это не юридическая консультация — прежде чем добавлять форму, сверьтесь с юристом.

Публикация — отдельное решение после проверки. У конструкторов в браузере есть кнопка публикации; простую страницу можно выложить на хостинг статических сайтов или на ваш сайт; адрес вида вашдомен.ру настраивается отдельно.

Что сделать. Перед публикацией ответьте на три вопроса: где хранятся ключи, какие данные собираем и где они хранятся, как вернуть прошлую версию, если что-то пойдёт не так.

Промпт для первого проекта

Ты помогаешь человеку без опыта программирования собрать [что: страницу / калькулятор / телеграм-бота].
Задача: [одно предложение].
Сценарии: 1) [...] 2) [...] 3) [...]
Не делаем: оплату, личный кабинет, сбор контактов клиентов, [другое].
Готово, если: [проверяемые критерии].
Сначала задай мне до 5 уточняющих вопросов. Потом предложи план из 4–6 шагов и дождись моего «да». Делай один шаг за раз; после шага скажи, что изменил и как мне это проверить. Ключи и пароли в код не вставляй — спроси, куда их положить. Для тестов используй только выдуманные данные. Если что-то непонятно, спроси, а не додумывай.

Чек-лист перед тем, как показать проект людям

Задача записана одним предложением, критерии готовности проверены.
Каждый сценарий из ТЗ пройден вручную на телефоне и компьютере.
Проверены пустые и неправильные значения, понятны сообщения об ошибках.
Ключей и паролей нет в коде страницы и в переписке.
ИИ не получил реальные данные клиентов — для тестов только выдуманные.
Контакты клиентов не собираются — или выполнены требования к персональным данным.
Есть сохранённая рабочая версия, к которой можно вернуться.

Частые вопросы

Что такое вайбкодинг простыми словами?

Это способ создавать программы, когда вы описываете задачу обычным языком, а код пишет ИИ. Человек формулирует, что нужно, проверяет результат и просит правки.

Как правильно: вайбкодинг или вайб кодинг?

Встречаются оба написания, а также английское vibe coding. Оба варианта понятны и людям, и поисковикам.

Можно ли заниматься вайбкодингом без знания программирования?

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

Какие инструменты вайбкодинга бесплатные?

У Lovable, Bolt и Cursor есть бесплатные тарифы с ограничениями — для первого вечера их обычно хватает. Claude Code работает по платной подписке Claude или с оплатой по API. Условия тарифов меняются, поэтому перед стартом проверьте их на сайте сервиса.

Чем Claude Code отличается от Cursor и Lovable?

Lovable — конструктор в браузере: быстро показывает работающую страницу. Cursor — редактор, где ИИ правит файлы проекта у вас на компьютере. Claude Code — агент, который сам работает с папкой проекта: пишет файлы, запускает команды и проверки.

Что нельзя делать в первом проекте с ИИ?

Принимать оплату, собирать контакты клиентов и пароли, вставлять ключи доступа в чат или код страницы, давать ИИ реальные данные клиентов. Эти задачи требуют отдельных проверок.

Как проверить код, если я его не понимаю?

Проверяйте поведение, а не код: пройдите каждый сценарий, введите неправильные данные, откройте на телефоне. Попросите ИИ перечислить изменённые файлы и показать проверку.

Источники

Обновлено 3 ноября 2026 · Автор — Анна Гурьева (ex-Федина) · Текст в Markdown