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

Модуль 0 — Подготовка рабочего места

0.1 Что мы построим

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

Вот что у тебя будет к концу курса:

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

Главное: тебе не нужно быть программистом. Ты описываешь задачу обычными словами — «сделай мне лендинг для кофейни с формой заявки» — а Claude Code пишет код, создаёт файлы и объясняет, что сделал.

0.2 Создаём аккаунт Claude

1. Открой сайт Claude

   Перейди на claude.ai и нажми Sign up.

2. Зарегистрируйся через Google или почту

   Быстрее всего — кнопка Continue with Google. Или введи email и подтверди код из письма.

3. Подтверди аккаунт

   Введи имя, подтверди, что тебе есть 18, — готово. Это твой аккаунт Claude на твоей почте.

0.3 Устанавливаем Claude Code

Claude Code работает в «терминале». Сначала поставим то, без чего он не запустится, — программу Node.js, а потом сам Claude Code.

Шаг А. Устанавливаем Node.js

1. Скачай Node.js

   Открой nodejs.org и нажми большую зелёную кнопку LTS (рекомендованная версия). Скачается файл-установщик.

2. Установи

   Запусти скачанный файл. И на Windows, и на Mac это обычный установщик: жми Продолжить → Принять условия → Установить → Готово (ничего не меняй). На Mac может спросить пароль от компьютера — это нормально.

3. Проверь, что установилось

   Открой терминал (на Windows — приложение «PowerShell» или «Командная строка», на Mac — «Терминал» через поиск Spotlight по слову Terminal). Введи команду и нажми Enter:

   node -v

   Если появилось что-то вроде v22.3.0 — Node.js установлен. ✅

Шаг Б. Устанавливаем Claude Code

1. Введи команду установки

   В том же терминале вставь и нажми Enter:

   npm install -g @anthropic-ai/claude-code

   Подожди 1–2 минуты, пока всё скачается. Побегут строки — это нормально.

2. Запусти Claude Code

   Введи короткую команду:

   claude

   В первый раз он попросит войти — откроется браузер, нажми авторизоваться аккаунтом claude.ai (тем самым из урока 0.2).

3. Проверь, что работает

   Когда увидишь приветствие Claude Code прямо в терминале — напиши ему: Привет! Ты готов помогать мне собрать сайт? Если ответил — всё работает. 🎉

0.4 Терминал за 10 минут

Терминал — это просто способ давать компьютеру команды текстом. Тебе пригодятся всего несколько:

• cd имя_папки — зайти в папку
• cd .. — подняться на папку выше
• ls (Mac) или dir (Windows) — показать, что в папке
• claude — запустить нашего помощника в этой папке

0.5 Рабочая папка проекта

Все файлы твоего сайта должны лежать в одной папке. Так и тебе, и Claude Code проще: он работает именно с той папкой, в которой запущен.

1. Создай папку для сайта

   В терминале введи по очереди (каждую строку — с новой, нажимая Enter):

   # переходим на рабочий стол
   cd Desktop
   # создаём папку проекта
   mkdir moy-sayt
   # заходим внутрь неё
   cd moy-sayt

   Теперь ты «внутри» папки moy-sayt. Именно здесь появятся все файлы сайта.

2. Запусти здесь Claude Code

   Просто введи claude — и помощник будет работать именно в этой папке. Всё, что он создаст, окажется в moy-sayt.

3. Познакомь Claude Code с проектом

   Первым сообщением задай контекст — это сильно повысит качество будущих ответов:

   Промпт: контекст проекта

   Я собираю свой первый сайт и совсем не умею программировать. Объясняй всё простыми словами, без сложных терминов, и делай всё сам. Мой проект: лендинг кофейни «Зерно» (замени на свою идею). Запомни это на весь наш разговор.

Модуль 1 — Первая страница за вечер

1.1 Идея и структура сайта

Чем точнее ты опишешь, что хочешь, тем лучше выйдет сайт. Но придумывать структуру самому не нужно — пусть Claude Code сделает это вместе с тобой.

1. Опиши свою идею в двух-трёх фразах

   Ответь себе на три вопроса: кто ты / что предлагаешь, для кого, что человек должен сделать (позвонить, оставить заявку, купить). Например: «Кофейня “Зерно” в центре города, кофе и завтраки, хочу, чтобы люди приходили и заказывали кофе с собой».

2. Попроси Claude Code предложить структуру
   Промпт: структура сайта

   Я делаю одностраничный сайт-лендинг. Вот моя идея: [вставь свои 2–3 фразы]. Предложи простую структуру страницы: какие блоки нужны, в каком порядке, и что коротко написать в каждом. Не пиши код — только план блоков списком. Объясни простыми словами.

   Claude предложит примерно такой набор: шапка с названием → первый экран с главным предложением и кнопкой → о нас → услуги/меню → отзывы → контакты и форма → подвал.

3. Утверди или поправь план

   Если чего-то не хватает — так и скажи словами: «добавь блок с ценами», «убери отзывы, их пока нет». Когда план нравится — переходим к сборке.

1.2 Промпт для сайта

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

1. Собери промпт по шаблону

   Возьми заготовку ниже, подставь свою тему и утверждённые блоки из урока 1.1:

   Промпт: собрать сайт

   Собери одностраничный сайт-лендинг в одном файле index.html (стили и скрипты внутри этого же файла, чтобы всё работало без установки чего-либо). Тема: кофейня «Зерно» — кофе и завтраки в центре города. Блоки по порядку: 1) шапка с названием и меню-ссылками, 2) первый экран — крупный заголовок, короткое предложение и кнопка «Заказать кофе», 3) о нас, 4) меню из 4 позиций с ценами, 5) блок с адресом и часами работы, 6) подвал. Сделай современно и аккуратно, адаптивно под телефон. Тексты придумай осмысленные под тему. Покажи, каким файлом открыть результат.
2. Дай Claude Code выполнить

   Отправь промпт и подожди. Claude Code сам создаст файл index.html в твоей папке и в конце напишет, как его открыть.

3. Не редактируй код руками

   Даже если ты видишь текст кода в терминале — не трогай его. Всё меняем только словами, через Claude Code. Это и есть вайб-кодинг.

1.3 Первый запуск: смотрим свой сайт

1. Найди файл index.html

   Открой папку moy-sayt на Рабочем столе. Внутри лежит файл index.html — это твой сайт.

2. Открой его в браузере

   Дважды кликни по index.html — он откроется в твоём браузере (Chrome, Safari, Edge). Ты увидишь свою страницу целиком.

3. Если открылся код, а не сайт

   Иногда файл открывается как текст. Тогда попроси Claude Code:

   Промпт: как открыть сайт

   Я открыл index.html, но вижу код, а не сайт. Подскажи по шагам, как правильно открыть этот файл в браузере на моём компьютере.

1.4 Правки словами

Это суперсила вайб-кодинга. Тебе не нравится заголовок, цвет кнопки, порядок блоков — ты просто говоришь об этом Claude Code, и он переделывает. Запомни рабочую формулу правки:

[Что именно меняем] + [Как должно стать] + [по одной правке за раз]

Примеры правок, которые можно давать прямо сейчас (по одной за раз):

1. Дай одну правку

   Выбери одно изменение, напиши его Claude Code и нажми Enter. Он поправит файл.

2. Обнови страницу в браузере

   Вернись в браузер с открытым сайтом и нажми обновить (Ctrl+R, на Mac Cmd+R). Изменение появится.

3. Повторяй, пока не понравится

   Меняй по одной вещи за раз, обновляй, смотри результат. Так ты всегда видишь, что именно поменялось.

Модуль 2 — Дизайн и наполнение

2.1 Стиль и цвета

Дизайн — это не «врождённый талант», а понятные решения. Держи в голове простую формулу аккуратного сайта, и попроси Claude Code её соблюсти:

2–3 цвета + 1–2 шрифта + воздух между блоками + скругления и лёгкие тени

1. Задай общий стиль одним промптом
   Промпт: стиль сайта

   Обнови дизайн всего сайта в едином современном стиле. Используй тёплую палитру под кофейню: кремовый фон, тёмно-коричневый текст, один акцентный цвет для кнопок. Подбери 1–2 красивых шрифта с Google Fonts, добавь больше воздуха между блоками, аккуратные скругления и лёгкие тени у карточек. Сделай так, чтобы на телефоне тоже выглядело хорошо.
2. Попроси показать варианты, если не уверен

   Не знаешь, какой цвет? Спроси: «Предложи 3 варианта цветовой палитры под кофейню и коротко опиши настроение каждой». Выбери словами: «давай вариант 2».

3. Точечно докрути

   Правь мелочи так же, словами: «сделай кнопки чуть крупнее», «шрифт заголовков поживее», «фон чуть светлее».

2.2 Блоки и секции

Сайт — это набор блоков. Их легко наращивать под задачу: добавить отзывы, часто задаваемые вопросы, галерею, преимущества.

1. Добавь нужный блок

   Опиши, что за блок и что в нём. Примеры:

   Промпты: новые блоки

   • Добавь блок «Почему мы» с 3 карточками-преимуществами: своя обжарка, зёрна прямых поставок, кофе за 3 минуты.
   • Добавь блок отзывов: 3 коротких отзыва довольных гостей с именами.
   • Добавь блок вопросов-ответов (FAQ) из 4 частых вопросов про кофейню.
   • Добавь галерею из 3 мест под фото интерьера.
2. Переставь блоки под логику

   Правильный порядок ведёт человека к действию. Скажи: «подними блок “Почему мы” сразу под первый экран», «FAQ поставь перед контактами».

3. Убери лишнее

   Что не работает — убираем: «удали блок галереи, фото пока нет».

2.3 Тексты с AI

Текст решает не меньше, чем дизайн. Хороший заголовок и понятные выгоды заставляют человека остаться. Claude отлично пишет такие тексты — надо лишь правильно попросить.

1. Перепиши главный заголовок
   Промпт: заголовок первого экрана

   Придумай 5 вариантов главного заголовка для первого экрана моей кофейни «Зерно». Он должен за секунду объяснять, что это и чем цепляет. Коротко, тепло, по-человечески, без штампов. Дай список из 5 вариантов.
2. Наполни блоки выгодами, а не свойствами
   Промпт: тексты блоков

   Напиши тексты для блоков сайта кофейни: «О нас» (2–3 тёплых предложения), 3 преимущества (заголовок + одна строка выгоды для гостя), и призыв к действию у кнопки. Пиши про пользу для гостя, а не сухие факты. Тон — дружелюбный.
3. Проверь факты и вставь

   AI мог «додумать» детали (адрес, часы, цены). Сверь с реальными и поправь: «часы работы поставь 8:00–20:00, адрес — улица Садовая, 5».

2.4 Картинки

Картинки — это половина впечатления. Есть три честных пути, и Claude Code поможет с каждым.

1. Свои фото (лучший вариант)

   Если у тебя есть реальные фото — положи их в папку проекта moy-sayt и скажи: «Я положил в папку файлы coffee1.jpg и interior.jpg — вставь первое на первый экран фоном, второе в блок “О нас”».

2. Бесплатные стоковые фото

   Нет своих — попроси Claude Code подобрать бесплатные: «Подскажи, где взять бесплатные фото кофе без нарушения прав (например, Unsplash), и вставь пару подходящих в блоки. Дай ссылки, откуда взял». Скачай по ссылкам и положи в папку.

3. Иконки и эмодзи

   Для преимуществ и меню часто хватает иконок: «В блоке “Почему мы” добавь к каждой карточке подходящую иконку или эмодзи». Это быстро и всегда уместно.

Модуль 3 — Логика: формы, кнопки, данные

3.1 Форма заявки

Форма превращает «красивый сайт» в инструмент, который приносит заявки. Сделаем так, чтобы данные из формы реально приходили тебе — без своего сервера и программирования.

1. Добавь саму форму
   Промпт: форма заявки

   Добавь на сайт блок с формой заявки: поля «Имя», «Телефон» и «Комментарий», кнопка «Оставить заявку». Сделай её в общем стиле сайта, с проверкой, что имя и телефон заполнены. После отправки показывай сообщение «Спасибо! Мы свяжемся с вами».
2. Получи бесплатный адрес для приёма заявок

   Чтобы заявки приходили тебе на почту без сервера, используем бесплатный сервис форм. Например, Formspree (formspree.io): зарегистрируйся на своей почте, создай форму — сервис даст тебе личный адрес формы (endpoint) вида https://formspree.io/f/xxxx.

3. Подключи форму к своему адресу
   Промпт: подключить приём заявок

   Подключи мою форму к сервису Formspree, чтобы заявки приходили мне на почту. Вот мой личный адрес формы: [вставь свой endpoint из Formspree]. Сделай, чтобы после отправки данные уходили туда, а посетителю показывалось спасибо. Работай по официальной документации Formspree.
4. Проверь на себе

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

3.2 Кнопки и переходы

1. Свяжи меню с блоками (плавная прокрутка)
   Промпт: навигация по сайту

   Сделай, чтобы ссылки в верхнем меню плавно прокручивали страницу к нужным блокам (Меню, О нас, Контакты). Кнопка «Заказать» на первом экране пусть прокручивает к форме заявки.
2. Добавь полезные действия на кнопки

   Кнопки могут звонить, открывать карту, писать в мессенджер:

   Промпт: рабочие кнопки

   Сделай, чтобы номер телефона на сайте был кликабельным и по нажатию звонил. Добавь кнопку «Как добраться», которая открывает мой адрес на карте. Кнопку «Написать нам» — чтобы открывала чат в Telegram по моей ссылке [вставь свою].
3. Проверь на телефоне

   Открой сайт с телефона (или попроси Claude: «покажи, как проверить, что кнопки удобно нажимать пальцем»). Кнопки должны быть крупными и не слипаться.

3.3 Подключаем данные (простое приложение)

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

Сайт = показывает · Приложение = сайт, который ещё и считает, фильтрует, отвечает

Выбери одну идею под свою тему и попроси Claude Code её собрать:

1. Опиши приложение простыми словами

   Скажи, что человек делает и что должно произойти. Claude Code соберёт логику сам — тебе не нужно знать, как это устроено внутри.

2. Проверь по шагам

   Открой сайт, понажимай, повыбирай. Что-то считает неверно или не так показывает — опиши словами: «при выборе 2 капучино сумма должна быть 150, а показывает 75».

3. Докрути под себя

   Меняй значения, тексты, варианты — всё теми же правками словами, как в Модуле 1.

Модуль 4 — Публикация в интернет

4.1 Хостинг бесплатно

Пока сайт живёт только у тебя на компьютере. Чтобы им пользовались другие, его нужно «опубликовать» на хостинге. Есть бесплатные сервисы, где это делается за пару минут. Самый простой для новичка — Netlify Drop (перетащил папку — получил ссылку).

1. Зарегистрируйся на бесплатном хостинге

   Открой app.netlify.com/drop. Можно сразу опубликовать без регистрации, но лучше создать свой бесплатный аккаунт (через Google или почту) — тогда сайтом можно управлять.

2. Опубликуй сайт перетаскиванием

   Просто перетащи свою папку moy-sayt (с файлом index.html внутри) в окно Netlify Drop. Через несколько секунд сервис выдаст тебе рабочую ссылку вида твой-сайт.netlify.app. Открой её — это уже интернет!

3. Проверь с телефона и отправь другу

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

4. Как обновлять сайт

   Поменял что-то через Claude Code — снова перетащи обновлённую папку в Netlify (или в разделе Deploys нажми «Deploy manually»). Ссылка останется той же, содержимое обновится.

4.2 Свой домен

Свой домен выглядит солиднее и легче запоминается. Он платный (обычно недорого в год), покупается у регистратора на твоё имя, а потом привязывается к сайту.

1. Придумай и проверь имя

   Короткое, по теме, легко диктуется. Проверь, свободно ли оно, у любого регистратора доменов (например, Namecheap, Porkbun, GoDaddy или украинский nic.ua).

2. Купи домен на свой аккаунт

   Зарегистрируйся у регистратора на своей почте, оплати домен своей картой. Данные для входа сохрани в надёжном месте.

3. Привяжи домен к сайту

   В настройках сайта на Netlify найди раздел Domain settings → Add a domain, впиши свой домен — сервис покажет, какие записи (DNS) прописать у регистратора. Не понял шаги — попроси Claude Code:

   Промпт: подключить домен

   Я купил домен [имя домена] у регистратора [название], а сайт опубликован на Netlify. Объясни по шагам, простыми словами, что и куда прописать, чтобы мой домен открывал мой сайт. Что такое DNS-записи и где их менять.
4. Подожди и проверь

   После изменения DNS сайт по новому адресу заработает не сразу — от нескольких минут до нескольких часов. Проверяй, открывая свой домен в браузере.

4.3 Финальный проект и чек-лист запуска

Поздравляю — если ты дошёл сюда, у тебя уже не «папка с уроками», а живой сайт по своей ссылке, который ты собрал сам, без программистов. Прогони финальную проверку.

1. Пройди по сайту как гость

   Открой свой сайт по домену и представь, что видишь его впервые: всё ли понятно, красиво, работают ли кнопки и форма. Заметил недочёт — правь словами через Claude Code и снова публикуй.

2. Попроси у Claude финальный аудит
   Промпт: финальная проверка

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

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