Vibe-coding — это когда вы не пишете код сами, а описываете нейросети, что должно получиться, и она генерирует HTML, CSS и JS за вас. Термин закрепился в 2025 году, но суть проще любого модного слова: вы объясняете задачу человеческим языком, нейросеть переводит это в рабочий код, вы проверяете результат и просите поправить то, что не так.
Для сайта-визитки — одностраничника с контактами, услугами и парой фото — это рабочий способ обойтись без разработчика и без недели на курсы верстки. Ниже — пошаговый разбор на реальном примере: делаем визитку для частного мастера или небольшой компании.
С чего начать: инструмент и первое описание
Нужна нейросеть, которая умеет писать и объяснять код — с этим хорошо справляется Claude, у ChatGPT тоже есть рабочий режим для такой задачи. В Крафти доступ к обеим моделям уже открыт и оплачивается рублями, без VPN и зарубежной карты, так что выбирать инструмент можно по ходу дела, а не мучиться с регистрацией на каждый сервис отдельно.
Дальше — первое описание. Худшая стратегия — написать "сделай сайт-визитку" и ждать чуда. Нейросеть выдаст что-то общее, а переделывать общее сложнее, чем сразу задать рамки. В промпт стоит включить: кто аудитория, какие блоки нужны, в каком стиле, какой у вас есть текст и контакты.
Напиши код сайта-визитки на HTML и CSS (без фреймворков, один файл) для [сфера деятельности,
например: частный стоматолог / студия маникюра / небольшая юридическая практика].
Блоки: шапка с именем/названием и кнопкой "Записаться" или "Написать", короткое "о себе"
на 3-4 предложения, список услуг с ценами (дай 4-5 примеров), отзывы (2-3 плейсхолдера),
контакты и кнопка мессенджера внизу.
Стиль: [спокойный минимализм / яркий и дружелюбный / строгий деловой], основной цвет [цвет],
шрифт без засечек, адаптивная верстка под мобильный.
Текст для блоков подставь примерный, я потом заменю на свой.Нейросеть отдаст готовый файл целиком — можно сразу сохранить как index.html и открыть в браузере, чтобы увидеть, что получилось. Если тема шире визитки — например, нужен многостраничный сайт с каталогом или блогом, — про то, как выстраивать такие проекты через нейросеть, у нас есть отдельный разбор: как сделать продающий лендинг нейросетью.
Промпт-цепочка: от макета до готового сайта
Одним промптом хороший результат получается редко — обычно это цепочка из 5-8 итераций, и это нормально: так и работает vibe-coding.
1. Проверка структуры. Открыли файл, посмотрели, чего не хватает или что лишнее.
Убери блок с отзывами, вместо него добавь галерею из 6 фото (сделай плейсхолдеры-квадраты
с подписями "фото 1"–"фото 6", я потом заменю на свои).2. Правки по стилю. Нейросеть редко попадает в желаемый визуал с первого раза — цвета, отступы, шрифты обычно требуют донастройки.
Сделай кнопки более скруглёнными (border-radius побольше), увеличь отступы между блоками,
поменяй основной цвет на [укажи HEX или название], добавь лёгкую тень карточкам с услугами.3. Адаптивность. Отдельно стоит попросить проверить мобильную версию — по умолчанию нейросеть не всегда учитывает узкие экраны как следует.
Проверь верстку на ширине 375px (мобильный). Меню должно сворачиваться в гамбургер,
блок услуг — в одну колонку, шрифты не должны вылезать за края экрана.4. Финальная сборка. Когда структура и стиль устраивают, просите единый файл целиком, а не фрагменты — так проще один раз сохранить и разместить на хостинге или через GitHub Pages.
Собери итоговую версию одним файлом index.html со всеми правками выше.
Замени текст-плейсхолдер на: [вставьте реальные тексты и контакты].Если после сайта планируете продвигать его промптами для соцсетей или карточек товара, полезно заранее разобраться в самой логике формулировки задач нейросети — короткий гайд есть здесь: как написать промпт, который сработает.
Что делать, если нейросеть застряла или всё сломала
Это случается почти у всех: после десятой правки код перестаёт открываться, стили съезжают, а нейросеть на вопрос "почему не работает" начинает предлагать всё более странные решения. Несколько рабочих приёмов.
Не накапливайте правки в одном длинном чате бесконечно. У любой модели есть предел, сколько контекста она удерживает разом — после долгого диалога с кучей версий файла нейросеть начинает путать, какая правка актуальна. Если чувствуете, что модель "теряет нить" — сохраните текущий рабочий файл, откройте новый чат и вставьте только его, без истории.
Просите не чинить вслепую, а объяснить причину. Вместо "почини" — "объясни, что именно сломалось и почему". Так вы видите логику проблемы и в половине случаев чините сами буквально одной строкой.
Локализуйте поломку. Если сайт "весь развалился" — не кидайте нейросети весь файл с фразой "не работает". Уберите из копии кода блоки по одному, проверяя в браузере, пока не найдёте, после какого куска всё падает — и присылайте уже конкретный фрагмент с точным описанием, что не так.
Держите рабочую версию отдельно. Перед каждой крупной правкой сохраняйте копию файла — если новая версия хуже, откатиться проще, чем восстанавливать логику задним числом.
И главное: если задача выходит за рамки визитки — нужна форма с обработкой данных, оплата, личный кабинет — vibe-coding перестаёт быть быстрым решением и превращается в полноценную разработку. Для таких случаев лучше привлекать разработчика или закладывать больше времени на итерации.
Итог
Vibe-coding хорошо закрывает задачу простого сайта-визитки или одностраничника: нейросеть пишет код, вы описываете, что нужно, и правите итерациями. Это не замена разработке сложных продуктов, но для визитки, промо-страницы под акцию или личного сайта специалиста — рабочий и быстрый путь, особенно если четко описывать задачу с первого промпта и не бояться разбивать правки на маленькие шаги.
Если для таких задач нужен доступ к Claude, ChatGPT и другим нейросетям в одном месте — без VPN, без зарубежной карты, с оплатой рублями — в Крафти это уже настроено: @KraftiAI_bot откроет доступ за пару минут.