Меня зовут Богдан Непряхин, я CEO агентства bijobs.ru. Мы занимаемся performance-маркетингом и аналитикой данных. Я выступаю на конференциях, рассказываю про Яндекс Директ, VK Ads, работу с данными. И вот в начале 2026 года поймал себя на том, что мне неловко давать ссылку на «страницу спикера». Потому что её не было =) Была просто строчка на сайте агентства, без фото с конференций, без тем, без видео.

Классический путь: дизайнер (15-40 тысяч, 1-2 недели) + верстальщик (15-30 тысяч, ещё неделя). Итого месяц и 30-100 тысяч за одностраничник. Для страницы, которую увидят десять организаторов. Я решил проверить, можно ли сделать это за выходные с Claude Code, нейросетевым ассистентом для работы с кодом.

Спойлер: получилось speaker.bijobs.ru. Ниже расскажу как именно, с реальными промптами, реальными ошибками и честными выводами.

Почему не Tilda и не конструктор

Ответ простой: хотелось проверить, как сейчас работает "модный" вайбкодинг. По сути, консоль с чат-ботом на LLM выступает как уверенный мидл, которого ты направляешь. Я понимаю базу HTML/CSS и чётко представляю конечный результат. Этого хватило, чтобы контролировать процесс.

Шаг 1. Контент: тут нейронка тоже помогает

К этому моменту у меня с Claude была уже длинная история: задачи агентства, материалы по выступлениям, переписки, учебные проекты. Я просто попросил собрать всё, что он знает обо мне, и сформировать черновик. Биографию, темы докладов с описаниями, достижения в цифрах.

Открыл результат, и… чёрт, вполне годно. Подправить акценты, уточнить пару формулировок, добавить свежие данные, и готово. Вместо нескольких часов на тексты получилось 20 минут на редактуру. Честно, самое приятное было не писать про себя в третьем лице.

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

Руками пришлось собрать только фотографии с конференций и ссылки на записи выступлений. Тут никакая нейронка не поможет, увы.

Шаг 2. Структура: сначала на бумаге

Перед тем как писать первый промпт, я собрал структуру страницы.

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

Шаг 3. Первый промпт и главное правило

Вот тут самый важный момент, ради которого, может, и стоит читать эту статью.

Самая частая ошибка: написать «сделай мне сайт» и ждать чуда. Не сработает. Получите что-то среднее между шаблоном Bootstrap и студенческой лабораторной.

Описывай результат, а не процесс. Вот разница:

❌ Плохо:

Создай HTML-страницу с тёмным фоном и сайдбаром слева.

✅ Хорошо:

Создай одностраничный сайт-визитку спикера.

Внешний вид: тёмная тема (фон #0a0a0a), шрифт Raleway через Google Fonts, 
акцентный цвет #3182CE.

Макет: два столбца. Левый - sticky sidebar 300px: круглое фото, имя, 
должность, соцсети. Правый - основной контент с секциями: Bio, Темы докладов 
(карточки), Достижения (числа), Галерея (сетка фото), Контакты.

Требования: только HTML, CSS и vanilla JS. Никаких фреймворков и внешних 
зависимостей кроме Google Fonts.

Цель первого промпта не красивый сайт, а правильный скелет. Получить HTML с нужными секциями, базовый CSS для макета. Убедиться, что всё стоит на своих местах. Цвета, анимации, шрифты потом. Открыл index.html в браузере, посмотрел: секции на месте, колонки не разъехались. Отлично, идём дальше.

Шаг 4. Итерации: показывай, а не описывай

Дальше начинается цикл, который затягивает. Открываю файл, вижу что не нравится, формулирую замечание, отправляю в Claude Code, смотрю результат. И так по кругу.

Один из самых мощных приёмов, который я нащупал: давать референсы. Я нашёл на themeforest.net тему с тёмным оформлением и sticky sidebar. Вот такую атмосферу хочу. Скинул ссылку с комментарием «хочу похожий макет и настроение».

И вот тут я реально удивился. Нейронка сама разобрала визуальную логику: расположение колонок, типографику, отступы, поведение при скролле. И воспроизвела всё это в чистом HTML/CSS. Мне не пришлось описывать каждый padding словами. Ссылка на понравившийся сайт заменяет абзац технического описания. Запомните этот приём, он сэкономит кучу времени.

Дальше пошли точечные итерации:

• Типографика: размеры заголовков, межстрочный интервал, жирность

• Цветовая схема: подобрать правильные оттенки синего для акцента

• Карточки тем докладов: закруглённые углы, hover-эффект

• Секция достижений: большие числа с анимацией счётчика

• Галерея: сетка фото с масштабированием при наведении

Каждая итерация занимает 5-15 минут: сформулировать → получить код → проверить в браузере. Реально затягивает, потому что обратная связь моментальная.

Важный момент, на котором я чуть не обжёгся: после каждой итерации просите агента запомнить, какие изменения внесены, и тезисно формируйте документацию. Почему это важно? Потому что после энной правки нейронка может потерять контекст и начать ломать то, что уже работало. Если есть зафиксированная логика, можно откатиться. Идеально использовать Git, но для старта хватит текстового файла с пометками «что сделали и почему».

Промпт для анимации карточек

Добавь анимацию появления для карточек с темами докладов. 
Когда карточка попадает в viewport при прокрутке, плавное появление снизу 
(translateY от 30px до 0) с fade-in (opacity от 0 до 1). 
Использовать Intersection Observer API, без сторонних библиотек.

Шаг 5. Мобильная адаптация и первые проблемы

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

Пишем новый промпт:

На мобильных (экран < 768px) макет ломается: sidebar и контент стоят рядом, 
контент уходит за экран. Нужно: sidebar расположить сверху, горизонтально 
(фото и контакты в ряд), основной контент ниже на всю ширину.

Claude Code добавил @media-блоки и переделал макет. Но тут я словил первые настоящие грабли: backdrop-filter: blur() работал в Chrome, а Safari хотел -webkit--префикс. Пара CSS-свойств были написаны с синтаксическими ошибками, которые Chrome молча проглатывал, а другие браузеры нет.

Вывод, который кажется очевидным, но про который забываешь: проверяйте не только в Chrome. И не забывайте про планшеты (768-1024px). Это такая зона, где всё ломается по-своему.

Шаг 6. Оптимизация: самые болезненные грабли

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

38 баллов на десктопе. 27 на мобильных. Для файла в 32 КБ. Мягко говоря, грустные показатели для такого простого сайта.

Главный виновник нашёлся быстро: фотография профиля. bogdan_nepryahin.png весила 12 мегабайт. PNG 3592×3592, исходник с телефона, загруженный как есть. Я просто не подумал об этом. LCP (время до отображения главного контента) составлял 12,4 секунды на десктопе и 82 секунды на мобильном. Минута двадцать, Карл.

Плюс три VK-видео iframe грузились сразу при открытии страницы, хотя пользователь до них ещё даже не доскроллил.

Скинул скриншот PageSpeed в Claude Code: «Вижу вот такие показатели, что не так?» Получил диагноз и список действий. Следующий промпт: «Делай всё, что перечислил». Итог:

• Фото профиля: 12 МБ → 93 КБ (конвертация в WebP, потеря качества незаметна на глаз)

• Галерея: 13 МБ → ~600 КБ

• VK iframe: loading="lazy", грузятся только при скролле

• Google Fonts переведён на асинхронную загрузку, не блокирует отрисовку

• Preload для главной фотографии

Повторный прогон: 90 баллов на десктопе, 63 на мобильных.

Мораль: «красивый» и «быстрый» это разные задачи. Обязательно прогоняйте PageSpeed перед тем, как сайт показывать людям)

Шаг 7. Деплой и новые приключения

Сайт готов, осталось выложить в интернет. Два пути:

Простой: Netlify. Бесплатно, 5 минут. Регистрируетесь, перетаскиваете папку с файлами на главную страницу аккаунта, через 30 секунд сайт живёт по адресу random-name.netlify.app. Свой домен подключается через CNAME-запись. Альтернатива: GitHub Pages.

Продвинутый: свой VPS + Nginx. Имеет смысл, если VPS уже есть. Я пошёл этим путём, потому что сервер уже стоял под основной сайт. И тут начались приключения.

Проблема с регистром файлов

На Windows и macOS Photo.jpg и photo.jpg это один и тот же файл. На Linux-сервере это два совершенно разных. Я потратил 20 минут, пытаясь понять, почему фото отображается локально, а на сервере белый квадрат. В HTML стояло <img src="photo/Photo_1.jpg">, а файл назывался photo_1.jpg.

Двадцать минут жизни. На заглавную букву.

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

Абсолютные пути в адресах

Нейронка иногда генерирует <img src="/photo/photo1.jpg"> с ведущим слешом. На сервере работает, при открытии файла локально нет, потому что браузер ищет файл в корне диска. Мелочь, но раздражает, когда ищешь баг не там.

Трабл с перезаписью проекта

А вот это уже серьёзнее. Я хостю несколько проектов на одном VPS. Для загрузки файлов по SFTP был создан пользователь с chroot-изоляцией: он «видит» только директорию спикерской страницы. Когда я загружал файлы другого проекта через того же пользователя, думая, что попадаю в другую директорию, файлы улетели в спикерскую папку и перезаписали сайт.

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

Урок: когда работаете с несколькими проектами на одном сервере, документируйте инфраструктуру. В голове всё помнится ровно до момента, когда перестаёт помниться)

Несколько принципов, которые я вынес

Итерируй, не жди идеала за один запрос. Первый промпт это скелет. Второй - типографика и цвета. Третий - мобильная версия. Четвёртый - анимации. Это как ТЗ: чем больше требований впихнёшь за раз, тем выше шанс, что что-то важное потеряется. Лучше десять простых запросов, чем один "монстр".

Явно указывай ограничения. «Без React, без Vue, без Bootstrap, только HTML/CSS/JS». Иначе нейросеть обязательно предложит «удобные» решения с пятью зависимостями, которые вам потом поддерживать.

Проси объяснять код. Если не понимаете, что написала нейронка, спросите. «Объясни, что делает этот CSS-класс. Почему calc() и что такое 100vh?» Вопрос занимает 30 секунд, а понимание остаётся. К тому же, если нейронка не может внятно объяснить, скорее всего код написан криво.

Итого

Время: примерно 8 часов за два выходных, с учётом всех ошибок и экспериментов.

Деньги: $0 за хостинг (VPS уже был), подписка на Claude как единственная статья расходов.

Что получилось: speaker.bijobs.ru. Одностраничник на чистом HTML/CSS/JS, 90 баллов PageSpeed на десктопе, адаптивный, без единой внешней зависимости кроме Google Fonts.

Нейронка не заменяет разработчика. Она убирает барьер «я не начну, потому что это дорого и долго». Если понимаешь, что хочешь получить, и готов итеративно уточнять, получишь рабочий результат за выходные. Не идеальный. Но рабочий. А идеальный… ну, давайте честно, идеальный не бывает. Бывает «достаточно хороший, чтобы не стыдно было скинуть ссылку» =).

Спасибо всем, кто дочитал =) Удачного вайбкодника и конвертящих сайтов! А как вы боретесь с "амнезией" у нейронок? Пишите в комментарии.

Если интересна интернет-реклама, внутрянка агентства и анализ данных маркетинга, подписывайтесь на мой ТГ канал: bijobs63