← arturr_cityблогтелеграм

вайбкодинг сайт: как я собрал этот сайт в claude code — шаги, промпты, грабли

14 октября 2026 · 9 мин

вайбкодинг сайт — это сайт, который ты не верстаешь руками, а описываешь словами ии-агенту: он пишет файлы, ты смотришь в браузере и говоришь, что поправить. так собран этот сайт, arturr_city: в claude code, диалогом, на чистом html, css и js без фреймворков. ниже весь путь по шагам, примеры промптов, три места, где пришлось откатываться, и чек-лист перед публикацией.

что такое вайбкодинг сайт и чем он отличается от конструктора

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

вайб кодинг сайт — это не «нажал кнопку и получил». это разговор: ставишь задачу, смотришь результат, показываешь скриншот, где криво, и просишь поправить. сделать сайт с помощью нейросети можно и в браузерных генераторах, их я сравнивал в статье нейросеть для создания сайтов. а сам подход, без привязки к сайтам, разобран в тексте вайбкодинг — что это и как он работает на практике.

я работаю в claude code. по документации anthropic это агент, который читает проект, правит файлы и запускает команды. он есть в терминале, в редакторах кода, в десктопном приложении и в браузере. для большинства вариантов нужна подписка claude или аккаунт anthropic console.

из чего сделан arturr_city

сначала коротко о том, что внутри, чтобы дальше было понятно, о чём речь.

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

как сделать вайбкодинг сайт: шаги, которые я прошёл

шаг 1. папка проекта и claude code

заводишь пустую папку под сайт, ставишь claude code и запускаешь его внутри этой папки. команда установки для macos и linux из официальной документации:

curl -fsSL https://claude.ai/install.sh | bash

потом переходишь в папку и запускаешь агента:

cd my-site
claude

при первом запуске он попросит войти в аккаунт. про режимы, разрешения и первые команды подробно написано в разборе claude code: как использовать.

шаг 2. первая задача словами и коротко

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

длинный промпт до первого результата почти всегда описывает то, чего ты сам ещё не видел. потом половину из него приходится отменять, а агент честно пытается выполнить каждый пункт.

шаг 3. скриншоты и референсы вместо описаний

когда словами не объяснить, я присылал картинку: скриншот того, что получилось, или чужой сайт, у которого нравится подача. claude code принимает картинки прямо в чат. по документации их можно перетащить в окно, вставить из буфера через Ctrl+V или просто дать путь к файлу. это быстрее, чем описывать отступы словами.

референс нужен для настроения, а не для копии. показываешь, что нравится, и просишь сделать своё в том же духе.

шаг 4. правки по ходу и правила в одном файле

по мере работы появлялись сквозные правила, и я проговаривал их прямо в чат: «с маленькой буквы всё», «шрифт эпловский», «квадратное всё», «без ии-слопа». под ии-слопом обычно понимают то, по чему сразу видно шаблон: фиолетовые градиенты, одинаковые карточки с иконками, пустые фразы.

такие правила удобно записать в claude.md. это файл в корне проекта, который claude code читает в начале каждой сессии. команда /init создаёт стартовую версию сама, а документация советует держать файл короче 200 строк: чем он длиннее, тем хуже агент его соблюдает.

шаг 5. фото, вырезка и орнамент

первому экрану нужны три слоя: ночной фон, текст и человек поверх текста. меня вырезали отдельным слоем через vision, фреймворк, встроенный в macos. по документации apple, в нём есть запрос, который строит маску заметных объектов, чтобы отделить их от фона, и он доступен начиная с macos 14.

кружево сгенерировала нейросеть gemini через openrouter. у openrouter для картинок есть отдельный запрос: модель и промпт уходят post-запросом, а картинка возвращается в base64. сгенерированный кусок потом превратили в бесшовную плитку, чтобы орнамент повторялся фоном без видимых стыков.

шаг 6. форма и бот

форма заявки отправляет данные не на почту, а в телеграм-бота. бота тоже написал claude code: node.js без зависимостей, то есть без единого пакета из npm. в telegram bot api запросы идут по https на адрес вида api.telegram.org/bot<token>/METHOD_NAME, а для текста есть метод sendMessage с двумя обязательными полями: chat_id и text, длина текста до 4096 символов.

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

шаг 7. блог

блог собирается скриптом: каждая статья — отдельный html-файл, скрипт раскладывает их по страницам, обновляет список статей и карту сайта. темы беру не из головы, а из вордстата: сначала смотрю, сколько людей ищут фразу, потом пишу.

шаг 8. выкладка

статичный сайт выкладывается копированием папки на сервер с nginx. для самих страниц на сервере больше ничего не нужно, бот работает отдельно от них.

промпт для создания сайта: как я формулировал задачи

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

первая задача:

сделай личный сайт. статичный html, css и js, без фреймворков и сборщиков.
я артур, делаю сайты и ботов с ии. настроение — ночь, тёмный фон, всё строго.
первый экран: моё фото на весь экран и фраза «я артур, и я зарабатываю на вайбкодинге».

задача на первый экран:

вот фото. вырежи меня отдельным слоем, фон оставь отдельно.
фраза проявляется по скроллу и висит между фоном и мной.

правки по ходу, по одной в сообщении:

что работает: одна задача в сообщении, конкретная претензия вместо «сделай красивее», скриншот, когда речь о внешнем виде. если что-то сломалось, сначала проси найти причину, а уже потом чинить. так агент не переписывает полсайта ради одной кнопки.

грабли: что пришлось переделывать

размытие тормозило

первые переходы между листами были с размытием: blur и filter на больших слоях. при скролле начинались лаги. заменили на прозрачность, эффект почти тот же, а тормозить перестало.

это совпадает с гайдом web.dev от google: анимировать лучше только opacity и transform, а всё, что связано с размытием, отрисовывается дольше. когда просишь агента о плавном переходе, сразу добавляй: только прозрачность и сдвиг.

длинная фотка на весь сайт

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

поэтому держи проект в git. claude code сам умеет работать с git, и откат становится одной командой, а не ручным восстановлением файлов.

ии-лицо было не похоже

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

чек-лист перед публикацией

прежде чем отдавать ссылку, пройди этот список. его можно целиком вставить в чат агенту и попросить проверить по пунктам, но мобильную версию и форму всё равно смотри сам.

вопросы

можно ли создать сайт вайб кодингом, если не знаешь html?

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

нужен ли react или другой фреймворк для лендинга?

для визитки, лендинга и блога — нет. статичный html быстро открывается, хостится где угодно и понятен любому агенту. фреймворк нужен, когда появляются личный кабинет, база данных или оплата.

почему агент делает не то, что я прошу?

чаще всего задача слишком общая или в одном сообщении их пять. дели на маленькие шаги, прикладывай скриншот и записывай сквозные правила в claude.md, чтобы не повторять их в каждой сессии.

где держать сайт после сборки?

статичному сайту хватит любого хостинга или сервера с nginx. файлы твои, поэтому переезд — это копирование папки.

сайт собран — дальше его надо показать поиску. мой seo-набор для claude code находит спрос в вордстате, пишет статьи и чинит сайт. стоит 499 ₽, или 2 кофе.

посмотреть seo-набор

источники

читать дальше