Меня зовут Богдан Непряхин, я 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. Структура: сначала на бумаге
Перед тем как писать первый промпт, я собрал структуру страницы.
Sidebar, фиксированный, 300px | Основной контент |
Фото (круглое) | #hero: имя, должность, tagline |
Имя, должность | #about: биография |
Соцсети | #topics: карточки тем |
CTA-кнопка (написать мне) | #achievements: числа |
#gallery: фото + видео | |
#contacts: форма/ссылки |
Можно нарисовать на салфетке, в 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
