Меня зовут Богдан Непряхин, я 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: имя, должность, слоган
• #about: биография
• #topics: карточки тем докладов
• CTA-кнопка («написать мне»)
• #achievements: цифры достижений
• #gallery: фото и видео
• #contacts: форма или ссылки

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

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

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

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

Открыл index.html в браузере: секции на месте, колонки не разъехались. Отлично — можно идти дальше.

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

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

Один из самых полезных приёмов — давать визуальные референсы. Я нашёл на ThemeForest тему с тёмным дизайном и sticky sidebar и скинул ссылку с комментарием: «хочу похожий макет и атмосферу».

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

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

• Типографика: размеры заголовков, межстрочный интервал, жирность
• Цветовая схема: оттенки синего для акцентов
• Карточки тем: закруглённые углы, hover-эффект
• Секция достижений: большие числа с анимацией счётчика
• Галерея: сетка фото с масштабированием при наведении

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

Важно: после каждой правки просите ассистента зафиксировать изменения. Почему? Потому что нейросеть может потерять контекст и сломать то, что уже работало. Документация (даже в виде текстового файла) помогает откатиться. Идеально — использовать Git.

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

Проверил сайт на телефоне. После десятка десктопных итераций мобильная версия выглядела как после блендера: 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 — на мобильном. Почти полторы минуты.

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

Скинул скриншот 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. Имеет смысл, если сервер уже есть. Я выбрал этот путь — и тут начались приключения.

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

На 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 минут. Вот где система контроля версий реально спасает.

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

Принципы, которые я вынес

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

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

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

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

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

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

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

Меня зовут Богдан Непряхин, я 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 с нужными секциями, базовый CSS для макета. Убедиться, что всё стоит на своих местах. Цвета, анимации, шрифты потом. Открылindex.htmlв браузере, посмотрел: секции на месте, колонки не разъехались. Отлично, идём дальше.

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

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

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

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

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

• Типографика: размеры заголовков, межстрочный интервал, жирность
• Цветовая схема: подобрать правильные оттенки синего для акцента
• Карточки тем докладов: закруглённые углы, hover-эффект
• Секция достижений: большие числа с анимацией счётчика
• Галерея: сетка фото с масштабированием при наведении

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

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

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

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

Проверяю сайт на телефоне. Ну, конечно. После десятка десктопных итераций мобилка выглядит так, будто сайт попал в блендер. 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 и macOSPhoto.jpgиphoto.jpgэто один и тот же файл. На Linux-сервере это два совершенно разных. Я потратил 20 минут, пытаясь понять, почему фото отображается локально, а на сервере белый квадрат. В HTML стояло, а файл называлсяphoto_1.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