Вайбкодинг · Практика

Первый сайт за час. Без навыков программирования.

Пошаговый план для новичка: от пустого экрана до живой ссылки, которую можно отправить клиенту. Писать код не нужно — нужен час времени и умение объяснить словами, чего вы хотите.

~6 минут — читать
5 шагов — весь путь
60 минут — от нуля до ссылки

Между «хочу сайт» и «у меня есть сайт» раньше стояла стена. Либо полгода учить HTML, CSS и вёрстку, либо нести студии от 50 тысяч рублей и ждать пару недель со всеми правками.

Вайбкодинг эту стену убирает. Вы описываете сайт обычными словами — агент вроде Claude Code пишет код, сам находит и чинит ошибки, сам выкладывает страницу в интернет. Что это за подход и почему это не «попросить текст у чат-бота», мы разбирали в отдельной статье. Здесь — только практика: пять шагов с раскладкой по минутам.

Классический путь
Полгода курсов Или две недели ожидания От 50 000 ₽
Вайбкодинг
Описали словами Агент собрал и проверил Ссылка в интернете
Час работы. Из них ваших активных — минут двадцать.
Подготовка

Что понадобится.

Список короткий, и дорогого в нём ничего нет.

01 · Компьютер

Любой ноутбук последних лет

Mac или Windows — без разницы. Мощность не важна: тяжёлую работу делают серверы Anthropic, а не ваша машина.

02 · Подписка Claude

$20 в месяц — достаточно

Для первого сайта хватает базового тарифа Pro. Как оплатить и пользоваться из России — разбирали в отдельной статье, без сомнительных лайфхаков.

03 · Час времени

Без созвонов и уведомлений

Раскладка часа в статье — с запасом на «что-то пошло не так». Но час должен быть целым, а не порезанным на куски между встречами.

Как раскладывается час
Шаг 1 · 10 минУстановка
Шаг 2 · 10 минОписание сайта
Шаг 3 · 15 минАгент собирает
Шаг 4 · 15 минПравки фразами
Шаг 5 · 10 минПубликация
Инструкция

Пять шагов до живой ссылки.

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

ШАГ 010–10 мин

Установите Claude Code

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

Если что-то не встало с первого раза — откройте Claude в браузере и опишите проблему своими словами. Он разберёт вашу ошибку и скажет, что нажать. Установка — тоже задача для ИИ, а не для вас.

ШАГ 0210–20 мин

Опишите сайт словами

Это ваш главный вклад за весь час. Ответьте себе на три вопроса: что за сайт (визитка, портфолио, страница услуги), кто будет на него смотреть и из каких блоков он состоит. Потом просто расскажите это агенту — как рассказали бы знакомому дизайнеру.

Сделай мне красивый современный сайт
Сделай одностраничный сайт для кондитера: обложка с фото и парой фраз обо мне, витрина из шести тортов с ценами, отзывы, кнопка заявки в мой Telegram. Смотреть будут с телефона
Шаблон для своего сайта
Сделай одностраничный сайт для [кто вы и чем занимаетесь]. Разделы: [обложка / услуги / работы / отзывы / контакты]. Аудитория: [кто будет смотреть]. Главное действие: [написать в Telegram / оставить заявку / позвонить]. Большинство откроет сайт с телефона.
ШАГ 0320–35 мин

Смотрите, как агент собирает

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

claude code · шаг 3 глазами новичка

Сделай одностраничный сайт для кондитера...

·Создаю структуру, пишу код страницы...

Ошибка: фото не загружается

·Вижу ошибку, исправляю путь к файлу...

Готово — открой предпросмотр: localhost:3000

Цикл «написал → проверил → починил» проходит без вас. Вы видите только результат.
ШАГ 0435–50 мин

Доведите до ума фразами

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

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

За 15 минут обычно успевается пять-семь таких правок. Этого хватает, чтобы из «в целом похоже» получилось «да, это мой сайт».

ШАГ 0550–60 мин

Выложите в интернет

Финальная просьба: «выложи сайт в интернет». Агент сам подключит бесплатный хостинг вроде Vercel и вернёт ссылку вида vash-sait.vercel.app. Она живая: можно хоть сейчас отправить клиенту или поставить в шапку профиля. Свой домен вроде vash-sait.ru подключается позже — тоже одной просьбой, доменное имя стоит несколько сотен рублей в год.

Посчитаем

Час времени и подписка $20 против 50–150 тысяч рублей у студии. И сайт остаётся вашим: захотели поменять цену или добавить блок — открыли Claude Code и попросили. Полную экономику вайбкодинга с калькулятором мы считали в отдельной статье.

Уровень выше

Почему у одних сайт выходит «нормальным», а у других — как из студии.

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

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

Скилл · Дизайн

Сайты перестают выглядеть «как получится»

В скилле один раз описаны цвета, шрифты, отступы, правила композиции. Агент собирает каждую новую страницу уже по этой системе — как штатный дизайнер, который знает ваш стиль наизусть. Эта статья и все материалы Mentor AI свёрстаны именно так.

Скилл · Тексты

Заголовки продают, а не приветствуют

Без скилла агент пишет вежливое «Добро пожаловать на наш сайт». Со скиллом — оффер, выгоды, возражения и призыв к действию по проверенным формулам. Тот же час работы, но страница не просто есть, а приносит заявки.

claude code · тот же запрос, но со скиллами

Сделай одностраничный сайт для кондитера...

·Подключаю скилл «фирменный стиль»: цвета, шрифты, сетка...

·Подключаю скилл «продающие тексты»: оффер, заголовки, призыв...

Готово — страница в вашем стиле, тексты ведут к заявке

Запрос тот же, что в шаге 3. Разница — агент работает не «на свой вкус», а по вашим правилам.
Где это берут

Скиллы не скачиваются из коробки — их пишут под себя. Ученикам курса Mentor AI мы отдаём готовый набор для дизайна и продающих текстов и показываем, как собирать свои — под ваш стиль, вашу нишу и ваши задачи. Это и есть разница между «сделал сайт» и «делаю сайты, за которые платят».

Честно

Где новички буксуют.

Мы провели через этот путь не один десяток учеников. Затыки повторяются — вот четыре самых частых.

Затык 01

«Сделай красиво» — и разочарование

Агент не телепат: на размытый запрос он выдаёт усреднённый сайт, человек решает «не работает» и уходит.Лечится конкретикой из шага 2: для кого сайт, какие блоки, куда ведёт кнопка.

Затык 02

Ошибка на экране — и ступор

Красный текст в терминале выглядит как приговор. Новичок закрывает окно и решает, что «это всё-таки для программистов».Лечится одним движением: скопировать ошибку и отправить её агенту. Чинить — его работа.

Затык 03

Первая версия не понравилась

Ожидание: шедевр с первого раза. Реальность: черновик, который доводят правками. На этом месте бросают чаще всего.Лечится пониманием процесса: шаг 4 — не запасной план, а обязательная часть работы.

Затык 04

Сайт есть — а что дальше, непонятно

Ссылка работает, а вопросы только начинаются: как принимать заявки, как прикрутить оплату, где хранить наработки.Здесь заканчивается час — и начинается система. Про неё ниже.

Что дальше

Сайт за час — это витрина возможностей, а не потолок.

Первый сайт показывает принцип: описал словами — получил работающий продукт. Дальше тот же принцип собирает вещи посерьёзнее.

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

Ученик · Мурад

Сервис статусов для завода стекла

Клиенты завода видят статус заказов и рекламаций онлайн — без звонков в отдел продаж.

Разбор кейса →
Ученик · Ашрафжон

Telegram-платформа для благотворительности

Mini-app, где выбирают проект и донатят через Stripe с любой международной карты.

Разбор кейса →
Ученик · Астемир

Сайт-читалка издательства Dar Ujour

Все книги издательства в одном месте: читать онлайн или скачать.

Разбор кейса →
Ученик · Шамиль

FlowTrack — трекер задач и привычек

Личный трекер с таймером Помодоро, заметками и аналитикой прогресса.

Разбор кейса →
Разница между часом и системой

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

Курс Mentor AI

Первый сайт — за час. Свой работающий проект — за 14 дней.

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

14 дней, 3–4 часа в день. Программа, формат и тарифы — на сайте курса.