Гайд
Создаем сайт с 0 за один вечер
Как собрать свой сайт за 2 часа с полного нуля — без программирования, без дизайна, без команды.
Два года назад сайт стоил 300 тысяч. Сейчас я делаю его за вечер. А вед ь раньше ещё нужно было:
найти дизайнера (и объяснить ему чего ты хочешь)
найти разработчика (и молиться, что он не пропадёт)
найти копирайтера (и редактировать за ним тексты)
заплатить от 50 000 до 300 000 рублей
ждать от двух недель до трёх месяцев
И даже после всего этого получить «ну, нормально, но не совсем то, что я хотел».
Знакомо такое? Мне да, я сам как предприниматель знаю, что такое исправлять, ждать и тратить деньги + время.
А теперь представь: ты садишься за ноутбук, открываешь один инструмент, пишешь обычным человеческим языком, что тебе нужно и через пару часов у тебя готовый, работающий, красивый сайт.
Без единой строчки кода. Без Figma. Без «давайте созвонимся и обсудим ТЗ».
Это не моя влажная фантазия. Так называется вайбкодинг. И прямо сейчас ты узнаешь, как это работает.
Если ты сейчас читаешь это, значит у тебя одна из трёх ситуаций:
— Тебе нужен сайт для бизнеса, но разработчики хотят 200+ тысяч и просят 3 месяца на создание
— Ты фрилансер/эксперт и у тебя нет лендинга, хотя понимаешь — без него заявок меньше
— Ты хочешь попробовать новый навык, на котором реально зарабатывают в 2026
Любая из этих ситуаций закрывается за вечер. В этом гайде я покажу как.
Что такое вайбкодинг (и почему это не очередной хайп)
Вайбкодинг — это способ создавать цифровые продукты с помощью искусственного интеллекта. Ты описываешь словами, что хочешь получить, а ИИ генерирует код, дизайн и структуру за тебя.
Термин придумал Андрей Карпати — один из создателей ChatGPT и бывший директор по ИИ в Tesla. Он описал это так: ты не пишешь код — ты задаёшь вайб, направление. Говоришь: «Сделай мне вот такое» — и получаешь результат.
Но вайбкодинг — это не магия и не «нажми кнопку, получи сайт». Это навык. Простой, но навык.
Нужно уметь:
правильно формулировать запросы
понимать, из чего состоит сайт
знать, как направить ИИ в нужную сторону
видеть, что получилось хорошо, а что нужно доработать
Хорошая новость: этому можно научиться за несколько дней. Не за годы. Не за месяцы. За дни.
Почему это работает лучше старого подхода
Раньше | С вайбкодингом | |
Скорость | Недели на согласование, месяцы на разработку | Рабочий прототип за час, сайт за вечер |
Стоимость | От 50 000 ₽ за лендинг, от 150 000 ₽ за сайт | Подписка на ИИ — стоимость одного похода в ресторан |
Независимость | Ждёшь дизайнера, разработчика | Сам решаешь, когда работать и что менять |
Точность | «Я имел в виду другое» — главная фраза при работе с фрилансерами | Не нравится — переформулировал — получил новую версию за минуты |
Порог входа | HTML, CSS, JavaScript, фреймворки, деплой… | Нужно уметь внятно описать, чего ты хочешь |
Что реально можно собрать c помощью вайбкодинга
Это не только «простенькие странички». Вот что люди делают прямо сейчас:
Для бизнеса:
лендинги для продуктов и услуг
сайты-визитки для экспертов и фрилансеров
интернет-магазины
внутренние инструменты для команды (дашборды, калькуляторы, трекеры)
MVP для стартапов (минимальный жизнеспособный продукт, чтобы протестировать идею)
Для себя:
личный сайт-портфолио
сайт-поздравление для близких
свадебное приглашение в виде сайта
квиз или игра в подарок
блог или дневник с красивым оформлением
Для заработка:
делать сайты на заказ (да, за деньги — вайбкодинг позволяет работать быстрее и брать больше клиентов)
собирать лендинги для своих инфопродуктов
автоматизировать рутину и продавать эту экспертизу
Вайбкодинг — это не про «поиграться». Это рабочий инструмент, который закрывает задачи, за которые раньше платили много денег.
Пример 1. Сайт для бизнеса: как собрана платформа airoomclub.ru
Платформа, которую ты сейчас читаешь — airoomclub.ru — это образовательная платформа про ИИ и вайбкодинг. С курсами, подписками, личным кабинетом.
Раньше такой проект потребовал бы:
UX/UI-дизайнера на 2–3 недели, а то и 5-6 недель
frontend-разработчика на месяц
backend-разработчика для логики и базы данных
копирайтера для текстов
куча правок и исправлений
бюджет от 400 000 до 1 500 000 рублей
Вместо этого мы использовали вайбкодинг. Описали структуру, логику, стиль и собрали рабочую платформу в разы быстрее и дешевле.
Конечно, это не значит, что всё получилось с первого промпта. Нет. Мы шли шаг за шагом (итерациями): задавали направление, смотрели результат, уточняли, дорабатывали. Но суть в том, что весь этот процесс занял не месяцы, а дни.
И главное: нам не пришлось нанимать команду из пяти-семи человек.
Что это значит для тебя?
Если мы смогли собрать целую образовательную платформу с помощью вайбкодинга, то сделать лендинг для своего бизнеса, сайт-визитку или страницу услуг — задача на один вечер. Серьёзно. Один вечер.
Пример 2. Сайт-поздравление к 14 февраля: личный проект за пару часов
А теперь совсем другой пример. Не бизнес. Личный.
Перед 14 февраля члену нашей команды — Азамату, захотелось сделать что-то особенное для своей девушки. Не открытку. Не цветы (хотя цветы тоже были).
А что-то, что удивит.
ОН сел и за пару часов собрал сайт-поздравление. С анимациями, с личными фотографиями, с текстом, который написал сам. Красивый, тёплый, личный. Такой, который не купишь в магазине.
Он не дизайнер. У него проблема с «креативностью». Но он просто описал, что хочет, даже попросил придумать идеи и вайбкодинг сделал остальное.
Реакция? «Скажу так: это был лучший подарок из всех, которые я дарил»
Почему это важно было увидеть?
Этот пример показывает то, о чем многие забывают.
Вайбкодинг — это не только про деньги и бизнес. Это про то, что теперь любую свою идею можно воплотить. Любую. Хочешь сделать сюрприз — сделай. Хочешь собрать портфолио — собери. Хочешь запустить проект — запусти.
Раньше между «я хочу» и «я сделал» возникал барьер: нужны были навыки, люди, деньги. Сейчас «блоков» нет.
Как сделать свой первый сайт: пошаговая инструкция 👇🏻
Окей, хватит теории. Давай сделаем твой первый сайт прямо сейчас. Пошагово, со скриншотами и ссылками.
Шаг 1. Зарегестрируйся и оформи подписку Claude Code
Claude Code — это инструмент от Anthropic, который позволяет общаться с ИИ прямо из терминала и создавать проекты целиком.
Что нужно сделать:
Перейди на сайт claude.ai и зарегистрируйся (если ещё нет аккаунта)
Оформи подписку Claude Pro за $20/мес — это минимальный тариф, который открывает доступ к полной мощности ИИ
Как оформить подписку? Ты можешь обратиться к нам в личный сообщения ПОДПИСКА и мы тебе подскажем: @helptreysi
Шаг 2. Скачай VS Code — твой рабочий стол
VS Code (Visual Studio Code) — бесплатный редактор кода. Не пугайся слова «код» — тебе не нужно ничего писать. Это просто место, где будет лежать твой проект и где ты будешь видеть результат.
Скачай здесь: https://code.visualstudio.com
Установка стандартная: скачал → открыл → готово.
Создай любую папку, например на рабочем столе, и назови как тебе удобно. Я назову ее “reset-fitness”. После этого нажми “File” → “Open Folder” и выбери созданную папку. Теперь внутри этой папки мы будем работать.
Шаг 3. Подключи Claude к VS Code (расширение)
Чтобы не прыгать между браузером и редактором, поставь расширение Claude прямо в VS Code.
Открой VS Code
Нажми на иконку Extensions (квадратики) в левой панели
В поиске напиши «Claude»
Нажми Install
После установки войди в свой аккаунт Claude
Теперь ты можешь общаться с ИИ прямо в редакторе — и он будет создавать файлы проекта на месте.
Если у тебя не настроен Claude для более качественно работы, то прочитай наш гайд, как с полного 0 настроить Claude Code.
Внутри:
— Регистрация и первая ГРАМОТНАЯ настройка
— Как разговаривать с Claude. Формула запроса из четырёх элементов
— Как создать рабочее пространство с файлами и инструкциями, чтобы Claude всегда знал контекст
— Три способа научить Claude писать в твоем стиле
— Что такое скиллы и как с ними работать
— Готовые промпты для
Шаг 4. Подготовь запрос — опиши, что ты хочешь получить
Это самый важный шаг. Чем точнее ты опишешь свой сайт, тем лучше будет результат.
🫣 Плохой запрос:
«Сделай мне сайт, красивый»😎 Хороший запрос:
«Сделай лендинг для фитнес-клуба “RESET” в Москве. Красные и темные тона, жесткий стиль. На странице: заголовок с фото логотипа фитнес-клуба, блок "о нас" (2 предложения), меню (3 варианта оплаты абонемента), галерея из 4 фото, кнопка "Связаться с нами" со ссылкой на Telegram. Адаптивная вёрстка под телефоны. Без сложных анимаций.»Как подготовить хороший запрос — ответь на 4 вопроса:
Что это? — лендинг, визитка, портфолио, магазин?
Для кого? — для клиентов, для себя, в подарок?
Что должно быть на странице? — какие блоки, кнопки, тексты?
Какой стиль? — минимализм, яркий, тёмный, уютный? Можно дать ссылку на сайт, который нравится.
Лайфхак: если тебе сложно описать — попроси сам Claude помочь. Напиши ему:
«Я хочу сделать сайт-визитку для [кто ты / чем занимаешься]. Помоги мне составить подробное описание для генерации сайта: задай мне нужные вопросы.»Claude задаст тебе 5–7 уточняющих вопросов и по твоим ответам сам соберёт идеальный промпт. Это работает отлично, даже если ты вообще не знаешь, с чего начать.
Шаг 5. Отправь запрос и получи первую версию
Теперь у тебя всё готово. Отправляй свой подготовленный запрос в Claude — и получай результат.
Что произойдёт:
Claude сгенерирует HTML/CSS-код твоего сайта
Код появится в файле (обычно index.html)
Ты сможешь открыть этот файл в браузере и увидеть свой сайт
Как посмотреть результат:
Найди файл index.html в папке проекта
Кликни правой кнопкой → «Открыть с помощью» → выбери браузер (Chrome, Firefox, Safari)
Готово — ты видишь свой сайт!
Первая версия не идеальна? Это нормально.
Просто скажи Claude, что поправить:
«Сделай заголовок крупнее»
«Поменяй фон на тёмный»
«Кнопку сделай ярче, она теряется»
«Добавь отступ между блоками»
2–3 итерации и сайт будет выглядеть так, как ты хочешь.
Шаг 6. Загрузи проект на GitHub
GitHub — это хранилище для твоего проекта. Бесплатное, надёжное, и нужно для публикации.
Зачем: чтобы твой код хранился в безопасном месте и чтобы потом можно было опубликовать сайт.
Зарегистрируйся на github.com (бесплатно)
Создай новый репозиторий (New repository)
Назови его, например, reset-fitness
Загрузи туда файлы своего проекта
Лайфхак: Claude может сделать это за тебя через терминал. Просто попроси:
«Инициализируй git-репозиторий, создай коммит и загрузи проект на GitHub»
Примечание: Claude часто просит разрешения на выполнение операций. Как правило ничего критичного он не сделает, поэтому можете смело разрешать (нажимать Enter).
Дополнение: мы загрузили файлы нашего “сайта” в “облако” и теперь даже если что-то случится с вашим компьютером или вы случайно удалите проект, его всегда можно будет восстановить с гитхаба.
Шаг 7. Опубликуй сайт — чтобы его мог увидеть любой
Последний шаг — сделать так, чтобы твой сайт был доступен по ссылке. Есть несколько простых способов:
Вариант 1: GitHub Pages (бесплатно)
Зайди в настройки репозитория → Pages
Выбери ветку main → Save
Через пару минут обновите эту страницу и увидите ссылку на ваш опубликованный сайт. В моем случае это https://focussam.github.io/reset-fitness/ (можете нажать, он прям работает и открывается!)
Твой сайт в интернете. Живой. С настоящей ссылкой.
Вариант 2: TimeWeb (почти бесплатно)
Зарегистрируйся на Timeweb
Выбери App Platform
Подключи свой GitHub-репозиторий со своим проектом
Импортируй репозиторий — и сайт автоматически опубликуется
Получишь бесплатный домен + можешь подключить любой свой (.ru , .com и т. д)
Всё просто.
Бонусный шаг. Используй Skills — секретное оружие для качественного результата
Skills (скиллы) — это готовые наборы инструкций, которые говорят ИИ, как именно делать работу качественно. Думай о них как о «профессиональном опыте», который ты загружаешь в Claude.
Что такое скиллы:
Это текстовые файлы с best practices — как правильно верстать, какие паттерны использовать, как структурировать код
Они делают результат значительно лучше — как если бы ты нанял опытного разработчика вместо стажёра
Где взять скиллы:
В нашем курсе на airoomclub.ru мы даём готовые скиллы для типичных задач
Также можно найти скиллы в открытых репозиториях на GitHub
Как использовать:
Скиллы загружаются в контекст Claude перед началом работы
Просто скопируй содержимое скилла и отправь Claude перед основным запросом
Или укажи путь к файлу скилла, если работаешь через Claude Code
Пример: перед тем как просить Claude сделать сайт, загрузи скилл по фронтенд-дизайну — и результат будет выглядеть в разы профессиональнее.
Я скопировал описание целиком
Вставил его в новой сессии в Claude Code и нажал Enter
Скилл загрузился, ИИ пишет о том, что видит мою страницу и предлагает действия. Если вы не знаете английский язык, то просто напишите “переведи на русский” и дальше ИИ будет общаться на русском.
Ждем результат, оцениваем, просим внести изменения в GitHub. Теперь страница выглядит современнее: шрифты, дизайн, добавлены анимации.
Окей, ты всё это прочитал, решил что хочешь попробовать. Что дальше?
Этот гайд показал тебе картину «верхнеуровнево».
Ты теперь понимаешь:
что такое вайбкодинг
почему это работает
что можно создать
как выглядит процесс
какие принципы делают результат крутым
Однако стоит понимать, что гайд — это карта. А чтобы пройти путь, нужен маршрут с конкретными шагами.
Именно для этого мы сделали курс по вайбкодингу в нашем клубе airoomclub.ru.
AI Room Club — это закрытое сообщество для тех, кто хочет сделать ИИ частью своей жизни и работы. Не просто знать про него, а реально использовать: в работе, в бизнесе, в контенте, в повседневных задачах.
И первое что мы предлагаем освоить в клубе — это курс по вайбкодингу.
Через 7 дней у тебя будет первый опубликованный сайт. Не теоретически, а реально, по ссылке.
Прямо сейчас, сразу же после оплаты, тебе станет доступно два материала:
Курс по вайбкодингу. 5 модулей, в каждом из которых по 5-8 уроков в максимально понятном формате и на простом языке.
Видео инструкция для удобства, в которой разработчик и участник нашей команды — Азамат, создал сайт.
После изучения курса и видео вы сможете создать сайт, платформу и любое другое веб-решение.
Что внутри курса?
Курс построен так, чтобы ты прошёл путь от «я вообще ничего не понимаю» до «я сам собрал и опубликовал свой сайт» и сделал это спокойно, без стресса и истощения себя.
Модуль за модулем, шаг за шагом ты:
Разберёшься, какие инструменты использовать и как они работают
Научишься писать запросы, которые дают крутой результат с первого раза. Соберёшь свой первый сайт — реальный, который можно показать и использовать.
Узнаешь, как дорабатывать, итерировать, улучшать свои проекты
Научишься публиковать свои проекты
И главное, сможешь повторить это для любой задачи: бизнес, личной, проектной, подарок, портфолио.
Курс — это очень простые текстовые уроки, иногда с видео для понимания. С картинками, схемами, примерами. Без занудства. Без «воды».
Каждый урок — конкретный результат.
Для кого создан этот курс?
— Предпринимателей и фрилансеров — чтобы не тратить деньги и время на разработчиков и быстро запускать свои проекты.
— Для тех, кто хочет новый навык и начать зарабатывать на нем — вайбкодинг открывает возможности, которых ещё год назад не было. Это навык, за который будут платить.
— Для тех, кто далёк от технологий, но хочет идти в ногу со временем — курс построен для людей с полного нуля. Никаких предварительных знаний не нужно.
— Для тех, кому просто интересно — если тебе любопытно, как работает ИИ и что с ним можно делать — это идеальная точка входа.
Одна подписка и курс твой
Всё обучение доступно по подписке на airoomclub.ru.
Подписка открывает доступ не только к курсу по вайбкодингу, но и к другим материалам по работе с ИИ. Это не «один курс за одну цену» — это целая экосистема знаний, которая постоянно обновляется нашей командой.
Ты платишь один раз и получаешь доступ ко всему на один, три или шесть месяцев. Без скрытых доплат. Без «а вот этот модуль за отдельные деньги».
Ближайшие темы, которые мы будем разбирать: AI-агенты.
F.A.Q.
«Я слишком далёк от технологий»
Вайбкодинг и создан для тех, кто далёк от технологий. Ты пишешь обычным языком. Не на Python. Не на JavaScript. На русском. Или на любом другом.
Если ты умеешь описать, чего хочешь. Ты уже готов.
«Это, наверное, только для простых страничек»
Нет. Через вайбкодинг собирают полноценные веб-приложения, дашборды, платформы. Мы сами собрали образовательную платформу. Но для старта, да, начни с чего-то простого. Лендинг. Визитка. Поздравление. И ты сам увидишь, как быстро растёт сложность того, что ты можешь создавать.
«Зачем мне это, если я не предприниматель?»
Потому что сайт — это не только для бизнеса. Это портфолио, личный бренд, подарок, хобби-проект, резюме в формате, который запоминается. Умение быстро воплощать идеи — навык, который пригодится в любой сфере.
«Сколько стоит подписка на ИИ?»
Подписка на Claude Pro — $20/мес. Это единственная обязательная трата. Всё остальное (VS Code, GitHub, хостинг на GitHub Pages/Vercel) — бесплатно.
«А это точно будет выглядеть нормально?»
Разумный вопрос. Отвечаем честно.
Да, но с оговоркой.
Если ты просто напишешь «сделай сайт» и не дашь никакого контекста — результат будет средненький. Как фастфуд: съедобно, но не впечатляет.
Если ты потратишь 10–15 минут на хороший запрос — результат будет выглядеть так, будто его сделал дизайнер.
А если ты освоишь продвинутые техники (как правильно описывать стиль, как работать с референсами, как итерировать) — результат будет конкурировать с профессиональными сайтами.
Мы видели это неоднократно. Люди без опыта в дизайне и разработке собирают сайты, которые выглядят дорого и профессионально. Потому что ИИ уже «знает» тысячи паттернов хорошего дизайна — ему просто нужно правильное направление от тебя.
И последнее:
Вайбкодинг — это не будущее. Это настоящее. Люди уже собирают сайты, запускают продукты, автоматизируют задачи без единой строчки кода. Без траты огромных средств на MVP и не вкладывают 100 часов.
Вопрос только один: ты будешь среди тех, кто освоил это сейчас или среди тех, кто говорит «это всё временный хайп, который скоро закончится» и отстанет от быстро развивающегося мира?
Мы оба знаем правильный ответ.