Что такое "vibe coding" и как это работает
Вы описываете словами, что хотите видеть на сайте. Claude Code пишет весь код за вас. Ни одной строки вручную. Просто говорите: "Хочу красивый лендинг для цветочной мастерской". И получаете рабочий сайт.
Это называют vibe coding. Вы задаёте настроение, направление, смысл. AI превращает это в работающий код.
Подготовка: 2 минуты
Вам понадобится установленный Claude Code. Если ещё не установили, посмотрите наш гайд по установке.
Создайте пустую папку для проекта. Например, my-landing. Откройте терминал в этой папке и запустите:
claudeПоявится интерфейс Claude Code. Всё, вы готовы.
Первый промпт: описываем лендинг
Просто напишите, что вам нужно. Чем конкретнее, тем лучше. Вот пример:
Создай одностраничный лендинг для цветочной мастерской "Полевые".
Блоки: шапка с названием и слоганом "Букеты с характером",
каталог из 3 карточек с букетами (придумай названия и цены),
блок "О нас" с коротким текстом,
форма заказа с полями имя и телефон,
подвал с адресом и телефоном.
Стиль: мягкие пастельные тона, современный шрифт,
адаптивная вёрстка для мобильных.
Всё в одном HTML-файле.Нажмите Enter и наблюдайте. Claude Code сам создаст файл index.html со всем кодом внутри.
Что произойдёт дальше
Claude Code начнёт писать код прямо при вас. Вы увидите, как создаётся файл, как добавляются стили и структура страницы. Через пару минут всё будет готово.
Откройте файл index.html в браузере. Просто дважды кликните по нему. Перед вами готовый лендинг с дизайном, текстами и формой.
Итерации: улучшаем голосом
Лендинг готов, но хочется поправить детали. Просто пишите в том же чате:
Сделай кнопку заказа крупнее и ярчеПоменяй цветовую палитру на сине-белуюДобавь блок с отзывами клиентов, придумай 3 отзываСделай так, чтобы шапка была фиксированной при прокруткеДобавь анимацию появления карточек при скролле
Каждый раз Claude Code внесёт изменения в файл. Обновите страницу в браузере и увидите результат. Весь цикл правки занимает 30 секунд.
Результат
За 10-15 минут у вас есть рабочий лендинг. С дизайном, адаптивной вёрсткой, формой обратной связи. Без единой написанной вами строки кода. Файл можно залить на любой хостинг.
Что Claude Code может и чего не может
Может:
- Создавать HTML-страницы любой сложности
- Делать адаптивный дизайн для мобильных
- Добавлять анимации, формы, галереи
- Переделывать и дорабатывать по вашим просьбам
Ограничения:
- Форма на лендинге не будет отправлять данные без серверной части. Для простого сбора заявок можно попросить Claude Code подключить сторонний сервис
- Для публикации сайта в интернете нужен хостинг. Claude Code создаёт файлы, но не размещает их онлайн
- Сложные интернет-магазины с оплатой и базой данных потребуют больше шагов и технического понимания
Начните с простого лендинга. Убедитесь, что это работает. Потом усложняйте.