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

Автор: Анна Гурьева (ex-Федина), CIO · Обновлено 3 ноября 2026 · https://queenit.info/guides/vibe-coding-start/

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

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

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

Слово придумал исследователь ИИ Андрей Карпати в феврале 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 года согласие на обработку оформляют отдельным документом, а ещё нужны политика обработки и уведомление Роскомнадзора. Для первого проекта проще обойтись без формы: кнопка «Написать в Телеграм» решает ту же задачу. Правила меняются, и это не юридическая консультация — прежде чем добавлять форму, сверьтесь с юристом.

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

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

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

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

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

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

## Читайте также

- [Claude Code для дизайна](https://queenit.info/guides/claude-code-for-design/) — как поставить ИИ задачу на интерфейс и проверить прототип.
- [Передача контекста ИИ](https://queenit.info/guides/ai-context-handoff/) — как продолжить проект в новом чате и не пересказывать всё заново.

**Мини-курс · бесплатно: [Вайбкодинг. Начало: как начать работать с ИИ-инструментами](https://queenit.info/kursy/vibe-coding/)** — 5 уроков: чат или агент, выбор модели и цена, файл-инструкция для проекта, промпты и безопасность.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## Источники

- [Andrej Karpathy: пост о vibe coding (февраль 2025)](https://x.com/karpathy/status/1886192184808149383)
- [Claude Code: common workflows](https://code.claude.com/docs/en/common-workflows)
- [Telegram: BotFather и создание бота](https://core.telegram.org/bots/features#botfather)