9 сентября 2026 г.
Вайб-кодинг: как сделать сайт без программиста на Claude Code
Сделать сайт вайб-кодингом реально за один вечер: ты описываешь сайт словами, Claude Code сам пишет код, открываешь результат в браузере и правишь по ощущению - «шапку компактнее», «фон светлее», «добавь блок с ценами». Программист для простого сайта-визитки, лендинга или портфолио не нужен. Нужен компьютер, подписка Claude от 20 долларов и умение понятно объяснять, чего ты хочешь.
Это пошаговый гайд: установим Claude Code, опишем сайт, пройдём несколько кругов правок и опубликуем результат в интернете бесплатно. Если ты не в курсе, что вообще такое вайб-кодинг, сначала загляни в статью «Что такое вайб-кодинг простыми словами» - а здесь сразу практика.
Что понадобится перед стартом
Claude Code - это агент в терминале: он сам создаёт файлы, запускает команды и смотрит на результат. Работает поверх моделей Claude, поэтому нужен оплаченный доступ: тариф Pro за 20 долларов в месяц уже включает Claude Code, на бесплатном плане его нет. Лимиты устроены так: окно по 5 часов плюс недельный потолок, для одного сайта вечером их хватает.
Установка в 2026 году упростилась до одной команды - отдельный Python и Node.js не нужны. На Windows открой PowerShell и выполни:
irm https://claude.ai/install.ps1 | iexНа macOS или Linux - в терминале:
curl -fsSL https://claude.ai/install.sh | bashПотом набери claude --version - если увидел номер версии, всё встало правильно. При первом запуске команда claude откроет браузер для входа в аккаунт. Подробные шаги под каждую систему, включая WSL, я разбирал в гайде по установке Claude Code.
Из России есть два нюанса: оплата подписки зарубежной картой и то, что Anthropic официально страну не обслуживает. Оба решаемы, схема разбиралась в статье про Claude Code в России.
Шаг 1: опиши сайт словами
От качества описания зависит половина результата. «Сделай мне красивый сайт» - это рецепт на три часа правок. Хороший бриф отвечает на четыре вопроса.
Кто владелец и для чего сайт: «одностраничный сайт студии массажа, цель - записаться на приём». Какие блоки нужны: шапка, услуги с ценами, о мастерах, отзывы, карта, форма записи, футер. Какой стиль: «тёмный фон, спокойные цвета, крупные фото, без анимационной пестроты». Какой текст - попроси рыбу: «напиши черновики текстов сам, я поправлю».
Вот пример рабочего промпта целиком:
Сделай одностраничный сайт студии массажа «Лотос». Цель - запись на сеанс.
Блоки: шапка с кнопкой «Записаться», услуги и цены, два мастера с фото,
отзывы, форма записи с полями имя и телефон, футер с контактами.
Стиль: тёмный фон, тёплый бежевый акцент, крупная типографика, без анимаций.
Тексты и фотозаглушки подставь сам.Claude Code задаст уточняющие вопросы, если чего-то не хватает - отвечай коротко, это быстрее, чем переписывать промпт. Потом создаст папку проекта и начнёт писать файлы.
Шаг 2: цикл вайб-кодинга - посмотрел и поправил
Дальше начинается сама суть вайб-кодинга сайта: агент пишет код, ты на код не смотришь - ты смотришь на сайт.
Попроси Claude Code запустить локальный сервер - обычно достаточно «запусти сайт, чтобы я посмотрел». Он выдаст адрес вроде localhost:3000, открываешь его в браузере и ходишь по сайту как обычный посетитель. Дальше возвращаешься в терминал и говоришь словами, что не так:
- «Шапка слишком высокая, сделай компактнее»
- «Кнопка записи плохо видна, сделай её заметнее»
- «Секция отзывов выглядит пустой, добавь ещё два отзыва»
- «На телефоне меню не открывается, почини»
Каждую правку агент вносит сам - обновляешь страницу и смотришь. Это тот самый цикл, за который вайб-кодинг и любят: никакого редактора кода, только диалог с сайтом через посредника-агента. Три-пять кругов - и черновик превращается в сайт, который не стыдно показывать.
Шаг 3: добей то, что забыл спросить
Когда базовый вид устраивает, пройдись по чек-листу того, что новички чаще всего забывают.
Мобильная версия. Половина посетителей придёт с телефона. Открой сайт с телефона или сожми окно браузера и попроси починить то, что разъехалось. Claude Code умеет сам проверять вёрстку, но лучше смотреть твоими глазами.
Контент вместо рыбы. Замени фотозаглушки на настоящие фото и вычитай тексты: агент пишет грамотно, но безлико. Проси переписать конкретный блок под твой тон - «сделай текст дружелюбнее, обращайся на ты».
То, ради чего сайт вообще делается. Кнопка записи должна вести куда-то: на телефон, в мессенджер, на форму. Проверь, что после нажатия происходит нужное действие: звонок, сообщение, заполненная форма.
Отдельно про сложное: если тебе нужен интернет-магазин с оплатой, личные кабинеты или интеграция с CRM - это уже не вайб-кодинг за вечер, тут без разработчика или готовой платформы тяжело. Вайб-кодинг уверенно закрывает сайты-визитки, лендинги, портфолио и промо-страницы, и честно пасует перед бэкендом.
Шаг 4: опубликуй бесплатно
Сайт лежит на твоём компьютере, а нужен в интернете. Самый быстрый путь - GitHub плюс Vercel: заводишь бесплатный аккаунт, просишь Claude Code «создай репозиторий на GitHub и задеплой на Vercel» - агент сам выполнит всё по шагам и выдаст публичную ссылку. Vercel на бесплатном тарифе держит личные и некоммерческие сайты бессрочно, с HTTPS и глобальной CDN. Если сайт для бизнеса, посмотри на Cloudflare Pages - коммерция разрешена и на бесплатном тарифе.
Полную версию этого шага - с регистрацией, правками и сравнением хостингов - я расписал в статье про бесплатный хостинг для сайта. А про свой домен вида vashastudiya.ru вместо технического адреса Vercel: покупается у любого регистратора за пару сотен рублей в год и подключается за пять минут.
Сколько это стоит
Считаем честно. Подписка Claude Pro - 20 долларов в месяц, и она нужна только на время работы над сайтом: сверстал за вечер - дальше подписка работает на другие твои задачи или её можно отписать. Хостинг - ноль рублей на бесплатном тарифе Vercel или Cloudflare. Домен - от нескольких сотен рублей в год. Итого типовой сайт-визитка обходится примерно в 2000 рублей плюс домен - против десятков тысяч у студии или фрилансера.
Время: первый сайт с установкой и чтением подсказок - вечер, три-четыре часа. Второй и дальше - час-полтора: установка уже стоит, а бриф и правки отрабатываются быстрее.
Типичные грабли новичка
Их я собрал из собственных прогонов и чужих историй, грабли одни и те же.
Слишком общий промпт на старте. «Сделай красивый сайт» даёт усреднённый шаблон. Чем конкретнее бриф - блоки, стиль, примеры, - тем меньше правок.
Всё одним сообщением. Просьба «сделай сайт, блог, магазин и блог с магазином» рождает кашу. Один сайт - один сценарий, новые секции добавляются следующими сообщениями.
Пропустить мобильную проверку. На компьютере всё красиво, на телефоне - колонки внахлёст. Проверяй всегда: доля мобильных посетителей у локального бизнеса обычно за половину.
Смотреть в код и править руками. Ошибка вайб-кодера-перфекциониста: залез руками в файл, потом агент перезаписал правку своей версией. Все правки - только словами агенту, тогда он держит картину цели.
Принять первый вариант. Уже говорил, но это грабли номер один. Первый результат - черновик, ценность рождается в итерациях. Итераций не жалей: они бесплатные, счёт идёт по токенам внутри лимитов подписки.
Если после этих шагов захочется большего - собирать не сайты, а автоматизации и инструменты под свою работу, - начни со статьи «Claude Code: что это и как начать работу». А для выбора инструмента вообще без терминала есть гайд по Cursor для начинающих - это редактор с ИИ внутри, с той же идеей, но другим интерфейсом.
