Вайбкодинг: что это и как создать первый сайт с помощью ИИ

Хотите сделать свой сайт, но код пока выглядит как набор непонятных символов. При этом идея уже есть: показать услуги, собрать портфолио, добавить кнопку связи. Просто непонятно, как всё это собрать.

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

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

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

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

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

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

В интернете термин используют по-разному. Кто-то вообще не смотрит в код. Кто-то проверяет каждое изменение. Здесь мы с вами будем идти через понятные задачи и проверку результата. Особенно если страницей потом станут пользоваться другие люди.

Работа обычно выглядит так:

1. Описываем одну задачу.
2. Смотрим, какой план предложил ИИ.
3. Собираем небольшую первую версию.
4. Открываем её и проверяем нужные действия.
5. Сохраняем то, что работает, и идём дальше.

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

Что можно сделать с помощью вайбкодинга

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

Для первого упражнения я бы выбрал страницу специалиста. В ней легко разобраться: вот услуги, вот работы, вот связь. Регистрация, оплата и база клиентов на этом этапе не нужны.

Учебный сайт дизайнера Анны. Сразу видно, чем она занимается и как с ней связаться. Все примеры на скриншотах взяты из учебных материалов Daily Prompts.

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

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

Какие инструменты нужны для вайбкодинга

Для этого упражнения подойдёт Claude Code — помощник для разработки от Anthropic. Он умеет работать с файлами проекта и выполнять доступные команды. Пользоваться им можно, в частности, в настольном приложении и терминале. Обзор Claude Code.

То есть вам не нужно каждый раз копировать кусок кода из чата и искать, куда его вставить. Помощник может внести изменения в проект. Какие именно действия ему доступны, зависит от среды и выданных разрешений.

Есть и Codex от OpenAI. Его терминальная версия тоже работает с локальными проектами. Документация Codex CLI.

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

Шаг 1. Объясняем, какой сайт нам нужен

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

Возьмём ту же страницу дизайнера. Перед первым промптом заполняем короткую таблицу:

Что нужно определить	Учебный пример
Для кого делаем сайт	Для владельцев небольших брендов
Что предлагаем	Разработку логотипа и упаковки
Что показываем	Услуги, работы и этапы сотрудничества
Какое действие нужно	Перейти в Telegram
Что пока не делаем	Регистрацию, оплату и форму заявки

В своём проекте замените ответы на настоящие. Ссылку для связи тоже укажите свою.

Если просто тренируетесь, можно оставить учебные данные. Только обозначьте это. Демонстрационная кнопка не должна выглядеть как рабочая отправка заявки.

Шаг 2. Готовим папку проекта

Создаём отдельную папку, например my-first-site. Складываем туда текст о себе, список услуг и работы, которые можно показывать.

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

Затем выбираем эту папку в инструменте, где будем работать. В Claude Desktop локальная сессия начинается с вкладки Code и выбора среды и папки. Расположение элементов может отличаться между версиями приложения. Инструкция по запуску.

Для этого упражнения достаточно одной папки. Доступ ко всему диску нам не нужен. И ещё: не добавляйте в учебные материалы пароли, ключи и конфиденциальные документы.

Шаг 3. Отправляем первый промпт

Вот заготовка. Замените описание специалиста и услуги под свою задачу:

Я делаю учебную страницу дизайнера для небольших брендов.
Нужны: первый экран, услуги, примеры работ, этапы работы и контакты.
Главное действие — перейти по моей ссылке в Telegram.

На первом этапе не нужны регистрация, оплата, база данных и форма заявки.
Используй материалы из папки. Если факта нет, не придумывай его.
Сначала предложи структуру страницы и объясни, какие файлы создашь.
Пока ничего не меняй. Задай вопрос, если без ответа нельзя продолжить.

Сначала просим план. Так проще заметить, если помощник решил собрать интернет-магазин вместо страницы с услугами.

Посмотрите, все ли нужные блоки на месте. Не появились ли лишние сервисы. Понятно ли, что вы получите в конце.

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

Шаг 4. Собираем первую версию сайта

Если план подходит, отправляем следующий запрос:

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

Статическая страница — это простой сайт без отдельной серверной логики. Для портфолио такой вариант может оказаться достаточным. Не нужно усложнять проект только потому, что ИИ умеет собирать более сложные вещи.

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

Локальная страница ещё не обязательно доступна другим людям. Публикация в интернете будет отдельным шагом.

Шаг 5. Просим правки, которые можно проверить

Теперь смотрим на страницу. Допустим, заголовок огромный и кнопка уехала вниз. Можно написать «сделай лучше», но помощнику опять придётся угадывать.

Вместо этого описываем проблему:

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

С текстом работает тот же принцип:

В услугах неясно, чем отличаются «Логотип» и «Фирменный стиль».
Перепиши описания через состав результата: что именно получает клиент.
Не добавляй обещаний, сроков и цен, которых нет в моих материалах.

Делаем одну понятную правку, смотрим результат, двигаемся дальше. Если одновременно менять шрифт, структуру, тексты и кнопки, будет сложнее разобраться, почему что-то сломалось.

Шаг 6. Смотрим, как сайт выглядит на телефоне

На ноутбуке всё может быть красиво. А в узком окне заголовок обрезается, карточки не помещаются, меню закрывает кнопку.

Поэтому мобильную версию проверяем отдельно.

Та же учебная страница в узком окне. Блоки перестроились, текст помещается по ширине.

Проверяем по списку:

• Текст читается и не уходит за край.
• Главная кнопка открывает нужный адрес.
• Меню ведёт к нужным разделам.
• Картинки не перекрывают текст.
• Контакты указаны правильно.
• Учебные сведения не выглядят как реальные отзывы и достижения.

Если проверили только узкое окно на компьютере, это ещё не проверка на настоящем телефоне. Когда будет возможность, откройте страницу и на нём.

Шаг 7. Сохраняем рабочую версию

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

Для первого упражнения подойдёт копия папки с понятным названием. Для регулярной работы полезно освоить Git — систему, которая хранит историю изменений проекта.

Попросите помощника объяснить способ возврата. Важно знать, какая версия сохранена и как её восстановить.

Ещё полезно записать в короткий файл, что уже сделано и как открыть сайт. Через неделю это сэкономит время. В новой сессии тоже не придётся объяснять всё с начала.

Что проверить перед публикацией сайта

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

Если добавили форму, отправьте тестовую заявку и проверьте, куда она пришла. Одного сообщения об успешной отправке на экране недостаточно.

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

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

Из-за чего можно застрять

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

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

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

Повторять «не работает» без деталей. Напишите, куда нажали и что произошло. Приложите текст ошибки без секретных данных. Так у помощника появится новая информация.

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

Что сделать после первого сайта

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

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

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

В моём курсе «Вайбкодинг за выходные с Claude Code» этот путь разбит на практические занятия. Разбираем первый проект, правки, историю изменений и следующие инструменты. Если хотите идти по готовому маршруту, посмотрите программу курса и выберите, с чего начать.

Дальше по теме

• Как пользоваться Claude Code: первый проект и правки.
• Claude Code или Codex: что выбрать для первого проекта.

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

Нужно ли уметь программировать?

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

Можно ли сделать сайт одним запросом?

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

Вайбкодинг бесплатный?

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

Что делать, если ИИ сломал сайт?

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

Что выбрать первым: Claude Code или Codex?

Я бы начал с одного инструмента, к которому уже есть подходящий доступ. В курсе используем Claude Code. Навыки постановки задач и проверки результата пригодятся и в другой среде.