Вайб-кодинг: как собрать сайт и приложение без программиста

Прочитаете за 22 минуты. Первый сайт соберёте в тот же вечер. А через неделю практики перестанете бояться слова «приложение» – оно станет обычной задачей на пару часов.

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

Термин «вайб-кодинг» придумал в начале 2025 года Андрей Карпати – один из основателей OpenAI. Он описал новый способ работы: вы не пишете код руками и даже не смотрите на него. Вы говорите нейросети, чего хотите, она пишет, вы запускаете, видите результат, говорите словами, что поправить. И так по кругу, пока не получится нужное. Слово «vibe» тут про то, что вы идёте по ощущению и по внешнему виду результата, а техническую часть держит нейросеть.

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

Что значит «без программиста»

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

Это не значит, что программисты стали не нужны. Для приёма платежей, работы с медицинскими и юридическими данными, для проектов с тысячами одновременных пользователей человек с опытом по-прежнему нужен – об этом честно поговорим в разделе про границы. Но сайт-визитка, лендинг под услугу, калькулятор стоимости, квиз, внутренний инструмент для себя и команды – всё это вы теперь собираете сами.

Кому это реально пригодится

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

• Эксперту и коучу – страница услуги, квиз для подбора программы, калькулятор стоимости пакета.
• Психологу и нутрициологу – анкета первичной диагностики, страница записи, простой дневник для клиентов.
• Репетитору и наставнику – сайт с расписанием и ценами, тест на уровень знаний для новичков.
• Небольшому бизнесу – витрина услуг, форма заявки, внутренний калькулятор для менеджеров.

Объединяет их одно: задача понятная, бюджета на разработчика жалко, а ждать три недели нет времени. Ровно сюда вайб-кодинг и заходит.

Раздел 02Что реально можно собрать за вечер

Разберём честно, что получается быстро, а что потребует нескольких заходов. Оценки – из практики, для человека, который делает это впервые и работает через Claude.

Верхние пять строк – зона, где вы справитесь сами и в первый же вечер. Бот – чуть сложнее, потому что его надо где-то запустить, чтобы он работал круглосуточно (про это в разделе про публикацию). А вот всё, что связано с приёмом денег и хранением личных данных людей, лучше не собирать вайб-кодингом на коленке. Причина простая: цена ошибки – чужие деньги и чужая приватность.

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

Раздел 03Инструменты 2026: чем собирать

Инструментов много, и новичка это парализует. Упростим. Для старта достаточно одного – Claude. Остальные пригодятся позже, когда захочется большего. Разложу по полочкам, чтобы вы понимали, что для чего.

Мой совет для первого вечера – начните с артефактов Claude. Открываете чат, пишете «сделай калькулятор стоимости услуги», и через десять секунд справа появляется рабочий калькулятор, который можно потыкать. Это лучший способ почувствовать вайб-кодинг руками, ничего не устанавливая.

Когда захотите настоящий сайт из нескольких страниц или бота – переходите на Claude Code. Это тот же Claude, только он работает с папкой проекта на вашем компьютере: создаёт файлы, правит их, запускает. Подробно про него разобрано в статье про Claude Code для непрограммиста – там установка по шагам.

Раздел 04Регистрация Claude из России

Claude из России напрямую не открывается – Anthropic закрывает доступ по стране. Обходится это за десять минут, и дальше вы работаете спокойно. Порядок такой.

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

Этап 01Собираем сайт-визитку за 20 минут

Начнём с самого простого и самого частого – одностраничного сайта-визитки. Кто вы, чем полезны, ваши услуги, отзывы, кнопка записи. Разберём на живом примере, будто вы психолог. Подставьте свою нишу – шаги те же.

Первая реплика задаёт всё

Открываете Claude и пишете примерно так. Не бойтесь длинного текста – чем больше конкретики, тем меньше правок потом.

Собери мне одностраничный сайт-визитку. Я психолог,
работаю со взрослыми, специализация – тревога и выгорание.

Нужны блоки по порядку:
1. Первый экран: моё имя, строка «Психолог. Помогаю
   справиться с тревогой и вернуть силы», кнопка «Записаться».
2. Обо мне: 4-5 предложений, образование, стаж 8 лет,
   более 400 клиентов.
3. С чем работаю: список из 6 запросов плитками.
4. Как проходит работа: 3 шага – заявка, встреча, план.
5. Отзывы: 3 карточки с именем и текстом.
6. Контакты: кнопка «Написать в Telegram» и почта.

Стиль спокойный, тёплые бежевые и зелёные тона,
крупный читаемый шрифт, всё на русском.
Кнопка «Записаться» ведёт на мой Telegram t.me/примерник.
Сделай сразу как artifact, чтобы я видел результат.

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

Дальше – правки словами

Смотрите на результат и говорите, что поправить. Одна правка за реплику, так нейросети проще не сломать остальное:

• «Первый экран слишком бледный, сделай фон чуть насыщеннее и добавь мою фотографию слева.»
• «Плитки с запросами сделай в два столбца, сейчас они слишком узкие.»
• «Кнопка Записаться теряется, сделай её крупнее и зелёной, чтобы бросалась в глаза.»
• «Добавь внизу мелким шрифтом строку про политику конфиденциальности.»

Каждую правку Claude вносит и показывает обновлённый сайт. Вы не трогаете код – просто смотрите и комментируете, как заказчик у дизайнера. За 15–20 минут таких реплик страница доводится до состояния «можно показывать людям».

Готовый сайт из артефакта можно скачать одним файлом и выложить в интернет – про это подробно в разделе про публикацию ниже. Пока важно почувствовать сам ритм: сказал – увидел – поправил.

Этап 02Лендинг с формой заявки

Визитка – это статичная страница: посмотрел и ушёл в Telegram по кнопке. Лендинг под услугу обычно хочет большего – формы, где человек оставляет имя и телефон, а вы получаете заявку. Тут появляется первая техническая тонкость, разберём её без страшных слов.

Почему форма сложнее, чем кажется

Сама форма на странице собирается за минуту – три поля и кнопка. Вопрос в другом: куда денутся данные, когда человек нажмёт «Отправить». Страница сама по себе не умеет отправлять вам сообщения – ей нужен помощник на стороне, который примет заявку и перешлёт её вам. Этого помощника называют бэкендом. Хорошая новость: для простой формы его тоже можно собрать вайб-кодингом или подключить готовый сервис.

Три рабочих пути от простого к сложному:

Для первого лендинга я советую Путь 1. Заявка в Telegram – это мгновенное уведомление на телефон, вы не пропустите горячего клиента. А когда поток вырастет, добавите таблицу.

Этап 03Мини-приложение: калькулятор и квиз

Приложение звучит страшно, а на деле это часто маленький интерактивный инструмент, который что-то считает или подбирает. Два самых полезных для тех, кто продаёт услуги, – калькулятор стоимости и квиз-подборщик. Оба собираются артефактом за полчаса-час.

Калькулятор стоимости

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

Собери калькулятор стоимости моих услуг как artifact.

Я делаю сайты. Параметры:
– Тип: визитка (15 000), лендинг (35 000),
  многостраничник (70 000) – выбор одного варианта.
– Срочность: обычная (+0), за неделю (+30%) – переключатель.
– Наполнение текстами: сам (+0), под ключ (+8 000) – галочка.

Внизу крупно показывай итоговую сумму, она пересчитывается
сразу при любом изменении. Под суммой кнопка
«Оставить заявку» на t.me/примерник.
Дизайн чистый, светлый, крупные кнопки.

Готовый калькулятор появляется справа, цифры считаются на лету. Дальше правите репликами: «добавь третий параметр – количество страниц», «пусть итог показывается ещё и в рассрочку на 3 месяца». Такой калькулятор потом встраивается в сайт или живёт отдельной ссылкой.

Квиз-подборщик

Квиз ведёт человека через несколько вопросов и в конце выдаёт рекомендацию – какой пакет или программа ему подходит. Он вовлекает сильнее статичной страницы и мягко собирает контакты. Логика в промте: 4–5 вопросов, у каждого 3 варианта ответа, в конце один из трёх результатов и кнопка записи. Claude соберёт всю механику переходов между экранами сам, вы только даёте вопросы и варианты.

Раздел 05Как разговаривать с нейросетью

Тут кроется главный секрет. Результат вайб-кодинга на 80% зависит от того, как вы формулируете задачу. Одна и та же нейросеть по расплывчатому запросу выдаёт кривоватую заготовку, а по точному – почти готовый продукт. Вот формула, по которой я ставлю задачи.

Сравните два запроса и почувствуйте разницу.

Формулировать задачи для нейросети – отдельный навык, и он окупается везде, где вы работаете с ИИ. Полный разбор с формулой из пяти частей и примерами до-после есть в статье как писать промты. Прочитайте её после этой – качество ваших сборок вырастет заметно.

Раздел 06Как выложить готовое в интернет

Собрали сайт или приложение – теперь надо, чтобы по ссылке его видели люди, а не вы один в чате. Способ зависит от того, что вы собрали.

Статичный сайт или приложение на одной странице

Сайт-визитка, лендинг, калькулятор, квиз – это одна страница, которая работает сама по себе, без сервера. Такую выкладывают на бесплатный хостинг за пять минут:

• Netlify или Vercel – перетащили файл, получили ссылку. Бесплатно, быстро, без карты.
• GitHub Pages – чуть больше шагов, зато навсегда бесплатно и надёжно.
• Российские хостинги – если нужен домен в зоне .ru и оплата картой РФ.

Claude сам проведёт вас по шагам выбранного варианта, если попросите: «объясни по шагам, как выложить этот сайт на Netlify». Отдельно покупаете домен вида ваше-имя.ru за пару сотен рублей в год – и ссылка выглядит солидно.

Приложение или бот, который должен работать круглосуточно

Другое дело, если вы собрали телеграм-бота приёма заявок или сервис, который считает и отвечает клиентам сам в любое время суток. Такому нужен компьютер, который включён всегда – ваш домашний для этого не подходит, он выключается и теряет связь. Для этого арендуют сервер в облаке (VPS). Это тот же компьютер, только в дата-центре, работает без выходных.

Если это ваш первый бот – не пугайтесь слова «сервер». Claude Code умеет развернуть проект на арендованном сервере по вашей команде обычными словами. Из России перед работой с Claude на сервере тоже включайте VPN, иначе авторизация не пройдёт. Полный путь – в статье про Claude Code для непрограммиста.

Раздел 076 ошибок новичка

Эти грабли собирают почти все на первых сборках. Зная их заранее, вы сэкономите часы.

1. Просить всё сразу. «Собери мне сайт с личным кабинетом, оплатой, базой клиентов и рассылкой» – нейросеть выдаст кашу, в которой ничего толком не работает. Собирайте по одному куску, проверяйте каждый.
2. Расплывчатые правки. «Сделай красивее» нейросеть понимает как угодно. Говорите конкретно: «увеличь отступы между блоками и сделай заголовки крупнее».
3. Не проверять результат руками. Красивая форма, которая никуда не отправляет заявки, – классика. Тестируйте каждую кнопку и форму сами до показа людям.
4. Хранить чужие данные без оглядки. Как только собираете что-то, куда люди вводят телефоны и почту, отвечайте за их сохранность. Не тащите такое на случайные сервисы, добавьте строку про конфиденциальность.
5. Терять версию, которая работала. Иногда после правки ломается то, что было хорошо. Просите Claude «верни как было до последней правки» или сохраняйте удачные версии отдельно, копируя файл.
6. Бросать на середине. Первый сайт редко выходит идеальным за один заход. Это нормально. Три-четыре вечера практики – и вы собираете такие вещи спокойно и быстро.

Раздел 08Границы: что доверить программисту

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

• Приём платежей. Как только через ваш сайт идут чужие деньги, нужна настоящая защита и корректная связка с платёжной системой. Для приёма оплат берите проверенный сервис (например, разбор подключения Продамуса), а не самодельную форму.
• Чувствительные данные. Медицинские карты, паспорта, юридические документы. Утечка таких данных – это ответственность вплоть до штрафов. Тут без специалиста по безопасности не стоит.
• Высокие нагрузки. Если ждёте тысячи людей одновременно, самосбор может не выдержать. Для такого проекта архитектуру продумывает инженер.
• Сложная логика с деньгами клиентов. Биржи, кошельки, бухгалтерия. Ошибка в расчётах бьёт по чужим финансам, проверять должен профессионал.

Хорошая стратегия – собрать вайб-кодингом рабочий прототип, показать его людям, убедиться, что идея живая, и только потом вкладываться в разработчика для серьёзной версии. Так вы не платите 200 тысяч за проверку гипотезы, которую можно проверить за вечер сами. Прототип на руках ещё и удешевляет работу программиста – ему не нужно угадывать, что вы хотели, он видит готовый пример.

Раздел 09Чек-лист запуска

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

1. Определил, что собираю: сайт-визитка, лендинг с формой или мини-приложение.
2. Зарегистрировал Claude (из РФ – с VPN и почтой не на российском сервисе).
3. Написал сильный первый промт: контекст, блоки списком, стиль, «сделай как artifact».
4. Довёл результат правками по одной за реплику, не ломая работавшее.
5. Если есть форма – подключил приём заявок в Telegram или таблицу и проверил живой отправкой.
6. Протестировал все кнопки и ссылки сам.
7. Выложил: статичную страницу на бесплатный хостинг, бот или сервис 24/7 – на арендованный сервер.
8. Купил домен, если нужна солидная ссылка.
9. Добавил строку про конфиденциальность, если собираю чужие данные.
10. Показал живым людям и собрал первую обратную связь.